mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-13 10:17:45 +02:00
Update application UI with a modern and streamlined design
Revamp the entire UI with a new theme, enhancing readability and modern aesthetics across all components, including AI chat, calendar, media uploads, and user management sections. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nriKMjY
This commit is contained in:
michaelschal committed
1 parent
c208939745
commit
63ae963cd3
18 files changed
+566
-473
No files matched your search
@@ -14,10 +14,18 @@ run = ["npm", "run", "start"]
|
||||
localPort = 5000
|
||||
externalPort = 80
|
||||
|
||||
[[ports]]
|
||||
localPort = 35357
|
||||
externalPort = 3002
|
||||
|
||||
[[ports]]
|
||||
localPort = 40537
|
||||
externalPort = 3000
|
||||
|
||||
[[ports]]
|
||||
localPort = 41095
|
||||
externalPort = 3003
|
||||
|
||||
[[ports]]
|
||||
localPort = 43245
|
||||
externalPort = 3001
|
||||
|
||||
@@ -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>
|
||||
<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>
|
||||
<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="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"
|
||||
>
|
||||
<Sparkles className="w-4 h-4 mr-2" />
|
||||
Nouveau chat
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setMessages([messages[0]])}
|
||||
data-testid="button-new-chat"
|
||||
>
|
||||
<i className="fas fa-plus mr-2"></i>Nouveau chat
|
||||
</Button>
|
||||
</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,83 +68,90 @@ 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>
|
||||
<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>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={goToPreviousMonth}
|
||||
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">
|
||||
{monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={goToNextMonth}
|
||||
data-testid="button-next-month"
|
||||
>
|
||||
Suivant
|
||||
<ChevronRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
<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="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-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
|
||||
<ChevronRight className="w-4 h-4 ml-2" />
|
||||
</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>
|
||||
<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
|
||||
</p>
|
||||
<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="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>
|
||||
</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>
|
||||
<Button data-testid="button-connect-page">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Connecter une page
|
||||
</Button>
|
||||
</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>
|
||||
<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>
|
||||
<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="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>
|
||||
<Button
|
||||
onClick={open}
|
||||
data-testid="button-browse"
|
||||
>
|
||||
<CloudUpload className="w-4 h-4 mr-2" />
|
||||
Parcourir
|
||||
</Button>
|
||||
</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
|
||||
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"
|
||||
data-testid={`media-item-${media.id}`}
|
||||
>
|
||||
<div className="w-12 h-12 rounded bg-muted flex items-center justify-center flex-shrink-0">
|
||||
{media.type === "video" ? (
|
||||
<Video className="w-6 h-6 text-muted-foreground" />
|
||||
) : (
|
||||
<ImageIcon className="w-6 h-6 text-muted-foreground" />
|
||||
)}
|
||||
<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-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-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-7 h-7 text-secondary" />
|
||||
) : (
|
||||
<ImageIcon className="w-7 h-7 text-primary" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<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-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={(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-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</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">
|
||||
{(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">
|
||||
Prêt
|
||||
</span>
|
||||
<button
|
||||
onClick={() => deleteMutation.mutate(media.id)}
|
||||
className="text-muted-foreground hover:text-destructive transition-all"
|
||||
data-testid={`button-delete-${media.id}`}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</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="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>
|
||||
<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-2">
|
||||
<div className="w-2 h-2 rounded-full bg-chart-2"></div>
|
||||
<span className="text-sm text-foreground">OpenRouter 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">OpenRouter 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-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>
|
||||
|
||||
@@ -25,17 +25,15 @@ 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>
|
||||
<AiChat />
|
||||
</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">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Publications totales
|
||||
</CardTitle>
|
||||
<TrendingUp className="w-4 h-4 text-muted-foreground" />
|
||||
</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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<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">
|
||||
{metric.title}
|
||||
</CardTitle>
|
||||
<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-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">
|
||||
Les analyses détaillées et les graphiques de performance seront disponibles prochainement.
|
||||
</p>
|
||||
<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}
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
<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>
|
||||
</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" />
|
||||
{post.updatedAt
|
||||
? format(new Date(post.updatedAt), "d MMM yyyy 'à' HH:mm", { locale: fr })
|
||||
: 'Date inconnue'
|
||||
}
|
||||
<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>
|
||||
)}
|
||||
|
||||
+35
-25
@@ -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>
|
||||
Connectez-vous à votre compte pour gérer vos publications
|
||||
</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
|
||||
|
||||
Reference in new issue
Block a user