Update calendar and preview to show past scheduled posts

Refactor `RecentPublications` to filter and sort attempted posts using `scheduledAt` timestamp. Update `PreviewModal` and `CalendarView` to include a `readOnly` prop for the preview modal.

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/oa3970R

.replit

@@ -14,6 +14,10 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 33027
+externalPort = 8008
+
 [[ports]]
 localPort = 34045
 externalPort = 3003

client/src/components/calendar-view.tsx

@@ -417,6 +417,7 @@ export default function CalendarView() {
         mediaList={previewData.allMedia}
         onPublish={() => {}}
         isPublishing={false}
+        readOnly={true}
       />
     </div>
   );

client/src/components/preview-modal.tsx

@@ -13,6 +13,7 @@ interface PreviewModalProps {
   mediaList: Media[];
   onPublish: () => void;
   isPublishing: boolean;
+  readOnly?: boolean;
 }
 
 type PreviewFormat = 'facebook-feed' | 'instagram-feed' | 'instagram-story';
@@ -24,7 +25,8 @@ export function PreviewModal({
   selectedMedia,
   mediaList,
   onPublish,
-  isPublishing
+  isPublishing,
+  readOnly = false
 }: PreviewModalProps) {
   const [previewFormat, setPreviewFormat] = useState<PreviewFormat>('facebook-feed');
   const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
@@ -311,22 +313,33 @@ export function PreviewModal({
 
           {/* Actions */}
           <div className="flex justify-end gap-3">
-            <Button
+            {readOnly ? (
-              variant="outline"
+              <Button
-              onClick={() => onOpenChange(false)}
+                onClick={() => onOpenChange(false)}
-              data-testid="button-cancel-preview"
+                data-testid="button-close-preview"
-            >
+              >
-              Annuler
+                Fermer
-            </Button>
+              </Button>
-            <Button
+            ) : (
-              onClick={onPublish}
+              <>
-              disabled={isPublishing}
+                <Button
-              className="bg-gradient-to-r from-primary to-secondary hover:opacity-90"
+                  variant="outline"
-              data-testid="button-publish-from-preview"
+                  onClick={() => onOpenChange(false)}
-            >
+                  data-testid="button-cancel-preview"
-              <Send className="w-4 h-4 mr-2" />
+                >
-              {isPublishing ? 'Publication...' : 'Publier'}
+                  Annuler
-            </Button>
+                </Button>
+                <Button
+                  onClick={onPublish}
+                  disabled={isPublishing}
+                  className="bg-gradient-to-r from-primary to-secondary hover:opacity-90"
+                  data-testid="button-publish-from-preview"
+                >
+                  <Send className="w-4 h-4 mr-2" />
+                  {isPublishing ? 'Publication...' : 'Publier'}
+                </Button>
+              </>
+            )}
           </div>
         </div>
       </DialogContent>

client/src/components/recent-publications.tsx

@@ -23,10 +23,11 @@ export default function RecentPublications() {
     queryKey: ['/api/scheduled-posts'],
   });
 
-  // Filter and sort published posts
+  // Filter and sort attempted posts (scheduled in the past)
+  const now = new Date();
   const recentPublished = scheduledPosts
-    .filter(sp => sp.publishedAt)
+    .filter(sp => sp.scheduledAt && new Date(sp.scheduledAt) <= now)
-    .sort((a, b) => new Date(b.publishedAt!).getTime() - new Date(a.publishedAt!).getTime())
+    .sort((a, b) => new Date(b.scheduledAt!).getTime() - new Date(a.scheduledAt!).getTime())
     .slice(0, 10);
 
   const handlePreviewPost = async (scheduledPost: ScheduledPostWithRelations) => {
@@ -141,7 +142,7 @@ export default function RecentPublications() {
                     </span>
                     <span>•</span>
                     <span>
-                      {format(new Date(scheduledPost.publishedAt!), "d MMM yyyy 'à' HH:mm", { locale: fr })}
+                      {format(new Date(scheduledPost.scheduledAt!), "d MMM yyyy 'à' HH:mm", { locale: fr })}
                     </span>
                     {scheduledPost.error && (
                       <>
@@ -165,6 +166,7 @@ export default function RecentPublications() {
         mediaList={previewData.allMedia}
         onPublish={() => {}}
         isPublishing={false}
+        readOnly={true}
       />
     </Card>
   );