Merge pull request #32 from R0m1k3/dev

Dev

client/src/App.tsx

@@ -12,7 +12,6 @@ import Calendar from "@/pages/calendar";
 import Media from "@/pages/media";
 import PagesManagement from "@/pages/pages";
 import AI from "@/pages/ai";
-import Analytics from "@/pages/analytics";
 import History from "@/pages/history";
 import Settings from "@/pages/settings";
 import SqlAdmin from "@/pages/sql";
@@ -71,7 +70,6 @@ function Router() {
       <Route path="/media">{() => <ProtectedRoute component={Media} />}</Route>
       <Route path="/pages">{() => <ProtectedRoute component={PagesManagement} />}</Route>
       <Route path="/ai">{() => <ProtectedRoute component={AI} />}</Route>
-      <Route path="/analytics">{() => <ProtectedRoute component={Analytics} />}</Route>
       <Route path="/history">{() => <ProtectedRoute component={History} />}</Route>
       <Route path="/settings">{() => <ProtectedRoute component={Settings} adminOnly />}</Route>
       <Route path="/sql">{() => <ProtectedRoute component={SqlAdmin} adminOnly />}</Route>

client/src/components/recent-publications.tsx

@@ -0,0 +1,113 @@
+import { useQuery } from "@tanstack/react-query";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Facebook, Instagram, Clock, CheckCircle2, XCircle } from "lucide-react";
+import { format } from "date-fns";
+import { fr } from "date-fns/locale";
+import type { ScheduledPost, SocialPage, Post } from "@shared/schema";
+
+type ScheduledPostWithRelations = ScheduledPost & {
+  post?: Post;
+  page?: SocialPage;
+};
+
+export default function RecentPublications() {
+  const { data: scheduledPosts = [], isLoading } = useQuery<ScheduledPostWithRelations[]>({
+    queryKey: ['/api/scheduled-posts'],
+  });
+
+  // Filter and sort published posts
+  const recentPublished = scheduledPosts
+    .filter(sp => sp.publishedAt)
+    .sort((a, b) => new Date(b.publishedAt!).getTime() - new Date(a.publishedAt!).getTime())
+    .slice(0, 10);
+
+  return (
+    <Card className="rounded-2xl border-border/50 shadow-lg" data-testid="card-recent-publications">
+      <CardHeader>
+        <CardTitle>Historique des publications</CardTitle>
+        <CardDescription>
+          Vos 10 dernières publications sur les réseaux sociaux
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <div className="space-y-3">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="h-20 bg-muted rounded-lg animate-pulse" />
+            ))}
+          </div>
+        ) : recentPublished.length === 0 ? (
+          <div className="text-center py-12">
+            <Clock className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
+            <p className="text-muted-foreground">Aucune publication pour le moment</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {recentPublished.map((scheduledPost) => (
+              <div
+                key={scheduledPost.id}
+                className="flex items-start gap-4 p-4 rounded-lg border border-border/50 hover:bg-muted/50 transition-colors"
+                data-testid={`publication-${scheduledPost.id}`}
+              >
+                {/* Platform icon */}
+                <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                  scheduledPost.page?.platform === 'facebook' 
+                    ? 'bg-blue-500' 
+                    : 'bg-gradient-to-br from-purple-500 to-pink-500'
+                }`}>
+                  {scheduledPost.page?.platform === 'facebook' ? (
+                    <Facebook className="w-5 h-5 text-white" />
+                  ) : (
+                    <Instagram className="w-5 h-5 text-white" />
+                  )}
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex-1 min-w-0">
+                      <h4 className="font-medium text-sm truncate" data-testid={`text-page-name-${scheduledPost.id}`}>
+                        {scheduledPost.page?.pageName || 'Page inconnue'}
+                      </h4>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {scheduledPost.post?.content ? (
+                          <span className="line-clamp-2">{scheduledPost.post.content}</span>
+                        ) : (
+                          <span className="italic">Aucun texte</span>
+                        )}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-1 text-xs text-muted-foreground flex-shrink-0">
+                      {scheduledPost.error ? (
+                        <XCircle className="w-4 h-4 text-destructive" />
+                      ) : (
+                        <CheckCircle2 className="w-4 h-4 text-green-500" />
+                      )}
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
+                    <span className="capitalize">
+                      {scheduledPost.postType === 'feed' ? 'Publication' : 
+                       scheduledPost.postType === 'story' ? 'Story' : scheduledPost.postType}
+                    </span>
+                    <span>•</span>
+                    <span>
+                      {format(new Date(scheduledPost.publishedAt!), "d MMM yyyy 'à' HH:mm", { locale: fr })}
+                    </span>
+                    {scheduledPost.error && (
+                      <>
+                        <span>•</span>
+                        <span className="text-destructive">Erreur</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

client/src/components/sidebar.tsx

@@ -1,4 +1,4 @@
-import { Home, PlusCircle, Calendar, Images, Users, Bot, BarChart3, Clock, Settings, Database, UserCog, LogOut } from "lucide-react";
+import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut } from "lucide-react";
 import { Link, useLocation } from "wouter";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { apiRequest, queryClient } from "@/lib/queryClient";
@@ -42,7 +42,6 @@ export default function Sidebar() {
   ];
 
   const statsItems = [
-    { icon: BarChart3, label: "Analyses", href: "/analytics" },
     { icon: Clock, label: "Historique", href: "/history" },
   ];
 

client/src/pages/analytics.tsx

@@ -1,129 +0,0 @@
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { TrendingUp, Users, Eye, Heart, BarChart3 } from "lucide-react";
-import Sidebar from "@/components/sidebar";
-import TopBar from "@/components/topbar";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-export default function Analytics() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  const { data: stats } = useQuery({
-    queryKey: ['/api/stats'],
-  });
-
-  const metrics = [
-    {
-      title: "Publications totales",
-      value: "0",
-      description: "Toutes plateformes",
-      icon: TrendingUp,
-      gradient: "from-primary to-primary/80",
-    },
-    {
-      title: "Portée totale",
-      value: "0",
-      description: "Personnes atteintes",
-      icon: Users,
-      gradient: "from-secondary to-secondary/80",
-    },
-    {
-      title: "Impressions",
-      value: "0",
-      description: "Vues totales",
-      icon: Eye,
-      gradient: "from-success to-success/80",
-    },
-    {
-      title: "Engagement",
-      value: "0",
-      description: "Interactions totales",
-      icon: Heart,
-      gradient: "from-warning to-warning/80",
-    },
-  ];
-
-  return (
-    <div className="flex h-screen overflow-hidden bg-background">
-      {sidebarOpen && (
-        <div 
-          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
-          onClick={() => setSidebarOpen(false)}
-        />
-      )}
-      
-      <div className={`
-        fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
-        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
-      `}>
-        <Sidebar />
-      </div>
-
-      <main className="flex-1 overflow-y-auto">
-        <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
-        
-        <div className="p-8 max-w-[1600px] mx-auto space-y-8">
-          <div>
-            <h1 className="text-3xl font-bold text-foreground">Analyses</h1>
-            <p className="text-muted-foreground mt-2">
-              Statistiques et performances de vos publications
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {metrics.map((metric, index) => {
-              const Icon = metric.icon;
-              return (
-                <Card key={index} className="rounded-2xl border-border/50 shadow-lg overflow-hidden">
-                  <CardHeader className="pb-4">
-                    <div className="flex items-center justify-between">
-                      <CardTitle className="text-sm font-medium text-muted-foreground">
-                        {metric.title}
-                      </CardTitle>
-                      <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${metric.gradient} flex items-center justify-center shadow-md`}>
-                        <Icon className="w-5 h-5 text-white" />
-                      </div>
-                    </div>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="text-3xl font-bold" data-testid={`text-${metric.title.toLowerCase().replace(/\s+/g, '-')}`}>
-                      {metric.value}
-                    </div>
-                    <p className="text-xs text-muted-foreground mt-2 font-medium">{metric.description}</p>
-                  </CardContent>
-                </Card>
-              );
-            })}
-          </div>
-
-          <Card className="rounded-2xl border-border/50 shadow-lg">
-            <CardHeader className="border-b border-border/50 p-6 bg-gradient-to-r from-primary/5 to-secondary/5">
-              <div className="flex items-center gap-4">
-                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
-                  <BarChart3 className="text-white w-6 h-6" />
-                </div>
-                <div>
-                  <CardTitle className="text-lg">Fonctionnalité à venir</CardTitle>
-                  <p className="text-sm text-muted-foreground mt-1">Graphiques et statistiques détaillées</p>
-                </div>
-              </div>
-            </CardHeader>
-            <CardContent className="p-8">
-              <div className="text-center py-12">
-                <div className="w-20 h-20 rounded-2xl bg-muted/30 flex items-center justify-center mx-auto mb-6">
-                  <BarChart3 className="w-10 h-10 text-muted-foreground opacity-50" />
-                </div>
-                <p className="text-muted-foreground text-lg mb-2">
-                  Les analyses détaillées et les graphiques de performance seront disponibles prochainement.
-                </p>
-                <p className="text-sm text-muted-foreground">
-                  Vous pourrez suivre l'évolution de vos statistiques au fil du temps
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </main>
-    </div>
-  );
-}

client/src/pages/dashboard.tsx

@@ -1,7 +1,7 @@
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
 import StatsCards from "@/components/stats-cards";
-import CalendarView from "@/components/calendar-view";
+import RecentPublications from "@/components/recent-publications";
 import ManagedPages from "@/components/managed-pages";
 import { useState } from "react";
 
@@ -30,7 +30,7 @@ export default function Dashboard() {
         <div className="p-8 space-y-8 max-w-[1600px] mx-auto">
           <StatsCards />
           
-          <CalendarView />
+          <RecentPublications />
           
           <ManagedPages />
         </div>