Add ability to edit scheduled social media posts

Implement functionality to edit scheduled posts, including date, time, and target page. Introduces a new dialog component for editing and updates the API to support PATCH requests for scheduled posts.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/ER8Naji

client/src/components/calendar-view.tsx

@@ -1,13 +1,17 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Trash2 } from "lucide-react";
+import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Trash2, Edit } from "lucide-react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import type { ScheduledPost } from "@shared/schema";
+import { SiFacebook, SiInstagram } from "react-icons/si";
+import EditScheduledPostDialog from "./edit-scheduled-post-dialog";
 
 export default function CalendarView() {
   const [currentDate, setCurrentDate] = useState(new Date());
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [selectedPost, setSelectedPost] = useState<any>(null);
   const { toast } = useToast();
 
   const { data: scheduledPosts = [] } = useQuery<ScheduledPost[]>({
@@ -40,6 +44,12 @@ export default function CalendarView() {
     }
   };
 
+  const handleEditPost = (post: any, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedPost(post);
+    setEditDialogOpen(true);
+  };
+
   const getPostsForDate = (date: Date) => {
     return (scheduledPosts || []).filter(post => {
       if (!post.scheduledAt) return false;
@@ -181,10 +191,13 @@ export default function CalendarView() {
                 
                 return (
                   <div className="space-y-2">
-                    {postsForDay.slice(0, 2).map((post, idx) => {
+                    {postsForDay.slice(0, 2).map((post: any, idx) => {
                       const time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : '';
                       const isPending = !post.publishedAt;
                       const isPublished = !!post.publishedAt;
+                      const pageName = post.page?.pageName || 'Page inconnue';
+                      const platform = post.page?.platform || 'facebook';
+                      const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
                       
                       return (
                         <div 
@@ -199,17 +212,30 @@ export default function CalendarView() {
                           <div className="flex items-start justify-between gap-2">
                             <div className="flex-1 min-w-0">
                               <div className="font-semibold">{time}</div>
-                              <div className="truncate opacity-90">{post.postType || 'Post'}</div>
+                              <div className="flex items-center gap-1 truncate opacity-90">
+                                <PlatformIcon className="w-3 h-3 flex-shrink-0" />
+                                <span className="truncate">{pageName}</span>
+                              </div>
                             </div>
                             {isPending && (
-                              <button
-                                onClick={(e) => handleDeletePost(post.id, e)}
-                                className="opacity-0 group-hover:opacity-100 transition-opacity 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 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>
                         </div>
@@ -238,6 +264,14 @@ export default function CalendarView() {
           </div>
         </div>
       </div>
+
+      {selectedPost && (
+        <EditScheduledPostDialog
+          open={editDialogOpen}
+          onOpenChange={setEditDialogOpen}
+          scheduledPost={selectedPost}
+        />
+      )}
     </div>
   );
 }