Merge pull request #92 from R0m1k3/dev

Dev

client/src/pages/pages.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
-import { Plus, Facebook, Instagram, Trash2, RefreshCw, Edit, Bug, Code } from "lucide-react";
+import { Plus, Facebook, Instagram, Trash2, RefreshCw, Edit, Bug, Code, Calendar, AlertTriangle } from "lucide-react";
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
 import { Button } from "@/components/ui/button";
@@ -12,6 +12,59 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import type { SocialPage } from "@shared/schema";
+import { format } from "date-fns";
+import { fr } from "date-fns/locale";
+
+function getTokenExpirationStatus(expiresAt: string | null | undefined) {
+  if (!expiresAt) {
+    return { 
+      status: 'unknown' as const, 
+      color: 'text-gray-500',
+      bgColor: 'bg-gray-100',
+      daysLeft: null,
+      message: 'Date inconnue'
+    };
+  }
+
+  const now = new Date();
+  const expiration = new Date(expiresAt);
+  const diffTime = expiration.getTime() - now.getTime();
+  const daysLeft = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+  if (daysLeft < 0) {
+    return {
+      status: 'expired' as const,
+      color: 'text-red-600',
+      bgColor: 'bg-red-100',
+      daysLeft,
+      message: 'Expiré'
+    };
+  } else if (daysLeft <= 7) {
+    return {
+      status: 'urgent' as const,
+      color: 'text-red-600',
+      bgColor: 'bg-red-100',
+      daysLeft,
+      message: `${daysLeft} jour${daysLeft > 1 ? 's' : ''} restant${daysLeft > 1 ? 's' : ''}`
+    };
+  } else if (daysLeft <= 15) {
+    return {
+      status: 'warning' as const,
+      color: 'text-orange-600',
+      bgColor: 'bg-orange-100',
+      daysLeft,
+      message: `${daysLeft} jours restants`
+    };
+  } else {
+    return {
+      status: 'good' as const,
+      color: 'text-green-600',
+      bgColor: 'bg-green-100',
+      daysLeft,
+      message: `${daysLeft} jours restants`
+    };
+  }
+}
 
 export default function PagesManagement() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -139,30 +192,55 @@ export default function PagesManagement() {
                       </div>
                     </div>
                   </CardHeader>
-                  <CardContent>
-                    <div className="flex items-center justify-between">
-                      <div className="text-sm text-muted-foreground">
-                        ID: {page.pageId}
-                      </div>
-                      <div className="flex gap-2">
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => setEditingPage(page)}
-                          data-testid={`button-edit-page-${page.id}`}
-                        >
-                          <Edit className="w-4 h-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => deleteMutation.mutate(page.id)}
-                          disabled={deleteMutation.isPending}
-                          data-testid={`button-delete-page-${page.id}`}
-                        >
-                          <Trash2 className="w-4 h-4 text-destructive" />
-                        </Button>
-                      </div>
+                  <CardContent className="space-y-3">
+                    <div className="text-sm text-muted-foreground">
+                      ID: {page.pageId}
+                    </div>
+                    
+                    {/* Token expiration status */}
+                    {(() => {
+                      const expirationStatus = getTokenExpirationStatus(
+                        page.tokenExpiresAt ? new Date(page.tokenExpiresAt).toISOString() : null
+                      );
+                      return (
+                        <div className={`flex items-center gap-2 text-xs px-3 py-2 rounded-lg ${expirationStatus.bgColor}`}>
+                          <Calendar className="w-4 h-4" />
+                          <div className="flex-1">
+                            <div className="font-medium">Expiration du token</div>
+                            <div className={`${expirationStatus.color} font-semibold`}>
+                              {expirationStatus.message}
+                            </div>
+                            {page.tokenExpiresAt && (
+                              <div className="text-muted-foreground mt-0.5">
+                                {format(new Date(page.tokenExpiresAt), "d MMMM yyyy", { locale: fr })}
+                              </div>
+                            )}
+                          </div>
+                          {(expirationStatus.status === 'expired' || expirationStatus.status === 'urgent') && (
+                            <AlertTriangle className="w-4 h-4 text-red-600" />
+                          )}
+                        </div>
+                      );
+                    })()}
+
+                    <div className="flex items-center justify-end gap-2 pt-2">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setEditingPage(page)}
+                        data-testid={`button-edit-page-${page.id}`}
+                      >
+                        <Edit className="w-4 h-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => deleteMutation.mutate(page.id)}
+                        disabled={deleteMutation.isPending}
+                        data-testid={`button-delete-page-${page.id}`}
+                      >
+                        <Trash2 className="w-4 h-4 text-destructive" />
+                      </Button>
                     </div>
                   </CardContent>
                 </Card>

replit.md

@@ -11,7 +11,10 @@ Preferred communication style: Simple, everyday language.
 ## Recent Changes
 
 ### November 17, 2025
-- **Story Text Overlay with Adaptive Sizing**: Implemented automatic text overlay on Instagram and Facebook stories with intelligent font size adaptation. When publishing a story with text content, the system now generates a composite image with the text burned into the bottom 25% of the image. Features: (1) Adaptive font sizing (24-72px) that automatically adjusts based on text length to fit within the text box, (2) Aspect ratio preservation for source images (centered with black letterboxing if needed to maintain 9:16 story format), (3) Automatic text wrapping with line breaks on word boundaries, (4) Ellipsis truncation for extremely long text that exceeds available space, (5) Semi-transparent black background (60% opacity) behind text for readability. Implementation uses Canvas (node-canvas) for image composition in `imageProcessor.addTextToStoryImage()`, with the generated image uploaded to Cloudinary in a dedicated `social-flow/stories` folder before publication. This ensures text appears correctly on published stories since Facebook/Instagram APIs don't support text overlays natively. The text box reserves 25% of the image height with 40px padding, and font size reduces in 2px increments until text fits or reaches the 24px minimum.
+- **Access Token Expiration Tracking**: Added automatic tracking and visual display of Facebook/Instagram access token expiration dates in the "Pages gérées" section. Implementation: (1) Added `tokenExpiresAt` timestamp column to `social_pages` table in database schema, (2) POST endpoint automatically calculates expiration date as current date + 60 days when adding a new page, (3) Updated existing pages via SQL migration to populate expiration dates based on `createdAt + 60 days`, (4) UI displays expiration status with color-coded visual indicators in page cards: green (>15 days), orange (7-15 days), red (<7 days or expired), with warning icon for urgent/expired tokens, (5) Shows remaining days and formatted expiration date using date-fns with French locale. This helps users proactively identify and renew expiring tokens before they cause publishing failures. Files modified: `shared/schema.ts`, `server/routes.ts`, `client/src/pages/pages.tsx`.
+- **Story Text Overlay Minimum Font Size Reduction**: Reduced minimum font size in adaptive text overlay system from 24px to 12px for both Instagram and Facebook stories. This allows significantly more text to fit within the story text box (bottom 25% of image) by enabling smaller font sizes when needed. The adaptive sizing algorithm now scales between 12-72px, reducing in 2px increments until text fits or reaches the new 12px minimum. Modified both server-side image generation (`server/services/imageProcessor.ts`) and client-side preview (`client/src/components/preview-modal.tsx`) to maintain consistency between preview and published stories.
+- **Facebook Story Preview with Text Overlay**: Added preview support for Facebook Story format in PreviewModal, matching the existing Instagram Story preview functionality. The unified `renderStory()` function now handles both platforms with platform-specific icons (blue Facebook icon vs. gradient Instagram icon) while maintaining identical text overlay rendering with adaptive font sizing (12-72px), semi-transparent background, and centered text display. Both Facebook Story and Instagram Story previews now accurately show how published stories will appear with text burned into the image.
+- **Story Text Overlay with Adaptive Sizing**: Implemented automatic text overlay on Instagram and Facebook stories with intelligent font size adaptation. When publishing a story with text content, the system now generates a composite image with the text burned into the bottom 25% of the image. Features: (1) Adaptive font sizing (originally 24-72px, now 12-72px) that automatically adjusts based on text length to fit within the text box, (2) Aspect ratio preservation for source images (centered with black letterboxing if needed to maintain 9:16 story format), (3) Automatic text wrapping with line breaks on word boundaries, (4) Ellipsis truncation for extremely long text that exceeds available space, (5) Semi-transparent black background (60% opacity) behind text for readability. Implementation uses Canvas (node-canvas) for image composition in `imageProcessor.addTextToStoryImage()`, with the generated image uploaded to Cloudinary in a dedicated `social-flow/stories` folder before publication. This ensures text appears correctly on published stories since Facebook/Instagram APIs don't support text overlays natively. The text box reserves 25% of the image height with 40px padding, and font size reduces in 2px increments until text fits or reaches the minimum.
 - **AI Assistant Model Loading Fix**: Fixed bug preventing non-admin users from accessing the AI assistant feature. Problem: The AI chat component (`ai-chat.tsx`) was querying `/api/ai/models` which requires admin privileges (`requireAdmin`), causing model list to fail loading for regular users. Solution: Changed the component to use `/api/openrouter/models` endpoint instead, which only requires authentication (`requireAuth`). Updated data structure access from `modelsData?.models` to `modelsData?.data` to match the OpenRouter API response format `{ data: OpenRouterModel[] }`. This fix enables all authenticated users to load the model list and use the AI assistant feature. The endpoint `/api/openrouter/models` was already being used in Settings page for the same purpose, ensuring consistency across the application.
 
 ### November 5, 2025

server/routes.ts

@@ -1155,7 +1155,16 @@ export async function registerRoutes(app: Express): Promise<Server> {
     try {
       const user = req.user as User;
       const userId = user.id;
-      const pageData = insertSocialPageSchema.parse({ ...req.body, userId });
+      
+      // Calculate token expiration date (60 days from now)
+      const tokenExpiresAt = new Date();
+      tokenExpiresAt.setDate(tokenExpiresAt.getDate() + 60);
+      
+      const pageData = insertSocialPageSchema.parse({ 
+        ...req.body, 
+        userId,
+        tokenExpiresAt 
+      });
       const page = await storage.createSocialPage(pageData);
       res.json(page);
     } catch (error) {

shared/schema.ts

@@ -24,6 +24,7 @@ export const socialPages = pgTable("social_pages", {
   pageId: text("page_id").notNull(),
   pageName: text("page_name").notNull(),
   accessToken: text("access_token").notNull(),
+  tokenExpiresAt: timestamp("token_expires_at"),
   followersCount: integer("followers_count").default(0),
   isActive: text("is_active").notNull().default("true"),
   createdAt: timestamp("created_at").defaultNow(),