Merge pull request #52 from R0m1k3/dev

Dev

client/src/components/calendar-list-view.tsx

@@ -1,6 +1,6 @@
 import { format, isSameDay, parseISO } from "date-fns";
 import { fr } from "date-fns/locale";
-import { Edit, Trash2, ChevronDown, ChevronUp } from "lucide-react";
+import { Edit, Trash2, ChevronDown, ChevronUp, Eye } from "lucide-react";
 import { SiFacebook, SiInstagram } from "react-icons/si";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
@@ -9,9 +9,10 @@ interface CalendarListViewProps {
   scheduledPosts: any[];
   onEditPost: (post: any) => void;
   onDeletePost: (postId: string) => void;
+  onPreviewPost: (post: any) => void;
 }
 
-export default function CalendarListView({ scheduledPosts, onEditPost, onDeletePost }: CalendarListViewProps) {
+export default function CalendarListView({ scheduledPosts, onEditPost, onDeletePost, onPreviewPost }: CalendarListViewProps) {
   const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
 
   // Group posts by date
@@ -129,30 +130,42 @@ export default function CalendarListView({ scheduledPosts, onEditPost, onDeleteP
                             </div>
                           </div>
 
-                          {isPending && (
-                            <div className="flex gap-2">
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => onEditPost(post)}
-                                className="h-11 w-11 p-0"
-                                data-testid={`button-edit-post-${post.id}`}
-                                title="Modifier"
-                              >
-                                <Edit className="w-5 h-5 text-blue-500" />
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => onDeletePost(post.id)}
-                                className="h-11 w-11 p-0"
-                                data-testid={`button-delete-post-${post.id}`}
-                                title="Supprimer"
-                              >
-                                <Trash2 className="w-5 h-5 text-red-500" />
-                              </Button>
-                            </div>
-                          )}
+                          <div className="flex gap-2">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => onPreviewPost(post)}
+                              className="h-11 w-11 p-0"
+                              data-testid={`button-preview-post-${post.id}`}
+                              title="Prévisualiser"
+                            >
+                              <Eye className={`w-5 h-5 ${isPending ? 'text-blue-500' : 'text-green-500'}`} />
+                            </Button>
+                            {isPending && (
+                              <>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() => onEditPost(post)}
+                                  className="h-11 w-11 p-0"
+                                  data-testid={`button-edit-post-${post.id}`}
+                                  title="Modifier"
+                                >
+                                  <Edit className="w-5 h-5 text-blue-500" />
+                                </Button>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() => onDeletePost(post.id)}
+                                  className="h-11 w-11 p-0"
+                                  data-testid={`button-delete-post-${post.id}`}
+                                  title="Supprimer"
+                                >
+                                  <Trash2 className="w-5 h-5 text-red-500" />
+                                </Button>
+                              </>
+                            )}
+                          </div>
                         </div>
                       </div>
                     );

client/src/components/calendar-view.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Trash2, Edit, MoreHorizontal } from "lucide-react";
+import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Trash2, Edit, MoreHorizontal, Eye } from "lucide-react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
@@ -10,11 +10,15 @@ import { SiFacebook, SiInstagram } from "react-icons/si";
 import EditScheduledPostDialog from "./edit-scheduled-post-dialog";
 import CalendarListView from "./calendar-list-view";
 import { useMediaQuery } from "@/hooks/use-media-query";
+import { PreviewModal } from "@/components/preview-modal";
+import type { Media } from "@shared/schema";
 
 export default function CalendarView() {
   const [currentDate, setCurrentDate] = useState(new Date());
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [selectedPost, setSelectedPost] = useState<any>(null);
+  const [previewModalOpen, setPreviewModalOpen] = useState(false);
+  const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[] }>({ postText: '', mediaIds: [], allMedia: [] });
   const { toast } = useToast();
   const isDesktop = useMediaQuery("(min-width: 768px)");
 
@@ -54,6 +58,38 @@ export default function CalendarView() {
     setEditDialogOpen(true);
   };
 
+  const handlePreviewPost = async (scheduledPost: any, e?: React.MouseEvent) => {
+    if (e) e.stopPropagation();
+    
+    try {
+      const response = await fetch(`/api/posts/${scheduledPost.postId}`, {
+        credentials: "include",
+      });
+      
+      if (!response.ok) {
+        throw new Error("Failed to fetch post");
+      }
+      
+      const postWithMedia = await response.json();
+      const mediaIds = postWithMedia.media?.map((m: Media) => m.id) || [];
+      const allMedia = postWithMedia.media || [];
+      
+      setPreviewData({
+        postText: postWithMedia.post.content || '',
+        mediaIds: mediaIds,
+        allMedia: allMedia,
+      });
+      
+      setPreviewModalOpen(true);
+    } catch (error) {
+      toast({
+        title: "Erreur",
+        description: "Impossible de charger la prévisualisation",
+        variant: "destructive",
+      });
+    }
+  };
+
   const getPostsForDate = (date: Date) => {
     return (scheduledPosts || []).filter(post => {
       if (!post.scheduledAt) return false;
@@ -226,26 +262,36 @@ export default function CalendarView() {
                                 <span className="truncate">{pageName}</span>
                               </div>
                             </div>
-                            {isPending && (
-                              <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                                <button
-                                  onClick={(e) => handleEditPost(post, e)}
-                                  className="p-1 hover:bg-blue-500/20 rounded"
-                                  data-testid={`button-edit-post-${post.id}`}
-                                  title="Modifier"
-                                >
-                                  <Edit className="w-3 h-3 text-blue-500" />
-                                </button>
-                                <button
-                                  onClick={(e) => handleDeletePost(post.id, e)}
-                                  className="p-1 hover:bg-red-500/20 rounded"
-                                  data-testid={`button-delete-post-${post.id}`}
-                                  title="Supprimer"
-                                >
-                                  <Trash2 className="w-3 h-3 text-red-500" />
-                                </button>
-                              </div>
-                            )}
+                            <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                              <button
+                                onClick={(e) => handlePreviewPost(post, e)}
+                                className={`p-1 rounded ${isPending ? 'hover:bg-blue-500/20' : 'hover:bg-green-500/20'}`}
+                                data-testid={`button-preview-post-${post.id}`}
+                                title="Prévisualiser"
+                              >
+                                <Eye className={`w-3 h-3 ${isPending ? 'text-blue-500' : 'text-green-500'}`} />
+                              </button>
+                              {isPending && (
+                                <>
+                                  <button
+                                    onClick={(e) => handleEditPost(post, e)}
+                                    className="p-1 hover:bg-blue-500/20 rounded"
+                                    data-testid={`button-edit-post-${post.id}`}
+                                    title="Modifier"
+                                  >
+                                    <Edit className="w-3 h-3 text-blue-500" />
+                                  </button>
+                                  <button
+                                    onClick={(e) => handleDeletePost(post.id, e)}
+                                    className="p-1 hover:bg-red-500/20 rounded"
+                                    data-testid={`button-delete-post-${post.id}`}
+                                    title="Supprimer"
+                                  >
+                                    <Trash2 className="w-3 h-3 text-red-500" />
+                                  </button>
+                                </>
+                              )}
+                            </div>
                           </div>
                         </div>
                       );
@@ -292,26 +338,36 @@ export default function CalendarView() {
                                         <span className="truncate">{pageName}</span>
                                       </div>
                                     </div>
-                                    {isPending && (
-                                      <div className="flex gap-1">
-                                        <button
-                                          onClick={(e) => handleEditPost(post, e)}
-                                          className="p-1 hover:bg-blue-500/20 rounded"
-                                          data-testid={`button-edit-popover-post-${post.id}`}
-                                          title="Modifier"
-                                        >
-                                          <Edit className="w-3 h-3 text-blue-500" />
-                                        </button>
-                                        <button
-                                          onClick={(e) => handleDeletePost(post.id, e)}
-                                          className="p-1 hover:bg-red-500/20 rounded"
-                                          data-testid={`button-delete-popover-post-${post.id}`}
-                                          title="Supprimer"
-                                        >
-                                          <Trash2 className="w-3 h-3 text-red-500" />
-                                        </button>
-                                      </div>
-                                    )}
+                                    <div className="flex gap-1">
+                                      <button
+                                        onClick={(e) => handlePreviewPost(post, e)}
+                                        className={`p-1 rounded ${isPending ? 'hover:bg-blue-500/20' : 'hover:bg-green-500/20'}`}
+                                        data-testid={`button-preview-popover-post-${post.id}`}
+                                        title="Prévisualiser"
+                                      >
+                                        <Eye className={`w-3 h-3 ${isPending ? 'text-blue-500' : 'text-green-500'}`} />
+                                      </button>
+                                      {isPending && (
+                                        <>
+                                          <button
+                                            onClick={(e) => handleEditPost(post, e)}
+                                            className="p-1 hover:bg-blue-500/20 rounded"
+                                            data-testid={`button-edit-popover-post-${post.id}`}
+                                            title="Modifier"
+                                          >
+                                            <Edit className="w-3 h-3 text-blue-500" />
+                                          </button>
+                                          <button
+                                            onClick={(e) => handleDeletePost(post.id, e)}
+                                            className="p-1 hover:bg-red-500/20 rounded"
+                                            data-testid={`button-delete-popover-post-${post.id}`}
+                                            title="Supprimer"
+                                          >
+                                            <Trash2 className="w-3 h-3 text-red-500" />
+                                          </button>
+                                        </>
+                                      )}
+                                    </div>
                                   </div>
                                 </div>
                               );
@@ -343,6 +399,7 @@ export default function CalendarView() {
           scheduledPosts={scheduledPosts}
           onEditPost={handleEditPost}
           onDeletePost={handleDeletePost}
+          onPreviewPost={handlePreviewPost}
         />
       )}
 
@@ -351,6 +408,16 @@ export default function CalendarView() {
         onOpenChange={setEditDialogOpen}
         scheduledPost={selectedPost || {}}
       />
+
+      <PreviewModal
+        open={previewModalOpen}
+        onOpenChange={setPreviewModalOpen}
+        postText={previewData.postText}
+        selectedMedia={previewData.mediaIds}
+        mediaList={previewData.allMedia}
+        onPublish={() => {}}
+        isPublishing={false}
+      />
     </div>
   );
 }

client/src/components/recent-publications.tsx

@@ -1,9 +1,13 @@
 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 { Facebook, Instagram, Clock, CheckCircle2, XCircle, Eye } from "lucide-react";
 import { format } from "date-fns";
 import { fr } from "date-fns/locale";
-import type { ScheduledPost, SocialPage, Post } from "@shared/schema";
+import type { ScheduledPost, SocialPage, Post, Media } from "@shared/schema";
+import { PreviewModal } from "@/components/preview-modal";
+import { useState } from "react";
+import { useToast } from "@/hooks/use-toast";
+import { Button } from "@/components/ui/button";
 
 type ScheduledPostWithRelations = ScheduledPost & {
   post?: Post;
@@ -11,6 +15,10 @@ type ScheduledPostWithRelations = ScheduledPost & {
 };
 
 export default function RecentPublications() {
+  const [previewModalOpen, setPreviewModalOpen] = useState(false);
+  const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[] }>({ postText: '', mediaIds: [], allMedia: [] });
+  const { toast } = useToast();
+
   const { data: scheduledPosts = [], isLoading } = useQuery<ScheduledPostWithRelations[]>({
     queryKey: ['/api/scheduled-posts'],
   });
@@ -21,6 +29,36 @@ export default function RecentPublications() {
     .sort((a, b) => new Date(b.publishedAt!).getTime() - new Date(a.publishedAt!).getTime())
     .slice(0, 10);
 
+  const handlePreviewPost = async (scheduledPost: ScheduledPostWithRelations) => {
+    try {
+      const response = await fetch(`/api/posts/${scheduledPost.postId}`, {
+        credentials: "include",
+      });
+      
+      if (!response.ok) {
+        throw new Error("Failed to fetch post");
+      }
+      
+      const postWithMedia = await response.json();
+      const mediaIds = postWithMedia.media?.map((m: Media) => m.id) || [];
+      const allMedia = postWithMedia.media || [];
+      
+      setPreviewData({
+        postText: postWithMedia.post.content || '',
+        mediaIds: mediaIds,
+        allMedia: allMedia,
+      });
+      
+      setPreviewModalOpen(true);
+    } catch (error) {
+      toast({
+        title: "Erreur",
+        description: "Impossible de charger la prévisualisation",
+        variant: "destructive",
+      });
+    }
+  };
+
   return (
     <Card className="rounded-2xl border-border/50 shadow-lg" data-testid="card-recent-publications">
       <CardHeader>
@@ -77,7 +115,17 @@ export default function RecentPublications() {
                         )}
                       </p>
                     </div>
-                    <div className="flex items-center gap-1 text-xs text-muted-foreground flex-shrink-0">
+                    <div className="flex items-center gap-2 flex-shrink-0">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handlePreviewPost(scheduledPost)}
+                        className="h-8 w-8 p-0"
+                        data-testid={`button-preview-post-${scheduledPost.id}`}
+                        title="Prévisualiser"
+                      >
+                        <Eye className="w-4 h-4 text-muted-foreground hover:text-foreground" />
+                      </Button>
                       {scheduledPost.error ? (
                         <XCircle className="w-4 h-4 text-destructive" />
                       ) : (
@@ -108,6 +156,16 @@ export default function RecentPublications() {
           </div>
         )}
       </CardContent>
+
+      <PreviewModal
+        open={previewModalOpen}
+        onOpenChange={setPreviewModalOpen}
+        postText={previewData.postText}
+        selectedMedia={previewData.mediaIds}
+        mediaList={previewData.allMedia}
+        onPublish={() => {}}
+        isPublishing={false}
+      />
     </Card>
   );
 }

replit.md

@@ -14,6 +14,7 @@ Preferred communication style: Simple, everyday language.
 - **AI Variants Position**: Repositioned AI-generated text variations to display after "Contenu" card and before "Texte de la publication" card in new-post page for better workflow
 - **Calendar Auto-Refresh**: Fixed calendar not updating after creating a new scheduled post. Added `queryClient.invalidateQueries` with `refetchType: 'all'` in `createPostMutation.onSuccess` to force cache invalidation and immediate refetch
 - **Dashboard Scheduled Posts Count**: Fixed scheduled posts count showing 0 in dashboard. Problem was that posts with `scheduledFor` were created with status "draft" instead of "scheduled". Solution: POST /api/posts now sets `status = "scheduled"` when `scheduledFor` is provided. Legacy posts updated with SQL: `UPDATE posts SET status = 'scheduled' WHERE scheduled_for IS NOT NULL AND status = 'draft'`
+- **Preview in Calendar & History**: Added eye icon (👁️) buttons to preview posts across calendar (desktop/mobile) and history sections. Clicking the eye icon fetches full post data via GET /api/posts/:id and opens PreviewModal with post text and all associated media. Desktop calendar shows icon on hover; mobile and history show icon always. Preview available in calendar grid, popover ("voir plus"), list view, and recent publications history.
 
 ## System Architecture