From 68ed90b0c962cace8ee126ae52706fe3f44c3ac6 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 1 Oct 2025 16:26:10 +0000
Subject: [PATCH 01/12] Add ability to configure and select AI models for text
 generation

Implement OpenRouter API integration for AI-powered text generation, allowing users to configure API keys, select models, and define system prompts for customized content creation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/HPCBgsr
---
 .replit                       |   4 ++
 client/src/pages/settings.tsx | 102 +++++++++++++++++++++++++++++++---
 server/routes.ts              |  51 ++++++++++++++++-
 server/services/openrouter.ts |  47 ++++++----------
 server/storage.ts             |  27 +++++++++
 shared/schema.ts              |  27 +++++++++
 6 files changed, 219 insertions(+), 39 deletions(-)

diff --git a/.replit b/.replit
index 3238a51..a246e2c 100644
--- a/.replit
+++ b/.replit
@@ -14,6 +14,10 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 33041
+externalPort = 3000
+
 [env]
 PORT = "5000"
 
diff --git a/client/src/pages/settings.tsx b/client/src/pages/settings.tsx
index 606011c..e50c98a 100644
--- a/client/src/pages/settings.tsx
+++ b/client/src/pages/settings.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Settings as SettingsIcon, Bell, Key, Shield, Cloud } from "lucide-react";
+import { Settings as SettingsIcon, Bell, Key, Shield, Cloud, Brain } from "lucide-react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
@@ -7,6 +7,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
@@ -18,12 +20,19 @@ export default function Settings() {
   const [cloudName, setCloudName] = useState("");
   const [apiKey, setApiKey] = useState("");
   const [apiSecret, setApiSecret] = useState("");
+  const [openrouterApiKey, setOpenrouterApiKey] = useState("");
+  const [openrouterModel, setOpenrouterModel] = useState("anthropic/claude-3.5-sonnet");
+  const [openrouterSystemPrompt, setOpenrouterSystemPrompt] = useState("Tu es un expert en marketing des réseaux sociaux. Génère 3 variations de textes engageants pour des publications Facebook et Instagram à partir des informations produit fournies. Chaque variation doit être unique, captivante et optimisée pour l'engagement.");
   const { toast } = useToast();
 
   const { data: cloudinaryConfig } = useQuery({
     queryKey: ['/api/cloudinary/config'],
   });
 
+  const { data: openrouterConfig } = useQuery({
+    queryKey: ['/api/openrouter/config'],
+  });
+
   useEffect(() => {
     if (cloudinaryConfig) {
       setCloudName((cloudinaryConfig as any).cloudName || "");
@@ -31,6 +40,13 @@ export default function Settings() {
     }
   }, [cloudinaryConfig]);
 
+  useEffect(() => {
+    if (openrouterConfig) {
+      setOpenrouterModel((openrouterConfig as any).model || "anthropic/claude-3.5-sonnet");
+      setOpenrouterSystemPrompt((openrouterConfig as any).systemPrompt || "Tu es un expert en marketing des réseaux sociaux. Génère 3 variations de textes engageants pour des publications Facebook et Instagram à partir des informations produit fournies. Chaque variation doit être unique, captivante et optimisée pour l'engagement.");
+    }
+  }, [openrouterConfig]);
+
   const saveCloudinaryMutation = useMutation({
     mutationFn: () => 
       apiRequest('POST', '/api/cloudinary/config', {
@@ -55,6 +71,30 @@ export default function Settings() {
     },
   });
 
+  const saveOpenrouterMutation = useMutation({
+    mutationFn: () => 
+      apiRequest('POST', '/api/openrouter/config', {
+        apiKey: openrouterApiKey,
+        model: openrouterModel,
+        systemPrompt: openrouterSystemPrompt,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['/api/openrouter/config'] });
+      toast({
+        title: "Configuration sauvegardée",
+        description: "Vos paramètres OpenRouter ont été enregistrés",
+      });
+      setOpenrouterApiKey(""); // Clear the API key after saving
+    },
+    onError: () => {
+      toast({
+        title: "Erreur",
+        description: "Impossible de sauvegarder la configuration OpenRouter",
+        variant: "destructive",
+      });
+    },
+  });
+
   return (
     <div className="flex h-screen overflow-hidden bg-background">
       {sidebarOpen && (
@@ -128,26 +168,72 @@ export default function Settings() {
             <Card>
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
-                  <Key className="w-5 h-5" />
-                  Clés API
+                  <Brain className="w-5 h-5" />
+                  Configuration OpenRouter (IA)
                 </CardTitle>
                 <CardDescription>
-                  Configurez vos clés API pour les intégrations
+                  Configurez OpenRouter pour la génération de texte avec l'IA
                 </CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
                 <div className="space-y-2">
-                  <Label htmlFor="openrouterKey">Clé API OpenRouter</Label>
+                  <Label htmlFor="openrouterApiKey">Clé API OpenRouter</Label>
                   <Input
-                    id="openrouterKey"
+                    id="openrouterApiKey"
                     type="password"
+                    value={openrouterApiKey}
+                    onChange={(e) => setOpenrouterApiKey(e.target.value)}
                     placeholder="sk-or-v1-..."
-                    data-testid="input-openrouter-key"
+                    data-testid="input-openrouter-api-key"
                   />
                   <p className="text-xs text-muted-foreground">
-                    Utilisée pour la génération de texte IA
+                    Obtenez votre clé API sur{" "}
+                    <a href="https://openrouter.ai/keys" target="_blank" rel="noopener noreferrer" className="underline">
+                      openrouter.ai
+                    </a>
                   </p>
                 </div>
+                <div className="space-y-2">
+                  <Label htmlFor="openrouterModel">Modèle d'IA</Label>
+                  <Select value={openrouterModel} onValueChange={setOpenrouterModel}>
+                    <SelectTrigger id="openrouterModel" data-testid="select-openrouter-model">
+                      <SelectValue placeholder="Sélectionner un modèle" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="anthropic/claude-3.5-sonnet">Claude 3.5 Sonnet</SelectItem>
+                      <SelectItem value="anthropic/claude-3-opus">Claude 3 Opus</SelectItem>
+                      <SelectItem value="openai/gpt-4o">GPT-4o</SelectItem>
+                      <SelectItem value="openai/gpt-4-turbo">GPT-4 Turbo</SelectItem>
+                      <SelectItem value="google/gemini-pro-1.5">Gemini 1.5 Pro</SelectItem>
+                      <SelectItem value="meta-llama/llama-3.1-70b-instruct">Llama 3.1 70B</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <p className="text-xs text-muted-foreground">
+                    Choisissez le modèle d'IA pour générer vos publications
+                  </p>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="openrouterSystemPrompt">Prompt système</Label>
+                  <Textarea
+                    id="openrouterSystemPrompt"
+                    value={openrouterSystemPrompt}
+                    onChange={(e) => setOpenrouterSystemPrompt(e.target.value)}
+                    placeholder="Instructions pour l'IA..."
+                    rows={6}
+                    data-testid="textarea-openrouter-system-prompt"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    Définissez les instructions que l'IA doit suivre pour générer vos textes
+                  </p>
+                </div>
+                <Button 
+                  onClick={() => saveOpenrouterMutation.mutate()}
+                  disabled={saveOpenrouterMutation.isPending || !openrouterApiKey || !openrouterModel || !openrouterSystemPrompt}
+                  data-testid="button-save-openrouter"
+                  className="w-full"
+                >
+                  {saveOpenrouterMutation.isPending ? "Enregistrement..." : "Enregistrer OpenRouter"}
+                </Button>
               </CardContent>
             </Card>
 
diff --git a/server/routes.ts b/server/routes.ts
index 3643989..bc69862 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -4,7 +4,7 @@ import { storage } from "./storage";
 import multer from "multer";
 import { openRouterService } from "./services/openrouter";
 import { cloudinaryService } from "./services/cloudinary";
-import { insertPostSchema, insertScheduledPostSchema, insertSocialPageSchema, insertAiGenerationSchema, insertCloudinaryConfigSchema } from "@shared/schema";
+import { insertPostSchema, insertScheduledPostSchema, insertSocialPageSchema, insertAiGenerationSchema, insertCloudinaryConfigSchema, insertOpenrouterConfigSchema } from "@shared/schema";
 
 const upload = multer({ storage: multer.memoryStorage() });
 
@@ -41,7 +41,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
       const productInfo = req.body;
       const userId = "demo-user"; // In real app, get from session/auth
 
-      const generatedTexts = await openRouterService.generatePostText(productInfo);
+      const generatedTexts = await openRouterService.generatePostText(productInfo, userId);
 
       // Save to database
       await storage.createAiGeneration({
@@ -283,6 +283,53 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
+  // OpenRouter configuration
+  app.get("/api/openrouter/config", async (req, res) => {
+    try {
+      const userId = "demo-user"; // In real app, get from session/auth
+      const config = await storage.getOpenrouterConfig(userId);
+      
+      if (!config) {
+        return res.json(null);
+      }
+
+      // Don't send the API key to the client
+      const { apiKey, ...safeConfig } = config;
+      res.json(safeConfig);
+    } catch (error) {
+      console.error("Error fetching OpenRouter config:", error);
+      res.status(500).json({ error: "Failed to fetch OpenRouter config" });
+    }
+  });
+
+  app.post("/api/openrouter/config", async (req, res) => {
+    try {
+      const userId = "demo-user"; // In real app, get from session/auth
+      
+      const configData = insertOpenrouterConfigSchema.parse({
+        ...req.body,
+        userId,
+      });
+
+      // Check if config already exists
+      const existingConfig = await storage.getOpenrouterConfig(userId);
+      
+      let config;
+      if (existingConfig) {
+        config = await storage.updateOpenrouterConfig(userId, configData);
+      } else {
+        config = await storage.createOpenrouterConfig(configData);
+      }
+
+      // Don't send the API key back
+      const { apiKey, ...safeConfig } = config;
+      res.json(safeConfig);
+    } catch (error) {
+      console.error("Error saving OpenRouter config:", error);
+      res.status(500).json({ error: "Failed to save OpenRouter config" });
+    }
+  });
+
   const httpServer = createServer(app);
 
   return httpServer;
diff --git a/server/services/openrouter.ts b/server/services/openrouter.ts
index ac97545..88bedab 100644
--- a/server/services/openrouter.ts
+++ b/server/services/openrouter.ts
@@ -12,35 +12,32 @@ interface GeneratedText {
   characterCount: number;
 }
 
+import { storage } from '../storage';
+
 export class OpenRouterService {
-  private apiKey: string;
   private baseUrl = "https://openrouter.ai/api/v1/chat/completions";
 
-  constructor() {
-    this.apiKey = process.env.OPENROUTER_API_KEY || "";
-    if (!this.apiKey) {
-      console.warn("OPENROUTER_API_KEY not set. AI text generation will not work.");
-    }
-  }
-
-  async generatePostText(productInfo: ProductInfo): Promise<GeneratedText[]> {
-    if (!this.apiKey) {
-      throw new Error("OpenRouter API key not configured");
+  async generatePostText(productInfo: ProductInfo, userId: string): Promise<GeneratedText[]> {
+    // Get user's OpenRouter configuration
+    const config = await storage.getOpenrouterConfig(userId);
+    
+    if (!config) {
+      throw new Error('Configuration OpenRouter non trouvée. Veuillez configurer OpenRouter dans les paramètres.');
     }
 
-    const prompt = this.buildPrompt(productInfo);
+    const prompt = this.buildPrompt(productInfo, config.systemPrompt);
 
     try {
       const response = await fetch(this.baseUrl, {
         method: "POST",
         headers: {
-          "Authorization": `Bearer ${this.apiKey}`,
+          "Authorization": `Bearer ${config.apiKey}`,
           "Content-Type": "application/json",
-          "HTTP-Referer": process.env.APP_URL || "http://localhost:5000",
+          "HTTP-Referer": process.env.APP_URL || "http://localhost:5555",
           "X-Title": "Social Flow"
         },
         body: JSON.stringify({
-          model: "anthropic/claude-3.5-sonnet",
+          model: config.model,
           messages: [
             {
               role: "user",
@@ -66,26 +63,18 @@ export class OpenRouterService {
     }
   }
 
-  private buildPrompt(productInfo: ProductInfo): string {
+  private buildPrompt(productInfo: ProductInfo, systemPrompt: string): string {
     const features = productInfo.features?.join(", ") || "";
     
-    return `Tu es un expert en marketing sur les réseaux sociaux. Génère 3 variantes de texte pour une publication Facebook/Instagram pour ce produit:
-
-Nom: ${productInfo.name}
+    const productDetails = `Nom: ${productInfo.name}
 ${productInfo.description ? `Description: ${productInfo.description}` : ''}
 ${productInfo.price ? `Prix: ${productInfo.price}` : ''}
-${features ? `Caractéristiques: ${features}` : ''}
+${features ? `Caractéristiques: ${features}` : ''}`;
 
-Crée 3 versions différentes:
-1. Version Dynamique - Énergique et engageante avec des emojis
-2. Version Informative - Factuelle et professionnelle
-3. Version Émotionnelle - Axée sur les bénéfices émotionnels
+    return `${systemPrompt}
 
-Chaque version doit:
-- Être en français
-- Faire entre 150-250 caractères
-- Être optimisée pour les réseaux sociaux
-- Inclure des emojis pertinents (sauf la version informative)
+Informations produit:
+${productDetails}
 
 Format de réponse:
 VERSION 1 - DYNAMIQUE:
diff --git a/server/storage.ts b/server/storage.ts
index c967f6d..d3485b2 100644
--- a/server/storage.ts
+++ b/server/storage.ts
@@ -6,6 +6,7 @@ import {
   scheduledPosts,
   aiGenerations,
   cloudinaryConfig,
+  openrouterConfig,
   type User, 
   type InsertUser,
   type SocialPage,
@@ -20,6 +21,8 @@ import {
   type InsertAiGeneration,
   type CloudinaryConfig,
   type InsertCloudinaryConfig,
+  type OpenrouterConfig,
+  type InsertOpenrouterConfig,
 } from "@shared/schema";
 import { db } from "./db";
 import { eq, and, gte, lte, desc, isNull } from "drizzle-orm";
@@ -66,6 +69,11 @@ export interface IStorage {
   getCloudinaryConfig(userId: string): Promise<CloudinaryConfig | undefined>;
   createCloudinaryConfig(config: InsertCloudinaryConfig): Promise<CloudinaryConfig>;
   updateCloudinaryConfig(userId: string, config: Partial<InsertCloudinaryConfig>): Promise<CloudinaryConfig>;
+
+  // OpenRouter Config
+  getOpenrouterConfig(userId: string): Promise<OpenrouterConfig | undefined>;
+  createOpenrouterConfig(config: InsertOpenrouterConfig): Promise<OpenrouterConfig>;
+  updateOpenrouterConfig(userId: string, config: Partial<InsertOpenrouterConfig>): Promise<OpenrouterConfig>;
 }
 
 export class DatabaseStorage implements IStorage {
@@ -235,6 +243,25 @@ export class DatabaseStorage implements IStorage {
       .returning();
     return updated;
   }
+
+  // OpenRouter Config
+  async getOpenrouterConfig(userId: string): Promise<OpenrouterConfig | undefined> {
+    const [config] = await db.select().from(openrouterConfig).where(eq(openrouterConfig.userId, userId));
+    return config || undefined;
+  }
+
+  async createOpenrouterConfig(config: InsertOpenrouterConfig): Promise<OpenrouterConfig> {
+    const [newConfig] = await db.insert(openrouterConfig).values(config).returning();
+    return newConfig;
+  }
+
+  async updateOpenrouterConfig(userId: string, config: Partial<InsertOpenrouterConfig>): Promise<OpenrouterConfig> {
+    const [updated] = await db.update(openrouterConfig)
+      .set({ ...config, updatedAt: new Date() })
+      .where(eq(openrouterConfig.userId, userId))
+      .returning();
+    return updated;
+  }
 }
 
 export const storage = new DatabaseStorage();
diff --git a/shared/schema.ts b/shared/schema.ts
index bdf10e9..b07c9af 100644
--- a/shared/schema.ts
+++ b/shared/schema.ts
@@ -37,6 +37,16 @@ export const cloudinaryConfig = pgTable("cloudinary_config", {
   updatedAt: timestamp("updated_at").defaultNow(),
 });
 
+export const openrouterConfig = pgTable("openrouter_config", {
+  id: varchar("id").primaryKey().default(sql`gen_random_uuid()`),
+  userId: varchar("user_id").notNull().unique().references(() => users.id, { onDelete: "cascade" }),
+  apiKey: text("api_key").notNull(),
+  model: text("model").notNull().default("anthropic/claude-3.5-sonnet"),
+  systemPrompt: text("system_prompt").notNull().default("Tu es un expert en marketing des réseaux sociaux. Génère 3 variations de textes engageants pour des publications Facebook et Instagram à partir des informations produit fournies. Chaque variation doit être unique, captivante et optimisée pour l'engagement."),
+  createdAt: timestamp("created_at").defaultNow(),
+  updatedAt: timestamp("updated_at").defaultNow(),
+});
+
 export const media = pgTable("media", {
   id: varchar("id").primaryKey().default(sql`gen_random_uuid()`),
   userId: varchar("user_id").notNull().references(() => users.id, { onDelete: "cascade" }),
@@ -96,6 +106,7 @@ export const usersRelations = relations(users, ({ many, one }) => ({
   posts: many(posts),
   aiGenerations: many(aiGenerations),
   cloudinaryConfig: one(cloudinaryConfig),
+  openrouterConfig: one(openrouterConfig),
 }));
 
 export const cloudinaryConfigRelations = relations(cloudinaryConfig, ({ one }) => ({
@@ -105,6 +116,13 @@ export const cloudinaryConfigRelations = relations(cloudinaryConfig, ({ one }) =
   }),
 }));
 
+export const openrouterConfigRelations = relations(openrouterConfig, ({ one }) => ({
+  user: one(users, {
+    fields: [openrouterConfig.userId],
+    references: [users.id],
+  }),
+}));
+
 export const socialPagesRelations = relations(socialPages, ({ one, many }) => ({
   user: one(users, {
     fields: [socialPages.userId],
@@ -199,6 +217,12 @@ export const insertCloudinaryConfigSchema = createInsertSchema(cloudinaryConfig)
   updatedAt: true,
 });
 
+export const insertOpenrouterConfigSchema = createInsertSchema(openrouterConfig).omit({
+  id: true,
+  createdAt: true,
+  updatedAt: true,
+});
+
 // Types
 export type User = typeof users.$inferSelect;
 export type InsertUser = z.infer<typeof insertUserSchema>;
@@ -220,3 +244,6 @@ export type InsertAiGeneration = z.infer<typeof insertAiGenerationSchema>;
 
 export type CloudinaryConfig = typeof cloudinaryConfig.$inferSelect;
 export type InsertCloudinaryConfig = z.infer<typeof insertCloudinaryConfigSchema>;
+
+export type OpenrouterConfig = typeof openrouterConfig.$inferSelect;
+export type InsertOpenrouterConfig = z.infer<typeof insertOpenrouterConfigSchema>;

From 372e76f1a4f94475e0a8c9d41d789f9b5d78e302 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 1 Oct 2025 16:27:41 +0000
Subject: [PATCH 02/12] Dynamically load AI models from OpenRouter API for
 content generation

Implement a new API endpoint `/api/openrouter/models` to fetch AI model data from OpenRouter and dynamically populate the model selection in the settings page.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/HPCBgsr
---
 client/src/pages/settings.tsx | 15 +++++++++------
 server/routes.ts              | 21 +++++++++++++++++++++
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/client/src/pages/settings.tsx b/client/src/pages/settings.tsx
index e50c98a..dc72205 100644
--- a/client/src/pages/settings.tsx
+++ b/client/src/pages/settings.tsx
@@ -33,6 +33,10 @@ export default function Settings() {
     queryKey: ['/api/openrouter/config'],
   });
 
+  const { data: openrouterModels } = useQuery({
+    queryKey: ['/api/openrouter/models'],
+  });
+
   useEffect(() => {
     if (cloudinaryConfig) {
       setCloudName((cloudinaryConfig as any).cloudName || "");
@@ -200,12 +204,11 @@ export default function Settings() {
                       <SelectValue placeholder="Sélectionner un modèle" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="anthropic/claude-3.5-sonnet">Claude 3.5 Sonnet</SelectItem>
-                      <SelectItem value="anthropic/claude-3-opus">Claude 3 Opus</SelectItem>
-                      <SelectItem value="openai/gpt-4o">GPT-4o</SelectItem>
-                      <SelectItem value="openai/gpt-4-turbo">GPT-4 Turbo</SelectItem>
-                      <SelectItem value="google/gemini-pro-1.5">Gemini 1.5 Pro</SelectItem>
-                      <SelectItem value="meta-llama/llama-3.1-70b-instruct">Llama 3.1 70B</SelectItem>
+                      {openrouterModels?.data?.map((model: any) => (
+                        <SelectItem key={model.id} value={model.id}>
+                          {model.name}
+                        </SelectItem>
+                      ))}
                     </SelectContent>
                   </Select>
                   <p className="text-xs text-muted-foreground">
diff --git a/server/routes.ts b/server/routes.ts
index bc69862..9fdf8ab 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -283,6 +283,27 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
+  // OpenRouter models list
+  app.get("/api/openrouter/models", async (req, res) => {
+    try {
+      const response = await fetch("https://openrouter.ai/api/v1/models", {
+        headers: {
+          "Content-Type": "application/json",
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`OpenRouter API error: ${response.status}`);
+      }
+
+      const data = await response.json();
+      res.json(data);
+    } catch (error) {
+      console.error("Error fetching OpenRouter models:", error);
+      res.status(500).json({ error: "Failed to fetch OpenRouter models" });
+    }
+  });
+
   // OpenRouter configuration
   app.get("/api/openrouter/config", async (req, res) => {
     try {

From 7b97fb4839a3071e898c09c8ecd65b40b805233b Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 1 Oct 2025 16:32:02 +0000
Subject: [PATCH 03/12] Update model selection to handle potential undefined
 data from API

Fix type assertion for OpenRouter models in settings page to prevent runtime errors.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/HPCBgsr
---
 .replit                       | 4 ----
 client/src/pages/settings.tsx | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/.replit b/.replit
index a246e2c..3238a51 100644
--- a/.replit
+++ b/.replit
@@ -14,10 +14,6 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
-[[ports]]
-localPort = 33041
-externalPort = 3000
-
 [env]
 PORT = "5000"
 
diff --git a/client/src/pages/settings.tsx b/client/src/pages/settings.tsx
index dc72205..a0b05b7 100644
--- a/client/src/pages/settings.tsx
+++ b/client/src/pages/settings.tsx
@@ -204,7 +204,7 @@ export default function Settings() {
                       <SelectValue placeholder="Sélectionner un modèle" />
                     </SelectTrigger>
                     <SelectContent>
-                      {openrouterModels?.data?.map((model: any) => (
+                      {(openrouterModels as any)?.data?.map((model: any) => (
                         <SelectItem key={model.id} value={model.id}>
                           {model.name}
                         </SelectItem>

From 5ee75edf8c5de725b95079465ad6c58b1fbb9f6e Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 1 Oct 2025 16:48:20 +0000
Subject: [PATCH 04/12] Add user authentication and admin roles to manage
 application access

Implement user login, session management, and role-based access control for users and administrators. Includes new admin pages for user management and SQL query execution.

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/HPCBgsr
---
 client/src/App.tsx                |  72 +++++++--
 client/src/components/sidebar.tsx | 112 ++++++++++++--
 client/src/pages/login.tsx        | 113 ++++++++++++++
 client/src/pages/sql.tsx          | 248 ++++++++++++++++++++++++++++++
 client/src/pages/users-admin.tsx  | 199 ++++++++++++++++++++++++
 init.sql                          |  39 +++++
 package-lock.json                 |  41 ++++-
 package.json                      |   2 +
 server/auth.ts                    |  45 ++++++
 server/index.ts                   |  22 +++
 server/routes.ts                  | 246 ++++++++++++++++++++++++-----
 shared/schema.ts                  |   3 +
 12 files changed, 1081 insertions(+), 61 deletions(-)
 create mode 100644 client/src/pages/login.tsx
 create mode 100644 client/src/pages/sql.tsx
 create mode 100644 client/src/pages/users-admin.tsx
 create mode 100644 init.sql
 create mode 100644 server/auth.ts

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 5ea27ba..07ba43a 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,9 +1,11 @@
-import { Switch, Route } from "wouter";
+import { Switch, Route, Redirect, useLocation } from "wouter";
+import { useEffect } from "react";
 import { queryClient } from "./lib/queryClient";
-import { QueryClientProvider } from "@tanstack/react-query";
+import { QueryClientProvider, useQuery } from "@tanstack/react-query";
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import NotFound from "@/pages/not-found";
+import Login from "@/pages/login";
 import Dashboard from "@/pages/dashboard";
 import NewPost from "@/pages/new-post";
 import Calendar from "@/pages/calendar";
@@ -13,19 +15,67 @@ 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";
+import UsersAdmin from "@/pages/users-admin";
+
+function ProtectedRoute({ component: Component, adminOnly = false }: { component: React.ComponentType; adminOnly?: boolean }) {
+  const [, setLocation] = useLocation();
+  
+  const { data: session, isLoading } = useQuery({
+    queryKey: ["/api/auth/session"],
+    retry: false,
+  });
+
+  useEffect(() => {
+    if (!isLoading && !session) {
+      setLocation("/login");
+    }
+  }, [isLoading, session, setLocation]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-background">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
+          <p className="text-muted-foreground">Chargement...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!session) {
+    return null;
+  }
+
+  if (adminOnly && (session as any).role !== "admin") {
+    return (
+      <div className="flex items-center justify-center h-screen bg-background">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold mb-2">Accès refusé</h1>
+          <p className="text-muted-foreground">Cette page est réservée aux administrateurs.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <Component />;
+}
 
 function Router() {
   return (
     <Switch>
-      <Route path="/" component={Dashboard} />
-      <Route path="/new" component={NewPost} />
-      <Route path="/calendar" component={Calendar} />
-      <Route path="/media" component={Media} />
-      <Route path="/pages" component={PagesManagement} />
-      <Route path="/ai" component={AI} />
-      <Route path="/analytics" component={Analytics} />
-      <Route path="/history" component={History} />
-      <Route path="/settings" component={Settings} />
+      <Route path="/login" component={Login} />
+      <Route path="/">{() => <ProtectedRoute component={Dashboard} />}</Route>
+      <Route path="/new">{() => <ProtectedRoute component={NewPost} />}</Route>
+      <Route path="/calendar">{() => <ProtectedRoute component={Calendar} />}</Route>
+      <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>
+      <Route path="/users">{() => <ProtectedRoute component={UsersAdmin} adminOnly />}</Route>
       <Route component={NotFound} />
     </Switch>
   );
diff --git a/client/src/components/sidebar.tsx b/client/src/components/sidebar.tsx
index 6247a70..31ca9ac 100644
--- a/client/src/components/sidebar.tsx
+++ b/client/src/components/sidebar.tsx
@@ -1,8 +1,38 @@
-import { Home, PlusCircle, Calendar, Images, Users, Bot, BarChart3, Clock, Settings } from "lucide-react";
+import { Home, PlusCircle, Calendar, Images, Users, Bot, BarChart3, 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";
+import { useToast } from "@/hooks/use-toast";
+import { Button } from "@/components/ui/button";
 
 export default function Sidebar() {
   const [location] = useLocation();
+  const [, setLocation] = useLocation();
+  const { toast } = useToast();
+
+  // Charger la session utilisateur
+  const { data: session } = useQuery({
+    queryKey: ["/api/auth/session"],
+    retry: false,
+  });
+
+  const isAdmin = (session as any)?.role === "admin";
+
+  // Mutation pour déconnexion
+  const logoutMutation = useMutation({
+    mutationFn: async () => {
+      const res = await apiRequest("POST", "/api/auth/logout", {});
+      return await res.json();
+    },
+    onSuccess: () => {
+      queryClient.clear();
+      setLocation("/login");
+      toast({
+        title: "Déconnecté",
+        description: "Vous avez été déconnecté avec succès",
+      });
+    },
+  });
 
   const navItems = [
     { icon: Home, label: "Tableau de bord", href: "/", badge: null },
@@ -94,15 +124,77 @@ export default function Sidebar() {
         </div>
       </nav>
 
-      <div className="p-4 border-t border-border">
-        <Link 
-          href="/settings"
-          className="flex items-center gap-3 px-4 py-3 rounded-lg text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-all"
-          data-testid="link-settings"
-        >
-          <Settings className="w-5 h-5" />
-          <span>Paramètres</span>
-        </Link>
+      <div className="p-4 border-t border-border space-y-2">
+        {isAdmin && (
+          <>
+            <div className="mb-2">
+              <p className="text-xs text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
+            </div>
+            <Link 
+              href="/users"
+              className={`
+                flex items-center gap-3 px-4 py-3 rounded-lg transition-all
+                ${location === "/users"
+                  ? 'bg-accent text-accent-foreground' 
+                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                }
+              `}
+              data-testid="link-users"
+            >
+              <UserCog className="w-5 h-5" />
+              <span>Utilisateurs</span>
+            </Link>
+            <Link 
+              href="/sql"
+              className={`
+                flex items-center gap-3 px-4 py-3 rounded-lg transition-all
+                ${location === "/sql"
+                  ? 'bg-accent text-accent-foreground' 
+                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                }
+              `}
+              data-testid="link-sql"
+            >
+              <Database className="w-5 h-5" />
+              <span>SQL</span>
+            </Link>
+            <Link 
+              href="/settings"
+              className={`
+                flex items-center gap-3 px-4 py-3 rounded-lg transition-all
+                ${location === "/settings"
+                  ? 'bg-accent text-accent-foreground' 
+                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                }
+              `}
+              data-testid="link-settings"
+            >
+              <Settings className="w-5 h-5" />
+              <span>Paramètres</span>
+            </Link>
+          </>
+        )}
+        
+        <div className="pt-2">
+          <Button
+            variant="ghost"
+            className="w-full justify-start text-muted-foreground hover:text-accent-foreground"
+            onClick={() => logoutMutation.mutate()}
+            disabled={logoutMutation.isPending}
+            data-testid="button-logout"
+          >
+            <LogOut className="w-5 h-5 mr-3" />
+            {logoutMutation.isPending ? "Déconnexion..." : "Déconnexion"}
+          </Button>
+        </div>
+        
+        {session && (
+          <div className="mt-4 px-4 py-3 bg-muted rounded-lg">
+            <p className="text-xs text-muted-foreground">Connecté en tant que</p>
+            <p className="text-sm font-semibold truncate">{(session as any).username}</p>
+            <p className="text-xs text-muted-foreground capitalize">{(session as any).role}</p>
+          </div>
+        )}
       </div>
     </aside>
   );
diff --git a/client/src/pages/login.tsx b/client/src/pages/login.tsx
new file mode 100644
index 0000000..ab24eee
--- /dev/null
+++ b/client/src/pages/login.tsx
@@ -0,0 +1,113 @@
+import { useState } from "react";
+import { useLocation } from "wouter";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest } from "@/lib/queryClient";
+import { Lock, User } from "lucide-react";
+
+export default function Login() {
+  const [, setLocation] = useLocation();
+  const { toast } = useToast();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      const response = await apiRequest("POST", "/api/auth/login", { username, password });
+      const data = await response.json();
+
+      toast({
+        title: "Connexion réussie",
+        description: `Bienvenue ${data.username}`,
+      });
+
+      // Rediriger vers le dashboard
+      setLocation("/");
+    } catch (error: any) {
+      toast({
+        variant: "destructive",
+        title: "Erreur de connexion",
+        description: error.message || "Nom d'utilisateur ou mot de passe incorrect",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1 text-center">
+          <CardTitle className="text-3xl font-bold">Social Flow</CardTitle>
+          <CardDescription>
+            Connectez-vous à votre compte pour gérer vos publications
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="username" data-testid="label-username">
+                Nom d'utilisateur
+              </Label>
+              <div className="relative">
+                <User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="username"
+                  type="text"
+                  placeholder="admin"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  className="pl-10"
+                  required
+                  disabled={isLoading}
+                  data-testid="input-username"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="password" data-testid="label-password">
+                Mot de passe
+              </Label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="pl-10"
+                  required
+                  disabled={isLoading}
+                  data-testid="input-password"
+                />
+              </div>
+            </div>
+
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={isLoading}
+              data-testid="button-login"
+            >
+              {isLoading ? "Connexion en cours..." : "Se connecter"}
+            </Button>
+          </form>
+
+          <div className="mt-6 text-center text-sm text-muted-foreground">
+            <p>Identifiants par défaut :</p>
+            <p>admin / admin</p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/client/src/pages/sql.tsx b/client/src/pages/sql.tsx
new file mode 100644
index 0000000..53b02a6
--- /dev/null
+++ b/client/src/pages/sql.tsx
@@ -0,0 +1,248 @@
+import { useState } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import Sidebar from "@/components/sidebar";
+import TopBar from "@/components/topbar";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { Database, Download, Play } from "lucide-react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+export default function SqlAdmin() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const { toast } = useToast();
+  const [sqlQuery, setSqlQuery] = useState("");
+  const [queryResult, setQueryResult] = useState<any>(null);
+
+  // Charger la liste des tables
+  const { data: tablesData } = useQuery({
+    queryKey: ["/api/sql/tables"],
+  });
+
+  // Mutation pour exécuter une requête SQL
+  const executeSqlMutation = useMutation({
+    mutationFn: async (query: string) => {
+      const res = await apiRequest("POST", "/api/sql/execute", { query });
+      return await res.json();
+    },
+    onSuccess: (data) => {
+      setQueryResult(data);
+      if (data.success) {
+        toast({
+          title: "Requête exécutée",
+          description: "La requête SQL a été exécutée avec succès",
+        });
+      }
+    },
+    onError: (error: any) => {
+      toast({
+        variant: "destructive",
+        title: "Erreur SQL",
+        description: error.message || "Erreur lors de l'exécution de la requête",
+      });
+    },
+  });
+
+  const handleExecuteQuery = () => {
+    if (!sqlQuery.trim()) {
+      toast({
+        variant: "destructive",
+        title: "Erreur",
+        description: "Veuillez entrer une requête SQL",
+      });
+      return;
+    }
+    executeSqlMutation.mutate(sqlQuery);
+  };
+
+  const handleDownloadResult = () => {
+    if (!queryResult?.result) return;
+    
+    const json = JSON.stringify(queryResult.result, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `sql-result-${Date.now()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const insertTable = (tableName: string) => {
+    setSqlQuery(`SELECT * FROM ${tableName} LIMIT 10;`);
+  };
+
+  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-6 space-y-6">
+          <div>
+            <h1 className="text-3xl font-bold flex items-center gap-2">
+              <Database className="w-8 h-8" />
+              Administration SQL
+            </h1>
+            <p className="text-muted-foreground mt-2">
+              Exécutez des requêtes SQL et gérez votre base de données
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+            {/* Liste des tables */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Tables disponibles</CardTitle>
+                <CardDescription>
+                  Cliquez pour insérer dans la requête
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  {(tablesData as any)?.tables?.map((table: any) => (
+                    <Button
+                      key={table.tablename}
+                      variant="outline"
+                      className="w-full justify-start text-left"
+                      onClick={() => insertTable(table.tablename)}
+                      data-testid={`button-table-${table.tablename}`}
+                    >
+                      <Database className="w-4 h-4 mr-2" />
+                      {table.tablename}
+                    </Button>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Éditeur SQL et résultats */}
+            <div className="lg:col-span-3 space-y-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Éditeur SQL</CardTitle>
+                  <CardDescription>
+                    Entrez votre requête SQL ci-dessous
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <Textarea
+                    placeholder="SELECT * FROM users LIMIT 10;"
+                    value={sqlQuery}
+                    onChange={(e) => setSqlQuery(e.target.value)}
+                    className="font-mono min-h-[200px]"
+                    data-testid="textarea-sql-query"
+                  />
+                  
+                  <div className="flex gap-2">
+                    <Button
+                      onClick={handleExecuteQuery}
+                      disabled={executeSqlMutation.isPending}
+                      data-testid="button-execute-sql"
+                    >
+                      <Play className="w-4 h-4 mr-2" />
+                      {executeSqlMutation.isPending ? "Exécution..." : "Exécuter"}
+                    </Button>
+                    
+                    <Button
+                      variant="outline"
+                      onClick={() => setSqlQuery("")}
+                      data-testid="button-clear-sql"
+                    >
+                      Effacer
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Résultats */}
+              {queryResult && (
+                <Card>
+                  <CardHeader>
+                    <div className="flex justify-between items-center">
+                      <div>
+                        <CardTitle>Résultats</CardTitle>
+                        <CardDescription>
+                          {queryResult.success ? "Requête exécutée avec succès" : "Erreur lors de l'exécution"}
+                        </CardDescription>
+                      </div>
+                      {queryResult.success && queryResult.result && (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={handleDownloadResult}
+                          data-testid="button-download-result"
+                        >
+                          <Download className="w-4 h-4 mr-2" />
+                          Télécharger JSON
+                        </Button>
+                      )}
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    {queryResult.success ? (
+                      <div className="overflow-x-auto">
+                        {Array.isArray(queryResult.result) && queryResult.result.length > 0 ? (
+                          <Table>
+                            <TableHeader>
+                              <TableRow>
+                                {Object.keys(queryResult.result[0]).map((key) => (
+                                  <TableHead key={key}>{key}</TableHead>
+                                ))}
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              {queryResult.result.map((row: any, idx: number) => (
+                                <TableRow key={idx}>
+                                  {Object.values(row).map((value: any, cellIdx: number) => (
+                                    <TableCell key={cellIdx} className="font-mono text-xs">
+                                      {value === null ? (
+                                        <span className="text-muted-foreground italic">null</span>
+                                      ) : typeof value === 'object' ? (
+                                        JSON.stringify(value)
+                                      ) : (
+                                        String(value)
+                                      )}
+                                    </TableCell>
+                                  ))}
+                                </TableRow>
+                              ))}
+                            </TableBody>
+                          </Table>
+                        ) : (
+                          <pre className="bg-muted p-4 rounded-lg overflow-auto max-h-96">
+                            <code>{JSON.stringify(queryResult.result, null, 2)}</code>
+                          </pre>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="bg-destructive/10 border border-destructive/20 text-destructive p-4 rounded-lg">
+                        <p className="font-semibold">Erreur :</p>
+                        <p className="font-mono text-sm mt-2">{queryResult.error}</p>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/client/src/pages/users-admin.tsx b/client/src/pages/users-admin.tsx
new file mode 100644
index 0000000..2f02c88
--- /dev/null
+++ b/client/src/pages/users-admin.tsx
@@ -0,0 +1,199 @@
+import { useState } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import Sidebar from "@/components/sidebar";
+import TopBar from "@/components/topbar";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { Users, UserPlus } from "lucide-react";
+
+export default function UsersAdmin() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const { toast } = useToast();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [role, setRole] = useState<"admin" | "user">("user");
+
+  // Mutation pour créer un utilisateur
+  const createUserMutation = useMutation({
+    mutationFn: async (userData: { username: string; password: string; role: string }) => {
+      const res = await apiRequest("POST", "/api/users", userData);
+      return await res.json();
+    },
+    onSuccess: (data) => {
+      toast({
+        title: "Utilisateur créé",
+        description: `L'utilisateur ${data.username} a été créé avec succès`,
+      });
+      // Réinitialiser le formulaire
+      setUsername("");
+      setPassword("");
+      setRole("user");
+    },
+    onError: (error: any) => {
+      toast({
+        variant: "destructive",
+        title: "Erreur",
+        description: error.message || "Erreur lors de la création de l'utilisateur",
+      });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!username || !password) {
+      toast({
+        variant: "destructive",
+        title: "Erreur",
+        description: "Veuillez remplir tous les champs",
+      });
+      return;
+    }
+
+    if (password.length < 4) {
+      toast({
+        variant: "destructive",
+        title: "Erreur",
+        description: "Le mot de passe doit contenir au moins 4 caractères",
+      });
+      return;
+    }
+
+    createUserMutation.mutate({ username, password, role });
+  };
+
+  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-6 space-y-6">
+          <div>
+            <h1 className="text-3xl font-bold flex items-center gap-2">
+              <Users className="w-8 h-8" />
+              Gestion des utilisateurs
+            </h1>
+            <p className="text-muted-foreground mt-2">
+              Créez et gérez les utilisateurs de l'application
+            </p>
+          </div>
+
+          <div className="max-w-2xl">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <UserPlus className="w-5 h-5" />
+                  Créer un nouvel utilisateur
+                </CardTitle>
+                <CardDescription>
+                  Seuls les administrateurs peuvent créer des utilisateurs
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="username">Nom d'utilisateur</Label>
+                    <Input
+                      id="username"
+                      type="text"
+                      placeholder="utilisateur123"
+                      value={username}
+                      onChange={(e) => setUsername(e.target.value)}
+                      required
+                      data-testid="input-new-username"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="password">Mot de passe</Label>
+                    <Input
+                      id="password"
+                      type="password"
+                      placeholder="••••••••"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      required
+                      data-testid="input-new-password"
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      Minimum 4 caractères
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="role">Rôle</Label>
+                    <Select value={role} onValueChange={(value: "admin" | "user") => setRole(value)}>
+                      <SelectTrigger id="role" data-testid="select-user-role">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="user">Utilisateur</SelectItem>
+                        <SelectItem value="admin">Administrateur</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <p className="text-xs text-muted-foreground">
+                      Les administrateurs ont accès à tous les paramètres et à la gestion SQL
+                    </p>
+                  </div>
+
+                  <Button
+                    type="submit"
+                    className="w-full"
+                    disabled={createUserMutation.isPending}
+                    data-testid="button-create-user"
+                  >
+                    {createUserMutation.isPending ? "Création en cours..." : "Créer l'utilisateur"}
+                  </Button>
+                </form>
+              </CardContent>
+            </Card>
+
+            <Card className="mt-6">
+              <CardHeader>
+                <CardTitle>Commandes SQL utiles</CardTitle>
+                <CardDescription>
+                  Utilisez ces commandes dans l'onglet SQL pour gérer les utilisateurs
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="bg-muted p-4 rounded-lg">
+                  <p className="text-sm font-semibold mb-2">Voir tous les utilisateurs :</p>
+                  <code className="text-xs">SELECT id, username, role FROM users;</code>
+                </div>
+                
+                <div className="bg-muted p-4 rounded-lg">
+                  <p className="text-sm font-semibold mb-2">Changer le rôle d'un utilisateur :</p>
+                  <code className="text-xs">UPDATE users SET role = 'admin' WHERE username = 'nom_utilisateur';</code>
+                </div>
+                
+                <div className="bg-muted p-4 rounded-lg">
+                  <p className="text-sm font-semibold mb-2">Supprimer un utilisateur :</p>
+                  <code className="text-xs">DELETE FROM users WHERE username = 'nom_utilisateur';</code>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/init.sql b/init.sql
new file mode 100644
index 0000000..6ef5940
--- /dev/null
+++ b/init.sql
@@ -0,0 +1,39 @@
+-- Script d'initialisation de la base de données Social Flow
+-- Ce fichier contient les commandes SQL pour créer les tables et l'utilisateur admin par défaut
+
+-- Créer l'enum pour les rôles utilisateur (si pas déjà créé par drizzle-kit push)
+DO $$ BEGIN
+  CREATE TYPE user_role AS ENUM ('admin', 'user');
+EXCEPTION
+  WHEN duplicate_object THEN null;
+END $$;
+
+-- Créer l'utilisateur admin par défaut (username: admin, password: admin)
+-- Note: Le hash bcrypt pour "admin" est généré avec un salt de 10
+INSERT INTO users (id, username, password, role) 
+VALUES (
+  'admin-user-id',
+  'admin',
+  '$2b$10$mw7B1qBoTxxT7BT.Mv9uTeExX27y5nPVN4/e6L7W1VqkTNe/tGw9G',
+  'admin'
+) ON CONFLICT (username) DO NOTHING;
+
+-- Créer un utilisateur demo pour les tests
+INSERT INTO users (id, username, password, role) 
+VALUES (
+  'demo-user',
+  'demo',
+  '$2b$10$mw7B1qBoTxxT7BT.Mv9uTeExX27y5nPVN4/e6L7W1VqkTNe/tGw9G',
+  'user'
+) ON CONFLICT (username) DO NOTHING;
+
+-- Liste des tables créées automatiquement par Drizzle ORM :
+-- - users (utilisateurs avec rôles)
+-- - social_pages (pages Facebook/Instagram connectées)
+-- - cloudinary_config (configuration Cloudinary par utilisateur)
+-- - openrouter_config (configuration OpenRouter par utilisateur)
+-- - media (fichiers médias stockés dans Cloudinary)
+-- - posts (publications créées)
+-- - scheduled_posts (publications programmées)
+-- - ai_generations (historique des générations IA)
+-- - post_media (relation many-to-many entre posts et media)
diff --git a/package-lock.json b/package-lock.json
index b4f2e73..9961c5f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,9 +40,11 @@
         "@radix-ui/react-toggle-group": "^1.1.3",
         "@radix-ui/react-tooltip": "^1.2.0",
         "@tanstack/react-query": "^5.60.5",
+        "@types/bcrypt": "^6.0.0",
         "@types/multer": "^2.0.0",
         "@types/node-cron": "^3.0.11",
         "@types/pg": "^8.15.5",
+        "bcrypt": "^6.0.0",
         "class-variance-authority": "^0.7.1",
         "cloudinary": "^2.7.0",
         "clsx": "^2.1.1",
@@ -3862,6 +3864,15 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/bcrypt": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-6.0.0.tgz",
+      "integrity": "sha512-/oJGukuH3D2+D+3H4JWLaAsJ/ji86dhRidzZ/Od7H/i8g+aCmvkeCc6Ni/f9uxGLSQVCRZkX2/lqEFG2BvWtlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.5",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
@@ -4308,6 +4319,20 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/bcrypt": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-6.0.0.tgz",
+      "integrity": "sha512-cU8v/EGSrnH+HnxV2z0J7/blxH8gq7Xh2JFT6Aroax7UohdmiJJlxApMxtKfuI7z68NvvVcmR78k2LbT6efhRg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "node-addon-api": "^8.3.0",
+        "node-gyp-build": "^4.8.4"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -6474,6 +6499,15 @@
         "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-8.5.0.tgz",
+      "integrity": "sha512-/bRZty2mXUIFY/xU5HLvveNHlswNJej+RnxBjOMkidWfwZzgTbPG1E3K5TOxRLOR+5hX7bSofy8yf1hZevMS8A==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18 || ^20 || >= 21"
+      }
+    },
     "node_modules/node-cron": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/node-cron/-/node-cron-4.2.1.tgz",
@@ -6484,11 +6518,10 @@
       }
     },
     "node_modules/node-gyp-build": {
-      "version": "4.8.3",
-      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.3.tgz",
-      "integrity": "sha512-EMS95CMJzdoSKoIiXo8pxKoL8DYxwIZXYlLmgPb8KUv794abpnLK6ynsCAWNliOjREKruYKdzbh76HHYUHX7nw==",
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
       "license": "MIT",
-      "optional": true,
       "bin": {
         "node-gyp-build": "bin.js",
         "node-gyp-build-optional": "optional.js",
diff --git a/package.json b/package.json
index 89788c2..fe661ff 100644
--- a/package.json
+++ b/package.json
@@ -42,9 +42,11 @@
     "@radix-ui/react-toggle-group": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.2.0",
     "@tanstack/react-query": "^5.60.5",
+    "@types/bcrypt": "^6.0.0",
     "@types/multer": "^2.0.0",
     "@types/node-cron": "^3.0.11",
     "@types/pg": "^8.15.5",
+    "bcrypt": "^6.0.0",
     "class-variance-authority": "^0.7.1",
     "cloudinary": "^2.7.0",
     "clsx": "^2.1.1",
diff --git a/server/auth.ts b/server/auth.ts
new file mode 100644
index 0000000..7d35fcc
--- /dev/null
+++ b/server/auth.ts
@@ -0,0 +1,45 @@
+import passport from "passport";
+import { Strategy as LocalStrategy } from "passport-local";
+import bcrypt from "bcrypt";
+import { storage } from "./storage";
+import type { User } from "@shared/schema";
+
+// Configuration de la stratégie locale
+passport.use(
+  new LocalStrategy(async (username, password, done) => {
+    try {
+      const user = await storage.getUserByUsername(username);
+      
+      if (!user) {
+        return done(null, false, { message: "Nom d'utilisateur ou mot de passe incorrect" });
+      }
+
+      const isValidPassword = await bcrypt.compare(password, user.password);
+      
+      if (!isValidPassword) {
+        return done(null, false, { message: "Nom d'utilisateur ou mot de passe incorrect" });
+      }
+
+      return done(null, user);
+    } catch (error) {
+      return done(error);
+    }
+  })
+);
+
+// Sérialisation de l'utilisateur pour la session
+passport.serializeUser((user: Express.User, done) => {
+  done(null, (user as User).id);
+});
+
+// Désérialisation de l'utilisateur depuis la session
+passport.deserializeUser(async (id: string, done) => {
+  try {
+    const user = await storage.getUser(id);
+    done(null, user);
+  } catch (error) {
+    done(error);
+  }
+});
+
+export default passport;
diff --git a/server/index.ts b/server/index.ts
index 22e3c13..7f5ab2a 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -1,4 +1,6 @@
 import express, { type Request, Response, NextFunction } from "express";
+import session from "express-session";
+import passport from "./auth";
 import { registerRoutes } from "./routes";
 import { setupVite, serveStatic, log } from "./vite";
 import { schedulerService } from "./services/scheduler";
@@ -17,6 +19,26 @@ app.use(express.json({
 }));
 app.use(express.urlencoded({ extended: false }));
 
+// Configuration des sessions
+if (!process.env.SESSION_SECRET) {
+  console.warn('⚠️ SESSION_SECRET non défini. Utilisation d\'une clé par défaut (NON SÉCURISÉ en production)');
+}
+app.use(session({
+  secret: process.env.SESSION_SECRET || 'your-secret-key-change-me',
+  resave: false,
+  saveUninitialized: false,
+  cookie: {
+    secure: process.env.NODE_ENV === 'production',
+    httpOnly: true,
+    sameSite: 'lax',
+    maxAge: 7 * 24 * 60 * 60 * 1000, // 7 jours
+  }
+}));
+
+// Initialisation de Passport
+app.use(passport.initialize());
+app.use(passport.session());
+
 app.use((req, res, next) => {
   const start = Date.now();
   const path = req.path;
diff --git a/server/routes.ts b/server/routes.ts
index 9fdf8ab..ba89c3c 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -1,20 +1,180 @@
-import type { Express } from "express";
+import type { Express, Request, Response, NextFunction } from "express";
 import { createServer, type Server } from "http";
 import { storage } from "./storage";
 import multer from "multer";
+import bcrypt from "bcrypt";
+import passport from "./auth";
+import { z } from "zod";
 import { openRouterService } from "./services/openrouter";
 import { cloudinaryService } from "./services/cloudinary";
-import { insertPostSchema, insertScheduledPostSchema, insertSocialPageSchema, insertAiGenerationSchema, insertCloudinaryConfigSchema, insertOpenrouterConfigSchema } from "@shared/schema";
+import { insertPostSchema, insertScheduledPostSchema, insertSocialPageSchema, insertAiGenerationSchema, insertCloudinaryConfigSchema, insertOpenrouterConfigSchema, insertUserSchema } from "@shared/schema";
+import type { User } from "@shared/schema";
 
 const upload = multer({ storage: multer.memoryStorage() });
 
+// Middleware pour vérifier l'authentification
+function requireAuth(req: Request, res: Response, next: NextFunction) {
+  if (!req.isAuthenticated()) {
+    return res.status(401).json({ error: "Non authentifié" });
+  }
+  next();
+}
+
+// Middleware pour vérifier le rôle admin
+function requireAdmin(req: Request, res: Response, next: NextFunction) {
+  if (!req.isAuthenticated()) {
+    return res.status(401).json({ error: "Non authentifié" });
+  }
+  const user = req.user as User;
+  if (user.role !== "admin") {
+    return res.status(403).json({ error: "Accès refusé. Réservé aux administrateurs." });
+  }
+  next();
+}
+
 export async function registerRoutes(app: Express): Promise<Server> {
 
-  // Stats endpoint
-  app.get("/api/stats", async (req, res) => {
+  // Routes d'authentification
+  app.post("/api/auth/login", (req, res, next) => {
+    passport.authenticate("local", (err: any, user: User | false, info: any) => {
+      if (err) {
+        return next(err);
+      }
+      if (!user) {
+        return res.status(401).json({ error: info?.message || "Authentification échouée" });
+      }
+      req.logIn(user, (err) => {
+        if (err) {
+          return next(err);
+        }
+        return res.json({
+          id: user.id,
+          username: user.username,
+          role: user.role,
+        });
+      });
+    })(req, res, next);
+  });
+
+  app.post("/api/auth/logout", (req, res) => {
+    req.logout((err) => {
+      if (err) {
+        return res.status(500).json({ error: "Erreur lors de la déconnexion" });
+      }
+      res.json({ message: "Déconnecté avec succès" });
+    });
+  });
+
+  app.get("/api/auth/session", (req, res) => {
+    if (req.isAuthenticated()) {
+      const user = req.user as User;
+      res.json({
+        id: user.id,
+        username: user.username,
+        role: user.role,
+      });
+    } else {
+      res.status(401).json({ error: "Non authentifié" });
+    }
+  });
+
+  // Route pour créer un nouvel utilisateur (réservée aux admins)
+  app.post("/api/users", requireAdmin, async (req, res) => {
     try {
-      // For now, return mock stats. In a real app, calculate from database
-      const userId = "demo-user"; // In real app, get from session/auth
+      // Validation Zod
+      const createUserSchema = insertUserSchema.extend({
+        username: insertUserSchema.shape.username.min(3, "Le nom d'utilisateur doit contenir au moins 3 caractères"),
+        password: insertUserSchema.shape.password.min(4, "Le mot de passe doit contenir au moins 4 caractères"),
+      });
+
+      const validatedData = createUserSchema.parse(req.body);
+
+      // Vérifier si l'utilisateur existe déjà
+      const existingUser = await storage.getUserByUsername(validatedData.username);
+      if (existingUser) {
+        return res.status(409).json({ error: "Ce nom d'utilisateur existe déjà" });
+      }
+
+      // Hasher le mot de passe
+      const hashedPassword = await bcrypt.hash(validatedData.password, 10);
+
+      const newUser = await storage.createUser({
+        username: validatedData.username,
+        password: hashedPassword,
+        role: validatedData.role || "user",
+      });
+
+      res.json({
+        id: newUser.id,
+        username: newUser.username,
+        role: newUser.role,
+      });
+    } catch (error: any) {
+      console.error("Error creating user:", error);
+      if (error.name === 'ZodError') {
+        return res.status(400).json({ error: error.errors[0]?.message || "Données invalides" });
+      }
+      res.status(500).json({ error: "Erreur lors de la création de l'utilisateur" });
+    }
+  });
+
+  // Route SQL (réservée aux admins)
+  app.post("/api/sql/execute", requireAdmin, async (req, res) => {
+    try {
+      // Validation Zod
+      const sqlQuerySchema = z.object({
+        query: z.string().min(1, "La requête SQL ne peut pas être vide"),
+      });
+
+      const validatedData = sqlQuerySchema.parse(req.body);
+
+      const { db } = await import("./db");
+      const result = await db.execute(validatedData.query);
+      
+      res.json({
+        success: true,
+        result,
+      });
+    } catch (error: any) {
+      console.error("Error executing SQL:", error);
+      if (error.name === 'ZodError') {
+        return res.status(400).json({
+          success: false,
+          error: error.errors[0]?.message || "Données invalides",
+        });
+      }
+      res.status(500).json({
+        success: false,
+        error: error.message || "Erreur lors de l'exécution de la requête SQL",
+      });
+    }
+  });
+
+  // Route pour obtenir la liste des tables (réservée aux admins)
+  app.get("/api/sql/tables", requireAdmin, async (req, res) => {
+    try {
+      const { db } = await import("./db");
+      const result = await db.execute<{ tablename: string }>(
+        `SELECT tablename FROM pg_tables WHERE schemaname = 'public' ORDER BY tablename;`
+      );
+      
+      res.json({
+        tables: result.rows || result,
+      });
+    } catch (error: any) {
+      console.error("Error fetching tables:", error);
+      res.status(500).json({
+        error: error.message || "Erreur lors de la récupération des tables",
+      });
+    }
+  });
+
+
+  // Stats endpoint
+  app.get("/api/stats", requireAuth, async (req, res) => {
+    try {
+      const user = req.user as User;
+      const userId = user.id;
       
       const posts = await storage.getPosts(userId);
       const pages = await storage.getSocialPages(userId);
@@ -36,10 +196,11 @@ export async function registerRoutes(app: Express): Promise<Server> {
   });
 
   // AI text generation
-  app.post("/api/ai/generate", async (req, res) => {
+  app.post("/api/ai/generate", requireAuth, async (req, res) => {
     try {
+      const user = req.user as User;
+      const userId = user.id;
       const productInfo = req.body;
-      const userId = "demo-user"; // In real app, get from session/auth
 
       const generatedTexts = await openRouterService.generatePostText(productInfo, userId);
 
@@ -58,13 +219,14 @@ export async function registerRoutes(app: Express): Promise<Server> {
   });
 
   // Media upload
-  app.post("/api/media/upload", upload.single("file"), async (req, res) => {
+  app.post("/api/media/upload", requireAuth, upload.single("file"), async (req, res) => {
     try {
       if (!req.file) {
         return res.status(400).json({ error: "No file uploaded" });
       }
 
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
 
       // Check if Cloudinary is configured
       const cloudinaryConfig = await storage.getCloudinaryConfig(userId);
@@ -104,9 +266,10 @@ export async function registerRoutes(app: Express): Promise<Server> {
   });
 
   // Get media
-  app.get("/api/media", async (req, res) => {
+  app.get("/api/media", requireAuth, async (req, res) => {
     try {
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
       const media = await storage.getMedia(userId);
       res.json(media);
     } catch (error) {
@@ -116,9 +279,10 @@ export async function registerRoutes(app: Express): Promise<Server> {
   });
 
   // Delete media
-  app.delete("/api/media/:id", async (req, res) => {
+  app.delete("/api/media/:id", requireAuth, async (req, res) => {
     try {
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
       const mediaId = req.params.id;
       
       // Get media to find cloudinary public ID
@@ -149,9 +313,10 @@ export async function registerRoutes(app: Express): Promise<Server> {
   });
 
   // Posts
-  app.get("/api/posts", async (req, res) => {
+  app.get("/api/posts", requireAuth, async (req, res) => {
     try {
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
       const posts = await storage.getPosts(userId);
       res.json(posts);
     } catch (error) {
@@ -160,9 +325,10 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
-  app.post("/api/posts", async (req, res) => {
+  app.post("/api/posts", requireAuth, async (req, res) => {
     try {
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
       const postData = insertPostSchema.parse({ ...req.body, userId });
       const post = await storage.createPost(postData);
       res.json(post);
@@ -173,9 +339,10 @@ export async function registerRoutes(app: Express): Promise<Server> {
   });
 
   // Scheduled posts
-  app.get("/api/scheduled-posts", async (req, res) => {
+  app.get("/api/scheduled-posts", requireAuth, async (req, res) => {
     try {
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
       const { startDate, endDate } = req.query;
       
       const start = startDate ? new Date(startDate as string) : undefined;
@@ -189,7 +356,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
-  app.post("/api/scheduled-posts", async (req, res) => {
+  app.post("/api/scheduled-posts", requireAuth, async (req, res) => {
     try {
       const scheduledPostData = insertScheduledPostSchema.parse(req.body);
       const scheduledPost = await storage.createScheduledPost(scheduledPostData);
@@ -201,9 +368,10 @@ export async function registerRoutes(app: Express): Promise<Server> {
   });
 
   // Social pages
-  app.get("/api/pages", async (req, res) => {
+  app.get("/api/pages", requireAuth, async (req, res) => {
     try {
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
       const pages = await storage.getSocialPages(userId);
       res.json(pages);
     } catch (error) {
@@ -212,9 +380,10 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
-  app.post("/api/pages", async (req, res) => {
+  app.post("/api/pages", requireAuth, async (req, res) => {
     try {
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
       const pageData = insertSocialPageSchema.parse({ ...req.body, userId });
       const page = await storage.createSocialPage(pageData);
       res.json(page);
@@ -225,9 +394,10 @@ export async function registerRoutes(app: Express): Promise<Server> {
   });
 
   // AI Generations
-  app.get("/api/ai/generations", async (req, res) => {
+  app.get("/api/ai/generations", requireAuth, async (req, res) => {
     try {
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
       const generations = await storage.getAiGenerations(userId);
       res.json(generations);
     } catch (error) {
@@ -237,9 +407,10 @@ export async function registerRoutes(app: Express): Promise<Server> {
   });
 
   // Cloudinary Config
-  app.get("/api/cloudinary/config", async (req, res) => {
+  app.get("/api/cloudinary/config", requireAdmin, async (req, res) => {
     try {
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
       const config = await storage.getCloudinaryConfig(userId);
       
       if (!config) {
@@ -255,9 +426,10 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
-  app.post("/api/cloudinary/config", async (req, res) => {
+  app.post("/api/cloudinary/config", requireAdmin, async (req, res) => {
     try {
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
       
       const configData = insertCloudinaryConfigSchema.parse({
         ...req.body,
@@ -284,7 +456,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
   });
 
   // OpenRouter models list
-  app.get("/api/openrouter/models", async (req, res) => {
+  app.get("/api/openrouter/models", requireAuth, async (req, res) => {
     try {
       const response = await fetch("https://openrouter.ai/api/v1/models", {
         headers: {
@@ -305,9 +477,10 @@ export async function registerRoutes(app: Express): Promise<Server> {
   });
 
   // OpenRouter configuration
-  app.get("/api/openrouter/config", async (req, res) => {
+  app.get("/api/openrouter/config", requireAdmin, async (req, res) => {
     try {
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
       const config = await storage.getOpenrouterConfig(userId);
       
       if (!config) {
@@ -323,9 +496,10 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
-  app.post("/api/openrouter/config", async (req, res) => {
+  app.post("/api/openrouter/config", requireAdmin, async (req, res) => {
     try {
-      const userId = "demo-user"; // In real app, get from session/auth
+      const user = req.user as User;
+      const userId = user.id;
       
       const configData = insertOpenrouterConfigSchema.parse({
         ...req.body,
diff --git a/shared/schema.ts b/shared/schema.ts
index b07c9af..3a9e231 100644
--- a/shared/schema.ts
+++ b/shared/schema.ts
@@ -8,11 +8,13 @@ export const platformEnum = pgEnum("platform", ["facebook", "instagram"]);
 export const postTypeEnum = pgEnum("post_type", ["feed", "story"]);
 export const postStatusEnum = pgEnum("post_status", ["draft", "scheduled", "published", "failed"]);
 export const mediaTypeEnum = pgEnum("media_type", ["image", "video"]);
+export const userRoleEnum = pgEnum("user_role", ["admin", "user"]);
 
 export const users = pgTable("users", {
   id: varchar("id").primaryKey().default(sql`gen_random_uuid()`),
   username: text("username").notNull().unique(),
   password: text("password").notNull(),
+  role: userRoleEnum("role").notNull().default("user"),
 });
 
 export const socialPages = pgTable("social_pages", {
@@ -181,6 +183,7 @@ export const aiGenerationsRelations = relations(aiGenerations, ({ one }) => ({
 export const insertUserSchema = createInsertSchema(users).pick({
   username: true,
   password: true,
+  role: true,
 });
 
 export const insertSocialPageSchema = createInsertSchema(socialPages).omit({

From 14b4960e324e2e5ae398107e5e368a7fde275a28 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 1 Oct 2025 16:49:04 +0000
Subject: [PATCH 05/12] Improve user management and authentication system for
 better security

Implement user roles (admin/user), role-based route protection, and update API endpoints for authentication and user management.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/HPCBgsr
---
 replit.md | 46 +++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/replit.md b/replit.md
index 17103d5..50e51ee 100644
--- a/replit.md
+++ b/replit.md
@@ -18,13 +18,40 @@ Social Flow is a comprehensive social media automation platform designed to stre
 
 Preferred communication style: Simple, everyday language.
 
+## Authentication & Authorization
+
+**System**: Passport.js avec stratégie locale et bcrypt pour le hachage des mots de passe
+
+**Rôles utilisateur**:
+- `admin` - Accès complet à tous les paramètres, SQL, et gestion des utilisateurs
+- `user` - Accès aux fonctionnalités de publication uniquement (pas de paramètres)
+
+**Utilisateur par défaut**:
+- Username: `admin`
+- Password: `admin`
+- Rôle: admin
+- **Important**: Changez ce mot de passe en production
+
+**Session Management**:
+- express-session avec cookies HTTP-only
+- sameSite: 'lax' pour prévention CSRF
+- Durée de session: 7 jours
+- Secret de session via variable d'environnement `SESSION_SECRET`
+
+**Protection des routes**:
+- Backend: Middleware `requireAuth` pour routes utilisateur, `requireAdmin` pour routes admin
+- Frontend: Composant `ProtectedRoute` avec vérification de session et redirection vers /login
+
 ## System Architecture
 
 ### Frontend Architecture
 
 **Framework**: React with TypeScript using Vite as the build tool
 
-**Routing**: Wouter for lightweight client-side routing
+**Routing**: Wouter for lightweight client-side routing with protected routes
+- Public: `/login`
+- Protected (authenticated): Dashboard, Media, AI, Posts, Calendar, Pages, Analytics, History
+- Protected (admin only): `/settings`, `/sql`, `/users`
 
 **State Management**: 
 - TanStack Query (React Query) for server state management and caching
@@ -49,11 +76,16 @@ Preferred communication style: Simple, everyday language.
 **Type Safety**: Full TypeScript implementation across frontend, backend, and shared schema
 
 **API Design**: RESTful endpoints with conventional HTTP methods
-- `/api/stats` - Dashboard statistics
-- `/api/ai/generate` - AI text generation
-- `/api/media/*` - Media upload and management
-- `/api/pages/*` - Social page management
-- `/api/posts/*` - Post and scheduling management
+- `/api/auth/*` - Authentication (login, logout, session)
+- `/api/users` - User management (admin only)
+- `/api/sql/*` - SQL administration (admin only)
+- `/api/stats` - Dashboard statistics (authenticated)
+- `/api/ai/generate` - AI text generation (authenticated)
+- `/api/media/*` - Media upload and management (authenticated)
+- `/api/pages/*` - Social page management (authenticated)
+- `/api/posts/*` - Post and scheduling management (authenticated)
+- `/api/cloudinary/config` - Cloudinary configuration (admin only)
+- `/api/openrouter/config` - OpenRouter configuration (admin only)
 
 **File Upload**: Multer middleware for handling multipart/form-data with in-memory storage strategy, integrated with Cloudinary for cloud storage
 
@@ -79,7 +111,7 @@ Preferred communication style: Simple, everyday language.
 **Schema Design**:
 
 Core Tables:
-- `users` - User authentication and profiles
+- `users` - User authentication and profiles with role-based access (admin/user)
 - `cloudinary_config` - Cloudinary configuration per user (cloud name, API key, API secret)
 - `social_pages` - Connected Facebook/Instagram pages with access tokens
 - `media` - Uploaded media files with Cloudinary public IDs and transformation URLs

From ebc581e01538cbf33f3a4837e1568f402f826e1e Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 1 Oct 2025 16:52:49 +0000
Subject: [PATCH 06/12] Transitioned from Plan to Build mode

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

From f6d82f67ba5eb97b874bdbd0aae571ae2a04895a Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 1 Oct 2025 17:00:09 +0000
Subject: [PATCH 07/12] Add user management features for administrators to
 control accounts

Implement CRUD operations for users, including listing, creating, editing, and deleting users, along with updates to authentication and UI components.

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/HPCBgsr
---
 .replit                           |   4 +
 client/src/components/sidebar.tsx |   8 +-
 client/src/pages/login.tsx        |  29 +-
 client/src/pages/users-admin.tsx  | 437 +++++++++++++++++++++++-------
 server/routes.ts                  | 115 +++++++-
 server/storage.ts                 |  16 ++
 6 files changed, 507 insertions(+), 102 deletions(-)

diff --git a/.replit b/.replit
index 3238a51..983a4bc 100644
--- a/.replit
+++ b/.replit
@@ -14,6 +14,10 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 46679
+externalPort = 3000
+
 [env]
 PORT = "5000"
 
diff --git a/client/src/components/sidebar.tsx b/client/src/components/sidebar.tsx
index 31ca9ac..657e772 100644
--- a/client/src/components/sidebar.tsx
+++ b/client/src/components/sidebar.tsx
@@ -11,12 +11,12 @@ export default function Sidebar() {
   const { toast } = useToast();
 
   // Charger la session utilisateur
-  const { data: session } = useQuery({
+  const { data: session } = useQuery<{ id: string; username: string; role: string }>({
     queryKey: ["/api/auth/session"],
     retry: false,
   });
 
-  const isAdmin = (session as any)?.role === "admin";
+  const isAdmin = session?.role === "admin";
 
   // Mutation pour déconnexion
   const logoutMutation = useMutation({
@@ -191,8 +191,8 @@ export default function Sidebar() {
         {session && (
           <div className="mt-4 px-4 py-3 bg-muted rounded-lg">
             <p className="text-xs text-muted-foreground">Connecté en tant que</p>
-            <p className="text-sm font-semibold truncate">{(session as any).username}</p>
-            <p className="text-xs text-muted-foreground capitalize">{(session as any).role}</p>
+            <p className="text-sm font-semibold truncate">{session.username}</p>
+            <p className="text-xs text-muted-foreground capitalize">{session.role}</p>
           </div>
         )}
       </div>
diff --git a/client/src/pages/login.tsx b/client/src/pages/login.tsx
index ab24eee..605242e 100644
--- a/client/src/pages/login.tsx
+++ b/client/src/pages/login.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useLocation } from "wouter";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -14,6 +14,22 @@ export default function Login() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [showDefaultPassword, setShowDefaultPassword] = useState(false);
+
+  // Vérifier si le mot de passe admin par défaut est toujours actif
+  useEffect(() => {
+    const checkDefaultPassword = async () => {
+      try {
+        const response = await fetch("/api/auth/default-password-status");
+        const data = await response.json();
+        setShowDefaultPassword(data.isDefault === true);
+      } catch (error) {
+        console.error("Error checking default password status:", error);
+      }
+    };
+
+    checkDefaultPassword();
+  }, []);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -102,10 +118,13 @@ export default function Login() {
             </Button>
           </form>
 
-          <div className="mt-6 text-center text-sm text-muted-foreground">
-            <p>Identifiants par défaut :</p>
-            <p>admin / admin</p>
-          </div>
+          {showDefaultPassword && (
+            <div className="mt-6 text-center text-sm text-muted-foreground">
+              <p>Identifiants par défaut :</p>
+              <p className="font-semibold">admin / admin</p>
+              <p className="text-xs mt-2 text-orange-500">⚠️ Changez ce mot de passe après la première connexion</p>
+            </div>
+          )}
         </CardContent>
       </Card>
     </div>
diff --git a/client/src/pages/users-admin.tsx b/client/src/pages/users-admin.tsx
index 2f02c88..a3af7d0 100644
--- a/client/src/pages/users-admin.tsx
+++ b/client/src/pages/users-admin.tsx
@@ -7,16 +7,44 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
-import { Users, UserPlus } from "lucide-react";
+import { Users, UserPlus, Pencil, Trash2, Shield, User as UserIcon } from "lucide-react";
+
+type UserData = {
+  id: string;
+  username: string;
+  role: "admin" | "user";
+};
 
 export default function UsersAdmin() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const { toast } = useToast();
+  
+  // Form states
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [role, setRole] = useState<"admin" | "user">("user");
+  
+  // Edit dialog states
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [editingUser, setEditingUser] = useState<UserData | null>(null);
+  const [editUsername, setEditUsername] = useState("");
+  const [editPassword, setEditPassword] = useState("");
+  const [editRole, setEditRole] = useState<"admin" | "user">("user");
+  
+  // Delete dialog states
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [userToDelete, setUserToDelete] = useState<UserData | null>(null);
+
+  // Charger la liste des utilisateurs
+  const { data: users, isLoading } = useQuery<UserData[]>({
+    queryKey: ["/api/users"],
+  });
 
   // Mutation pour créer un utilisateur
   const createUserMutation = useMutation({
@@ -29,10 +57,10 @@ export default function UsersAdmin() {
         title: "Utilisateur créé",
         description: `L'utilisateur ${data.username} a été créé avec succès`,
       });
-      // Réinitialiser le formulaire
       setUsername("");
       setPassword("");
       setRole("user");
+      queryClient.invalidateQueries({ queryKey: ["/api/users"] });
     },
     onError: (error: any) => {
       toast({
@@ -43,6 +71,54 @@ export default function UsersAdmin() {
     },
   });
 
+  // Mutation pour modifier un utilisateur
+  const updateUserMutation = useMutation({
+    mutationFn: async ({ id, data }: { id: string; data: any }) => {
+      const res = await apiRequest("PATCH", `/api/users/${id}`, data);
+      return await res.json();
+    },
+    onSuccess: (data) => {
+      toast({
+        title: "Utilisateur modifié",
+        description: `L'utilisateur ${data.username} a été modifié avec succès`,
+      });
+      setEditDialogOpen(false);
+      setEditingUser(null);
+      queryClient.invalidateQueries({ queryKey: ["/api/users"] });
+    },
+    onError: (error: any) => {
+      toast({
+        variant: "destructive",
+        title: "Erreur",
+        description: error.message || "Erreur lors de la modification de l'utilisateur",
+      });
+    },
+  });
+
+  // Mutation pour supprimer un utilisateur
+  const deleteUserMutation = useMutation({
+    mutationFn: async (id: string) => {
+      const res = await apiRequest("DELETE", `/api/users/${id}`, {});
+      return await res.json();
+    },
+    onSuccess: () => {
+      toast({
+        title: "Utilisateur supprimé",
+        description: "L'utilisateur a été supprimé avec succès",
+      });
+      setDeleteDialogOpen(false);
+      setUserToDelete(null);
+      queryClient.invalidateQueries({ queryKey: ["/api/users"] });
+    },
+    onError: (error: any) => {
+      toast({
+        variant: "destructive",
+        title: "Erreur",
+        description: error.message || "Erreur lors de la suppression de l'utilisateur",
+      });
+    },
+  });
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     
@@ -67,6 +143,54 @@ export default function UsersAdmin() {
     createUserMutation.mutate({ username, password, role });
   };
 
+  const handleEditClick = (user: UserData) => {
+    setEditingUser(user);
+    setEditUsername(user.username);
+    setEditPassword("");
+    setEditRole(user.role);
+    setEditDialogOpen(true);
+  };
+
+  const handleEditSubmit = () => {
+    if (!editingUser) return;
+
+    const updateData: any = {};
+    
+    if (editUsername !== editingUser.username) {
+      updateData.username = editUsername;
+    }
+    
+    if (editPassword) {
+      updateData.password = editPassword;
+    }
+    
+    if (editRole !== editingUser.role) {
+      updateData.role = editRole;
+    }
+
+    if (Object.keys(updateData).length === 0) {
+      toast({
+        variant: "destructive",
+        title: "Erreur",
+        description: "Aucune modification détectée",
+      });
+      return;
+    }
+
+    updateUserMutation.mutate({ id: editingUser.id, data: updateData });
+  };
+
+  const handleDeleteClick = (user: UserData) => {
+    setUserToDelete(user);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (userToDelete) {
+      deleteUserMutation.mutate(userToDelete.id);
+    }
+  };
+
   return (
     <div className="flex h-screen overflow-hidden bg-background">
       {sidebarOpen && (
@@ -97,103 +221,232 @@ export default function UsersAdmin() {
             </p>
           </div>
 
-          <div className="max-w-2xl">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <UserPlus className="w-5 h-5" />
-                  Créer un nouvel utilisateur
-                </CardTitle>
-                <CardDescription>
-                  Seuls les administrateurs peuvent créer des utilisateurs
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <form onSubmit={handleSubmit} className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="username">Nom d'utilisateur</Label>
-                    <Input
-                      id="username"
-                      type="text"
-                      placeholder="utilisateur123"
-                      value={username}
-                      onChange={(e) => setUsername(e.target.value)}
-                      required
-                      data-testid="input-new-username"
-                    />
-                  </div>
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            {/* Liste des utilisateurs */}
+            <div className="lg:col-span-2">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Liste des utilisateurs</CardTitle>
+                  <CardDescription>
+                    {users?.length || 0} utilisateur(s) enregistré(s)
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  {isLoading ? (
+                    <div className="text-center py-8">
+                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+                      <p className="text-muted-foreground mt-4">Chargement...</p>
+                    </div>
+                  ) : users && users.length > 0 ? (
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>Nom d'utilisateur</TableHead>
+                          <TableHead>Rôle</TableHead>
+                          <TableHead className="text-right">Actions</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {users.map((user) => (
+                          <TableRow key={user.id}>
+                            <TableCell className="font-medium flex items-center gap-2">
+                              {user.role === "admin" ? (
+                                <Shield className="w-4 h-4 text-primary" />
+                              ) : (
+                                <UserIcon className="w-4 h-4 text-muted-foreground" />
+                              )}
+                              {user.username}
+                            </TableCell>
+                            <TableCell>
+                              <Badge variant={user.role === "admin" ? "default" : "secondary"}>
+                                {user.role === "admin" ? "Administrateur" : "Utilisateur"}
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="text-right">
+                              <div className="flex justify-end gap-2">
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  onClick={() => handleEditClick(user)}
+                                  data-testid={`button-edit-user-${user.id}`}
+                                >
+                                  <Pencil className="w-4 h-4" />
+                                </Button>
+                                <Button
+                                  variant="destructive"
+                                  size="sm"
+                                  onClick={() => handleDeleteClick(user)}
+                                  data-testid={`button-delete-user-${user.id}`}
+                                >
+                                  <Trash2 className="w-4 h-4" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  ) : (
+                    <div className="text-center py-8">
+                      <p className="text-muted-foreground">Aucun utilisateur trouvé</p>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
 
-                  <div className="space-y-2">
-                    <Label htmlFor="password">Mot de passe</Label>
-                    <Input
-                      id="password"
-                      type="password"
-                      placeholder="••••••••"
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                      required
-                      data-testid="input-new-password"
-                    />
-                    <p className="text-xs text-muted-foreground">
-                      Minimum 4 caractères
-                    </p>
-                  </div>
+            {/* Formulaire de création */}
+            <div>
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <UserPlus className="w-5 h-5" />
+                    Créer un utilisateur
+                  </CardTitle>
+                  <CardDescription>
+                    Ajouter un nouvel utilisateur
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <form onSubmit={handleSubmit} className="space-y-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="username">Nom d'utilisateur</Label>
+                      <Input
+                        id="username"
+                        type="text"
+                        placeholder="utilisateur123"
+                        value={username}
+                        onChange={(e) => setUsername(e.target.value)}
+                        required
+                        data-testid="input-new-username"
+                      />
+                    </div>
 
-                  <div className="space-y-2">
-                    <Label htmlFor="role">Rôle</Label>
-                    <Select value={role} onValueChange={(value: "admin" | "user") => setRole(value)}>
-                      <SelectTrigger id="role" data-testid="select-user-role">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="user">Utilisateur</SelectItem>
-                        <SelectItem value="admin">Administrateur</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <p className="text-xs text-muted-foreground">
-                      Les administrateurs ont accès à tous les paramètres et à la gestion SQL
-                    </p>
-                  </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="password">Mot de passe</Label>
+                      <Input
+                        id="password"
+                        type="password"
+                        placeholder="••••••••"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        required
+                        data-testid="input-new-password"
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        Minimum 4 caractères
+                      </p>
+                    </div>
 
-                  <Button
-                    type="submit"
-                    className="w-full"
-                    disabled={createUserMutation.isPending}
-                    data-testid="button-create-user"
-                  >
-                    {createUserMutation.isPending ? "Création en cours..." : "Créer l'utilisateur"}
-                  </Button>
-                </form>
-              </CardContent>
-            </Card>
+                    <div className="space-y-2">
+                      <Label htmlFor="role">Rôle</Label>
+                      <Select value={role} onValueChange={(value: "admin" | "user") => setRole(value)}>
+                        <SelectTrigger id="role" data-testid="select-user-role">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="user">Utilisateur</SelectItem>
+                          <SelectItem value="admin">Administrateur</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
 
-            <Card className="mt-6">
-              <CardHeader>
-                <CardTitle>Commandes SQL utiles</CardTitle>
-                <CardDescription>
-                  Utilisez ces commandes dans l'onglet SQL pour gérer les utilisateurs
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="bg-muted p-4 rounded-lg">
-                  <p className="text-sm font-semibold mb-2">Voir tous les utilisateurs :</p>
-                  <code className="text-xs">SELECT id, username, role FROM users;</code>
-                </div>
-                
-                <div className="bg-muted p-4 rounded-lg">
-                  <p className="text-sm font-semibold mb-2">Changer le rôle d'un utilisateur :</p>
-                  <code className="text-xs">UPDATE users SET role = 'admin' WHERE username = 'nom_utilisateur';</code>
-                </div>
-                
-                <div className="bg-muted p-4 rounded-lg">
-                  <p className="text-sm font-semibold mb-2">Supprimer un utilisateur :</p>
-                  <code className="text-xs">DELETE FROM users WHERE username = 'nom_utilisateur';</code>
-                </div>
-              </CardContent>
-            </Card>
+                    <Button
+                      type="submit"
+                      className="w-full"
+                      disabled={createUserMutation.isPending}
+                      data-testid="button-create-user"
+                    >
+                      {createUserMutation.isPending ? "Création..." : "Créer"}
+                    </Button>
+                  </form>
+                </CardContent>
+              </Card>
+            </div>
           </div>
         </div>
       </main>
+
+      {/* Dialog de modification */}
+      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Modifier l'utilisateur</DialogTitle>
+            <DialogDescription>
+              Modifiez les informations de l'utilisateur. Laissez le mot de passe vide pour ne pas le changer.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="edit-username">Nom d'utilisateur</Label>
+              <Input
+                id="edit-username"
+                value={editUsername}
+                onChange={(e) => setEditUsername(e.target.value)}
+                data-testid="input-edit-username"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-password">Nouveau mot de passe (optionnel)</Label>
+              <Input
+                id="edit-password"
+                type="password"
+                placeholder="Laisser vide pour ne pas changer"
+                value={editPassword}
+                onChange={(e) => setEditPassword(e.target.value)}
+                data-testid="input-edit-password"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-role">Rôle</Label>
+              <Select value={editRole} onValueChange={(value: "admin" | "user") => setEditRole(value)}>
+                <SelectTrigger id="edit-role" data-testid="select-edit-role">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="user">Utilisateur</SelectItem>
+                  <SelectItem value="admin">Administrateur</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditDialogOpen(false)}>
+              Annuler
+            </Button>
+            <Button
+              onClick={handleEditSubmit}
+              disabled={updateUserMutation.isPending}
+              data-testid="button-save-edit"
+            >
+              {updateUserMutation.isPending ? "Enregistrement..." : "Enregistrer"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Dialog de confirmation de suppression */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Confirmer la suppression</AlertDialogTitle>
+            <AlertDialogDescription>
+              Êtes-vous sûr de vouloir supprimer l'utilisateur <strong>{userToDelete?.username}</strong> ?
+              Cette action est irréversible.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Annuler</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteConfirm}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              data-testid="button-confirm-delete"
+            >
+              {deleteUserMutation.isPending ? "Suppression..." : "Supprimer"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
diff --git a/server/routes.ts b/server/routes.ts
index ba89c3c..c5bfd81 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -8,7 +8,7 @@ import { z } from "zod";
 import { openRouterService } from "./services/openrouter";
 import { cloudinaryService } from "./services/cloudinary";
 import { insertPostSchema, insertScheduledPostSchema, insertSocialPageSchema, insertAiGenerationSchema, insertCloudinaryConfigSchema, insertOpenrouterConfigSchema, insertUserSchema } from "@shared/schema";
-import type { User } from "@shared/schema";
+import type { User, InsertUser } from "@shared/schema";
 
 const upload = multer({ storage: multer.memoryStorage() });
 
@@ -78,6 +78,25 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
+  // Route pour obtenir la liste de tous les utilisateurs (réservée aux admins)
+  app.get("/api/users", requireAdmin, async (req, res) => {
+    try {
+      const allUsers = await storage.getAllUsers();
+      
+      // Ne pas envoyer les mots de passe
+      const safeUsers = allUsers.map(user => ({
+        id: user.id,
+        username: user.username,
+        role: user.role,
+      }));
+      
+      res.json(safeUsers);
+    } catch (error) {
+      console.error("Error fetching users:", error);
+      res.status(500).json({ error: "Erreur lors de la récupération des utilisateurs" });
+    }
+  });
+
   // Route pour créer un nouvel utilisateur (réservée aux admins)
   app.post("/api/users", requireAdmin, async (req, res) => {
     try {
@@ -118,6 +137,100 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
+  // Route pour modifier un utilisateur (réservée aux admins)
+  app.patch("/api/users/:id", requireAdmin, async (req, res) => {
+    try {
+      const userId = req.params.id;
+      const { username, password, role } = req.body;
+      
+      // Vérifier si l'utilisateur existe
+      const existingUser = await storage.getUser(userId);
+      if (!existingUser) {
+        return res.status(404).json({ error: "Utilisateur non trouvé" });
+      }
+
+      const updateData: Partial<InsertUser> = {};
+      
+      if (username && username !== existingUser.username) {
+        // Vérifier si le nouveau username est déjà pris
+        const userWithSameUsername = await storage.getUserByUsername(username);
+        if (userWithSameUsername && userWithSameUsername.id !== userId) {
+          return res.status(409).json({ error: "Ce nom d'utilisateur est déjà utilisé" });
+        }
+        updateData.username = username;
+      }
+      
+      if (password) {
+        // Hasher le nouveau mot de passe
+        updateData.password = await bcrypt.hash(password, 10);
+      }
+      
+      if (role && (role === "admin" || role === "user")) {
+        updateData.role = role;
+      }
+
+      if (Object.keys(updateData).length === 0) {
+        return res.status(400).json({ error: "Aucune modification fournie" });
+      }
+
+      const updatedUser = await storage.updateUser(userId, updateData);
+      
+      res.json({
+        id: updatedUser.id,
+        username: updatedUser.username,
+        role: updatedUser.role,
+      });
+    } catch (error: any) {
+      console.error("Error updating user:", error);
+      res.status(500).json({ error: "Erreur lors de la modification de l'utilisateur" });
+    }
+  });
+
+  // Route pour supprimer un utilisateur (réservée aux admins)
+  app.delete("/api/users/:id", requireAdmin, async (req, res) => {
+    try {
+      const userId = req.params.id;
+      const currentUser = req.user as User;
+      
+      // Empêcher l'admin de se supprimer lui-même
+      if (userId === currentUser.id) {
+        return res.status(400).json({ error: "Vous ne pouvez pas supprimer votre propre compte" });
+      }
+
+      // Vérifier si l'utilisateur existe
+      const existingUser = await storage.getUser(userId);
+      if (!existingUser) {
+        return res.status(404).json({ error: "Utilisateur non trouvé" });
+      }
+
+      await storage.deleteUser(userId);
+      
+      res.json({ success: true, message: "Utilisateur supprimé avec succès" });
+    } catch (error: any) {
+      console.error("Error deleting user:", error);
+      res.status(500).json({ error: "Erreur lors de la suppression de l'utilisateur" });
+    }
+  });
+
+  // Route pour vérifier si le mot de passe admin par défaut a été changé
+  app.get("/api/auth/default-password-status", async (req, res) => {
+    try {
+      const adminUser = await storage.getUserByUsername("admin");
+      
+      if (!adminUser) {
+        return res.json({ isDefault: false });
+      }
+
+      // Vérifier si le mot de passe correspond à "admin"
+      const isDefaultPassword = await bcrypt.compare("admin", adminUser.password);
+      
+      res.json({ isDefault: isDefaultPassword });
+    } catch (error) {
+      console.error("Error checking default password:", error);
+      res.status(500).json({ error: "Erreur lors de la vérification" });
+    }
+  });
+
   // Route SQL (réservée aux admins)
   app.post("/api/sql/execute", requireAdmin, async (req, res) => {
     try {
diff --git a/server/storage.ts b/server/storage.ts
index d3485b2..4f5a9b1 100644
--- a/server/storage.ts
+++ b/server/storage.ts
@@ -31,7 +31,10 @@ export interface IStorage {
   // Users
   getUser(id: string): Promise<User | undefined>;
   getUserByUsername(username: string): Promise<User | undefined>;
+  getAllUsers(): Promise<User[]>;
   createUser(user: InsertUser): Promise<User>;
+  updateUser(id: string, user: Partial<InsertUser>): Promise<User>;
+  deleteUser(id: string): Promise<void>;
 
   // Social Pages
   getSocialPages(userId: string): Promise<SocialPage[]>;
@@ -88,11 +91,24 @@ export class DatabaseStorage implements IStorage {
     return user || undefined;
   }
 
+  async getAllUsers(): Promise<User[]> {
+    return await db.select().from(users);
+  }
+
   async createUser(insertUser: InsertUser): Promise<User> {
     const [user] = await db.insert(users).values(insertUser).returning();
     return user;
   }
 
+  async updateUser(id: string, updateData: Partial<InsertUser>): Promise<User> {
+    const [updated] = await db.update(users).set(updateData).where(eq(users.id, id)).returning();
+    return updated;
+  }
+
+  async deleteUser(id: string): Promise<void> {
+    await db.delete(users).where(eq(users.id, id));
+  }
+
   // Social Pages
   async getSocialPages(userId: string): Promise<SocialPage[]> {
     return await db.select().from(socialPages).where(eq(socialPages.userId, userId));

From 4182ed10e5d6eebe959542571cfd4203b94fcd1a Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 1 Oct 2025 17:06:11 +0000
Subject: [PATCH 08/12] Improve the display of publication dates in the social
 media planner

Update the date formatting logic to correctly display publication dates for scheduled posts.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/35Hxx7C
---
 .replit | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.replit b/.replit
index 983a4bc..c6bb5a0 100644
--- a/.replit
+++ b/.replit
@@ -14,6 +14,10 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 43245
+externalPort = 3001
+
 [[ports]]
 localPort = 46679
 externalPort = 3000

From 70dd8a4c87d94219ab68c700b1b1435ab3c331e5 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 2 Oct 2025 06:14:05 +0000
Subject: [PATCH 09/12] Improve configuration saving for AI models in settings

Update the OpenRouter configuration route to handle updates more gracefully, allowing API keys to remain unchanged if not explicitly provided.

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/35Hxx7C
---
 .replit          |  4 ----
 server/routes.ts | 26 +++++++++++++++++++-------
 shared/schema.ts |  4 ++++
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/.replit b/.replit
index c6bb5a0..55cb6c6 100644
--- a/.replit
+++ b/.replit
@@ -18,10 +18,6 @@ externalPort = 80
 localPort = 43245
 externalPort = 3001
 
-[[ports]]
-localPort = 46679
-externalPort = 3000
-
 [env]
 PORT = "5000"
 
diff --git a/server/routes.ts b/server/routes.ts
index c5bfd81..2a1bc0a 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -7,7 +7,7 @@ import passport from "./auth";
 import { z } from "zod";
 import { openRouterService } from "./services/openrouter";
 import { cloudinaryService } from "./services/cloudinary";
-import { insertPostSchema, insertScheduledPostSchema, insertSocialPageSchema, insertAiGenerationSchema, insertCloudinaryConfigSchema, insertOpenrouterConfigSchema, insertUserSchema } from "@shared/schema";
+import { insertPostSchema, insertScheduledPostSchema, insertSocialPageSchema, insertAiGenerationSchema, insertCloudinaryConfigSchema, insertOpenrouterConfigSchema, updateOpenrouterConfigSchema, insertUserSchema } from "@shared/schema";
 import type { User, InsertUser } from "@shared/schema";
 
 const upload = multer({ storage: multer.memoryStorage() });
@@ -614,18 +614,30 @@ export async function registerRoutes(app: Express): Promise<Server> {
       const user = req.user as User;
       const userId = user.id;
       
-      const configData = insertOpenrouterConfigSchema.parse({
-        ...req.body,
-        userId,
-      });
-
       // Check if config already exists
       const existingConfig = await storage.getOpenrouterConfig(userId);
       
       let config;
       if (existingConfig) {
-        config = await storage.updateOpenrouterConfig(userId, configData);
+        // Pour les mises à jour, utiliser le schéma qui rend apiKey optionnel
+        const updateData = updateOpenrouterConfigSchema.parse({
+          ...req.body,
+          userId,
+        });
+        
+        // Si apiKey n'est pas fourni, garder l'ancien
+        const finalData = {
+          ...updateData,
+          apiKey: updateData.apiKey || existingConfig.apiKey,
+        };
+        
+        config = await storage.updateOpenrouterConfig(userId, finalData);
       } else {
+        // Pour les créations, exiger tous les champs
+        const configData = insertOpenrouterConfigSchema.parse({
+          ...req.body,
+          userId,
+        });
         config = await storage.createOpenrouterConfig(configData);
       }
 
diff --git a/shared/schema.ts b/shared/schema.ts
index 3a9e231..144f27d 100644
--- a/shared/schema.ts
+++ b/shared/schema.ts
@@ -226,6 +226,10 @@ export const insertOpenrouterConfigSchema = createInsertSchema(openrouterConfig)
   updatedAt: true,
 });
 
+export const updateOpenrouterConfigSchema = insertOpenrouterConfigSchema.partial({
+  apiKey: true,
+});
+
 // Types
 export type User = typeof users.$inferSelect;
 export type InsertUser = z.infer<typeof insertUserSchema>;

From 12d20541e28e688c1ee1e87a1cba5fad7c09ab28 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 2 Oct 2025 06:14:39 +0000
Subject: [PATCH 10/12] Improve OpenRouter API key configuration persistence
 and UI feedback

Update the settings page to properly persist the OpenRouter API key, provide visual feedback on existing configurations, and adjust save button logic based on configuration status.

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/35Hxx7C
---
 client/src/pages/settings.tsx | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/client/src/pages/settings.tsx b/client/src/pages/settings.tsx
index a0b05b7..d1bcf1a 100644
--- a/client/src/pages/settings.tsx
+++ b/client/src/pages/settings.tsx
@@ -51,6 +51,9 @@ export default function Settings() {
     }
   }, [openrouterConfig]);
 
+  // Vérifier si une config OpenRouter existe déjà
+  const hasExistingConfig = !!openrouterConfig;
+
   const saveCloudinaryMutation = useMutation({
     mutationFn: () => 
       apiRequest('POST', '/api/cloudinary/config', {
@@ -187,14 +190,22 @@ export default function Settings() {
                     type="password"
                     value={openrouterApiKey}
                     onChange={(e) => setOpenrouterApiKey(e.target.value)}
-                    placeholder="sk-or-v1-..."
+                    placeholder={hasExistingConfig ? "••••••••••••••••" : "sk-or-v1-..."}
                     data-testid="input-openrouter-api-key"
                   />
                   <p className="text-xs text-muted-foreground">
-                    Obtenez votre clé API sur{" "}
-                    <a href="https://openrouter.ai/keys" target="_blank" rel="noopener noreferrer" className="underline">
-                      openrouter.ai
-                    </a>
+                    {hasExistingConfig ? (
+                      <>
+                        <span className="text-green-600 dark:text-green-400">✓ Clé API configurée</span> - Laissez vide pour garder la clé actuelle
+                      </>
+                    ) : (
+                      <>
+                        Obtenez votre clé API sur{" "}
+                        <a href="https://openrouter.ai/keys" target="_blank" rel="noopener noreferrer" className="underline">
+                          openrouter.ai
+                        </a>
+                      </>
+                    )}
                   </p>
                 </div>
                 <div className="space-y-2">
@@ -231,7 +242,12 @@ export default function Settings() {
                 </div>
                 <Button 
                   onClick={() => saveOpenrouterMutation.mutate()}
-                  disabled={saveOpenrouterMutation.isPending || !openrouterApiKey || !openrouterModel || !openrouterSystemPrompt}
+                  disabled={
+                    saveOpenrouterMutation.isPending || 
+                    !openrouterModel || 
+                    !openrouterSystemPrompt ||
+                    (!hasExistingConfig && !openrouterApiKey)
+                  }
                   data-testid="button-save-openrouter"
                   className="w-full"
                 >

From 2cfba40d4217c12ec16ff0bb62d25a2c1d49b373 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 2 Oct 2025 06:19:42 +0000
Subject: [PATCH 11/12] Fix issue with AI model selection not being saved in
 settings

Ensure AI model selection persists across page reloads in the Open Router configuration.

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/COxOmlM
---
 .replit | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.replit b/.replit
index 55cb6c6..22a2415 100644
--- a/.replit
+++ b/.replit
@@ -14,6 +14,14 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 35739
+externalPort = 3002
+
+[[ports]]
+localPort = 40537
+externalPort = 3000
+
 [[ports]]
 localPort = 43245
 externalPort = 3001

From f50109ee8166c3cf733d805d07384db1e5aa5420 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 2 Oct 2025 06:20:00 +0000
Subject: [PATCH 12/12] Improve configuration saving for AI model selection in
 settings

Fix an issue where the selected AI model in the Open Router settings was not persisting after page reload.

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