create-crm-tmp 1.1.2 → 2.0.0

package/template/src/app/(dashboard)/dashboard/page.tsx

@@ -1,533 +1,51 @@
-'use client';
-
-import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
-import { GridLayout, useContainerWidth, type Layout, type LayoutItem } from 'react-grid-layout';
-import { Plus, LayoutDashboard, RotateCcw, ShieldAlert } from 'lucide-react';
+import { Suspense } from 'react';
+import { redirect } from 'next/navigation';
+import { getDashboardStats } from '@/lib/dashboard-stats';
+import { DashboardContent } from '@/components/dashboard/dashboard-content';
+import { Skeleton } from '@/components/skeleton';
 import { PageHeader } from '@/components/page-header';
-import { WidgetWrapper } from '@/components/dashboard/widget-wrapper';
-import { AddWidgetDialog } from '@/components/dashboard/add-widget-dialog';
-import { DashboardColorPicker } from '@/components/dashboard/color-picker';
-import { useUserRole } from '@/hooks/use-user-role';
-import { DashboardThemeProvider, useDashboardTheme } from '@/contexts/dashboard-theme-context';
-import { StatCard } from '@/components/dashboard/stat-card';
-import { ContactsChart } from '@/components/dashboard/contacts-chart';
-import { ActivityChart } from '@/components/dashboard/activity-chart';
-import { StatusDistributionChart } from '@/components/dashboard/status-distribution-chart';
-import { TasksPieChart } from '@/components/dashboard/tasks-pie-chart';
-import { UpcomingTasksList } from '@/components/dashboard/upcoming-tasks-list';
-import { RecentActivity } from '@/components/dashboard/recent-activity';
-import { TopContactsList } from '@/components/dashboard/top-contacts-list';
-import { InteractionsByTypeChart } from '@/components/dashboard/interactions-by-type-chart';
-import { getWidgetDefinition } from '@/lib/widget-registry';
-
-interface DashboardWidget {
-  id: string;
-  type: string;
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-}
+import { getAuthUser } from '@/lib/get-auth-user';
 
-interface DashboardStats {
-  overview: {
-    totalContacts: number;
-    contactsThisMonth: number;
-    contactsGrowth: number;
-    monthsData: Array<{ month: string; count: number }>;
-  };
-  statusDistribution: Array<{ name: string; value: number }>;
-  tasks: {
-    total: number;
-    completed: number;
-    pending: number;
-    upcoming: Array<{
-      id: string;
-      title: string;
-      type: string;
-      scheduledAt: string;
-      contact: { id: string; name: string } | null;
-      priority: string;
-    }>;
-    byType: Array<{ type: string; count: number }>;
-  };
-  interactions: {
-    recent: Array<{
-      id: string;
-      type: string;
-      title: string | null;
-      content: string;
-      date: string;
-      contact: {
-        id: string;
-        name: string;
-      };
-    }>;
-    byType: Array<{ type: string; count: number }>;
-  };
-  activity: {
-    last7Days: Array<{ date: string; interactions: number; tasks: number }>;
-  };
-  topContacts: Array<{
-    id: string;
-    name: string;
-    phone: string;
-    email: string | null;
-    status: string;
-    interactionsCount: number;
-    assignedCommercial?: string;
-    assignedTelepro?: string;
-  }>;
-}
-
-export default function DashboardPage() {
+function DashboardSkeleton() {
   return (
-    <DashboardThemeProvider>
-      <DashboardContent />
-    </DashboardThemeProvider>
+    <div className="h-full">
+      <PageHeader title="Tableau de Bord" description="Vue d'ensemble de votre activité" />
+      <div className="p-4 sm:p-6">
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} className="h-32 rounded-lg" />
+          ))}
+        </div>
+        <div className="mt-6 grid gap-6 lg:grid-cols-2">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} className="h-96 rounded-lg" />
+          ))}
+        </div>
+      </div>
+    </div>
   );
 }
 
-function DashboardContent() {
-  const [widgets, setWidgets] = useState<DashboardWidget[]>([]);
-  const [stats, setStats] = useState<DashboardStats | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [showAddDialog, setShowAddDialog] = useState(false);
-  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const { hasPermission, isLoading: permissionsLoading } = useUserRole();
-  const { theme } = useDashboardTheme();
-
-  // Permissions dashboard
-  const canViewDashboard = hasPermission('dashboard.view');
-  const canManageWidgets = hasPermission('dashboard.widgets.manage');
-  const canResetDashboard = hasPermission('dashboard.widgets.reset');
-  const {
-    width: containerWidth,
-    containerRef,
-    mounted,
-  } = useContainerWidth({ initialWidth: 1200 });
-
-  // Nombre de colonnes dynamique basé sur la largeur réelle
-  const cols = useMemo(() => {
-    if (containerWidth < 768) return 2;
-    return 12;
-  }, [containerWidth]);
-
-  // Charger widgets et stats
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const widgetsRes = await fetch('/api/dashboard/widgets');
-        let widgetsData: DashboardWidget[] = [];
-
-        if (widgetsRes.ok) {
-          widgetsData = await widgetsRes.json();
-        }
-
-        // Initialiser le layout par défaut uniquement à la toute première visite
-        // (pas de widgets ET jamais initialisé auparavant)
-        const hasBeenInitialized = localStorage.getItem('dashboard_initialized');
-        if (widgetsData.length === 0 && !hasBeenInitialized) {
-          const initRes = await fetch('/api/dashboard/widgets', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ initDefault: true }),
-          });
-          if (initRes.ok) {
-            widgetsData = await initRes.json();
-          }
-          localStorage.setItem('dashboard_initialized', 'true');
-        }
-
-        setWidgets(widgetsData);
-
-        const statsRes = await fetch('/api/dashboard/stats');
-        if (statsRes.ok) {
-          const statsData = await statsRes.json();
-          setStats(statsData);
-        }
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Une erreur est survenue');
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchData();
-  }, []);
-
-  // Sauvegarder les positions avec debounce
-  const saveLayout = useCallback((updatedWidgets: DashboardWidget[]) => {
-    if (saveTimeoutRef.current) {
-      clearTimeout(saveTimeoutRef.current);
-    }
-
-    saveTimeoutRef.current = setTimeout(async () => {
-      try {
-        await fetch('/api/dashboard/widgets', {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            widgets: updatedWidgets.map((w) => ({
-              id: w.id,
-              x: w.x,
-              y: w.y,
-              w: w.w,
-              h: w.h,
-            })),
-          }),
-        });
-      } catch (err) {
-        console.error('Erreur sauvegarde layout:', err);
-      }
-    }, 500);
-  }, []);
-
-  // Gérer le changement de layout (drag/resize)
-  // Ne sauvegarde en base que quand on est en mode desktop (12 cols)
-  // pour ne pas écraser les positions desktop avec les positions mobile
-  const handleLayoutChange = useCallback(
-    (layout: Layout) => {
-      if (cols !== 12) return;
-
-      const updatedWidgets = widgets.map((widget) => {
-        const layoutItem = layout.find((l: LayoutItem) => l.i === widget.id);
-        if (layoutItem) {
-          return {
-            ...widget,
-            x: layoutItem.x,
-            y: layoutItem.y,
-            w: layoutItem.w,
-            h: layoutItem.h,
-          };
-        }
-        return widget;
-      });
-
-      setWidgets(updatedWidgets);
-      saveLayout(updatedWidgets);
-    },
-    [widgets, saveLayout, cols],
-  );
-
-  // Ajouter un widget
-  const handleAddWidget = useCallback(async (type: string, w: number, h: number) => {
-    try {
-      const res = await fetch('/api/dashboard/widgets', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ type, w, h }),
-      });
-
-      if (res.ok) {
-        const newWidget = await res.json();
-        setWidgets((prev) => [...prev, newWidget]);
-      }
-    } catch (err) {
-      console.error('Erreur ajout widget:', err);
-    }
-
-    setShowAddDialog(false);
-  }, []);
-
-  // Supprimer un widget
-  const handleRemoveWidget = useCallback(async (widgetId: string) => {
-    try {
-      const res = await fetch(`/api/dashboard/widgets/${widgetId}`, {
-        method: 'DELETE',
-      });
-
-      if (res.ok) {
-        setWidgets((prev) => prev.filter((w) => w.id !== widgetId));
-      }
-    } catch (err) {
-      console.error('Erreur suppression widget:', err);
-    }
-  }, []);
-
-  // Réinitialiser le layout par défaut
-  const handleResetLayout = useCallback(async () => {
-    try {
-      // Supprimer tous les widgets existants
-      await Promise.all(
-        widgets.map((w) => fetch(`/api/dashboard/widgets/${w.id}`, { method: 'DELETE' })),
-      );
-
-      // Recréer le layout par défaut
-      const initRes = await fetch('/api/dashboard/widgets', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ initDefault: true }),
-      });
-
-      if (initRes.ok) {
-        const newWidgets = await initRes.json();
-        setWidgets(newWidgets);
-      }
-    } catch (err) {
-      console.error('Erreur réinitialisation layout:', err);
-    }
-  }, [widgets]);
-
-  // Construire le layout adapté au nombre de colonnes actuel
-  const gridLayout = useMemo((): Layout => {
-    return widgets.map((widget) => {
-      const def = getWidgetDefinition(widget.type);
-
-      if (cols === 2) {
-        // Mobile : stat cards (w <= 3 en 12 cols) → 1 col, le reste → 2 cols (pleine largeur)
-        const isSmallWidget = widget.w <= 4;
-        const mobileW = isSmallWidget ? 1 : 2;
-        return {
-          i: widget.id,
-          x: isSmallWidget ? widget.x % 2 : 0,
-          y: widget.y,
-          w: mobileW,
-          h: widget.h,
-          minW: 1,
-          minH: def?.minH ?? 2,
-          maxH: def?.maxH,
-        };
-      }
-
-      // Desktop : layout stocké en base (grille 12 colonnes)
-      return {
-        i: widget.id,
-        x: widget.x,
-        y: widget.y,
-        w: widget.w,
-        h: widget.h,
-        minW: def?.minW ?? 2,
-        minH: def?.minH ?? 2,
-        maxH: def?.maxH,
-      };
-    });
-  }, [widgets, cols]);
-
-  // Rendu du contenu d'un widget selon son type
-  const renderWidgetContent = useCallback(
-    (widget: DashboardWidget) => {
-      if (!stats) return null;
+async function DashboardData() {
+  const authUser = await getAuthUser();
 
-      switch (widget.type) {
-        case 'stat_total_contacts':
-          return (
-            <StatCard
-              title="Total Contacts"
-              value={stats.overview.totalContacts.toLocaleString('fr-FR')}
-              trend={{
-                value: stats.overview.contactsGrowth,
-                label: 'vs mois dernier',
-              }}
-              accentColor="dash-accent-bar"
-            />
-          );
-        case 'stat_new_contacts':
-          return (
-            <StatCard
-              title="Nouveaux ce Mois"
-              value={stats.overview.contactsThisMonth.toLocaleString('fr-FR')}
-              subtitle="contacts créés"
-              accentColor="bg-emerald-500"
-            />
-          );
-        case 'stat_completed_tasks':
-          return (
-            <StatCard
-              title="Tâches Complétées"
-              value={stats.tasks.completed.toLocaleString('fr-FR')}
-              subtitle={`sur ${stats.tasks.total} au total`}
-              accentColor="bg-blue-500"
-            />
-          );
-        case 'stat_pending_tasks':
-          return (
-            <StatCard
-              title="Tâches en Attente"
-              value={stats.tasks.pending.toLocaleString('fr-FR')}
-              subtitle="à traiter"
-              accentColor="bg-amber-500"
-            />
-          );
-        case 'contacts_chart':
-          return <ContactsChart data={stats.overview.monthsData} />;
-        case 'activity_chart':
-          return <ActivityChart data={stats.activity.last7Days} />;
-        case 'status_distribution':
-          return <StatusDistributionChart data={stats.statusDistribution} />;
-        case 'tasks_pie':
-          return <TasksPieChart completed={stats.tasks.completed} pending={stats.tasks.pending} />;
-        case 'upcoming_tasks':
-          return <UpcomingTasksList tasks={stats.tasks.upcoming} />;
-        case 'recent_activity':
-          return <RecentActivity interactions={stats.interactions.recent} />;
-        case 'top_contacts':
-          return <TopContactsList contacts={stats.topContacts} />;
-        case 'interactions_by_type':
-          return <InteractionsByTypeChart data={stats.interactions.byType} />;
-        default:
-          return (
-            <div className="flex h-full items-center justify-center rounded-2xl border border-gray-100 bg-white p-5 text-sm text-gray-400">
-              Widget inconnu : {widget.type}
-            </div>
-          );
-      }
-    },
-    [stats],
-  );
-
-  // Contenu intérieur selon l'état
-  const renderContent = () => {
-    if (loading || permissionsLoading) {
-      return (
-        <>
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-            {[1, 2, 3, 4].map((i) => (
-              <div key={i} className="h-[100px] animate-pulse rounded-2xl bg-gray-100" />
-            ))}
-          </div>
-          <div className="mt-4 grid gap-4 lg:grid-cols-2">
-            {[1, 2, 3, 4].map((i) => (
-              <div key={i} className="h-[300px] animate-pulse rounded-2xl bg-gray-100" />
-            ))}
-          </div>
-        </>
-      );
-    }
-
-    if (!canViewDashboard) {
-      return (
-        <div className="flex h-96 flex-col items-center justify-center rounded-2xl border-2 border-dashed border-gray-200 bg-gray-50/50">
-          <ShieldAlert className="h-12 w-12 text-gray-300" />
-          <h3 className="mt-4 text-base font-medium text-gray-600">Accès restreint</h3>
-          <p className="mt-1 text-center text-sm text-gray-400">
-            Vous n&apos;avez pas la permission d&apos;accéder au tableau de bord.<br />
-            Contactez votre administrateur pour obtenir les droits nécessaires.
-          </p>
-        </div>
-      );
-    }
+  if (!authUser) {
+    redirect('/signin');
+  }
 
-    if (error) {
-      return (
-        <div className="flex h-96 items-center justify-center p-4">
-          <p className="text-sm text-red-500">{error}</p>
-        </div>
-      );
-    }
+  if (!authUser.permissions.includes('dashboard.view')) {
+    redirect('/contacts');
+  }
 
-    return null;
-  };
+  const stats = await getDashboardStats(authUser.session.user.id, authUser.permissions);
 
-  // CSS variables pour le thème
-  const themeVars = {
-    '--dash-50': theme.hex[50],
-    '--dash-100': theme.hex[100],
-    '--dash-200': theme.hex[200],
-    '--dash-300': theme.hex[300],
-    '--dash-400': theme.hex[400],
-    '--dash-500': theme.hex[500],
-    '--dash-600': theme.hex[600],
-    '--dash-700': theme.hex[700],
-  } as React.CSSProperties;
+  return <DashboardContent stats={stats} />;
+}
 
+export default function DashboardPage() {
   return (
-    <div className="h-full w-full min-w-0" style={themeVars}>
-      <PageHeader
-        title="Tableau de Bord"
-        description="Vue d'ensemble de votre activité"
-        action={
-          !loading && !permissionsLoading && !error && canViewDashboard ? (
-            <div className="flex items-center gap-2">
-              <DashboardColorPicker />
-              {widgets.length > 0 && canResetDashboard && (
-                <button
-                  onClick={handleResetLayout}
-                  className="inline-flex cursor-pointer items-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-600 shadow-sm transition-all duration-150 hover:bg-gray-50 hover:text-gray-900 hover:shadow-md active:scale-[0.98]"
-                >
-                  <RotateCcw className="h-4 w-4" />
-                  Réinitialiser
-                </button>
-              )}
-              {canManageWidgets && (
-                <button
-                  onClick={() => setShowAddDialog(true)}
-                  className="dash-btn inline-flex cursor-pointer items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-150 hover:shadow-md active:scale-[0.98]"
-                >
-                  <Plus className="h-4 w-4" />
-                  Ajouter un Widget
-                </button>
-              )}
-            </div>
-          ) : undefined
-        }
-      />
-
-      {/* Le ref est TOUJOURS dans le DOM pour que useContainerWidth mesure correctement */}
-      <div ref={containerRef} className="p-4 sm:p-6">
-        {renderContent()}
-        {!loading && !permissionsLoading && !error && canViewDashboard && widgets.length === 0 && (
-          <div className="flex h-96 flex-col items-center justify-center rounded-2xl border-2 border-dashed border-gray-200 bg-gray-50/50">
-            <LayoutDashboard className="h-12 w-12 text-gray-300" />
-            <h3 className="mt-4 text-base font-medium text-gray-600">Aucun widget configuré</h3>
-            <p className="mt-1 text-sm text-gray-400">
-              {canManageWidgets
-                ? 'Ajoutez des widgets pour personnaliser votre tableau de bord'
-                : 'Aucun widget n\'est configuré. Contactez votre administrateur.'}
-            </p>
-            {canManageWidgets && (
-              <button
-                onClick={() => setShowAddDialog(true)}
-                className="dash-btn mt-4 inline-flex cursor-pointer items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium transition-colors"
-              >
-                <Plus className="h-4 w-4" />
-                Ajouter un Widget
-              </button>
-            )}
-          </div>
-        )}
-
-        {!loading && !permissionsLoading && !error && canViewDashboard && widgets.length > 0 && mounted && (
-          <GridLayout
-            className="layout"
-            width={containerWidth}
-            layout={gridLayout}
-            gridConfig={{
-              cols,
-              rowHeight: 60,
-              margin: [16, 16] as const,
-              containerPadding: [0, 0] as const,
-              maxRows: Infinity,
-            }}
-            onLayoutChange={handleLayoutChange}
-            dragConfig={{
-              handle: '.drag-handle',
-              enabled: canManageWidgets,
-              threshold: 3,
-              bounded: false,
-            }}
-            resizeConfig={{ enabled: canManageWidgets, handles: ['se'] }}
-          >
-            {widgets.map((widget) => (
-              <div key={widget.id}>
-                <WidgetWrapper
-                  onRemove={canManageWidgets ? () => { handleRemoveWidget(widget.id); } : undefined}
-                >
-                  {renderWidgetContent(widget)}
-                </WidgetWrapper>
-              </div>
-            ))}
-          </GridLayout>
-        )}
-      </div>
-
-      <AddWidgetDialog
-        isOpen={showAddDialog}
-        onClose={() => setShowAddDialog(false)}
-        onAdd={handleAddWidget}
-        existingTypes={widgets.map((w) => w.type)}
-      />
-    </div>
+    <Suspense fallback={<DashboardSkeleton />}>
+      <DashboardData />
+    </Suspense>
   );
 }

package/template/src/app/(dashboard)/error.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useEffect } from 'react';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+
+export default function DashboardError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error('Dashboard error:', error);
+  }, [error]);
+
+  return (
+    <div className="flex h-full items-center justify-center p-6">
+      <div className="max-w-md text-center">
+        <AlertTriangle className="mx-auto h-12 w-12 text-red-500" />
+        <h2 className="mt-4 text-lg font-semibold text-gray-900">Une erreur est survenue</h2>
+        <p className="mt-2 text-sm text-gray-600">
+          {process.env.NODE_ENV === 'development'
+            ? error.message
+            : "Quelque chose s'est mal passé. Veuillez réessayer."}
+        </p>
+        <button
+          onClick={reset}
+          className="mt-4 inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+        >
+          <RefreshCw className="h-4 w-4" />
+          Réessayer
+        </button>
+      </div>
+    </div>
+  );
+}

package/template/src/app/(dashboard)/layout.tsx

@@ -14,7 +14,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
       <MobileMenuProvider>
         <SidebarProvider>
           <TaskReminderProvider>
-            <div className="flex h-screen overflow-hidden bg-gray-50">
+            <div className="flex h-screen overflow-hidden bg-surface-page">
               <Sidebar />
               <main className="flex flex-1 flex-col overflow-hidden lg:ml-0">
                 <Header />

package/template/src/app/(dashboard)/loading.tsx

@@ -0,0 +1,5 @@
+import { PageLoader } from '@/components/skeleton';
+
+export default function DashboardLoading() {
+  return <PageLoader />;
+}

package/template/src/app/(dashboard)/settings/loading.tsx

@@ -0,0 +1,19 @@
+import { Skeleton } from '@/components/skeleton';
+
+export default function SettingsLoading() {
+  return (
+    <div className="h-full">
+      <div className="border-b bg-white px-4 py-4 sm:px-6">
+        <Skeleton className="h-7 w-32" />
+        <Skeleton className="mt-1 h-4 w-64" />
+      </div>
+      <div className="p-4 sm:p-6">
+        <div className="space-y-6">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} className="h-40 rounded-lg" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}