create-crm-tmp 1.1.3 → 2.1.0

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

@@ -1,7 +1,8 @@
 'use client';
 
 import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
-import { GridLayout, useContainerWidth, type Layout, type LayoutItem } from 'react-grid-layout';
+import dynamic from 'next/dynamic';
+import { useContainerWidth, type Layout, type LayoutItem } from 'react-grid-layout';
 import { Plus, LayoutDashboard, RotateCcw, ShieldAlert } from 'lucide-react';
 import { PageHeader } from '@/components/page-header';
 import { WidgetWrapper } from '@/components/dashboard/widget-wrapper';
@@ -9,16 +10,55 @@ 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';
+import { useAppToast } from '@/contexts/app-toast-context';
+import { devToast } from '@/lib/utils';
+
+const GridLayout = dynamic(() => import('react-grid-layout').then((mod) => mod.GridLayout), {
+  ssr: false,
+});
+const StatCard = dynamic(
+  () => import('@/components/dashboard/stat-card').then((mod) => mod.StatCard),
+  { ssr: false },
+);
+const ContactsChart = dynamic(
+  () => import('@/components/dashboard/contacts-chart').then((mod) => mod.ContactsChart),
+  { ssr: false },
+);
+const ActivityChart = dynamic(
+  () => import('@/components/dashboard/activity-chart').then((mod) => mod.ActivityChart),
+  { ssr: false },
+);
+const StatusDistributionChart = dynamic(
+  () =>
+    import('@/components/dashboard/status-distribution-chart').then(
+      (mod) => mod.StatusDistributionChart,
+    ),
+  { ssr: false },
+);
+const TasksPieChart = dynamic(
+  () => import('@/components/dashboard/tasks-pie-chart').then((mod) => mod.TasksPieChart),
+  { ssr: false },
+);
+const UpcomingTasksList = dynamic(
+  () => import('@/components/dashboard/upcoming-tasks-list').then((mod) => mod.UpcomingTasksList),
+  { ssr: false },
+);
+const RecentActivity = dynamic(
+  () => import('@/components/dashboard/recent-activity').then((mod) => mod.RecentActivity),
+  { ssr: false },
+);
+const TopContactsList = dynamic(
+  () => import('@/components/dashboard/top-contacts-list').then((mod) => mod.TopContactsList),
+  { ssr: false },
+);
+const InteractionsByTypeChart = dynamic(
+  () =>
+    import('@/components/dashboard/interactions-by-type-chart').then(
+      (mod) => mod.InteractionsByTypeChart,
+    ),
+  { ssr: false },
+);
 
 interface DashboardWidget {
   id: string;
@@ -89,6 +129,7 @@ export default function DashboardPage() {
 }
 
 function DashboardContent() {
+  const toast = useAppToast();
   const [widgets, setWidgets] = useState<DashboardWidget[]>([]);
   const [stats, setStats] = useState<DashboardStats | null>(null);
   const [loading, setLoading] = useState(true);
@@ -98,7 +139,6 @@ function DashboardContent() {
   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');
@@ -108,47 +148,30 @@ function DashboardContent() {
     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[] = [];
+        const [widgetsRes, statsRes] = await Promise.all([
+          fetch('/api/dashboard/widgets'),
+          fetch('/api/dashboard/stats'),
+        ]);
 
         if (widgetsRes.ok) {
-          widgetsData = await widgetsRes.json();
+          setWidgets(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);
+          setStats(await statsRes.json());
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Une erreur est survenue');
+        const message = err instanceof Error ? err.message : 'Une erreur est survenue';
+        setError(message);
+        toast.error(devToast('Une erreur est survenue lors du chargement du tableau de bord', err));
       } finally {
         setLoading(false);
       }
@@ -157,7 +180,6 @@ function DashboardContent() {
     fetchData();
   }, []);
 
-  // Sauvegarder les positions avec debounce
   const saveLayout = useCallback((updatedWidgets: DashboardWidget[]) => {
     if (saveTimeoutRef.current) {
       clearTimeout(saveTimeoutRef.current);
@@ -180,13 +202,11 @@ function DashboardContent() {
         });
       } catch (err) {
         console.error('Erreur sauvegarde layout:', err);
+        toast.error(devToast('Impossible de sauvegarder la disposition du tableau de bord. Veuillez réessayer.', 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;
@@ -211,7 +231,6 @@ function DashboardContent() {
     [widgets, saveLayout, cols],
   );
 
-  // Ajouter un widget
   const handleAddWidget = useCallback(async (type: string, w: number, h: number) => {
     try {
       const res = await fetch('/api/dashboard/widgets', {
@@ -226,12 +245,12 @@ function DashboardContent() {
       }
     } catch (err) {
       console.error('Erreur ajout widget:', err);
+      toast.error(devToast('Impossible d\'ajouter le widget. Veuillez réessayer.', err));
     }
 
     setShowAddDialog(false);
   }, []);
 
-  // Supprimer un widget
   const handleRemoveWidget = useCallback(async (widgetId: string) => {
     try {
       const res = await fetch(`/api/dashboard/widgets/${widgetId}`, {
@@ -243,40 +262,32 @@ function DashboardContent() {
       }
     } catch (err) {
       console.error('Erreur suppression widget:', err);
+      toast.error(devToast('Impossible de retirer le widget. Veuillez réessayer.', 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', {
+      const res = 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);
+      if (res.ok) {
+        setWidgets(await res.json());
       }
     } catch (err) {
       console.error('Erreur réinitialisation layout:', err);
+      toast.error(devToast('Impossible de réinitialiser le tableau de bord. Veuillez réessayer.', 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 {
@@ -291,7 +302,6 @@ function DashboardContent() {
         };
       }
 
-      // Desktop : layout stocké en base (grille 12 colonnes)
       return {
         i: widget.id,
         x: widget.x,
@@ -305,7 +315,6 @@ function DashboardContent() {
     });
   }, [widgets, cols]);
 
-  // Rendu du contenu d'un widget selon son type
   const renderWidgetContent = useCallback(
     (widget: DashboardWidget) => {
       if (!stats) return null;
@@ -377,7 +386,6 @@ function DashboardContent() {
     [stats],
   );
 
-  // Contenu intérieur selon l'état
   const renderContent = () => {
     if (loading || permissionsLoading) {
       return (
@@ -398,11 +406,12 @@ function DashboardContent() {
 
     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">
+        <div className="ui-fade-in 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 />
+            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>
@@ -410,17 +419,12 @@ function DashboardContent() {
     }
 
     if (error) {
-      return (
-        <div className="flex h-96 items-center justify-center p-4">
-          <p className="text-sm text-red-500">{error}</p>
-        </div>
-      );
+      return null;
     }
 
     return null;
   };
 
-  // CSS variables pour le thème
   const themeVars = {
     '--dash-50': theme.hex[50],
     '--dash-100': theme.hex[100],
@@ -444,7 +448,7 @@ function DashboardContent() {
               {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]"
+                  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-[background-color,color,box-shadow,transform] 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
@@ -453,7 +457,7 @@ function DashboardContent() {
               {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]"
+                  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-[box-shadow,transform] duration-150 hover:shadow-md active:scale-[0.98]"
                 >
                   <Plus className="h-4 w-4" />
                   Ajouter un Widget
@@ -464,17 +468,16 @@ function DashboardContent() {
         }
       />
 
-      {/* 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">
+          <div className="ui-fade-in 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.'}
+                : "Aucun widget n'est configuré. Contactez votre administrateur."}
             </p>
             {canManageWidgets && (
               <button
@@ -488,38 +491,49 @@ function DashboardContent() {
           </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>
-        )}
+        {!loading &&
+          !permissionsLoading &&
+          !error &&
+          canViewDashboard &&
+          widgets.length > 0 &&
+          mounted && (
+            <GridLayout
+              className="layout ui-fade-in"
+              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