mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-22 14:38:11 +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
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user