create-crm-tmp 2.0.0 → 2.1.0

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

@@ -0,0 +1,69 @@
+'use client';
+
+import {
+  Area,
+  AreaChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+} from 'recharts';
+import { useDashboardTheme } from '@/contexts/dashboard-theme-context';
+
+interface ContactsChartProps {
+  readonly data: Array<{ month: string; count: number }>;
+}
+
+export function ContactsChart({ data }: Readonly<ContactsChartProps>) {
+  const { theme } = useDashboardTheme();
+
+  return (
+    <div className="flex h-full flex-col rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
+      <div className="mb-4">
+        <h3 className="text-base font-semibold text-gray-900">Évolution des Contacts</h3>
+        <p className="mt-0.5 text-xs text-gray-400">Contacts créés par mois</p>
+      </div>
+      <div className="min-h-0 flex-1">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart data={data} margin={{ top: 5, right: 5, left: -20, bottom: 0 }}>
+            <defs>
+              <linearGradient id="colorContactsAccent" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor={theme.hex[500]} stopOpacity={0.3} />
+                <stop offset="95%" stopColor={theme.hex[500]} stopOpacity={0.02} />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" vertical={false} />
+            <XAxis
+              dataKey="month"
+              stroke="#d1d5db"
+              fontSize={11}
+              tickLine={false}
+              axisLine={false}
+              dy={8}
+            />
+            <YAxis stroke="#d1d5db" fontSize={11} tickLine={false} axisLine={false} width={40} />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: '#fff',
+                border: '1px solid #f3f4f6',
+                borderRadius: '12px',
+                boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
+                fontSize: '13px',
+              }}
+              labelStyle={{ color: '#374151', fontWeight: 600 }}
+            />
+            <Area
+              type="monotone"
+              dataKey="count"
+              stroke={theme.hex[500]}
+              strokeWidth={2.5}
+              fill="url(#colorContactsAccent)"
+              name="Contacts"
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}

package/template/src/components/dashboard/interactions-by-type-chart.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import {
+  Bar,
+  BarChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Cell,
+} from 'recharts';
+
+interface InteractionsByTypeChartProps {
+  readonly data: Array<{ type: string; count: number }>;
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  CALL: 'Appels',
+  SMS: 'SMS',
+  EMAIL: 'Emails',
+  MEETING: 'Réunions',
+  NOTE: 'Notes',
+  TASK: 'Tâches',
+  STATUS_CHANGE: 'Changements',
+  APPOINTMENT_CREATED: 'RDV créés',
+  APPOINTMENT_DELETED: 'RDV supprimés',
+  APPOINTMENT_CHANGED: 'RDV modifiés',
+  ASSIGNMENT_CHANGE: 'Assignations',
+  CONTACT_UPDATE: 'Mises à jour',
+  FILE_UPLOADED: 'Fichiers',
+  FILE_REPLACED: 'Fichiers remplacés',
+  FILE_DELETED: 'Fichiers supprimés',
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  CALL: '#3b82f6',
+  SMS: '#10b981',
+  EMAIL: '#f97316',
+  MEETING: '#8b5cf6',
+  NOTE: '#6b7280',
+  TASK: '#f59e0b',
+  STATUS_CHANGE: '#ef4444',
+  APPOINTMENT_CREATED: '#14b8a6',
+  APPOINTMENT_DELETED: '#ef4444',
+  APPOINTMENT_CHANGED: '#f97316',
+  ASSIGNMENT_CHANGE: '#ec4899',
+  CONTACT_UPDATE: '#06b6d4',
+  FILE_UPLOADED: '#84cc16',
+  FILE_REPLACED: '#a855f7',
+  FILE_DELETED: '#dc2626',
+};
+
+export function InteractionsByTypeChart({ data }: Readonly<InteractionsByTypeChartProps>) {
+  const chartData = data
+    .filter((d) => d.count > 0)
+    .map((d) => ({
+      ...d,
+      label: TYPE_LABELS[d.type] || d.type,
+      fill: TYPE_COLORS[d.type] || '#f97316',
+    }))
+    .sort((a, b) => b.count - a.count);
+
+  return (
+    <div className="flex h-full flex-col rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
+      <div className="mb-4">
+        <h3 className="text-base font-semibold text-gray-900">Interactions par Type</h3>
+        <p className="mt-0.5 text-xs text-gray-400">Répartition des interactions ce mois</p>
+      </div>
+
+      {chartData.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center">
+          <p className="text-sm text-gray-400">Aucune interaction ce mois</p>
+        </div>
+      ) : (
+        <div className="min-h-0 flex-1">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={chartData}
+              layout="vertical"
+              margin={{ top: 0, right: 20, left: 0, bottom: 0 }}
+            >
+              <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" horizontal={false} />
+              <XAxis
+                type="number"
+                stroke="#d1d5db"
+                fontSize={11}
+                tickLine={false}
+                axisLine={false}
+              />
+              <YAxis
+                dataKey="label"
+                type="category"
+                stroke="#d1d5db"
+                fontSize={11}
+                tickLine={false}
+                axisLine={false}
+                width={80}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: '#fff',
+                  border: '1px solid #f3f4f6',
+                  borderRadius: '12px',
+                  boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
+                  fontSize: '13px',
+                }}
+                formatter={(value: number) => [value, 'Interactions']}
+              />
+              <Bar dataKey="count" radius={[0, 6, 6, 0]} barSize={16}>
+                {chartData.map((entry) => (
+                  <Cell key={`type-${entry.label}`} fill={entry.fill} />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,154 @@
+'use client';
+
+import Link from 'next/link';
+import {
+  Phone,
+  Mail,
+  Calendar,
+  MessageSquare,
+  FileText,
+  TrendingUp,
+  RefreshCw,
+  CalendarCheck,
+  CalendarX,
+  CalendarClock,
+  UserCheck,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface Interaction {
+  id: string;
+  type: string;
+  title: string | null;
+  content: string;
+  date: string;
+  contact: {
+    id: string;
+    name: string;
+  };
+}
+
+interface RecentActivityProps {
+  readonly interactions: Interaction[];
+}
+
+const interactionIcons: Record<string, typeof Phone> = {
+  CALL: Phone,
+  SMS: MessageSquare,
+  EMAIL: Mail,
+  MEETING: Calendar,
+  NOTE: FileText,
+  STATUS_CHANGE: TrendingUp,
+  CONTACT_UPDATE: RefreshCw,
+  APPOINTMENT_CREATED: CalendarCheck,
+  APPOINTMENT_DELETED: CalendarX,
+  APPOINTMENT_CHANGED: CalendarClock,
+  ASSIGNMENT_CHANGE: UserCheck,
+};
+
+const interactionColors: Record<string, string> = {
+  CALL: 'bg-blue-50 text-blue-500',
+  SMS: 'bg-emerald-50 text-emerald-500',
+  EMAIL: 'bg-orange-50 text-orange-500',
+  MEETING: 'bg-purple-50 text-purple-500',
+  NOTE: 'bg-gray-50 text-gray-500',
+  STATUS_CHANGE: 'bg-amber-50 text-amber-500',
+  CONTACT_UPDATE: 'bg-cyan-50 text-cyan-500',
+  APPOINTMENT_CREATED: 'bg-emerald-50 text-emerald-500',
+  APPOINTMENT_DELETED: 'bg-red-50 text-red-500',
+  APPOINTMENT_CHANGED: 'bg-orange-50 text-orange-500',
+  ASSIGNMENT_CHANGE: 'bg-pink-50 text-pink-500',
+};
+
+const interactionLabels: Record<string, string> = {
+  CALL: 'Appel',
+  SMS: 'SMS',
+  EMAIL: 'Email',
+  MEETING: 'Réunion',
+  NOTE: 'Note',
+  STATUS_CHANGE: 'Changement de statut',
+  CONTACT_UPDATE: 'Mise à jour',
+  APPOINTMENT_CREATED: 'RDV créé',
+  APPOINTMENT_DELETED: 'RDV supprimé',
+  APPOINTMENT_CHANGED: 'RDV modifié',
+  ASSIGNMENT_CHANGE: 'Assignation',
+};
+
+export function RecentActivity({ interactions }: RecentActivityProps) {
+  return (
+    <div className="flex h-full flex-col rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <h3 className="text-base font-semibold text-gray-900">Activité Récente</h3>
+          <p className="mt-0.5 text-xs text-gray-400">Dernières interactions</p>
+        </div>
+        <Link href="/contacts" className="dash-link cursor-pointer text-xs font-medium">
+          Voir tout →
+        </Link>
+      </div>
+
+      {interactions.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center">
+          <div className="text-center">
+            <FileText className="mx-auto h-10 w-10 text-gray-200" />
+            <p className="mt-2 text-sm text-gray-400">Aucune activité récente</p>
+          </div>
+        </div>
+      ) : (
+        <div className="flex-1 space-y-1 overflow-auto">
+          {interactions.map((interaction) => {
+            const Icon = interactionIcons[interaction.type] || FileText;
+            const color = interactionColors[interaction.type] || 'bg-gray-50 text-gray-500';
+            const label = interactionLabels[interaction.type] || interaction.type;
+            const date = new Date(interaction.date);
+            const now = new Date();
+            const diffMs = now.getTime() - date.getTime();
+            const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+            const diffMinutes = Math.floor(diffMs / (1000 * 60));
+
+            let timeAgo = '';
+            if (diffMinutes < 1) {
+              timeAgo = "À l'instant";
+            } else if (diffMinutes < 60) {
+              timeAgo = `Il y a ${diffMinutes} min`;
+            } else if (diffHours < 24) {
+              timeAgo = `Il y a ${diffHours}h`;
+            } else {
+              timeAgo = date.toLocaleDateString('fr-FR', {
+                day: 'numeric',
+                month: 'short',
+              });
+            }
+
+            return (
+              <div
+                key={interaction.id}
+                className="group dash-hover-border-left flex items-start gap-3 rounded-xl border-l-2 border-transparent px-3 py-2.5 transition-colors duration-150"
+              >
+                <div className={cn('rounded-lg p-1.5', color)}>
+                  <Icon className="h-3.5 w-3.5" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium text-gray-900">{label}</p>
+                      <Link
+                        href={`/contacts/${interaction.contact.id}`}
+                        className="dash-hover-text cursor-pointer text-xs text-gray-500 transition-colors"
+                      >
+                        {interaction.contact.name}
+                      </Link>
+                    </div>
+                    <span className="shrink-0 text-[10px] font-medium text-gray-400">
+                      {timeAgo}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,61 +1,61 @@
 'use client';
 
-import { LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 interface StatCardProps {
-  title: string;
-  value: string | number;
-  icon: LucideIcon;
-  trend?: {
-    value: number;
-    label: string;
+  readonly title: string;
+  readonly value: string | number;
+  readonly trend?: {
+    readonly value: number;
+    readonly label: string;
   };
-  iconColor?: string;
-  iconBgColor?: string;
+  readonly subtitle?: string;
+  readonly accentColor?: string;
 }
 
 export function StatCard({
   title,
   value,
-  icon: Icon,
   trend,
-  iconColor = 'text-primary',
-  iconBgColor = 'bg-primary/15',
+  subtitle,
+  accentColor = 'dash-accent-bar',
 }: StatCardProps) {
   return (
-    <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="group ui-lift-hover relative flex h-full flex-col justify-between overflow-hidden rounded-2xl border border-gray-100 bg-white p-5 shadow-sm transition-shadow duration-200 hover:shadow-md">
+      <div className={cn('absolute top-0 left-0 h-1 w-full', accentColor)} />
+
+      <div className="flex items-start justify-between">
         <div className="flex-1">
-          <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>
-          )}
+          <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>
         </div>
-        <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 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>
       </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/status-distribution-chart.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import {
+  Bar,
+  BarChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Cell,
+} from 'recharts';
+import { useDashboardTheme } from '@/contexts/dashboard-theme-context';
+
+interface StatusDistributionChartProps {
+  readonly data: Array<{ name: string; value: number }>;
+}
+
+export function StatusDistributionChart({ data }: Readonly<StatusDistributionChartProps>) {
+  const { theme } = useDashboardTheme();
+
+  const statusColors = [
+    theme.hex[500],
+    theme.hex[400],
+    theme.hex[300],
+    theme.hex[200],
+    '#10b981',
+    '#34d399',
+    '#6ee7b7',
+    '#3b82f6',
+    '#60a5fa',
+    '#93c5fd',
+  ];
+
+  return (
+    <div className="flex h-full flex-col rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
+      <div className="mb-4">
+        <h3 className="text-base font-semibold text-gray-900">Répartition par Statut</h3>
+        <p className="mt-0.5 text-xs text-gray-400">Distribution des contacts</p>
+      </div>
+      <div className="min-h-0 flex-1">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart
+            data={data}
+            layout="vertical"
+            margin={{ top: 0, right: 20, left: 0, bottom: 0 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" horizontal={false} />
+            <XAxis type="number" stroke="#d1d5db" fontSize={11} tickLine={false} axisLine={false} />
+            <YAxis
+              dataKey="name"
+              type="category"
+              stroke="#d1d5db"
+              fontSize={11}
+              tickLine={false}
+              axisLine={false}
+              width={90}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: '#fff',
+                border: '1px solid #f3f4f6',
+                borderRadius: '12px',
+                boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
+                fontSize: '13px',
+              }}
+            />
+            <Bar dataKey="value" radius={[0, 6, 6, 0]} name="Contacts" barSize={20}>
+              {data.map((entry, index) => (
+                <Cell
+                  key={`status-${entry.name}`}
+                  fill={statusColors[index % statusColors.length]}
+                />
+              ))}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}

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

@@ -1,18 +1,21 @@
 'use client';
 
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
+import { useDashboardTheme } from '@/contexts/dashboard-theme-context';
 
 interface TasksPieChartProps {
-  completed: number;
-  pending: number;
+  readonly completed: number;
+  readonly pending: number;
 }
 
-const COLORS = {
-  completed: '#10b981',
-  pending: '#f59e0b',
-};
+export function TasksPieChart({ completed, pending }: Readonly<TasksPieChartProps>) {
+  const { theme } = useDashboardTheme();
+
+  const COLORS = {
+    completed: '#10b981',
+    pending: theme.hex[500],
+  };
 
-export function TasksPieChart({ completed, pending }: TasksPieChartProps) {
   const data = [
     { name: 'Complétées', value: completed },
     { name: 'En attente', value: pending },
@@ -22,64 +25,64 @@ export function TasksPieChart({ completed, pending }: TasksPieChartProps) {
   const completionRate = total > 0 ? Math.round((completed / total) * 100) : 0;
 
   return (
-    <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 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>
-      <div className="flex items-center justify-center">
-        <div className="relative h-[200px] w-[200px]">
+      <div className="flex min-h-0 flex-1 items-center justify-center">
+        <div className="relative h-[160px] w-[160px]">
           <ResponsiveContainer width="100%" height="100%">
             <PieChart>
               <Pie
                 data={data}
                 cx="50%"
                 cy="50%"
-                innerRadius={60}
-                outerRadius={80}
-                paddingAngle={2}
+                innerRadius={50}
+                outerRadius={70}
+                paddingAngle={3}
                 dataKey="value"
+                strokeWidth={0}
               >
-                {data.map((entry, index) => (
+                {data.map((entry) => (
                   <Cell
-                    key={`cell-${index}`}
+                    key={entry.name}
                     fill={entry.name === 'Complétées' ? COLORS.completed : COLORS.pending}
                   />
                 ))}
               </Pie>
               <Tooltip
                 contentStyle={{
-                  backgroundColor: 'white',
-                  border: '1px solid #e5e7eb',
+                  backgroundColor: '#fff',
+                  border: '1px solid #f3f4f6',
                   borderRadius: '12px',
-                  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+                  boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
+                  fontSize: '13px',
                 }}
               />
             </PieChart>
           </ResponsiveContainer>
           <div className="absolute inset-0 flex items-center justify-center">
             <div className="text-center">
-              <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>
+              <p className="text-2xl font-bold text-gray-900">{completionRate}%</p>
+              <p className="text-[10px] text-gray-400">Complétées</p>
             </div>
           </div>
         </div>
       </div>
-      <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 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>
-            <p className="text-xs text-gray-500">Complétées</p>
-            <p className="font-semibold text-gray-900">{completed}</p>
+            <p className="text-[10px] text-gray-500">Complétées</p>
+            <p className="text-sm font-semibold text-gray-900">{completed}</p>
           </div>
         </div>
-        <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 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>
-            <p className="text-xs text-gray-500">En attente</p>
-            <p className="font-semibold text-gray-900">{pending}</p>
+            <p className="text-[10px] text-gray-500">En attente</p>
+            <p className="text-sm font-semibold text-gray-900">{pending}</p>
           </div>
         </div>
       </div>