import { Head, Link, usePage } from '@inertiajs/react'; import { motion } from 'framer-motion'; import { Users, CalendarDays, Briefcase, Activity, TrendingUp, GraduationCap, Award, Clock, CheckCircle2, } from 'lucide-react'; import { cn } from '@/lib/utils'; import AppLayout from '@/layouts/app-layout'; import { EmployeeAttendanceChart, PayrollEvolutionChart, PerformanceRadarChart, TurnoverPieChart, RecruitmentFunnelChart } from '@/components/dashboard/dashboard-charts'; import { index as employeesIndex } from '@/routes/admin/employees'; import { index as leaveRequestsIndex } from '@/routes/admin/leave-requests'; import type { Auth } from '@/types'; type DashboardStats = { employees?: { active: number; }; leave?: { absent_today: number; pending: number; }; // the rest are kept for compatibility with the backend controller [key: string]: any; }; function greetingForHour(hour: number): string { if (hour < 12) return 'Bonjour'; if (hour < 18) return 'Bon après-midi'; return 'Bonsoir'; } function formatLongDate(date: Date): string { return new Intl.DateTimeFormat('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric', }).format(date); } export default function Dashboard({ stats }: { stats: DashboardStats;[key: string]: any }) { const { auth } = usePage<{ auth: Auth }>().props; const userName = auth.user?.name ?? 'utilisateur'; const now = new Date(); const topKpis = [ { key: 'effectif', label: 'Effectif Actif', value: stats.employees?.active ? String(stats.employees.active) : '131', icon: Users, href: employeesIndex.url(), trend: '+4 ce mois', bgColor: 'bg-primary', textColor: 'text-primary-foreground', iconBg: 'bg-white/20', iconColor: 'text-white' }, { key: 'conges', label: 'Congés en attente', value: stats.leave?.pending ? String(stats.leave.pending) : '3', icon: CalendarDays, href: leaveRequestsIndex.url({ query: { status: 'submitted' } }), bgColor: 'bg-brand-yellow', textColor: 'text-brand-yellow-foreground', iconBg: 'bg-black/10', iconColor: 'text-brand-yellow-foreground' }, { key: 'turnover', label: 'Taux de Turnover', value: '3.4%', icon: Activity, href: '#', trend: '-0.5% vs an dernier', bgColor: 'bg-secondary', textColor: 'text-secondary-foreground', iconBg: 'bg-white/20', iconColor: 'text-white' }, { key: 'recrutements', label: 'Postes Ouverts', value: '8', icon: Briefcase, href: '#', bgColor: 'bg-accent', textColor: 'text-accent-foreground', iconBg: 'bg-black/10', iconColor: 'text-accent-foreground' } ]; const trainingData = [ { name: 'Sécurité au travail', progress: 85, target: 100 }, { name: 'Management Agile', progress: 45, target: 50 }, { name: 'Nouvelles normes ISO', progress: 12, target: 120 }, ]; const containerVariants = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1 } } }; const itemVariants = { hidden: { opacity: 0, y: 15 }, show: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 350, damping: 30 } } }; return ( <>

{greetingForHour(now.getHours())}, {userName}

{formatLongDate(now)}

{/* 1. KPIs */}
{topKpis.map((card, i) => { const Icon = card.icon; return (

{card.label}

{card.value}

{card.trend && (
{card.trend}
)} ); })}
{/* 2. Main Charts */}

Présences & Absences

Derniers 6 mois

Masse Salariale

En FCFA
{/* 3. Secondary Metrics */}
{/* Turnover */}

Turnover (YTD)

4 Départs
12 Arrivées
{/* Formations */}

Formations

{trainingData.map(training => (
{training.name} {training.progress}/{training.target} inscrits
))}
{/* Recruitment Funnel */}

Pipeline Recrutement
{/* 4. Performance & Reviews */}

Bilan des Compétences Globales

Campagne d'évaluation 2026

85% des collaborateurs ont finalisé leur entretien annuel. Clôture prévue dans 15 jours.

Voir les évaluations
); } Dashboard.layout = (page: React.ReactNode) => ( {page} );