mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-16 03:39:15 +02:00
Update the user interface with a modern, simple, and readable theme
Refactored UI components for stat cards and the top bar, introducing gradient backgrounds, rounded elements, improved spacing, and a search input. 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/Ob3gzfQ
This commit is contained in:
michaelschal committed
1 parent
e90f8930b3
commit
c208939745
2 files changed
+48
-48
No files matched your search
@@ -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}`}>
|
||||
{stat.title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">{stat.subtitle}</p>
|
||||
|
||||
<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 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>
|
||||
|
||||
Reference in new issue
Block a user