create-crm-tmp 2.0.0 → 2.1.0

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

@@ -1,51 +1,547 @@
-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';
+'use client';
+
+import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+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 { getAuthUser } from '@/lib/get-auth-user';
+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 { 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;
+  type: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+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;
+  }>;
+}
 
-function DashboardSkeleton() {
+export default function DashboardPage() {
   return (
-    <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>
+    <DashboardThemeProvider>
+      <DashboardContent />
+    </DashboardThemeProvider>
   );
 }
 
-async function DashboardData() {
-  const authUser = await getAuthUser();
+function DashboardContent() {
+  const toast = useAppToast();
+  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();
 
-  if (!authUser) {
-    redirect('/signin');
-  }
+  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 });
 
-  if (!authUser.permissions.includes('dashboard.view')) {
-    redirect('/contacts');
-  }
+  const cols = useMemo(() => {
+    if (containerWidth < 768) return 2;
+    return 12;
+  }, [containerWidth]);
 
-  const stats = await getDashboardStats(authUser.session.user.id, authUser.permissions);
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const [widgetsRes, statsRes] = await Promise.all([
+          fetch('/api/dashboard/widgets'),
+          fetch('/api/dashboard/stats'),
+        ]);
 
-  return <DashboardContent stats={stats} />;
-}
+        if (widgetsRes.ok) {
+          setWidgets(await widgetsRes.json());
+        }
+
+        if (statsRes.ok) {
+          setStats(await statsRes.json());
+        }
+      } catch (err) {
+        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);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  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);
+        toast.error(devToast('Impossible de sauvegarder la disposition du tableau de bord. Veuillez réessayer.', err));
+      }
+    }, 500);
+  }, []);
+
+  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],
+  );
+
+  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);
+      toast.error(devToast('Impossible d\'ajouter le widget. Veuillez réessayer.', err));
+    }
+
+    setShowAddDialog(false);
+  }, []);
+
+  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);
+      toast.error(devToast('Impossible de retirer le widget. Veuillez réessayer.', err));
+    }
+  }, []);
+
+  const handleResetLayout = useCallback(async () => {
+    try {
+      const res = await fetch('/api/dashboard/widgets', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ initDefault: true }),
+      });
+
+      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));
+    }
+  }, []);
+
+  const gridLayout = useMemo((): Layout => {
+    return widgets.map((widget) => {
+      const def = getWidgetDefinition(widget.type);
+
+      if (cols === 2) {
+        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,
+        };
+      }
+
+      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]);
+
+  const renderWidgetContent = useCallback(
+    (widget: DashboardWidget) => {
+      if (!stats) return null;
+
+      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],
+  );
+
+  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="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 />
+            Contactez votre administrateur pour obtenir les droits nécessaires.
+          </p>
+        </div>
+      );
+    }
+
+    if (error) {
+      return null;
+    }
+
+    return null;
+  };
+
+  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;
 
-export default function DashboardPage() {
   return (
-    <Suspense fallback={<DashboardSkeleton />}>
-      <DashboardData />
-    </Suspense>
+    <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-[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
+                </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-[box-shadow,transform] duration-150 hover:shadow-md active:scale-[0.98]"
+                >
+                  <Plus className="h-4 w-4" />
+                  Ajouter un Widget
+                </button>
+              )}
+            </div>
+          ) : undefined
+        }
+      />
+
+      <div ref={containerRef} className="p-4 sm:p-6">
+        {renderContent()}
+        {!loading && !permissionsLoading && !error && canViewDashboard && widgets.length === 0 && (
+          <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."}
+            </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 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
+        isOpen={showAddDialog}
+        onClose={() => setShowAddDialog(false)}
+        onAdd={handleAddWidget}
+        existingTypes={widgets.map((w) => w.type)}
+      />
+    </div>
   );
 }