create-crm-tmp 1.1.2 → 2.0.0

package/template/src/components/dashboard/activity-chart.tsx

@@ -1,64 +1,56 @@
 'use client';
 
-import {
-  Bar,
-  BarChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Legend,
-} from 'recharts';
-import { useDashboardTheme } from '@/contexts/dashboard-theme-context';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis, Legend } from 'recharts';
 
 interface ActivityChartProps {
-  readonly data: Array<{ date: string; interactions: number; tasks: number }>;
+  data: Array<{ date: string; interactions: number; tasks: number }>;
 }
 
-export function ActivityChart({ data }: Readonly<ActivityChartProps>) {
-  const { theme } = useDashboardTheme();
-
+export function ActivityChart({ data }: ActivityChartProps) {
   return (
-    <div className="flex h-full flex-col rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
+    <div className="rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl">
       <div className="mb-4">
-        <h3 className="text-base font-semibold text-gray-900">Activité des 7 Derniers Jours</h3>
-        <p className="mt-0.5 text-xs text-gray-400">Interactions et tâches créées</p>
+        <h3 className="text-lg font-bold text-gray-900">Activité des 7 Derniers Jours</h3>
+        <p className="mt-1 text-sm text-gray-500">Interactions et tâches créées</p>
       </div>
-      <div className="min-h-0 flex-1">
+      <div className="h-[300px]">
         <ResponsiveContainer width="100%" height="100%">
-          <BarChart
-            data={data}
-            barCategoryGap="25%"
-            margin={{ top: 5, right: 5, left: -20, bottom: 0 }}
-          >
-            <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" vertical={false} />
+          <BarChart data={data} barCategoryGap="20%">
+            <defs>
+              <linearGradient id="interactionsGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#6366f1" stopOpacity={1} />
+                <stop offset="100%" stopColor="#4f46e5" stopOpacity={0.8} />
+              </linearGradient>
+              <linearGradient id="tasksGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#8b5cf6" stopOpacity={1} />
+                <stop offset="100%" stopColor="#7c3aed" stopOpacity={0.8} />
+              </linearGradient>
+            </defs>
             <XAxis
               dataKey="date"
-              stroke="#d1d5db"
-              fontSize={11}
+              stroke="#9ca3af"
+              fontSize={12}
               tickLine={false}
               axisLine={false}
-              dy={8}
             />
-            <YAxis stroke="#d1d5db" fontSize={11} tickLine={false} axisLine={false} width={40} />
+            <YAxis stroke="#9ca3af" fontSize={12} tickLine={false} axisLine={false} />
             <Tooltip
               contentStyle={{
-                backgroundColor: '#fff',
-                border: '1px solid #f3f4f6',
+                backgroundColor: 'white',
+                border: '1px solid #e5e7eb',
                 borderRadius: '12px',
-                boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
-                fontSize: '13px',
+                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
               }}
               labelStyle={{ color: '#374151', fontWeight: 600 }}
             />
-            <Legend
-              wrapperStyle={{ paddingTop: '12px', fontSize: '12px' }}
-              iconType="circle"
-              iconSize={8}
+            <Legend wrapperStyle={{ paddingTop: '20px' }} iconType="circle" />
+            <Bar
+              dataKey="interactions"
+              fill="url(#interactionsGradient)"
+              radius={[8, 8, 0, 0]}
+              name="Interactions"
             />
-            <Bar dataKey="interactions" fill={theme.hex[500]} radius={[6, 6, 0, 0]} name="Interactions" />
-            <Bar dataKey="tasks" fill={theme.hex[300]} radius={[6, 6, 0, 0]} name="Tâches" />
+            <Bar dataKey="tasks" fill="url(#tasksGradient)" radius={[8, 8, 0, 0]} name="Tâches" />
           </BarChart>
         </ResponsiveContainer>
       </div>

package/template/src/components/dashboard/dashboard-content.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { Users, CheckCircle2, Clock, TrendingUp } from 'lucide-react';
+import { StatCard } from '@/components/dashboard/stat-card';
+import { UpcomingTasksList } from '@/components/dashboard/upcoming-tasks-list';
+import { PageHeader } from '@/components/page-header';
+import { ProtectedPage } from '@/components/protected-page';
+import { Skeleton } from '@/components/skeleton';
+import type { DashboardStats } from '@/lib/dashboard-stats';
+
+const ActivityChart = dynamic(
+  () => import('@/components/dashboard/activity-chart').then((m) => m.ActivityChart),
+  { ssr: false, loading: () => <Skeleton className="h-80 rounded-lg" /> },
+);
+const TasksPieChart = dynamic(
+  () => import('@/components/dashboard/tasks-pie-chart').then((m) => m.TasksPieChart),
+  { ssr: false, loading: () => <Skeleton className="h-80 rounded-lg" /> },
+);
+
+interface DashboardContentProps {
+  stats: DashboardStats;
+}
+
+export function DashboardContent({ stats }: Readonly<DashboardContentProps>) {
+  return (
+    <ProtectedPage requiredPermission="analytics.view">
+      <div className="h-full">
+        <PageHeader title="Tableau de Bord" description="Vue d'ensemble de votre activité" />
+
+        <div className="space-y-6 p-4 sm:p-6">
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+            <StatCard
+              title="Total Contacts"
+              value={stats.overview.totalContacts.toLocaleString('fr-FR')}
+              icon={Users}
+              trend={{
+                value: stats.overview.contactsGrowth,
+                label: 'ce mois',
+              }}
+              iconColor="text-primary"
+              iconBgColor="bg-primary/15"
+            />
+            <StatCard
+              title="Nouveaux ce Mois"
+              value={stats.overview.contactsThisMonth.toLocaleString('fr-FR')}
+              icon={TrendingUp}
+              iconColor="text-green-600"
+              iconBgColor="bg-green-100"
+            />
+            <StatCard
+              title="Tâches Complétées"
+              value={stats.tasks.completed.toLocaleString('fr-FR')}
+              icon={CheckCircle2}
+              iconColor="text-emerald-600"
+              iconBgColor="bg-emerald-100"
+            />
+            <StatCard
+              title="Tâches en Attente"
+              value={stats.tasks.pending.toLocaleString('fr-FR')}
+              icon={Clock}
+              iconColor="text-blue-600"
+              iconBgColor="bg-blue-100"
+            />
+          </div>
+
+          <div className="grid gap-6 lg:grid-cols-3">
+            <div className="lg:col-span-2">
+              <ActivityChart data={stats.activity.last7Days} />
+            </div>
+            <TasksPieChart completed={stats.tasks.completed} pending={stats.tasks.pending} />
+          </div>
+
+          <UpcomingTasksList tasks={stats.tasks.upcoming} />
+        </div>
+      </div>
+    </ProtectedPage>
+  );
+}

package/template/src/components/dashboard/stat-card.tsx

@@ -1,63 +1,61 @@
 'use client';
 
+import { LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 interface StatCardProps {
-  readonly title: string;
-  readonly value: string | number;
-  readonly trend?: {
-    readonly value: number;
-    readonly label: string;
+  title: string;
+  value: string | number;
+  icon: LucideIcon;
+  trend?: {
+    value: number;
+    label: string;
   };
-  readonly subtitle?: string;
-  readonly accentColor?: string;
+  iconColor?: string;
+  iconBgColor?: string;
 }
 
 export function StatCard({
   title,
   value,
+  icon: Icon,
   trend,
-  subtitle,
-  accentColor = 'dash-accent-bar',
+  iconColor = 'text-primary',
+  iconBgColor = 'bg-primary/15',
 }: StatCardProps) {
   return (
-    <div className="group relative flex h-full flex-col justify-between overflow-hidden rounded-2xl border border-gray-100 bg-white p-5 shadow-sm transition-all duration-200 hover:shadow-md">
-      {/* Barre d'accent en haut */}
-      <div className={cn('absolute top-0 left-0 h-1 w-full', accentColor)} />
-
-      <div className="flex items-start justify-between">
+    <div className="group relative overflow-hidden rounded-xl border border-border bg-card p-6 shadow-(--shadow-card) transition-all duration-300 hover:-translate-y-1">
+      <div className="absolute inset-0 bg-linear-to-br from-card via-card to-muted/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+      <div className="relative flex items-center justify-between">
         <div className="flex-1">
-          <p className="text-sm font-medium text-gray-500">{title}</p>
-          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900">{value}</p>
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          <p className="mt-2 bg-linear-to-r from-foreground to-foreground/80 bg-clip-text text-3xl font-bold text-transparent">
+            {value}
+          </p>
+          {trend && (
+            <p className="mt-2 flex items-center gap-1 text-sm">
+              <span
+                className={cn(
+                  'font-semibold',
+                  trend.value >= 0 ? 'text-emerald-600' : 'text-red-600',
+                )}
+              >
+                {trend.value >= 0 ? '+' : ''}
+                {trend.value}%
+              </span>
+              <span className="text-muted-foreground">{trend.label}</span>
+            </p>
+          )}
         </div>
-
-        {/* Mini bar chart décoratif */}
-        <div className="flex items-end gap-[3px] opacity-60">
-          {[40, 65, 45, 80, 55, 70, 90].map((barH) => (
-            <div
-              key={`bar-${barH}`}
-              className={cn('w-[4px] rounded-full', accentColor)}
-              style={{ height: `${barH * 0.3}px`, opacity: 0.4 + (barH / 90) * 0.6 }}
-            />
-          ))}
+        <div
+          className={cn(
+            'rounded-xl bg-linear-to-br p-4 shadow-sm transition-transform duration-300 group-hover:scale-110',
+            iconBgColor,
+          )}
+        >
+          <Icon className={cn('h-6 w-6', iconColor)} />
         </div>
       </div>
-
-      <div className="mt-3 flex items-center gap-2">
-        {trend && (
-          <span
-            className={cn(
-              'inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-xs font-semibold',
-              trend.value >= 0 ? 'bg-emerald-50 text-emerald-600' : 'bg-red-50 text-red-600',
-            )}
-          >
-            {trend.value >= 0 ? '↑' : '↓'} {Math.abs(trend.value)}%
-          </span>
-        )}
-        {(subtitle || trend?.label) && (
-          <span className="text-xs text-gray-400">{subtitle || trend?.label}</span>
-        )}
-      </div>
     </div>
   );
 }

package/template/src/components/dashboard/tasks-pie-chart.tsx

@@ -1,21 +1,18 @@
 'use client';
 
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
-import { useDashboardTheme } from '@/contexts/dashboard-theme-context';
 
 interface TasksPieChartProps {
-  readonly completed: number;
-  readonly pending: number;
+  completed: number;
+  pending: number;
 }
 
-export function TasksPieChart({ completed, pending }: Readonly<TasksPieChartProps>) {
-  const { theme } = useDashboardTheme();
-
-  const COLORS = {
-    completed: '#10b981',
-    pending: theme.hex[500],
-  };
+const COLORS = {
+  completed: '#10b981',
+  pending: '#f59e0b',
+};
 
+export function TasksPieChart({ completed, pending }: TasksPieChartProps) {
   const data = [
     { name: 'Complétées', value: completed },
     { name: 'En attente', value: pending },
@@ -25,64 +22,64 @@ export function TasksPieChart({ completed, pending }: Readonly<TasksPieChartProp
   const completionRate = total > 0 ? Math.round((completed / total) * 100) : 0;
 
   return (
-    <div className="flex h-full flex-col rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
-      <div className="mb-2">
-        <h3 className="text-base font-semibold text-gray-900">Statut des Tâches</h3>
-        <p className="mt-0.5 text-xs text-gray-400">Répartition des tâches</p>
+    <div className="rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl">
+      <div className="mb-4">
+        <h3 className="text-lg font-bold text-gray-900">Statut des Tâches</h3>
+        <p className="mt-1 text-sm text-gray-500">Répartition des tâches</p>
       </div>
-      <div className="flex min-h-0 flex-1 items-center justify-center">
-        <div className="relative h-[160px] w-[160px]">
+      <div className="flex items-center justify-center">
+        <div className="relative h-[200px] w-[200px]">
           <ResponsiveContainer width="100%" height="100%">
             <PieChart>
               <Pie
                 data={data}
                 cx="50%"
                 cy="50%"
-                innerRadius={50}
-                outerRadius={70}
-                paddingAngle={3}
+                innerRadius={60}
+                outerRadius={80}
+                paddingAngle={2}
                 dataKey="value"
-                strokeWidth={0}
               >
-                {data.map((entry) => (
+                {data.map((entry, index) => (
                   <Cell
-                    key={entry.name}
+                    key={`cell-${index}`}
                     fill={entry.name === 'Complétées' ? COLORS.completed : COLORS.pending}
                   />
                 ))}
               </Pie>
               <Tooltip
                 contentStyle={{
-                  backgroundColor: '#fff',
-                  border: '1px solid #f3f4f6',
+                  backgroundColor: 'white',
+                  border: '1px solid #e5e7eb',
                   borderRadius: '12px',
-                  boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
-                  fontSize: '13px',
+                  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
                 }}
               />
             </PieChart>
           </ResponsiveContainer>
           <div className="absolute inset-0 flex items-center justify-center">
             <div className="text-center">
-              <p className="text-2xl font-bold text-gray-900">{completionRate}%</p>
-              <p className="text-[10px] text-gray-400">Complétées</p>
+              <p className="bg-linear-to-r from-gray-900 to-gray-700 bg-clip-text text-3xl font-bold text-transparent">
+                {completionRate}%
+              </p>
+              <p className="text-xs text-gray-500">Complétées</p>
             </div>
           </div>
         </div>
       </div>
-      <div className="mt-2 grid grid-cols-2 gap-2">
-        <div className="flex items-center gap-2 rounded-xl bg-emerald-50/80 px-3 py-2">
-          <div className="h-2.5 w-2.5 rounded-full bg-emerald-500" />
+      <div className="mt-4 grid grid-cols-2 gap-4">
+        <div className="flex items-center gap-2 rounded-lg bg-emerald-50 p-2">
+          <div className="h-3 w-3 rounded-full bg-emerald-500" />
           <div>
-            <p className="text-[10px] text-gray-500">Complétées</p>
-            <p className="text-sm font-semibold text-gray-900">{completed}</p>
+            <p className="text-xs text-gray-500">Complétées</p>
+            <p className="font-semibold text-gray-900">{completed}</p>
           </div>
         </div>
-        <div className="dash-legend-bg flex items-center gap-2 rounded-xl px-3 py-2">
-          <div className="dash-legend-dot h-2.5 w-2.5 rounded-full" />
+        <div className="flex items-center gap-2 rounded-lg bg-blue-50 p-2">
+          <div className="h-3 w-3 rounded-full bg-blue-500" />
           <div>
-            <p className="text-[10px] text-gray-500">En attente</p>
-            <p className="text-sm font-semibold text-gray-900">{pending}</p>
+            <p className="text-xs text-gray-500">En attente</p>
+            <p className="font-semibold text-gray-900">{pending}</p>
           </div>
         </div>
       </div>

package/template/src/components/dashboard/upcoming-tasks-list.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { Calendar, Phone, Video, Mail, CheckCircle2, Clock, ListTodo } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { Calendar, Phone, Video, Mail, CheckCircle2, Clock } from 'lucide-react';
 
 interface Task {
   id: string;
@@ -14,26 +13,25 @@ interface Task {
 }
 
 interface UpcomingTasksListProps {
-  readonly tasks: Task[];
+  tasks: Task[];
 }
 
-const taskIcons: Record<string, typeof Phone> = {
+const taskIcons = {
   CALL: Phone,
   MEETING: Calendar,
   EMAIL: Mail,
   VIDEO_CONFERENCE: Video,
-  TASK: ListTodo,
   OTHER: CheckCircle2,
 };
 
-const priorityStyles: Record<string, string> = {
-  LOW: 'bg-gray-100 text-gray-600',
-  MEDIUM: 'bg-blue-50 text-blue-600',
-  HIGH: 'bg-orange-50 text-orange-600',
-  URGENT: 'bg-red-50 text-red-600',
+const priorityColors = {
+  LOW: 'text-gray-500 bg-gray-100',
+  MEDIUM: 'text-blue-600 bg-blue-100',
+  HIGH: 'text-orange-600 bg-orange-100',
+  URGENT: 'text-red-600 bg-red-100',
 };
 
-const priorityLabels: Record<string, string> = {
+const priorityLabels = {
   LOW: 'Basse',
   MEDIUM: 'Moyenne',
   HIGH: 'Haute',
@@ -41,79 +39,87 @@ const priorityLabels: Record<string, string> = {
 };
 
 export function UpcomingTasksList({ tasks }: UpcomingTasksListProps) {
+  if (tasks.length === 0) {
+    return (
+      <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-gray-900">Tâches à Venir</h3>
+          <Link
+            href="/agenda"
+            className="text-sm font-medium text-blue-600 hover:text-blue-700"
+          >
+            Voir tout
+          </Link>
+        </div>
+        <div className="mt-6 text-center text-sm text-gray-500">
+          <Clock className="mx-auto h-12 w-12 text-gray-400" />
+          <p className="mt-2">Aucune tâche à venir</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div className="flex h-full flex-col rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
+    <div className="rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl">
       <div className="mb-4 flex items-center justify-between">
-        <div>
-          <h3 className="text-base font-semibold text-gray-900">Tâches à Venir</h3>
-          <p className="mt-0.5 text-xs text-gray-400">Prochains rendez-vous et tâches</p>
-        </div>
+        <h3 className="text-lg font-bold text-gray-900">Liste des Tâches</h3>
         <Link
           href="/agenda"
-          className="dash-link cursor-pointer text-xs font-medium"
+          className="text-sm font-semibold text-blue-600 transition-colors hover:text-blue-700"
         >
           Voir tout →
         </Link>
       </div>
+      <div className="space-y-3">
+        {tasks.map((task) => {
+          const Icon = taskIcons[task.type as keyof typeof taskIcons] || CheckCircle2;
+          const scheduledDate = new Date(task.scheduledAt);
 
-      {tasks.length === 0 ? (
-        <div className="flex flex-1 items-center justify-center">
-          <div className="text-center">
-            <Clock className="mx-auto h-10 w-10 text-gray-200" />
-            <p className="mt-2 text-sm text-gray-400">Aucune tâche à venir</p>
-          </div>
-        </div>
-      ) : (
-        <div className="flex-1 space-y-2 overflow-auto">
-          {tasks.map((task) => {
-            const Icon = taskIcons[task.type] || CheckCircle2;
-            const scheduledDate = new Date(task.scheduledAt);
-
-            return (
-              <div
-                key={task.id}
-                className="group flex items-start gap-3 rounded-xl border border-gray-50 bg-gray-50/50 p-3 transition-all duration-150 dash-hover-border-light dash-hover-bg"
-              >
-                <div className="dash-icon-box flex h-8 w-8 shrink-0 items-center justify-center rounded-lg">
-                  <Icon className="dash-icon-color h-3.5 w-3.5" />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-start justify-between gap-2">
-                    <p className="truncate text-sm font-medium text-gray-900">{task.title}</p>
-                    <span
-                      className={cn(
-                        'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium',
-                        priorityStyles[task.priority] || 'bg-gray-100 text-gray-600',
-                      )}
-                    >
-                      {priorityLabels[task.priority] || task.priority}
-                    </span>
+          return (
+            <div
+              key={task.id}
+              className="group flex items-start gap-3 rounded-lg border border-gray-100 bg-gray-50/50 p-3 transition-all duration-200 hover:border-blue-200 hover:bg-blue-50/30"
+            >
+              <input
+                type="checkbox"
+                className="mt-1 h-4 w-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-gray-400/30"
+              />
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-blue-100 to-purple-100">
+                <Icon className="h-4 w-4 text-blue-600" />
+              </div>
+              <div className="flex-1">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <p className="font-semibold text-gray-900">{task.title}</p>
+                    {task.contact && (
+                      <Link
+                        href={`/contacts/${task.contact.id}`}
+                        className="text-sm text-gray-600 transition-colors hover:text-blue-600"
+                      >
+                        {task.contact.name}
+                      </Link>
+                    )}
                   </div>
-                  {task.contact && (
-                    <Link
-                      href={`/contacts/${task.contact.id}`}
-                      className="dash-hover-text cursor-pointer text-xs text-gray-500 transition-colors"
-                    >
-                      {task.contact.name}
-                    </Link>
-                  )}
-                  <p className="mt-1 text-[11px] text-gray-400">
-                    {scheduledDate.toLocaleDateString('fr-FR', {
-                      day: 'numeric',
-                      month: 'long',
-                    })}{' '}
-                    à{' '}
-                    {scheduledDate.toLocaleTimeString('fr-FR', {
-                      hour: '2-digit',
-                      minute: '2-digit',
-                    })}
-                  </p>
+                  <button className="cursor-pointer opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100">
+                    <span className="text-gray-400">⋯</span>
+                  </button>
                 </div>
+                <p className="mt-1 text-xs text-gray-500">
+                  {scheduledDate.toLocaleDateString('fr-FR', {
+                    day: 'numeric',
+                    month: 'long',
+                  })}{' '}
+                  à{' '}
+                  {scheduledDate.toLocaleTimeString('fr-FR', {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                  })}
+                </p>
               </div>
-            );
-          })}
-        </div>
-      )}
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }