mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-11 17:26:45 +02:00
26 files changed
+1243
-563
No files matched your search
@@ -15,7 +15,7 @@ localPort = 5000
|
||||
externalPort = 80
|
||||
|
||||
[[ports]]
|
||||
localPort = 35981
|
||||
localPort = 35357
|
||||
externalPort = 3002
|
||||
|
||||
[[ports]]
|
||||
@@ -26,6 +26,10 @@ externalPort = 3000
|
||||
localPort = 43245
|
||||
externalPort = 3001
|
||||
|
||||
[[ports]]
|
||||
localPort = 45209
|
||||
externalPort = 3003
|
||||
|
||||
[env]
|
||||
PORT = "5000"
|
||||
|
||||
|
||||
@@ -0,0 +1,322 @@
|
||||
{
|
||||
"name": "My workflow 8",
|
||||
"nodes": [
|
||||
{
|
||||
"parameters": {
|
||||
"formTitle": "SocialFlow",
|
||||
"formFields": {
|
||||
"values": [
|
||||
{
|
||||
"fieldLabel": "Non du produit",
|
||||
"placeholder": "nom_produit",
|
||||
"requiredField": true
|
||||
},
|
||||
{
|
||||
"fieldLabel": "Prix",
|
||||
"placeholder": "prix",
|
||||
"requiredField": true
|
||||
},
|
||||
{
|
||||
"fieldLabel": "Caractéristiques",
|
||||
"placeholder": "caractéristiques"
|
||||
},
|
||||
{
|
||||
"fieldLabel": "Promo",
|
||||
"placeholder": "promo"
|
||||
},
|
||||
{
|
||||
"fieldLabel": "Date publication",
|
||||
"fieldType": "date",
|
||||
"requiredField": true
|
||||
},
|
||||
{
|
||||
"fieldLabel": "Heure de publication (HH:mm)",
|
||||
"placeholder": "heure_publication",
|
||||
"requiredField": true
|
||||
},
|
||||
{
|
||||
"fieldLabel": "Photo",
|
||||
"fieldType": "file",
|
||||
"acceptFileTypes": "photo"
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {}
|
||||
},
|
||||
"type": "n8n-nodes-base.formTrigger",
|
||||
"typeVersion": 2.2,
|
||||
"position": [
|
||||
-720,
|
||||
160
|
||||
],
|
||||
"id": "3441e9d7-35ff-4f14-bee8-78397d0e2e28",
|
||||
"name": "On form submission",
|
||||
"webhookId": "17357858-667e-4a3d-afd1-82039f41c927"
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"method": "POST",
|
||||
"url": "=https://api.cloudinary.com/v1_1/dspr8yjfu/image/upload",
|
||||
"sendBody": true,
|
||||
"contentType": "multipart-form-data",
|
||||
"bodyParameters": {
|
||||
"parameters": [
|
||||
{
|
||||
"name": "upload_preset",
|
||||
"value": "=upload_n8n"
|
||||
},
|
||||
{
|
||||
"parameterType": "formBinaryData",
|
||||
"name": "file",
|
||||
"inputDataFieldName": "Photo"
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {}
|
||||
},
|
||||
"type": "n8n-nodes-base.httpRequest",
|
||||
"typeVersion": 4.2,
|
||||
"position": [
|
||||
-208,
|
||||
16
|
||||
],
|
||||
"id": "49ff16a6-a004-4ff4-a1dc-cb6902f7f46a",
|
||||
"name": "HTTP Request"
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"assignments": {
|
||||
"assignments": [
|
||||
{
|
||||
"id": "14257b6b-82c8-4151-85a5-f56ab814f6f3",
|
||||
"name": "image_ready_url",
|
||||
"value": "={{$json.secure_url\n ? $json.secure_url.replace('/upload/','/upload/c_fill,g_auto,h_1350,w_1080,q_auto,f_auto,e_auto_contrast,e_auto_color,e_sharpen:50/')\n : ''}}\n",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"id": "74f9dbae-0e18-4cdb-b316-5976f65ad6c8",
|
||||
"name": "image_public_id",
|
||||
"value": "={{$json.public_id}}",
|
||||
"type": "string"
|
||||
}
|
||||
]
|
||||
},
|
||||
"includeOtherFields": true,
|
||||
"options": {}
|
||||
},
|
||||
"type": "n8n-nodes-base.set",
|
||||
"typeVersion": 3.4,
|
||||
"position": [
|
||||
16,
|
||||
16
|
||||
],
|
||||
"id": "dc95401f-403a-4a72-87e6-622709b10046",
|
||||
"name": "Edit Fields"
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"promptType": "define",
|
||||
"text": "=Langue: fr\nPAS DE TEXTE AVANT OU APRÈS.\n\nContraintes:\n- Accroche d'ouverture engageante\n- 1-2 phrases sur bénéfice client, pas style catalogue\n- Pas de lien, pas d'URL\n- 3-5 hashtags ciblés (locaux/thématiques) Ajouter #lafoirfouille\n- Ton chaleureux, concret, non agressif\n- Maximum 250 caractères \n\nContexte:\n- Produit: {{ $('On form submission').item.json['Non du produit'] }}\n- Prix: {{ $('On form submission').item.json.Prix }}\n- Caractéristiques: {{ $('On form submission').item.json['Caractéristiques'] }}\n- Promo: {{$json.promo || \"aucune\"}}\n",
|
||||
"messages": {
|
||||
"messageValues": [
|
||||
{
|
||||
"message": "Tu es un community manager de boutique physique. Tu écris pour Facebook. Objectif: engagement + visites en magasin. Pas de lien web. pas de json que du texte pure avec quelques emoji. structure le texte pour un post facebook et instagram - ne parle pas de boutique locale."
|
||||
}
|
||||
]
|
||||
},
|
||||
"batching": {}
|
||||
},
|
||||
"type": "@n8n/n8n-nodes-langchain.chainLlm",
|
||||
"typeVersion": 1.7,
|
||||
"position": [
|
||||
240,
|
||||
16
|
||||
],
|
||||
"id": "b7de85b4-8a06-4cd6-b3b1-dd28f7e30720",
|
||||
"name": "Basic LLM Chain",
|
||||
"alwaysOutputData": true
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"model": "openai/gpt-4o",
|
||||
"options": {}
|
||||
},
|
||||
"type": "@n8n/n8n-nodes-langchain.lmChatOpenRouter",
|
||||
"typeVersion": 1,
|
||||
"position": [
|
||||
224,
|
||||
320
|
||||
],
|
||||
"id": "03c7dc91-a5e0-4b58-946f-7217cfbb7f22",
|
||||
"name": "OpenRouter Chat Model",
|
||||
"credentials": {
|
||||
"openRouterApi": {
|
||||
"id": "QrDzqP7MluNzhC1L",
|
||||
"name": "OpenRouter account"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"method": "POST",
|
||||
"url": "=https://graph.facebook.com/v23.0/119315771483782/photos",
|
||||
"sendQuery": true,
|
||||
"queryParameters": {
|
||||
"parameters": [
|
||||
{
|
||||
"name": "url",
|
||||
"value": "={{ $('Edit Fields').first().json.image_ready_url.trim().replace(/\\)+$/,'') }}\n"
|
||||
},
|
||||
{
|
||||
"name": "message",
|
||||
"value": "={{ $json.text }}"
|
||||
},
|
||||
{
|
||||
"name": "access_token",
|
||||
"value": "EAASQALmsF1UBPlhtfZBbZCkuu9fZAbr8OpEAXuXcLuZCAx6F2BmhZBprak0AQfdqKZA0aGsR8pDtpqmkBjb7lIqZCadMJ919IrvwwE75nEo1uZCIIuAJDqkq3Cl9feQMX126sPIabGerrLtd8Dw5NGlQTNzYB7KYqUgcjZA6N5fDt7Bn4pMKMzsh0p5MCxMxq5xV1qyNLVykNMbgE7HZBkas1oLdeFj3M2hAZAYlS4NBuoZD"
|
||||
},
|
||||
{
|
||||
"name": "published",
|
||||
"value": "=0"
|
||||
},
|
||||
{
|
||||
"name": "scheduled_publish_time",
|
||||
"value": "={{ $json.scheduled_publish_time }}"
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {}
|
||||
},
|
||||
"type": "n8n-nodes-base.httpRequest",
|
||||
"typeVersion": 4.2,
|
||||
"position": [
|
||||
1040,
|
||||
-16
|
||||
],
|
||||
"id": "6fbaf6c3-1744-4116-b599-047a978ba504",
|
||||
"name": "Facebook Post Photo"
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"mode": "runOnceForEachItem",
|
||||
"jsCode": "// Récupère les valeurs depuis le Form Trigger, pas depuis l'item courant\nconst dateStr = $item(0).$node[\"On form submission\"].json[\"Date publication\"];\nconst timeStr = $item(0).$node[\"On form submission\"].json[\"Heure de publication (HH:mm)\"];\n\nif (!dateStr || !timeStr) {\n throw new Error(\"Champs manquants: \" + JSON.stringify({ dateStr, timeStr }));\n}\n\nconst [y,m,d] = dateStr.split('-').map(Number);\nconst [H,Mi] = timeStr.split(':').map(Number);\n\n// Epoch UTC\nlet ts = Math.floor(Date.UTC(y, m - 1, d, H, Mi) / 1000);\n\n// Sécurité: forcer ≥ maintenant+600s\nconst now = Math.floor(Date.now()/1000);\nif (ts < now + 600) ts = now + 1200;\n\nreturn { json: { ...$json, scheduled_publish_time: ts } };\n"
|
||||
},
|
||||
"type": "n8n-nodes-base.code",
|
||||
"typeVersion": 2,
|
||||
"position": [
|
||||
816,
|
||||
144
|
||||
],
|
||||
"id": "93f14550-2ccd-4da7-bfb7-7ecacee3e830",
|
||||
"name": "Code",
|
||||
"alwaysOutputData": true
|
||||
},
|
||||
{
|
||||
"parameters": {},
|
||||
"type": "n8n-nodes-base.merge",
|
||||
"typeVersion": 3.2,
|
||||
"position": [
|
||||
592,
|
||||
144
|
||||
],
|
||||
"id": "557d9b2a-ceb1-42d8-ad2d-29e8c2533d51",
|
||||
"name": "Merge"
|
||||
}
|
||||
],
|
||||
"pinData": {},
|
||||
"connections": {
|
||||
"On form submission": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "HTTP Request",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
},
|
||||
{
|
||||
"node": "Merge",
|
||||
"type": "main",
|
||||
"index": 1
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"HTTP Request": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Edit Fields",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"OpenRouter Chat Model": {
|
||||
"ai_languageModel": [
|
||||
[
|
||||
{
|
||||
"node": "Basic LLM Chain",
|
||||
"type": "ai_languageModel",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"Edit Fields": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Basic LLM Chain",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"Basic LLM Chain": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Merge",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"Code": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Facebook Post Photo",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"Merge": {
|
||||
"main": [
|
||||
[
|
||||
{
|
||||
"node": "Code",
|
||||
"type": "main",
|
||||
"index": 0
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
"active": false,
|
||||
"settings": {
|
||||
"executionOrder": "v1"
|
||||
},
|
||||
"versionId": "72a43b73-4460-49de-88aa-90afde0ef73b",
|
||||
"meta": {
|
||||
"templateCredsSetupCompleted": true,
|
||||
"instanceId": "95265e6405e55fa03a3687565ed8e8c464bd659d0d56a9696d7d25f954abf511"
|
||||
},
|
||||
"id": "cTnh6OMO9wxPEPBS",
|
||||
"tags": []
|
||||
}
|
||||
+1
-1
@@ -85,7 +85,7 @@ function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider>
|
||||
<div className="dark">
|
||||
<div>
|
||||
<Toaster />
|
||||
<Router />
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { Bot, User, Lightbulb, History, Zap } from "lucide-react";
|
||||
import { Bot, User, Lightbulb, History, Zap, Sparkles } from "lucide-react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
interface Message {
|
||||
@@ -51,11 +51,9 @@ export default function AiChat() {
|
||||
const handleSubmit = () => {
|
||||
if (!input.trim()) return;
|
||||
|
||||
// Add user message
|
||||
const userMessage = input;
|
||||
setMessages((prev) => [...prev, { role: "user", content: userMessage }]);
|
||||
|
||||
// Parse product info from input (simple parsing)
|
||||
const productInfo = {
|
||||
name: userMessage.match(/Produit:\s*(.+?)(?:\n|$)/i)?.[1] || userMessage,
|
||||
price: userMessage.match(/Prix:\s*(.+?)(?:\n|$)/i)?.[1] || "",
|
||||
@@ -68,93 +66,97 @@ export default function AiChat() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-card rounded-lg border border-border overflow-hidden h-full">
|
||||
<div className="border-b border-border p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Bot className="text-primary w-6 h-6" />
|
||||
<div className="bg-card rounded-2xl border border-border/50 overflow-hidden shadow-lg h-full flex flex-col">
|
||||
<div className="border-b border-border/50 p-6 bg-gradient-to-r from-primary/5 to-secondary/5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
|
||||
<Sparkles className="text-white w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground">Assistant IA - Génération de contenu</h3>
|
||||
<p className="text-xs text-muted-foreground">Décrivez votre produit pour générer du texte</p>
|
||||
<h3 className="text-lg font-semibold text-foreground">Assistant IA</h3>
|
||||
<p className="text-sm text-muted-foreground">Génération de contenu intelligent</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setMessages([messages[0]])}
|
||||
className="rounded-xl"
|
||||
data-testid="button-new-chat"
|
||||
>
|
||||
<i className="fas fa-plus mr-2"></i>Nouveau chat
|
||||
<Sparkles className="w-4 h-4 mr-2" />
|
||||
Nouveau chat
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-96 overflow-y-auto p-6 space-y-4 bg-muted/20">
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6 bg-muted/20">
|
||||
{messages.map((message, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex gap-3 chat-message ${message.role === "user" ? "justify-end" : ""}`}
|
||||
className={`flex gap-4 chat-message ${message.role === "user" ? "justify-end" : ""}`}
|
||||
>
|
||||
{message.role === "assistant" && (
|
||||
<div className="w-8 h-8 rounded-full bg-primary flex-shrink-0 flex items-center justify-center">
|
||||
<Bot className="text-primary-foreground w-4 h-4" />
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-secondary flex-shrink-0 flex items-center justify-center shadow-md">
|
||||
<Bot className="text-white w-5 h-5" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={`flex-1 ${message.role === "user" ? "max-w-md ml-auto" : ""}`}>
|
||||
<div className={`flex-1 ${message.role === "user" ? "max-w-md ml-auto" : "max-w-2xl"}`}>
|
||||
<div className={`
|
||||
rounded-lg p-4
|
||||
rounded-2xl p-6 shadow-md
|
||||
${message.role === "user"
|
||||
? "bg-primary text-primary-foreground ml-auto"
|
||||
: "bg-card border border-border"
|
||||
? "bg-gradient-to-br from-primary to-secondary text-white ml-auto"
|
||||
: "bg-card border border-border/50"
|
||||
}
|
||||
`}>
|
||||
<p className="text-sm whitespace-pre-wrap">{message.content}</p>
|
||||
<p className="text-sm leading-relaxed whitespace-pre-wrap">{message.content}</p>
|
||||
|
||||
{message.variants && (
|
||||
<div className="space-y-3 mt-3">
|
||||
<div className="space-y-4 mt-6">
|
||||
{message.variants.map((variant, vIndex) => (
|
||||
<div
|
||||
key={vIndex}
|
||||
className="p-3 rounded-lg bg-accent/50 border border-border cursor-pointer hover:bg-accent transition-all"
|
||||
className="p-5 rounded-xl bg-muted/50 border border-border/50 cursor-pointer hover:bg-muted hover:shadow-md transition-all"
|
||||
data-testid={`variant-${vIndex}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className={`
|
||||
inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
|
||||
${vIndex === 0 ? "bg-primary text-primary-foreground" : "bg-secondary text-secondary-foreground"}
|
||||
inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold
|
||||
${vIndex === 0 ? "bg-gradient-to-r from-primary to-secondary text-white" : "bg-secondary/20 text-secondary"}
|
||||
`}>
|
||||
{variant.variant}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">{variant.characterCount} caractères</span>
|
||||
<span className="text-xs text-muted-foreground font-medium">{variant.characterCount} caractères</span>
|
||||
</div>
|
||||
<p className="text-sm text-foreground">{variant.text}</p>
|
||||
<p className="text-sm text-foreground leading-relaxed">{variant.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground mt-1 inline-block">
|
||||
<span className="text-xs text-muted-foreground mt-2 inline-block">
|
||||
{message.role === "user" ? "Maintenant" : "Il y a quelques secondes"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{message.role === "user" && (
|
||||
<div className="w-8 h-8 rounded-full bg-secondary flex-shrink-0 flex items-center justify-center">
|
||||
<User className="text-secondary-foreground w-4 h-4" />
|
||||
<div className="w-10 h-10 rounded-xl bg-secondary/20 flex-shrink-0 flex items-center justify-center">
|
||||
<User className="text-secondary w-5 h-5" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-4 border-t border-border bg-card">
|
||||
<div className="flex gap-3">
|
||||
<div className="p-6 border-t border-border/50 bg-card space-y-4">
|
||||
<div className="flex gap-4">
|
||||
<Textarea
|
||||
placeholder="Décrivez votre produit (nom, prix, caractéristiques)..."
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
className="flex-1 min-h-[60px]"
|
||||
className="flex-1 min-h-[80px] rounded-xl bg-muted/30 border-border/50 focus:border-primary/50"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
@@ -166,34 +168,37 @@ export default function AiChat() {
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={generateMutation.isPending || !input.trim()}
|
||||
className="bg-gradient-to-r from-primary to-secondary hover:opacity-90 rounded-xl px-6"
|
||||
data-testid="button-generate"
|
||||
>
|
||||
<i className="fas fa-paper-plane mr-2"></i>
|
||||
<Sparkles className="w-4 h-4 mr-2" />
|
||||
{generateMutation.isPending ? "Génération..." : "Générer"}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="rounded-xl"
|
||||
onClick={() => toast({ title: "Bientôt disponible", description: "Les suggestions de produits seront disponibles prochainement" })}
|
||||
data-testid="button-suggestions"
|
||||
>
|
||||
<Lightbulb className="w-4 h-4 mr-1" />
|
||||
<Lightbulb className="w-4 h-4 mr-2" />
|
||||
Suggestions
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="rounded-xl"
|
||||
onClick={() => toast({ title: "Bientôt disponible", description: "L'historique des générations sera disponible prochainement" })}
|
||||
data-testid="button-history"
|
||||
>
|
||||
<History className="w-4 h-4 mr-1" />
|
||||
<History className="w-4 h-4 mr-2" />
|
||||
Historique
|
||||
</Button>
|
||||
<div className="ml-auto text-xs text-muted-foreground flex items-center gap-1">
|
||||
<Zap className="w-3 h-3 text-chart-3" />
|
||||
Propulsé par OpenRouter
|
||||
<div className="ml-auto text-xs text-muted-foreground flex items-center gap-2">
|
||||
<Zap className="w-4 h-4 text-success" />
|
||||
<span>Propulsé par OpenRouter</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { ChevronLeft, ChevronRight, Calendar as CalendarIcon } from "lucide-react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import type { ScheduledPost } from "@shared/schema";
|
||||
|
||||
@@ -44,18 +44,15 @@ export default function CalendarView() {
|
||||
|
||||
const days = [];
|
||||
|
||||
// Previous month days
|
||||
for (let i = 0; i < startingDayOfWeek; i++) {
|
||||
const prevMonthDay = new Date(year, month, -startingDayOfWeek + i + 1);
|
||||
days.push({ date: prevMonthDay, isCurrentMonth: false });
|
||||
}
|
||||
|
||||
// Current month days
|
||||
for (let i = 1; i <= daysInMonth; i++) {
|
||||
days.push({ date: new Date(year, month, i), isCurrentMonth: true });
|
||||
}
|
||||
|
||||
// Next month days to fill the grid
|
||||
const remainingDays = 42 - days.length;
|
||||
for (let i = 1; i <= remainingDays; i++) {
|
||||
days.push({ date: new Date(year, month + 1, i), isCurrentMonth: false });
|
||||
@@ -71,29 +68,37 @@ export default function CalendarView() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-card rounded-lg border border-border overflow-hidden">
|
||||
<div className="border-b border-border p-4 flex items-center justify-between">
|
||||
<div className="bg-card rounded-2xl border border-border/50 overflow-hidden shadow-lg">
|
||||
<div className="border-b border-border/50 p-6 bg-gradient-to-r from-primary/5 to-secondary/5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
|
||||
<CalendarIcon className="text-white w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground">Calendrier des publications</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">Planifiez vos publications sur plusieurs pages</p>
|
||||
<h3 className="text-lg font-semibold text-foreground">Calendrier</h3>
|
||||
<p className="text-sm text-muted-foreground">Visualisez vos publications planifiées</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={goToPreviousMonth}
|
||||
className="rounded-xl"
|
||||
data-testid="button-prev-month"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4 mr-2" />
|
||||
Précédent
|
||||
</Button>
|
||||
<span className="text-sm font-medium text-foreground min-w-[120px] text-center">
|
||||
<span className="text-sm font-semibold text-foreground min-w-[140px] text-center px-4 py-2 bg-muted/30 rounded-xl">
|
||||
{monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={goToNextMonth}
|
||||
className="rounded-xl"
|
||||
data-testid="button-next-month"
|
||||
>
|
||||
Suivant
|
||||
@@ -101,53 +106,52 @@ export default function CalendarView() {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
{/* Calendar Header */}
|
||||
<div className="grid grid-cols-7 gap-px bg-border mb-px">
|
||||
<div className="p-8">
|
||||
<div className="grid grid-cols-7 gap-2 mb-2">
|
||||
{daysOfWeek.map((day) => (
|
||||
<div key={day} className="bg-muted p-3 text-center">
|
||||
<span className="text-xs font-semibold text-muted-foreground">{day}</span>
|
||||
<div key={day} className="bg-muted/30 py-3 rounded-lg text-center">
|
||||
<span className="text-sm font-semibold text-muted-foreground">{day}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Calendar Grid */}
|
||||
<div className="grid grid-cols-7 gap-px bg-border">
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{days.map((day, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`
|
||||
bg-card p-3 min-h-[120px]
|
||||
${isToday(day.date) ? "border-2 border-primary" : ""}
|
||||
bg-card border border-border/50 rounded-xl p-4 min-h-[140px] transition-all hover:shadow-md
|
||||
${isToday(day.date) ? "ring-2 ring-primary shadow-lg" : ""}
|
||||
${!day.isCurrentMonth ? "opacity-40" : ""}
|
||||
`}
|
||||
data-testid={`calendar-day-${index}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span
|
||||
className={`
|
||||
text-xs font-medium
|
||||
${!day.isCurrentMonth ? "text-muted-foreground/50" : "text-foreground"}
|
||||
${isToday(day.date) ? "font-bold text-primary" : ""}
|
||||
text-sm font-semibold
|
||||
${!day.isCurrentMonth ? "text-muted-foreground" : "text-foreground"}
|
||||
${isToday(day.date) ? "text-primary" : ""}
|
||||
`}
|
||||
>
|
||||
{day.date.getDate()}
|
||||
</span>
|
||||
{isToday(day.date) && (
|
||||
<span className="text-[10px] bg-primary text-primary-foreground px-1.5 py-0.5 rounded">
|
||||
<span className="text-[10px] bg-gradient-to-r from-primary to-secondary text-white px-2 py-0.5 rounded-full font-semibold">
|
||||
Aujourd'hui
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Real scheduled posts for this date */}
|
||||
{(() => {
|
||||
if (!day.isCurrentMonth) return null;
|
||||
const postsForDay = getPostsForDate(day.date);
|
||||
if (postsForDay.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<div className="space-y-2">
|
||||
{postsForDay.slice(0, 2).map((post, idx) => {
|
||||
const time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : '';
|
||||
const isPending = !post.publishedAt;
|
||||
@@ -157,18 +161,19 @@ export default function CalendarView() {
|
||||
<div
|
||||
key={idx}
|
||||
className={`
|
||||
px-2 py-1 rounded text-xs cursor-pointer transition-all
|
||||
${isPending ? 'bg-chart-3/20 text-chart-3 hover:bg-chart-3/30' : ''}
|
||||
${isPublished ? 'bg-chart-2/20 text-chart-2 hover:bg-chart-2/30' : ''}
|
||||
px-3 py-2 rounded-lg text-xs cursor-pointer transition-all font-medium shadow-sm
|
||||
${isPending ? 'bg-warning/20 text-warning hover:bg-warning/30' : ''}
|
||||
${isPublished ? 'bg-success/20 text-success hover:bg-success/30' : ''}
|
||||
`}
|
||||
data-testid={`calendar-post-${post.id}`}
|
||||
>
|
||||
<span>{time} - {post.postType || 'Post'}</span>
|
||||
<div className="font-semibold">{time}</div>
|
||||
<div className="truncate opacity-90">{post.postType || 'Post'}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{postsForDay.length > 2 && (
|
||||
<div className="text-[10px] text-muted-foreground pl-2">
|
||||
<div className="text-[11px] text-muted-foreground pl-2 font-medium">
|
||||
+{postsForDay.length - 2} autre(s)
|
||||
</div>
|
||||
)}
|
||||
@@ -179,15 +184,14 @@ export default function CalendarView() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="mt-6 flex items-center justify-center gap-6 flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-chart-3"></div>
|
||||
<span className="text-sm text-muted-foreground">Programmé</span>
|
||||
<div className="mt-8 flex items-center justify-center gap-8 flex-wrap">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-4 h-4 rounded-md bg-warning/20 border-2 border-warning"></div>
|
||||
<span className="text-sm text-muted-foreground font-medium">Programmé</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-chart-2"></div>
|
||||
<span className="text-sm text-muted-foreground">Publié</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-4 h-4 rounded-md bg-success/20 border-2 border-success"></div>
|
||||
<span className="text-sm text-muted-foreground font-medium">Publié</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Plus } from "lucide-react";
|
||||
import { Plus, Users } from "lucide-react";
|
||||
import { SiFacebook, SiInstagram } from "react-icons/si";
|
||||
|
||||
export default function ManagedPages() {
|
||||
const { data: pages, isLoading } = useQuery({
|
||||
@@ -9,11 +10,11 @@ export default function ManagedPages() {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="bg-card rounded-lg border border-border p-6">
|
||||
<div className="skeleton h-8 w-48 mb-4" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="skeleton h-32 rounded-lg" />
|
||||
<div className="bg-card rounded-2xl border border-border/50 p-8 shadow-lg">
|
||||
<div className="skeleton h-8 w-48 mb-6 rounded-lg" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="skeleton h-40 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -21,56 +22,78 @@ export default function ManagedPages() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-card rounded-lg border border-border overflow-hidden">
|
||||
<div className="border-b border-border p-4 flex items-center justify-between">
|
||||
<div className="bg-card rounded-2xl border border-border/50 overflow-hidden shadow-lg">
|
||||
<div className="border-b border-border/50 p-6 bg-gradient-to-r from-primary/5 to-secondary/5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
|
||||
<Users className="text-white w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground">Pages gérées</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Gérez vos pages Facebook et Instagram connectées
|
||||
<h3 className="text-lg font-semibold text-foreground">Pages gérées</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{(pages as any[])?.length || 0} page(s) connectée(s)
|
||||
</p>
|
||||
</div>
|
||||
<Button data-testid="button-connect-page">
|
||||
</div>
|
||||
<Button
|
||||
className="bg-gradient-to-r from-primary to-secondary hover:opacity-90 rounded-xl"
|
||||
data-testid="button-connect-page"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Connecter une page
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="p-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{pages && (pages as any[]).length > 0 ? (
|
||||
(pages as any[]).map((page: any) => (
|
||||
<div
|
||||
key={page.id}
|
||||
className="border border-border rounded-lg p-4 hover:shadow-lg transition-all cursor-pointer"
|
||||
className="border border-border/50 rounded-2xl p-6 hover:shadow-xl hover:border-primary/30 transition-all cursor-pointer bg-card"
|
||||
data-testid={`page-card-${page.id}`}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-start justify-between mb-5">
|
||||
<div className={`
|
||||
w-12 h-12 rounded-lg flex items-center justify-center
|
||||
${page.platform === "facebook" ? "bg-chart-1/10" : "bg-chart-5/10"}
|
||||
w-14 h-14 rounded-xl flex items-center justify-center shadow-md
|
||||
${page.platform === "facebook" ? "bg-[#1877F2]/10" : "bg-[#E4405F]/10"}
|
||||
`}>
|
||||
<i className={`
|
||||
fab text-2xl
|
||||
${page.platform === "facebook" ? "fa-facebook text-chart-1" : "fa-instagram text-chart-5"}
|
||||
`}></i>
|
||||
{page.platform === "facebook" ? (
|
||||
<SiFacebook className="text-[#1877F2] text-2xl" />
|
||||
) : (
|
||||
<SiInstagram className="text-[#E4405F] text-2xl" />
|
||||
)}
|
||||
</div>
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-chart-2 text-white">
|
||||
<span className={`
|
||||
inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold
|
||||
${page.isActive === "true" ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"}
|
||||
`}>
|
||||
{page.isActive === "true" ? "Actif" : "Inactif"}
|
||||
</span>
|
||||
</div>
|
||||
<h4 className="font-semibold text-foreground mb-1">{page.pageName}</h4>
|
||||
<p className="text-xs text-muted-foreground mb-3">
|
||||
<h4 className="font-semibold text-foreground text-lg mb-2">{page.pageName}</h4>
|
||||
<p className="text-sm text-muted-foreground mb-4 font-medium">
|
||||
{page.platform === "facebook" ? "Facebook Page" : "Instagram Business"}
|
||||
</p>
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>{page.followersCount?.toLocaleString() || 0} abonnés</span>
|
||||
<div className="flex items-center justify-between pt-4 border-t border-border/50">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="text-sm text-muted-foreground font-medium">
|
||||
{page.followersCount?.toLocaleString() || 0} abonnés
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-full text-center py-12">
|
||||
<p className="text-muted-foreground mb-4">Aucune page connectée</p>
|
||||
<Button>
|
||||
<div className="col-span-full text-center py-16">
|
||||
<div className="w-20 h-20 rounded-2xl bg-muted/30 flex items-center justify-center mx-auto mb-6">
|
||||
<Users className="w-10 h-10 text-muted-foreground opacity-50" />
|
||||
</div>
|
||||
<p className="text-muted-foreground mb-6 text-lg">Aucune page connectée</p>
|
||||
<Button className="bg-gradient-to-r from-primary to-secondary hover:opacity-90 rounded-xl">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Connecter votre première page
|
||||
</Button>
|
||||
|
||||
@@ -3,8 +3,9 @@ import { useDropzone } from "react-dropzone";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { CloudUpload, Image as ImageIcon, Video, X } from "lucide-react";
|
||||
import { CloudUpload, Image as ImageIcon, Video, X, Upload } from "lucide-react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { SiFacebook, SiInstagram } from "react-icons/si";
|
||||
|
||||
export default function MediaUpload() {
|
||||
const { toast } = useToast();
|
||||
@@ -54,7 +55,7 @@ export default function MediaUpload() {
|
||||
"image/*": [".png", ".jpg", ".jpeg", ".gif"],
|
||||
"video/*": [".mp4", ".mov"],
|
||||
},
|
||||
maxSize: 52428800, // 50MB
|
||||
maxSize: 52428800,
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
@@ -68,101 +69,114 @@ export default function MediaUpload() {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="bg-card rounded-lg border border-border overflow-hidden">
|
||||
<div className="border-b border-border p-4 flex items-center justify-between">
|
||||
<div className="bg-card rounded-2xl border border-border/50 overflow-hidden shadow-lg">
|
||||
<div className="border-b border-border/50 p-6 bg-gradient-to-r from-primary/5 to-secondary/5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
|
||||
<Upload className="text-white w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground">Téléchargement et recadrage de médias</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Ajoutez des photos ou vidéos, elles seront automatiquement recadrées pour Facebook et Instagram
|
||||
</p>
|
||||
<h3 className="text-lg font-semibold text-foreground">Médiathèque</h3>
|
||||
<p className="text-sm text-muted-foreground">Téléchargement et recadrage automatique</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={open}
|
||||
className="bg-gradient-to-r from-primary to-secondary hover:opacity-90 rounded-xl"
|
||||
data-testid="button-browse"
|
||||
>
|
||||
<CloudUpload className="w-4 h-4 mr-2" />
|
||||
Parcourir
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Upload Zone */}
|
||||
<div>
|
||||
<div className="p-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`
|
||||
border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all
|
||||
${isDragActive ? "border-primary bg-accent" : "border-border hover:border-primary hover:bg-accent"}
|
||||
border-2 border-dashed rounded-2xl p-12 text-center cursor-pointer transition-all
|
||||
${isDragActive ? "border-primary bg-primary/5 shadow-lg" : "border-border/50 hover:border-primary hover:bg-accent/30"}
|
||||
`}
|
||||
data-testid="dropzone-upload"
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<CloudUpload className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
|
||||
<p className="text-foreground font-medium mb-2">
|
||||
{isDragActive ? "Déposez vos fichiers ici" : "Glissez-déposez vos fichiers ici"}
|
||||
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mx-auto mb-6">
|
||||
<CloudUpload className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<p className="text-foreground font-semibold text-lg mb-2">
|
||||
{isDragActive ? "Déposez vos fichiers ici" : "Glissez-déposez vos fichiers"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mb-4">ou cliquez pour parcourir</p>
|
||||
<p className="text-xs text-muted-foreground">PNG, JPG, MP4 jusqu'à 50MB</p>
|
||||
<p className="text-xs text-muted-foreground font-medium">PNG, JPG, MP4 jusqu'à 50MB</p>
|
||||
</div>
|
||||
|
||||
{/* Uploaded Files */}
|
||||
<div className="mt-6 space-y-3">
|
||||
<h4 className="text-sm font-semibold text-foreground mb-3">
|
||||
Fichiers téléchargés ({(mediaList as any[])?.length || 0})
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-sm font-semibold text-foreground flex items-center justify-between">
|
||||
<span>Fichiers téléchargés</span>
|
||||
<span className="text-xs font-medium text-muted-foreground bg-muted/30 px-3 py-1 rounded-full">
|
||||
{(mediaList as any[])?.length || 0} média(s)
|
||||
</span>
|
||||
</h4>
|
||||
|
||||
{(mediaList as any[])?.slice(0, 3).map((media: any) => (
|
||||
<div className="space-y-3">
|
||||
{(mediaList as any[])?.slice(0, 5).map((media: any) => (
|
||||
<div
|
||||
key={media.id}
|
||||
onClick={() => setSelectedFile(media)}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-accent border border-border cursor-pointer hover:bg-accent/80 transition-colors"
|
||||
className="flex items-center gap-4 p-4 rounded-xl bg-muted/30 border border-border/50 cursor-pointer hover:bg-muted hover:shadow-md transition-all"
|
||||
data-testid={`media-item-${media.id}`}
|
||||
>
|
||||
<div className="w-12 h-12 rounded bg-muted flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-14 h-14 rounded-lg bg-gradient-to-br from-muted to-muted/50 flex items-center justify-center flex-shrink-0">
|
||||
{media.type === "video" ? (
|
||||
<Video className="w-6 h-6 text-muted-foreground" />
|
||||
<Video className="w-7 h-7 text-secondary" />
|
||||
) : (
|
||||
<ImageIcon className="w-6 h-6 text-muted-foreground" />
|
||||
<ImageIcon className="w-7 h-7 text-primary" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">{media.fileName}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<p className="text-sm font-semibold text-foreground truncate">{media.fileName}</p>
|
||||
<p className="text-xs text-muted-foreground font-medium mt-1">
|
||||
{(media.fileSize / 1024 / 1024).toFixed(1)} MB
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-chart-2 text-white">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/20 text-success">
|
||||
Prêt
|
||||
</span>
|
||||
<button
|
||||
onClick={() => deleteMutation.mutate(media.id)}
|
||||
className="text-muted-foreground hover:text-destructive transition-all"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
deleteMutation.mutate(media.id);
|
||||
}}
|
||||
className="text-muted-foreground hover:text-destructive transition-all p-1 rounded-lg hover:bg-destructive/10"
|
||||
data-testid={`button-delete-${media.id}`}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview and Crop */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-foreground mb-3">Aperçu et recadrage automatique</h4>
|
||||
<div className="space-y-4">
|
||||
{/* Facebook Feed Preview */}
|
||||
<div className="border border-border rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="space-y-6">
|
||||
<h4 className="text-sm font-semibold text-foreground">Aperçu et recadrage automatique</h4>
|
||||
|
||||
<div className="space-y-5">
|
||||
<div className="border border-border/50 rounded-xl p-5 bg-card shadow-sm">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<i className="fab fa-facebook text-chart-1"></i>
|
||||
<span className="text-sm font-medium text-foreground">Facebook - Feed</span>
|
||||
<SiFacebook className="text-[#1877F2] text-lg" />
|
||||
<span className="text-sm font-semibold text-foreground">Facebook Feed</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">1200x630</span>
|
||||
<span className="text-xs text-muted-foreground bg-muted/30 px-2 py-1 rounded-md font-medium">1200×630</span>
|
||||
</div>
|
||||
<div className="aspect-[1.91/1] bg-muted rounded-lg overflow-hidden">
|
||||
<div className="aspect-[1.91/1] bg-muted/30 rounded-lg overflow-hidden border border-border/50">
|
||||
{selectedFile?.facebookFeedUrl ? (
|
||||
<img
|
||||
src={selectedFile.facebookFeedUrl}
|
||||
@@ -171,22 +185,21 @@ export default function MediaUpload() {
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<ImageIcon className="w-12 h-12 text-muted-foreground" />
|
||||
<ImageIcon className="w-12 h-12 text-muted-foreground opacity-50" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Instagram Feed Preview */}
|
||||
<div className="border border-border rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="border border-border/50 rounded-xl p-5 bg-card shadow-sm">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<i className="fab fa-instagram text-chart-5"></i>
|
||||
<span className="text-sm font-medium text-foreground">Instagram - Feed</span>
|
||||
<SiInstagram className="text-[#E4405F] text-lg" />
|
||||
<span className="text-sm font-semibold text-foreground">Instagram Feed</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">1080x1080</span>
|
||||
<span className="text-xs text-muted-foreground bg-muted/30 px-2 py-1 rounded-md font-medium">1080×1080</span>
|
||||
</div>
|
||||
<div className="aspect-square bg-muted rounded-lg overflow-hidden">
|
||||
<div className="aspect-square bg-muted/30 rounded-lg overflow-hidden border border-border/50">
|
||||
{selectedFile?.instagramFeedUrl ? (
|
||||
<img
|
||||
src={selectedFile.instagramFeedUrl}
|
||||
@@ -195,22 +208,21 @@ export default function MediaUpload() {
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<ImageIcon className="w-12 h-12 text-muted-foreground" />
|
||||
<ImageIcon className="w-12 h-12 text-muted-foreground opacity-50" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Instagram Story Preview */}
|
||||
<div className="border border-border rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="border border-border/50 rounded-xl p-5 bg-card shadow-sm">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<i className="fab fa-instagram text-chart-5"></i>
|
||||
<span className="text-sm font-medium text-foreground">Instagram - Story</span>
|
||||
<SiInstagram className="text-[#E4405F] text-lg" />
|
||||
<span className="text-sm font-semibold text-foreground">Instagram Story</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">1080x1920</span>
|
||||
<span className="text-xs text-muted-foreground bg-muted/30 px-2 py-1 rounded-md font-medium">1080×1920</span>
|
||||
</div>
|
||||
<div className="aspect-[9/16] bg-muted rounded-lg overflow-hidden max-w-[200px]">
|
||||
<div className="aspect-[9/16] bg-muted/30 rounded-lg overflow-hidden max-w-[220px] border border-border/50">
|
||||
{selectedFile?.instagramStoryUrl ? (
|
||||
<img
|
||||
src={selectedFile.instagramStoryUrl}
|
||||
@@ -219,7 +231,7 @@ export default function MediaUpload() {
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<ImageIcon className="w-8 h-8 text-muted-foreground" />
|
||||
<ImageIcon className="w-10 h-10 text-muted-foreground opacity-50" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Image, Video, CalendarPlus, Clock, Plug } from "lucide-react";
|
||||
import { Image, Video, CalendarPlus, Clock, Plug, Zap, PlusCircle } from "lucide-react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export default function QuickActions() {
|
||||
@@ -10,101 +10,110 @@ export default function QuickActions() {
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* New Publication Card */}
|
||||
<div className="bg-card rounded-lg border border-border p-6">
|
||||
<h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<i className="fas fa-plus-circle text-primary"></i>
|
||||
Nouvelle publication
|
||||
</h3>
|
||||
<div className="bg-card rounded-2xl border border-border/50 p-6 shadow-lg">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
|
||||
<PlusCircle className="text-white w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Nouvelle publication</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Button className="w-full" data-testid="button-new-media-post">
|
||||
<Button className="w-full bg-gradient-to-r from-primary to-secondary hover:opacity-90 rounded-xl" data-testid="button-new-media-post">
|
||||
<Image className="w-4 h-4 mr-2" />
|
||||
Publication avec média
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full" data-testid="button-new-story">
|
||||
<Button variant="outline" className="w-full rounded-xl border-border/50" data-testid="button-new-story">
|
||||
<Video className="w-4 h-4 mr-2" />
|
||||
Story vidéo
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full" data-testid="button-schedule-series">
|
||||
<Button variant="outline" className="w-full rounded-xl border-border/50" data-testid="button-schedule-series">
|
||||
<CalendarPlus className="w-4 h-4 mr-2" />
|
||||
Planifier série
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<div className="bg-card rounded-lg border border-border p-6">
|
||||
<h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<Clock className="w-5 h-5 text-chart-3" />
|
||||
Activité récente
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="bg-card rounded-2xl border border-border/50 p-6 shadow-lg">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-warning/10 flex items-center justify-center">
|
||||
<Clock className="text-warning w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Activité récente</h3>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{recentActivity && recentActivity.length > 0 ? (
|
||||
recentActivity.map((activity: any, index: number) => (
|
||||
<div
|
||||
key={activity.id}
|
||||
className="flex items-start gap-3 pb-3 border-b border-border last:border-0 last:pb-0"
|
||||
className="flex items-start gap-4 pb-4 border-b border-border/50 last:border-0 last:pb-0"
|
||||
data-testid={`activity-${index}`}
|
||||
>
|
||||
<div className="w-2 h-2 rounded-full bg-chart-2 mt-2"></div>
|
||||
<div className="w-2 h-2 rounded-full bg-success mt-2 shadow-sm"></div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-foreground">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{activity.status === "scheduled" ? "Publication planifiée" : "Brouillon créé"}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{new Date(activity.createdAt).toLocaleDateString("fr-FR")}
|
||||
<p className="text-xs text-muted-foreground mt-1 font-medium">
|
||||
{new Date(activity.createdAt).toLocaleDateString("fr-FR", {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-4">
|
||||
<div className="text-center py-8">
|
||||
<Clock className="w-12 h-12 text-muted-foreground opacity-30 mx-auto mb-3" />
|
||||
<p className="text-sm text-muted-foreground">Aucune activité récente</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API Status */}
|
||||
<div className="bg-card rounded-lg border border-border p-6">
|
||||
<h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<Plug className="w-5 h-5 text-chart-2" />
|
||||
État des services
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between" data-testid="status-openrouter">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-chart-2"></div>
|
||||
<span className="text-sm text-foreground">OpenRouter API</span>
|
||||
<div className="bg-card rounded-2xl border border-border/50 p-6 shadow-lg">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-success/10 flex items-center justify-center">
|
||||
<Zap className="text-success w-5 h-5" />
|
||||
</div>
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-chart-2 text-white">
|
||||
<h3 className="text-lg font-semibold text-foreground">État des services</h3>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between" data-testid="status-openrouter">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-success shadow-sm"></div>
|
||||
<span className="text-sm font-medium text-foreground">OpenRouter API</span>
|
||||
</div>
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/20 text-success">
|
||||
Actif
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between" data-testid="status-facebook">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-chart-2"></div>
|
||||
<span className="text-sm text-foreground">Facebook API</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-success shadow-sm"></div>
|
||||
<span className="text-sm font-medium text-foreground">Facebook API</span>
|
||||
</div>
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-chart-2 text-white">
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/20 text-success">
|
||||
Actif
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between" data-testid="status-instagram">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-chart-2"></div>
|
||||
<span className="text-sm text-foreground">Instagram API</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-success shadow-sm"></div>
|
||||
<span className="text-sm font-medium text-foreground">Instagram API</span>
|
||||
</div>
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-chart-2 text-white">
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/20 text-success">
|
||||
Actif
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between" data-testid="status-database">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-chart-2"></div>
|
||||
<span className="text-sm text-foreground">PostgreSQL</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-success shadow-sm"></div>
|
||||
<span className="text-sm font-medium text-foreground">PostgreSQL</span>
|
||||
</div>
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-chart-2 text-white">
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/20 text-success">
|
||||
Actif
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -4,13 +4,13 @@ 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";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
|
||||
export default function Sidebar() {
|
||||
const [location] = useLocation();
|
||||
const [, setLocation] = useLocation();
|
||||
const { toast } = useToast();
|
||||
|
||||
// Charger la session utilisateur
|
||||
const { data: session } = useQuery<{ id: string; username: string; role: string }>({
|
||||
queryKey: ["/api/auth/session"],
|
||||
retry: false,
|
||||
@@ -18,7 +18,6 @@ export default function Sidebar() {
|
||||
|
||||
const isAdmin = session?.role === "admin";
|
||||
|
||||
// Mutation pour déconnexion
|
||||
const logoutMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const res = await apiRequest("POST", "/api/auth/logout", {});
|
||||
@@ -39,7 +38,7 @@ export default function Sidebar() {
|
||||
{ icon: PlusCircle, label: "Nouvelle publication", href: "/new", badge: null },
|
||||
{ icon: Calendar, label: "Calendrier", href: "/calendar", badge: null },
|
||||
{ icon: Images, label: "Médiathèque", href: "/media", badge: null },
|
||||
{ icon: Users, label: "Pages gérées", href: "/pages", badge: "8" },
|
||||
{ icon: Users, label: "Pages gérées", href: "/pages", badge: null },
|
||||
{ icon: Bot, label: "Assistant IA", href: "/ai", badge: null },
|
||||
];
|
||||
|
||||
@@ -49,21 +48,25 @@ export default function Sidebar() {
|
||||
];
|
||||
|
||||
return (
|
||||
<aside className="w-64 bg-card border-r border-border flex flex-col h-screen">
|
||||
<div className="p-6 border-b border-border">
|
||||
<aside className="w-72 bg-sidebar border-r border-sidebar-border flex flex-col h-screen">
|
||||
{/* Logo & Brand */}
|
||||
<div className="p-6 border-b border-sidebar-border">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
|
||||
<i className="fas fa-share-nodes text-primary-foreground text-xl"></i>
|
||||
<div className="w-12 h-12 gradient-primary rounded-xl flex items-center justify-center shadow-lg">
|
||||
<svg className="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-foreground">Social Flow</h1>
|
||||
<p className="text-xs text-muted-foreground">Automatisation</p>
|
||||
<h1 className="text-xl font-bold gradient-text">Social Flow</h1>
|
||||
<p className="text-xs text-muted-foreground">Automatisation sociale</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-4 overflow-y-auto">
|
||||
<ul className="space-y-2">
|
||||
<ul className="space-y-1">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = location === item.href;
|
||||
@@ -73,18 +76,21 @@ export default function Sidebar() {
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all
|
||||
group flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all relative
|
||||
${isActive
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
`}
|
||||
data-testid={`link-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
<span>{item.label}</span>
|
||||
{isActive && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
|
||||
<span className="flex-1">{item.label}</span>
|
||||
{item.badge && (
|
||||
<span className="ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary text-primary-foreground">
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold gradient-primary text-white shadow-sm">
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
@@ -94,9 +100,10 @@ export default function Sidebar() {
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-border">
|
||||
<p className="text-xs text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
|
||||
<ul className="space-y-2">
|
||||
{/* Stats Section */}
|
||||
<div className="mt-8 pt-6 border-t border-sidebar-border">
|
||||
<p className="text-xs font-semibold text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
|
||||
<ul className="space-y-1">
|
||||
{statsItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = location === item.href;
|
||||
@@ -106,15 +113,18 @@ export default function Sidebar() {
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg transition-all
|
||||
group flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
${isActive
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
`}
|
||||
data-testid={`link-${item.label.toLowerCase()}`}
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
{isActive && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
@@ -124,51 +134,61 @@ export default function Sidebar() {
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-border space-y-2">
|
||||
{/* Admin & User Section */}
|
||||
<div className="p-4 border-t border-sidebar-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>
|
||||
<p className="text-xs font-semibold 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
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
${location === "/users"
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
`}
|
||||
data-testid="link-users"
|
||||
>
|
||||
{location === "/users" && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<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
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
${location === "/sql"
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
`}
|
||||
data-testid="link-sql"
|
||||
>
|
||||
{location === "/sql" && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<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
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
${location === "/settings"
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
`}
|
||||
data-testid="link-settings"
|
||||
>
|
||||
{location === "/settings" && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<Settings className="w-5 h-5" />
|
||||
<span>Paramètres</span>
|
||||
</Link>
|
||||
@@ -178,7 +198,7 @@ export default function Sidebar() {
|
||||
<div className="pt-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start text-muted-foreground hover:text-accent-foreground"
|
||||
className="w-full justify-start text-muted-foreground hover:text-foreground hover:bg-sidebar-accent rounded-xl"
|
||||
onClick={() => logoutMutation.mutate()}
|
||||
disabled={logoutMutation.isPending}
|
||||
data-testid="button-logout"
|
||||
@@ -188,12 +208,21 @@ export default function Sidebar() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* User Profile Card */}
|
||||
{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>
|
||||
<div className="mt-4 p-4 bg-gradient-to-br from-primary/5 to-secondary/5 border border-primary/10 rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="w-10 h-10 border-2 border-primary/20">
|
||||
<AvatarFallback className="gradient-primary text-white font-semibold">
|
||||
{session.username.substring(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold truncate">{session.username}</p>
|
||||
<p className="text-xs text-muted-foreground capitalize">{session.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { CalendarCheck, Users, Bot, Images } from "lucide-react";
|
||||
import { CalendarCheck, Users, Bot, Images, TrendingUp, TrendingDown } from "lucide-react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export default function StatsCards() {
|
||||
@@ -9,41 +9,35 @@ export default function StatsCards() {
|
||||
const statCards = [
|
||||
{
|
||||
icon: CalendarCheck,
|
||||
iconColor: "text-chart-1",
|
||||
iconBg: "bg-chart-1/10",
|
||||
iconColor: "from-blue-500 to-blue-600",
|
||||
title: (stats as any)?.scheduledPosts ?? 0,
|
||||
subtitle: "Publications planifiées",
|
||||
change: "+12%",
|
||||
trending: "up",
|
||||
changeLabel: "vs mois dernier",
|
||||
period: "Ce mois",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
iconColor: "text-chart-2",
|
||||
iconBg: "bg-chart-2/10",
|
||||
iconColor: "from-purple-500 to-purple-600",
|
||||
title: (stats as any)?.connectedPages ?? 0,
|
||||
subtitle: "Pages connectées",
|
||||
info: "Facebook • Instagram",
|
||||
period: "Total",
|
||||
},
|
||||
{
|
||||
icon: Bot,
|
||||
iconColor: "text-chart-3",
|
||||
iconBg: "bg-chart-3/10",
|
||||
iconColor: "from-green-500 to-green-600",
|
||||
title: (stats as any)?.aiTextsGenerated ?? 0,
|
||||
subtitle: "Textes générés par IA",
|
||||
change: "+8%",
|
||||
trending: "up",
|
||||
changeLabel: "vs hier",
|
||||
period: "Aujourd'hui",
|
||||
},
|
||||
{
|
||||
icon: Images,
|
||||
iconColor: "text-chart-4",
|
||||
iconBg: "bg-chart-4/10",
|
||||
iconColor: "from-cyan-500 to-cyan-600",
|
||||
title: (stats as any)?.mediaStored ?? 0,
|
||||
subtitle: "Médias stockés",
|
||||
info: "Images • Vidéos",
|
||||
period: "Bibliothèque",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -51,10 +45,10 @@ export default function StatsCards() {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="bg-card rounded-lg border border-border p-6">
|
||||
<div className="skeleton h-12 w-12 rounded-lg mb-4" />
|
||||
<div className="skeleton h-8 w-16 mb-2" />
|
||||
<div className="skeleton h-4 w-32" />
|
||||
<div key={i} className="bg-card rounded-2xl border border-border p-6 shadow-sm">
|
||||
<div className="skeleton h-12 w-12 rounded-xl mb-4" />
|
||||
<div className="skeleton h-10 w-20 mb-2" />
|
||||
<div className="skeleton h-4 w-36" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -65,31 +59,40 @@ export default function StatsCards() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{statCards.map((stat, index) => {
|
||||
const Icon = stat.icon;
|
||||
const TrendIcon = stat.trending === "up" ? TrendingUp : TrendingDown;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-card rounded-lg border border-border p-6 hover:shadow-lg transition-all cursor-pointer"
|
||||
className="group bg-card rounded-2xl border border-border p-6 hover:border-primary/30 transition-all cursor-pointer card-hover shadow-sm"
|
||||
data-testid={`stat-card-${index}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className={`w-12 h-12 rounded-lg ${stat.iconBg} flex items-center justify-center`}>
|
||||
<Icon className={`${stat.iconColor} w-6 h-6`} />
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${stat.iconColor} flex items-center justify-center shadow-lg`}>
|
||||
<Icon className="text-white w-7 h-7" />
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{stat.period}</span>
|
||||
</div>
|
||||
<h3 className="text-3xl font-bold text-foreground mb-1" data-testid={`stat-value-${index}`}>
|
||||
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-4xl font-bold text-foreground" data-testid={`stat-value-${index}`}>
|
||||
{stat.title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">{stat.subtitle}</p>
|
||||
<p className="text-sm text-muted-foreground font-medium">{stat.subtitle}</p>
|
||||
</div>
|
||||
|
||||
{stat.change && (
|
||||
<div className="mt-4 flex items-center gap-2">
|
||||
<span className="text-xs text-chart-2">{stat.change}</span>
|
||||
<div className={`flex items-center gap-1 px-2 py-1 rounded-lg ${stat.trending === "up" ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"}`}>
|
||||
<TrendIcon className="w-3 h-3" />
|
||||
<span className="text-xs font-semibold">{stat.change}</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{stat.changeLabel}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{stat.info && (
|
||||
<div className="mt-4 flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">{stat.info}</span>
|
||||
<div className="mt-4">
|
||||
<span className="text-xs text-muted-foreground font-medium">{stat.info}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Bell, Menu } from "lucide-react";
|
||||
import { Bell, Menu, Search } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
interface TopBarProps {
|
||||
onMenuClick: () => void;
|
||||
@@ -6,35 +7,31 @@ interface TopBarProps {
|
||||
|
||||
export default function TopBar({ onMenuClick }: TopBarProps) {
|
||||
return (
|
||||
<header className="bg-card border-b border-border sticky top-0 z-10">
|
||||
<div className="flex items-center justify-between px-6 py-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<header className="bg-card/50 backdrop-blur-xl border-b border-border/50 sticky top-0 z-10">
|
||||
<div className="flex items-center justify-between px-6 lg:px-8 py-5">
|
||||
<div className="flex items-center gap-6 flex-1">
|
||||
<button
|
||||
className="lg:hidden text-foreground"
|
||||
className="lg:hidden text-foreground hover:text-primary transition-colors"
|
||||
onClick={onMenuClick}
|
||||
data-testid="button-menu"
|
||||
>
|
||||
<Menu className="w-6 h-6" />
|
||||
</button>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-foreground">Tableau de bord</h2>
|
||||
<p className="text-sm text-muted-foreground">Gérez vos publications sur tous vos réseaux</p>
|
||||
<div className="flex-1 max-w-md hidden md:block">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Rechercher des publications, pages, médias..."
|
||||
className="pl-10 bg-muted/30 border-muted focus:border-primary/50 rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="relative p-2 text-muted-foreground hover:text-foreground transition-all" data-testid="button-notifications">
|
||||
<button className="relative p-2.5 text-muted-foreground hover:text-primary hover:bg-muted/30 rounded-xl transition-all" data-testid="button-notifications">
|
||||
<Bell className="w-5 h-5" />
|
||||
<span className="absolute top-1 right-1 w-2 h-2 bg-destructive rounded-full"></span>
|
||||
<span className="absolute top-2 right-2 w-2 h-2 bg-destructive rounded-full ring-2 ring-card"></span>
|
||||
</button>
|
||||
<div className="flex items-center gap-3 pl-4 border-l border-border">
|
||||
<div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
|
||||
<span className="text-primary-foreground font-semibold">SF</span>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<p className="text-sm font-medium text-foreground">Social Flow</p>
|
||||
<p className="text-xs text-muted-foreground">admin@socialflow.app</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
+169
-84
@@ -3,87 +3,105 @@
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--card: 300 4.35% 6.67%;
|
||||
--ring: 221.74 13.14% 34.31%;
|
||||
--input: 0 0% 16.86%;
|
||||
--muted: 0 0% 25.1%;
|
||||
--accent: 0 0% 92.16%;
|
||||
--border: 0 0% 16.86%;
|
||||
--radius: 0.4rem;
|
||||
--chart-1: 203.8863 88.2845% 53.1373%;
|
||||
--chart-2: 159.7826 100% 36.0784%;
|
||||
--chart-3: 42.0290 92.8251% 56.2745%;
|
||||
--chart-4: 147.1429 78.5047% 41.9608%;
|
||||
--chart-5: 341.4894 75.2000% 50.9804%;
|
||||
--popover: 45 25% 97%;
|
||||
--primary: 0 0% 96.08%;
|
||||
--sidebar: 45 25% 97%;
|
||||
--spacing: 0.25rem;
|
||||
--font-mono: Menlo, monospace;
|
||||
--font-sans: 'Inter', sans-serif;
|
||||
--secondary: 0 0% 92.16%;
|
||||
--background: 0 0% 3.53%;
|
||||
--font-serif: 'Inter', sans-serif;
|
||||
--foreground: 0 0% 92.16%;
|
||||
--destructive: 356.3033 90.5579% 54.3137%;
|
||||
--sidebar-ring: 9 75% 61%;
|
||||
--sidebar-accent: 25 45% 80%;
|
||||
--sidebar-border: 45 15% 80%;
|
||||
--card-foreground: 0 0% 100%;
|
||||
--sidebar-primary: 9 75% 61%;
|
||||
--muted-foreground: 0 0% 67.06%;
|
||||
--accent-foreground: 0 0% 0%;
|
||||
--popover-foreground: 0 0% 100%;
|
||||
--primary-foreground: 0 0% 5.1%;
|
||||
--sidebar-foreground: 20 14% 17%;
|
||||
--secondary-foreground: 0 0% 5.1%;
|
||||
--background: 0 0% 98%;
|
||||
--foreground: 222 47% 11%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 47% 11%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222 47% 11%;
|
||||
|
||||
--primary: 215 85% 58%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
|
||||
--secondary: 265 75% 62%;
|
||||
--secondary-foreground: 0 0% 100%;
|
||||
|
||||
--muted: 210 40% 96%;
|
||||
--muted-foreground: 215 16% 47%;
|
||||
|
||||
--accent: 210 40% 96%;
|
||||
--accent-foreground: 222 47% 11%;
|
||||
|
||||
--destructive: 0 85% 62%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--sidebar-accent-foreground: 20 14% 17%;
|
||||
|
||||
--border: 214 32% 91%;
|
||||
--input: 214 32% 91%;
|
||||
--ring: 215 85% 58%;
|
||||
|
||||
--success: 142 76% 48%;
|
||||
--warning: 35 95% 58%;
|
||||
--info: 195 85% 55%;
|
||||
|
||||
--chart-1: 215 85% 58%;
|
||||
--chart-2: 265 75% 62%;
|
||||
--chart-3: 142 76% 48%;
|
||||
--chart-4: 195 85% 55%;
|
||||
--chart-5: 35 95% 58%;
|
||||
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-foreground: 222 47% 11%;
|
||||
--sidebar-primary: 215 85% 58%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--shadow: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 1px 2px -1px hsl(9, 75%, 61% / 0.00);
|
||||
--shadow-lg: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 4px 6px -1px hsl(9, 75%, 61% / 0.00);
|
||||
--shadow-md: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 2px 4px -1px hsl(9, 75%, 61% / 0.00);
|
||||
--shadow-sm: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 1px 2px -1px hsl(9, 75%, 61% / 0.00);
|
||||
--shadow-xl: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 8px 10px -1px hsl(9, 75%, 61% / 0.00);
|
||||
--shadow-xs: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00);
|
||||
--shadow-2xl: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00);
|
||||
--shadow-2xs: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00);
|
||||
--tracking-normal: 0em;
|
||||
--sidebar-accent: 210 40% 96%;
|
||||
--sidebar-accent-foreground: 222 47% 11%;
|
||||
--sidebar-border: 214 32% 91%;
|
||||
--sidebar-ring: 215 85% 58%;
|
||||
|
||||
--radius: 0.75rem;
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--card: 20 14% 8%;
|
||||
--ring: 9 75% 61%;
|
||||
--input: 20 14% 18%;
|
||||
--muted: 20 14% 15%;
|
||||
--accent: 25 45% 20%;
|
||||
--border: 20 14% 15%;
|
||||
--chart-1: 203.8863 88.2845% 53.1373%;
|
||||
--chart-2: 159.7826 100% 36.0784%;
|
||||
--chart-3: 42.0290 92.8251% 56.2745%;
|
||||
--chart-4: 147.1429 78.5047% 41.9608%;
|
||||
--chart-5: 341.4894 75.2000% 50.9804%;
|
||||
--popover: 20 14% 4%;
|
||||
--primary: 9 75% 61%;
|
||||
--sidebar: 20 14% 8%;
|
||||
--secondary: 30 15% 52%;
|
||||
--background: 20 14% 4%;
|
||||
--foreground: 45 25% 91%;
|
||||
--destructive: 356.3033 90.5579% 54.3137%;
|
||||
--sidebar-ring: 9 75% 61%;
|
||||
--sidebar-accent: 25 45% 20%;
|
||||
--sidebar-border: 20 14% 15%;
|
||||
--card-foreground: 45 25% 85%;
|
||||
--sidebar-primary: 9 75% 61%;
|
||||
--muted-foreground: 45 15% 46%;
|
||||
--accent-foreground: 45 25% 85%;
|
||||
--popover-foreground: 45 25% 91%;
|
||||
--background: 222 20% 8%;
|
||||
--foreground: 0 0% 95%;
|
||||
|
||||
--card: 222 16% 15%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
|
||||
--popover: 222 18% 12%;
|
||||
--popover-foreground: 0 0% 95%;
|
||||
|
||||
--primary: 215 85% 58%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--sidebar-foreground: 45 25% 85%;
|
||||
|
||||
--secondary: 265 75% 62%;
|
||||
--secondary-foreground: 0 0% 100%;
|
||||
|
||||
--muted: 222 12% 20%;
|
||||
--muted-foreground: 222 10% 65%;
|
||||
|
||||
--accent: 222 18% 12%;
|
||||
--accent-foreground: 0 0% 95%;
|
||||
|
||||
--destructive: 0 85% 62%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--sidebar-accent-foreground: 45 25% 85%;
|
||||
|
||||
--border: 222 12% 20%;
|
||||
--input: 222 12% 20%;
|
||||
--ring: 215 85% 58%;
|
||||
|
||||
--success: 142 76% 48%;
|
||||
--warning: 35 95% 58%;
|
||||
--info: 195 85% 55%;
|
||||
|
||||
--chart-1: 215 85% 58%;
|
||||
--chart-2: 265 75% 62%;
|
||||
--chart-3: 142 76% 48%;
|
||||
--chart-4: 195 85% 55%;
|
||||
--chart-5: 35 95% 58%;
|
||||
|
||||
--sidebar: 222 20% 8%;
|
||||
--sidebar-foreground: 0 0% 95%;
|
||||
--sidebar-primary: 215 85% 58%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 222 18% 12%;
|
||||
--sidebar-accent-foreground: 0 0% 95%;
|
||||
--sidebar-border: 222 12% 20%;
|
||||
--sidebar-ring: 215 85% 58%;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -94,41 +112,108 @@
|
||||
body {
|
||||
@apply font-sans antialiased bg-background text-foreground;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: hsl(var(--muted));
|
||||
background: hsl(var(--muted) / 0.5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--primary));
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--secondary)));
|
||||
border-radius: 5px;
|
||||
border: 2px solid hsl(var(--background));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--primary) / 0.8);
|
||||
background: linear-gradient(180deg, hsl(var(--primary) / 0.9), hsl(var(--secondary) / 0.9));
|
||||
}
|
||||
|
||||
/* Animation for chat messages */
|
||||
@keyframes slideInRight {
|
||||
/* Smooth transitions */
|
||||
* {
|
||||
transition: background-color 200ms, border-color 200ms, color 200ms;
|
||||
}
|
||||
|
||||
button, a {
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
/* Animation for cards */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
.fade-in {
|
||||
animation: fadeIn 150ms ease-out;
|
||||
}
|
||||
|
||||
/* Gradient utilities */
|
||||
.gradient-primary {
|
||||
background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Card hover effect */
|
||||
.card-hover {
|
||||
transition: transform 200ms, box-shadow 200ms;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 24px hsl(var(--primary) / 0.12);
|
||||
}
|
||||
|
||||
/* Platform badges */
|
||||
.badge-facebook {
|
||||
background: hsl(var(--primary) / 0.1);
|
||||
color: hsl(var(--primary));
|
||||
border: 1px solid hsl(var(--primary) / 0.25);
|
||||
}
|
||||
|
||||
.badge-instagram {
|
||||
background: hsl(var(--secondary) / 0.1);
|
||||
color: hsl(var(--secondary));
|
||||
border: 1px solid hsl(var(--secondary) / 0.25);
|
||||
}
|
||||
|
||||
/* Status indicators */
|
||||
.status-scheduled {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.status-published {
|
||||
color: hsl(var(--success));
|
||||
}
|
||||
|
||||
.status-failed {
|
||||
color: hsl(var(--destructive));
|
||||
}
|
||||
|
||||
.status-draft {
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
/* Skeleton loader */
|
||||
|
||||
@@ -25,18 +25,16 @@ export default function AI() {
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<div className="p-8 max-w-5xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-foreground">Assistant IA</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Générez du contenu personnalisé avec l'intelligence artificielle
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<AiChat />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { TrendingUp, Users, Eye, Heart } from "lucide-react";
|
||||
import { TrendingUp, Users, Eye, Heart, BarChart3 } from "lucide-react";
|
||||
import Sidebar from "@/components/sidebar";
|
||||
import TopBar from "@/components/topbar";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
@@ -12,6 +12,37 @@ export default function Analytics() {
|
||||
queryKey: ['/api/stats'],
|
||||
});
|
||||
|
||||
const metrics = [
|
||||
{
|
||||
title: "Publications totales",
|
||||
value: "0",
|
||||
description: "Toutes plateformes",
|
||||
icon: TrendingUp,
|
||||
gradient: "from-primary to-primary/80",
|
||||
},
|
||||
{
|
||||
title: "Portée totale",
|
||||
value: "0",
|
||||
description: "Personnes atteintes",
|
||||
icon: Users,
|
||||
gradient: "from-secondary to-secondary/80",
|
||||
},
|
||||
{
|
||||
title: "Impressions",
|
||||
value: "0",
|
||||
description: "Vues totales",
|
||||
icon: Eye,
|
||||
gradient: "from-success to-success/80",
|
||||
},
|
||||
{
|
||||
title: "Engagement",
|
||||
value: "0",
|
||||
description: "Interactions totales",
|
||||
icon: Heart,
|
||||
gradient: "from-warning to-warning/80",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-background">
|
||||
{sidebarOpen && (
|
||||
@@ -31,76 +62,64 @@ export default function Analytics() {
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<div className="p-8 max-w-[1600px] mx-auto space-y-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-foreground">Analyses</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Statistiques et performances de vos publications
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{metrics.map((metric, index) => {
|
||||
const Icon = metric.icon;
|
||||
return (
|
||||
<Card key={index} className="rounded-2xl border-border/50 shadow-lg overflow-hidden">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Publications totales
|
||||
{metric.title}
|
||||
</CardTitle>
|
||||
<TrendingUp className="w-4 h-4 text-muted-foreground" />
|
||||
<div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${metric.gradient} flex items-center justify-center shadow-md`}>
|
||||
<Icon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold" data-testid="text-total-posts">0</div>
|
||||
<p className="text-xs text-muted-foreground">Toutes plateformes</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Portée totale
|
||||
</CardTitle>
|
||||
<Users className="w-4 h-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold" data-testid="text-total-reach">0</div>
|
||||
<p className="text-xs text-muted-foreground">Personnes atteintes</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Impressions
|
||||
</CardTitle>
|
||||
<Eye className="w-4 h-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold" data-testid="text-total-impressions">0</div>
|
||||
<p className="text-xs text-muted-foreground">Vues totales</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Engagement
|
||||
</CardTitle>
|
||||
<Heart className="w-4 h-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold" data-testid="text-total-engagement">0</div>
|
||||
<p className="text-xs text-muted-foreground">Interactions totales</p>
|
||||
<div className="text-3xl font-bold" data-testid={`text-${metric.title.toLowerCase().replace(/\s+/g, '-')}`}>
|
||||
{metric.value}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2 font-medium">{metric.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Fonctionnalité à venir</CardTitle>
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="border-b border-border/50 p-6 bg-gradient-to-r from-primary/5 to-secondary/5">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
|
||||
<BarChart3 className="text-white w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg">Fonctionnalité à venir</CardTitle>
|
||||
<p className="text-sm text-muted-foreground mt-1">Graphiques et statistiques détaillées</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground">
|
||||
<CardContent className="p-8">
|
||||
<div className="text-center py-12">
|
||||
<div className="w-20 h-20 rounded-2xl bg-muted/30 flex items-center justify-center mx-auto mb-6">
|
||||
<BarChart3 className="w-10 h-10 text-muted-foreground opacity-50" />
|
||||
</div>
|
||||
<p className="text-muted-foreground text-lg mb-2">
|
||||
Les analyses détaillées et les graphiques de performance seront disponibles prochainement.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Vous pourrez suivre l'évolution de vos statistiques au fil du temps
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -25,8 +25,8 @@ export default function Calendar() {
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<div className="p-8 max-w-[1600px] mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-foreground">Calendrier</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Visualisez et gérez vos publications planifiées
|
||||
|
||||
@@ -6,7 +6,7 @@ import MediaUpload from "@/components/media-upload";
|
||||
import CalendarView from "@/components/calendar-view";
|
||||
import ManagedPages from "@/components/managed-pages";
|
||||
import QuickActions from "@/components/quick-actions";
|
||||
import { Menu } from "lucide-react";
|
||||
import { PlusCircle } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Dashboard() {
|
||||
@@ -14,7 +14,6 @@ export default function Dashboard() {
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-background">
|
||||
{/* Mobile sidebar overlay */}
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-40 lg:hidden"
|
||||
@@ -22,7 +21,6 @@ export default function Dashboard() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
<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'}
|
||||
@@ -30,34 +28,32 @@ export default function Dashboard() {
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="p-8 space-y-8 max-w-[1600px] mx-auto">
|
||||
<StatsCards />
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
<AiChat />
|
||||
<MediaUpload />
|
||||
</div>
|
||||
<div>
|
||||
<div className="space-y-8">
|
||||
<QuickActions />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MediaUpload />
|
||||
<CalendarView />
|
||||
<ManagedPages />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Floating action button for mobile */}
|
||||
<button
|
||||
className="fixed bottom-6 right-6 w-14 h-14 bg-primary rounded-full shadow-xl flex items-center justify-center text-primary-foreground lg:hidden hover:scale-110 transition-all z-30"
|
||||
className="fixed bottom-8 right-8 w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-2xl shadow-2xl flex items-center justify-center text-white lg:hidden hover:scale-110 transition-all z-30"
|
||||
data-testid="button-new-post"
|
||||
>
|
||||
<Menu className="w-6 h-6" />
|
||||
<PlusCircle className="w-7 h-7" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Clock, CheckCircle, XCircle, Calendar } from "lucide-react";
|
||||
import { Clock, CheckCircle, XCircle, Calendar, History as HistoryIcon } from "lucide-react";
|
||||
import Sidebar from "@/components/sidebar";
|
||||
import TopBar from "@/components/topbar";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
@@ -37,8 +37,8 @@ export default function History() {
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<div className="p-8 max-w-5xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-foreground">Historique</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Consultez l'historique de vos publications
|
||||
@@ -46,40 +46,48 @@ export default function History() {
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Card key={i} className="animate-pulse">
|
||||
<CardHeader className="h-24 bg-muted"></CardHeader>
|
||||
</Card>
|
||||
<div key={i} className="h-40 bg-card rounded-2xl border border-border/50 animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : publishedPosts.length === 0 ? (
|
||||
<Card className="border-dashed">
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Clock className="w-12 h-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Aucune publication</h3>
|
||||
<p className="text-muted-foreground text-center">
|
||||
<Card className="rounded-2xl border-border/50 border-dashed shadow-lg">
|
||||
<CardContent className="flex flex-col items-center justify-center py-16">
|
||||
<div className="w-20 h-20 rounded-2xl bg-muted/30 flex items-center justify-center mb-6">
|
||||
<HistoryIcon className="w-10 h-10 text-muted-foreground opacity-50" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Aucune publication</h3>
|
||||
<p className="text-muted-foreground text-center max-w-md">
|
||||
Vos publications apparaîtront ici une fois publiées
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-6">
|
||||
{publishedPosts.map((post) => (
|
||||
<Card key={post.id} data-testid={`card-post-${post.id}`}>
|
||||
<CardHeader>
|
||||
<Card key={post.id} className="rounded-2xl border-border/50 shadow-lg overflow-hidden" data-testid={`card-post-${post.id}`}>
|
||||
<CardHeader className="border-b border-border/50 bg-gradient-to-r from-muted/20 to-muted/10 p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-lg mb-2">
|
||||
Publication #{post.id}
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-success to-success/80 flex items-center justify-center shadow-md">
|
||||
<CheckCircle className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">
|
||||
Publication #{post.id.substring(0, 8)}
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
</div>
|
||||
<p className="text-sm text-foreground leading-relaxed line-clamp-3">
|
||||
{post.content}
|
||||
</p>
|
||||
</div>
|
||||
<Badge
|
||||
variant={post.status === 'published' ? 'default' : 'secondary'}
|
||||
className="ml-4"
|
||||
className={`ml-4 ${
|
||||
post.status === 'published'
|
||||
? 'bg-success/20 text-success hover:bg-success/30'
|
||||
: 'bg-destructive/20 text-destructive hover:bg-destructive/30'
|
||||
}`}
|
||||
>
|
||||
{post.status === 'published' && <CheckCircle className="w-3 h-3 mr-1" />}
|
||||
{post.status === 'failed' && <XCircle className="w-3 h-3 mr-1" />}
|
||||
@@ -87,17 +95,20 @@ export default function History() {
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-6 text-sm text-muted-foreground flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span className="font-medium">
|
||||
{post.updatedAt
|
||||
? format(new Date(post.updatedAt), "d MMM yyyy 'à' HH:mm", { locale: fr })
|
||||
: 'Date inconnue'
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
{post.aiGenerated && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
<Badge variant="outline" className="text-xs bg-gradient-to-r from-primary/5 to-secondary/5 border-primary/20">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Généré par IA
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
+33
-23
@@ -6,7 +6,7 @@ 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";
|
||||
import { Lock, User, Sparkles } from "lucide-react";
|
||||
|
||||
export default function Login() {
|
||||
const [, setLocation] = useLocation();
|
||||
@@ -16,7 +16,6 @@ export default function Login() {
|
||||
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 {
|
||||
@@ -44,7 +43,6 @@ export default function Login() {
|
||||
description: `Bienvenue ${data.username}`,
|
||||
});
|
||||
|
||||
// Rediriger vers le dashboard
|
||||
setLocation("/");
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
@@ -58,29 +56,38 @@ export default function Login() {
|
||||
};
|
||||
|
||||
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>
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-secondary/5 p-4">
|
||||
<div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
|
||||
|
||||
<Card className="w-full max-w-md rounded-2xl border-border/50 shadow-2xl relative z-10">
|
||||
<CardHeader className="space-y-4 text-center pt-8 pb-6">
|
||||
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary to-secondary mx-auto flex items-center justify-center shadow-2xl">
|
||||
<Sparkles className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
||||
Social Flow
|
||||
</CardTitle>
|
||||
<CardDescription className="text-base mt-3">
|
||||
Connectez-vous à votre compte pour gérer vos publications
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="username" data-testid="label-username">
|
||||
<CardContent className="pb-8 px-8">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="space-y-3">
|
||||
<Label htmlFor="username" className="text-sm font-semibold" 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" />
|
||||
<User className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<Input
|
||||
id="username"
|
||||
type="text"
|
||||
placeholder="admin"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="pl-10"
|
||||
className="pl-12 h-12 rounded-xl bg-muted/30 border-border/50 focus:border-primary/50"
|
||||
required
|
||||
disabled={isLoading}
|
||||
data-testid="input-username"
|
||||
@@ -88,19 +95,19 @@ export default function Login() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password" data-testid="label-password">
|
||||
<div className="space-y-3">
|
||||
<Label htmlFor="password" className="text-sm font-semibold" 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" />
|
||||
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
className="pl-12 h-12 rounded-xl bg-muted/30 border-border/50 focus:border-primary/50"
|
||||
required
|
||||
disabled={isLoading}
|
||||
data-testid="input-password"
|
||||
@@ -110,7 +117,7 @@ export default function Login() {
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
className="w-full h-12 rounded-xl bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-base font-semibold shadow-lg mt-6"
|
||||
disabled={isLoading}
|
||||
data-testid="button-login"
|
||||
>
|
||||
@@ -119,10 +126,13 @@ export default function Login() {
|
||||
</form>
|
||||
|
||||
{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 className="mt-8 text-center p-4 rounded-xl bg-warning/10 border border-warning/20">
|
||||
<p className="text-sm text-muted-foreground mb-2">Identifiants par défaut :</p>
|
||||
<p className="font-semibold text-foreground">admin / admin</p>
|
||||
<p className="text-xs mt-3 text-warning flex items-center justify-center gap-2">
|
||||
<span className="text-base">⚠️</span>
|
||||
Changez ce mot de passe après la première connexion
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
@@ -25,8 +25,8 @@ export default function Media() {
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<div className="p-8 max-w-[1600px] mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-foreground">Médiathèque</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Gérez vos images et vidéos pour vos publications
|
||||
|
||||
@@ -151,18 +151,18 @@ export default function NewPost() {
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="p-6 max-w-5xl mx-auto">
|
||||
<div className="mb-6">
|
||||
<div className="p-8 max-w-6xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-foreground">Nouvelle publication</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Créez et planifiez une nouvelle publication
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div className="space-y-8">
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle>Contenu</CardTitle>
|
||||
<CardDescription>Informations du produit ou message</CardDescription>
|
||||
</CardHeader>
|
||||
@@ -190,8 +190,8 @@ export default function NewPost() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle>Texte de la publication</CardTitle>
|
||||
<CardDescription>Écrivez ou générez le texte de votre publication</CardDescription>
|
||||
</CardHeader>
|
||||
@@ -207,8 +207,8 @@ export default function NewPost() {
|
||||
</Card>
|
||||
|
||||
{generatedVariants.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle>Variations générées par l'IA</CardTitle>
|
||||
<CardDescription>Cliquez sur "Utiliser" pour remplir le texte ci-dessus</CardDescription>
|
||||
</CardHeader>
|
||||
@@ -241,8 +241,8 @@ export default function NewPost() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle>Média</CardTitle>
|
||||
<CardDescription>Sélectionnez une image ou vidéo</CardDescription>
|
||||
</CardHeader>
|
||||
@@ -285,9 +285,9 @@ export default function NewPost() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="space-y-8">
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle>Pages cibles</CardTitle>
|
||||
<CardDescription>Sélectionnez les pages où publier</CardDescription>
|
||||
</CardHeader>
|
||||
@@ -332,8 +332,8 @@ export default function NewPost() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle>Planification</CardTitle>
|
||||
<CardDescription>Programmez la publication (optionnel)</CardDescription>
|
||||
</CardHeader>
|
||||
@@ -357,7 +357,7 @@ export default function NewPost() {
|
||||
<Button
|
||||
onClick={handleCreatePost}
|
||||
disabled={createPostMutation.isPending}
|
||||
className="w-full"
|
||||
className="w-full bg-gradient-to-r from-primary to-secondary hover:opacity-90 shadow-lg"
|
||||
size="lg"
|
||||
data-testid="button-create-post"
|
||||
>
|
||||
|
||||
@@ -61,8 +61,8 @@ export default function PagesManagement() {
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="p-8 max-w-[1600px] mx-auto">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-foreground">Pages gérées</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
@@ -74,16 +74,14 @@ export default function PagesManagement() {
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Card key={i} className="animate-pulse">
|
||||
<CardHeader className="h-32 bg-muted"></CardHeader>
|
||||
</Card>
|
||||
<div key={i} className="h-48 bg-card rounded-2xl border border-border/50 animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : pages.length === 0 ? (
|
||||
<Card className="border-dashed">
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Card className="border-dashed rounded-2xl border-border/50 shadow-lg">
|
||||
<CardContent className="flex flex-col items-center justify-center py-16">
|
||||
<div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
|
||||
<Plus className="w-8 h-8 text-muted-foreground" />
|
||||
</div>
|
||||
@@ -98,9 +96,9 @@ export default function PagesManagement() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{pages.map((page) => (
|
||||
<Card key={page.id} data-testid={`card-page-${page.id}`}>
|
||||
<Card key={page.id} className="rounded-2xl border-border/50 shadow-lg" data-testid={`card-page-${page.id}`}>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
|
||||
@@ -128,17 +128,17 @@ export default function Settings() {
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
<div className="mb-6">
|
||||
<div className="p-8 max-w-4xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-foreground">Paramètres</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Configurez votre application
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="space-y-8">
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Bell className="w-5 h-5" />
|
||||
Notifications
|
||||
@@ -179,8 +179,8 @@ export default function Settings() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Brain className="w-5 h-5" />
|
||||
Configuration OpenRouter (IA)
|
||||
@@ -263,8 +263,8 @@ export default function Settings() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Cloud className="w-5 h-5" />
|
||||
Configuration Cloudinary
|
||||
@@ -324,8 +324,8 @@ export default function Settings() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Shield className="w-5 h-5" />
|
||||
Sécurité
|
||||
|
||||
@@ -93,7 +93,7 @@ export default function SqlAdmin() {
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="p-8 max-w-[1600px] mx-auto space-y-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold flex items-center gap-2">
|
||||
<Database className="w-8 h-8" />
|
||||
@@ -104,10 +104,10 @@ export default function SqlAdmin() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
{/* Liste des tables */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle>Tables disponibles</CardTitle>
|
||||
<CardDescription>
|
||||
Cliquez pour insérer dans la requête
|
||||
@@ -132,9 +132,9 @@ export default function SqlAdmin() {
|
||||
</Card>
|
||||
|
||||
{/* Éditeur SQL et résultats */}
|
||||
<div className="lg:col-span-3 space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="lg:col-span-3 space-y-8">
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle>Éditeur SQL</CardTitle>
|
||||
<CardDescription>
|
||||
Entrez votre requête SQL ci-dessous
|
||||
@@ -172,8 +172,8 @@ export default function SqlAdmin() {
|
||||
|
||||
{/* Résultats */}
|
||||
{queryResult && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<CardTitle>Résultats</CardTitle>
|
||||
|
||||
@@ -210,7 +210,7 @@ export default function UsersAdmin() {
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="p-8 max-w-[1600px] mx-auto space-y-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold flex items-center gap-2">
|
||||
<Users className="w-8 h-8" />
|
||||
@@ -221,11 +221,11 @@ export default function UsersAdmin() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Liste des utilisateurs */}
|
||||
<div className="lg:col-span-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle>Liste des utilisateurs</CardTitle>
|
||||
<CardDescription>
|
||||
{users?.length || 0} utilisateur(s) enregistré(s)
|
||||
@@ -297,8 +297,8 @@ export default function UsersAdmin() {
|
||||
|
||||
{/* Formulaire de création */}
|
||||
<div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<UserPlus className="w-5 h-5" />
|
||||
Créer un utilisateur
|
||||
|
||||
@@ -0,0 +1,155 @@
|
||||
# Social Flow - Design Guidelines
|
||||
|
||||
## Design Approach
|
||||
|
||||
**Selected Framework:** Design System Approach inspired by modern SaaS dashboards (Linear, Buffer, Notion) with Material Design principles for data-rich interfaces.
|
||||
|
||||
**Core Philosophy:** Professional productivity tool prioritizing clarity, efficiency, and visual hierarchy in dark mode with sophisticated blue/purple branding.
|
||||
|
||||
## Color Palette
|
||||
|
||||
**Dark Mode (Primary Theme):**
|
||||
- Background Base: 222 20% 8%
|
||||
- Surface Elevated: 222 18% 12%
|
||||
- Surface Card: 222 16% 15%
|
||||
- Border Subtle: 222 12% 20%
|
||||
|
||||
**Brand Colors:**
|
||||
- Primary Blue: 215 85% 58%
|
||||
- Primary Purple: 265 75% 62%
|
||||
- Gradient Accent: Linear gradient from Primary Blue to Primary Purple
|
||||
|
||||
**Functional Colors:**
|
||||
- Success Green: 142 76% 48%
|
||||
- Warning Orange: 35 95% 58%
|
||||
- Error Red: 0 85% 62%
|
||||
- Info Cyan: 195 85% 55%
|
||||
|
||||
**Text Hierarchy:**
|
||||
- Primary Text: 0 0% 95%
|
||||
- Secondary Text: 222 10% 65%
|
||||
- Tertiary Text: 222 8% 48%
|
||||
|
||||
## Typography
|
||||
|
||||
**Font Family:**
|
||||
- Primary: 'Inter' from Google Fonts (400, 500, 600, 700)
|
||||
- Monospace: 'JetBrains Mono' for timestamps and metrics
|
||||
|
||||
**Scale:**
|
||||
- Headings H1: text-3xl font-semibold
|
||||
- Headings H2: text-2xl font-semibold
|
||||
- Headings H3: text-xl font-medium
|
||||
- Body Large: text-base
|
||||
- Body: text-sm
|
||||
- Captions: text-xs text-secondary
|
||||
|
||||
## Layout System
|
||||
|
||||
**Spacing Primitives:** Tailwind units of 2, 4, 6, 8, 12, 16 (e.g., p-4, gap-6, mt-8)
|
||||
|
||||
**Grid Structure:**
|
||||
- Sidebar: Fixed width 280px (w-70) on desktop, collapsible on mobile
|
||||
- Main Content: Flexible with max-w-7xl container
|
||||
- Dashboard Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 with gap-6
|
||||
|
||||
**Container Widths:**
|
||||
- Dashboard sections: max-w-7xl with px-6 to px-8
|
||||
- Form containers: max-w-2xl
|
||||
- Content cards: Full width within grid columns
|
||||
|
||||
## Component Library
|
||||
|
||||
### Sidebar Navigation
|
||||
- Dark surface (Background Base) with subtle border-right
|
||||
- Logo + app name at top (h-16)
|
||||
- Navigation items with icons (Heroicons) + labels
|
||||
- Active state: Primary gradient background with 12% opacity, blue text
|
||||
- Hover: Surface Elevated background
|
||||
- Bottom section: User profile card with avatar, name, settings icon
|
||||
- Spacing: py-2 between items, px-4 horizontal padding
|
||||
|
||||
### Dashboard Cards
|
||||
- Background: Surface Card with rounded-xl
|
||||
- Border: 1px solid Border Subtle
|
||||
- Shadow: Soft shadow (shadow-lg with low opacity)
|
||||
- Padding: p-6
|
||||
- Header: Flex justify-between with title (text-lg font-semibold) + action button
|
||||
- Content spacing: space-y-4 internally
|
||||
|
||||
### Post Scheduling Interface
|
||||
- Calendar view: Week/month grid with date cells
|
||||
- Post cards: Compact cards showing thumbnail + caption preview + platform badges (FB/IG)
|
||||
- Drag-and-drop visual indicators
|
||||
- Time slots: Hourly breakdown with scheduled posts
|
||||
|
||||
### Analytics Cards
|
||||
- Metric cards: Large number (text-3xl font-bold) + label + trend indicator
|
||||
- Charts: Use Chart.js with gradient fills matching brand colors
|
||||
- Grid layout for KPIs: 4 columns on desktop, responsive down
|
||||
|
||||
### Forms & Inputs
|
||||
- Input fields: Surface Elevated background, border Border Subtle, rounded-lg, px-4 py-3
|
||||
- Focus state: Primary Blue border, subtle glow
|
||||
- Labels: text-sm font-medium mb-2, Secondary Text color
|
||||
- Textarea: min-h-32 for post composition
|
||||
- File upload: Dashed border drop zone with center icon and text
|
||||
|
||||
### Buttons
|
||||
- Primary: Gradient background (blue to purple), text-white, rounded-lg, px-6 py-3, font-medium
|
||||
- Secondary: Border Primary Blue, text Primary Blue, transparent background
|
||||
- Ghost: Transparent, hover Surface Elevated
|
||||
- Icon buttons: w-10 h-10, rounded-lg, center content
|
||||
|
||||
### Platform Badges
|
||||
- Small pills (px-3 py-1, rounded-full, text-xs font-medium)
|
||||
- Facebook: Blue background (215 85% 58% with 15% opacity), blue text
|
||||
- Instagram: Purple background (265 75% 62% with 15% opacity), purple text
|
||||
|
||||
### Status Indicators
|
||||
- Dots with colors: w-2 h-2 rounded-full
|
||||
- Scheduled: Primary Blue
|
||||
- Published: Success Green
|
||||
- Failed: Error Red
|
||||
- Draft: Tertiary Text
|
||||
|
||||
### Data Tables
|
||||
- Header row: Surface Elevated background, font-medium, uppercase text-xs
|
||||
- Rows: Border-bottom subtle, hover Surface Card
|
||||
- Padding: px-6 py-4
|
||||
- Alternating backgrounds for better readability
|
||||
|
||||
## Animations
|
||||
|
||||
**Minimal & Purposeful:**
|
||||
- Page transitions: Fade-in only (150ms)
|
||||
- Card hover: Subtle lift (translateY -2px, 200ms)
|
||||
- Button interactions: Scale 0.98 on active
|
||||
- Navigation: Smooth color transitions (200ms)
|
||||
- No distracting scroll animations or complex effects
|
||||
|
||||
## Images
|
||||
|
||||
**Hero Section:** None - Dashboard-first interface prioritizing immediate utility
|
||||
|
||||
**Avatar & Thumbnails:**
|
||||
- User avatars: w-10 h-10, rounded-full with border
|
||||
- Post thumbnails: aspect-video, rounded-lg, object-cover
|
||||
- Platform logos: Use official brand SVGs at 20x20 or 24x24
|
||||
|
||||
**Empty States:**
|
||||
- Illustration placeholders for "No posts scheduled", "No analytics data"
|
||||
- Center aligned with icon, heading, and CTA button
|
||||
- Subtle grayscale illustrations maintaining professional tone
|
||||
|
||||
## Key Screens Layout
|
||||
|
||||
**Dashboard:** 3-column grid with Overview metrics (top row), Recent Posts card, Upcoming Schedule card, Quick Analytics
|
||||
|
||||
**Calendrier:** Full-width calendar component, left sidebar filter (platforms, status), right panel for selected post details
|
||||
|
||||
**Nouvelle Publication:** Center form (max-w-2xl), left preview panel showing platform-specific mockups, sticky publish/schedule buttons
|
||||
|
||||
**Analytiques:** Metric cards grid (4 cols), followed by full-width charts for engagement over time, best posting times heatmap
|
||||
|
||||
**Paramètres:** Two-column layout, left navigation tabs, right content panels
|
||||
@@ -121,7 +121,7 @@ export class FacebookService {
|
||||
const params = new URLSearchParams({
|
||||
access_token: page.accessToken!,
|
||||
message: post.content,
|
||||
published: 'false',
|
||||
published: '0',
|
||||
scheduled_publish_time: scheduledTimestamp.toString(),
|
||||
});
|
||||
|
||||
@@ -147,7 +147,7 @@ export class FacebookService {
|
||||
access_token: page.accessToken!,
|
||||
message: post.content,
|
||||
url: photoUrl,
|
||||
published: 'false',
|
||||
published: '0',
|
||||
scheduled_publish_time: scheduledTimestamp.toString(),
|
||||
});
|
||||
|
||||
|
||||
Reference in new issue
Block a user