create-crm-tmp 1.1.2 → 2.0.0

package/template/src/app/api/dashboard/widgets/route.ts

@@ -1,181 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { auth } from '@/lib/auth';
-import { headers } from 'next/headers';
-import { prisma } from '@/lib/prisma';
-import { DEFAULT_WIDGETS } from '@/lib/default-widgets';
-import { checkPermission } from '@/lib/check-permission';
-
-// GET - Récupérer les widgets de l'utilisateur
-export async function GET() {
-  try {
-    const session = await auth.api.getSession({
-      headers: await headers(),
-    });
-
-    if (!session) {
-      return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
-    }
-
-    // Vérifier la permission d'accès au tableau de bord
-    const canView = await checkPermission('dashboard.view');
-    if (!canView) {
-      return NextResponse.json({ error: 'Accès refusé' }, { status: 403 });
-    }
-
-    const widgets = await prisma.dashboardWidget.findMany({
-      where: { userId: session.user.id },
-      orderBy: [{ y: 'asc' }, { x: 'asc' }],
-    });
-
-    return NextResponse.json(widgets);
-  } catch (error) {
-    console.error('Erreur lors de la récupération des widgets:', error);
-    return NextResponse.json({ error: 'Erreur serveur' }, { status: 500 });
-  }
-}
-
-// POST - Créer un widget (ou initialiser le layout par défaut)
-export async function POST(req: NextRequest) {
-  try {
-    const session = await auth.api.getSession({
-      headers: await headers(),
-    });
-
-    if (!session) {
-      return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
-    }
-
-    // Vérifier la permission de gestion des widgets
-    const canManage = await checkPermission('dashboard.widgets.manage');
-    if (!canManage) {
-      return NextResponse.json({ error: 'Accès refusé' }, { status: 403 });
-    }
-
-    const body = await req.json();
-
-    // Si c'est une initialisation par défaut
-    if (body.initDefault) {
-      const existing = await prisma.dashboardWidget.count({
-        where: { userId: session.user.id },
-      });
-
-      if (existing > 0) {
-        const widgets = await prisma.dashboardWidget.findMany({
-          where: { userId: session.user.id },
-          orderBy: [{ y: 'asc' }, { x: 'asc' }],
-        });
-        return NextResponse.json(widgets);
-      }
-
-      const created = await prisma.$transaction(
-        DEFAULT_WIDGETS.map((dw) =>
-          prisma.dashboardWidget.create({
-            data: {
-              userId: session.user.id,
-              type: dw.type,
-              x: dw.x,
-              y: dw.y,
-              w: dw.w,
-              h: dw.h,
-            },
-          }),
-        ),
-      );
-
-      return NextResponse.json(created, { status: 201 });
-    }
-
-    // Création d'un widget unique
-    const {
-      type,
-      x,
-      y,
-      w: width,
-      h: height,
-    } = body as {
-      type?: string;
-      x?: number;
-      y?: number;
-      w?: number;
-      h?: number;
-    };
-
-    if (!type) {
-      return NextResponse.json({ error: 'Le type de widget est requis' }, { status: 400 });
-    }
-
-    // Calculer la position Y max pour placer le nouveau widget en bas
-    const lastWidget = await prisma.dashboardWidget.findFirst({
-      where: { userId: session.user.id },
-      orderBy: { y: 'desc' },
-    });
-
-    const newY = lastWidget ? lastWidget.y + lastWidget.h : 0;
-
-    const widget = await prisma.dashboardWidget.create({
-      data: {
-        userId: session.user.id,
-        type,
-        x: x ?? 0,
-        y: y ?? newY,
-        w: width ?? 6,
-        h: height ?? 4,
-      },
-    });
-
-    return NextResponse.json(widget, { status: 201 });
-  } catch (error) {
-    console.error('Erreur lors de la création du widget:', error);
-    return NextResponse.json({ error: 'Erreur serveur' }, { status: 500 });
-  }
-}
-
-// PUT - Mettre à jour les positions des widgets (batch)
-export async function PUT(req: NextRequest) {
-  try {
-    const session = await auth.api.getSession({
-      headers: await headers(),
-    });
-
-    if (!session) {
-      return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
-    }
-
-    // Vérifier la permission de gestion des widgets
-    const canManage = await checkPermission('dashboard.widgets.manage');
-    if (!canManage) {
-      return NextResponse.json({ error: 'Accès refusé' }, { status: 403 });
-    }
-
-    const body = await req.json();
-    const { widgets } = body as {
-      widgets: Array<{ id: string; x: number; y: number; w: number; h: number }>;
-    };
-
-    if (!widgets || !Array.isArray(widgets)) {
-      return NextResponse.json({ error: 'Format invalide' }, { status: 400 });
-    }
-
-    await prisma.$transaction(
-      widgets.map((w) =>
-        prisma.dashboardWidget.updateMany({
-          where: {
-            id: w.id,
-            userId: session.user.id,
-          },
-          data: {
-            x: w.x,
-            y: w.y,
-            w: w.w,
-            h: w.h,
-          },
-        }),
-      ),
-    );
-
-    return NextResponse.json({ success: true });
-  } catch (error) {
-    console.error('Erreur lors de la mise à jour des widgets:', error);
-    return NextResponse.json({ error: 'Erreur serveur' }, { status: 500 });
-  }
-}

package/template/src/components/dashboard/add-widget-dialog.tsx

@@ -1,161 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { X, Plus, BarChart3, ListTodo, TrendingUp } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { WIDGET_REGISTRY, type WidgetDefinition } from '@/lib/widget-registry';
-
-interface AddWidgetDialogProps {
-  readonly isOpen: boolean;
-  readonly onClose: () => void;
-  readonly onAdd: (type: string, w: number, h: number) => void;
-  readonly existingTypes: string[];
-}
-
-const CATEGORY_LABELS: Record<string, { label: string; icon: typeof BarChart3 }> = {
-  stat: { label: 'Statistiques', icon: TrendingUp },
-  chart: { label: 'Graphiques', icon: BarChart3 },
-  list: { label: 'Listes', icon: ListTodo },
-};
-
-export function AddWidgetDialog({ isOpen, onClose, onAdd, existingTypes }: AddWidgetDialogProps) {
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-
-  if (!isOpen) return null;
-
-  const categories = ['stat', 'chart', 'list'] as const;
-
-  const filteredWidgets = selectedCategory
-    ? WIDGET_REGISTRY.filter((w) => w.category === selectedCategory)
-    : WIDGET_REGISTRY;
-
-  const handleAdd = (widget: WidgetDefinition) => {
-    onAdd(widget.type, widget.defaultW, widget.defaultH);
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 cursor-pointer bg-black/40 backdrop-blur-sm"
-        role="button"
-        tabIndex={0}
-        onClick={onClose}
-        onKeyDown={(e) => {
-          if (e.key === 'Escape') onClose();
-        }}
-      />
-
-      {/* Dialog */}
-      <div className="relative z-10 w-full max-w-2xl rounded-2xl bg-white shadow-2xl">
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-gray-100 px-6 py-4">
-          <div>
-            <h2 className="text-lg font-semibold text-gray-900">Ajouter un Widget</h2>
-            <p className="mt-0.5 text-sm text-gray-500">
-              Choisissez un widget à ajouter au tableau de bord
-            </p>
-          </div>
-          <button
-            onClick={onClose}
-            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        {/* Filtres catégories */}
-        <div className="flex gap-2 border-b border-gray-100 px-6 py-3">
-          <button
-            onClick={() => setSelectedCategory(null)}
-            className={cn(
-              'cursor-pointer rounded-full px-3.5 py-1.5 text-xs font-medium transition-colors',
-              selectedCategory === null
-                ? 'dash-pill-active'
-                : 'bg-gray-100 text-gray-600 hover:bg-gray-200',
-            )}
-          >
-            Tous
-          </button>
-          {categories.map((cat) => {
-            const { label, icon: Icon } = CATEGORY_LABELS[cat];
-            return (
-              <button
-                key={cat}
-                onClick={() => setSelectedCategory(cat)}
-                className={cn(
-                  'flex cursor-pointer items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-medium transition-colors',
-                  selectedCategory === cat
-                    ? 'dash-pill-active'
-                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200',
-                )}
-              >
-                <Icon className="h-3 w-3" />
-                {label}
-              </button>
-            );
-          })}
-        </div>
-
-        {/* Grille de widgets */}
-        <div className="max-h-[400px] overflow-y-auto p-6">
-          <div className="grid grid-cols-2 gap-3">
-            {filteredWidgets.map((widget) => {
-              const isAlreadyAdded = existingTypes.includes(widget.type);
-              const Icon = widget.icon;
-
-              return (
-                <button
-                  key={widget.type}
-                  onClick={() => !isAlreadyAdded && handleAdd(widget)}
-                  disabled={isAlreadyAdded}
-                  className={cn(
-                    'group flex items-start gap-3 rounded-xl border p-4 text-left transition-all duration-150',
-                    isAlreadyAdded
-                      ? 'cursor-not-allowed border-gray-100 bg-gray-50 opacity-50'
-                      : 'border-gray-100 bg-white dash-hover-border dash-hover-bg hover:shadow-sm',
-                  )}
-                >
-                  <div
-                    className={cn(
-                      'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg',
-                      isAlreadyAdded ? 'bg-gray-100' : 'dash-icon-box dash-icon-box-gh',
-                    )}
-                  >
-                    <Icon
-                      className={cn(
-                        'h-4 w-4',
-                        isAlreadyAdded ? 'text-gray-400' : 'dash-icon-color',
-                      )}
-                    />
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <div className="flex items-center justify-between">
-                      <p className="text-sm font-medium text-gray-900">{widget.label}</p>
-                      {isAlreadyAdded ? (
-                        <span className="text-[10px] font-medium text-gray-400">Déjà ajouté</span>
-                      ) : (
-                        <Plus className="h-4 w-4 text-gray-300 transition-colors dash-hover-text-gh" />
-                      )}
-                    </div>
-                    <p className="mt-0.5 text-xs text-gray-500">{widget.description}</p>
-                    <p className="mt-1 text-[10px] text-gray-400">
-                      Taille : {widget.defaultW}x{widget.defaultH}
-                    </p>
-                  </div>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="border-t border-gray-100 px-6 py-3">
-          <p className="text-center text-xs text-gray-400">
-            Les widgets peuvent être déplacés et redimensionnés après ajout
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

package/template/src/components/dashboard/color-picker.tsx

@@ -1,65 +0,0 @@
-'use client';
-
-import { useState, useRef, useEffect } from 'react';
-import { Palette, Check } from 'lucide-react';
-import { useDashboardTheme } from '@/contexts/dashboard-theme-context';
-
-export function DashboardColorPicker() {
-  const { theme, setThemeKey, themes } = useDashboardTheme();
-  const [isOpen, setIsOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  // Fermer le dropdown au clic extérieur
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    }
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [isOpen]);
-
-  return (
-    <div ref={ref} className="relative">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-150 hover:bg-gray-50 hover:shadow-md active:scale-[0.98]"
-        title="Changer la couleur du thème"
-      >
-        <Palette className="h-4 w-4 text-gray-600" />
-      </button>
-
-      {isOpen && (
-        <div className="absolute right-0 z-50 mt-2 w-56 rounded-xl border border-gray-100 bg-white p-3 shadow-xl">
-          <p className="mb-2.5 text-[11px] font-medium tracking-wider text-gray-400 uppercase">
-            Couleur d&apos;accent
-          </p>
-          <div className="grid grid-cols-4 gap-2">
-            {themes.map((t) => (
-              <button
-                key={t.key}
-                onClick={() => {
-                  setThemeKey(t.key);
-                  setIsOpen(false);
-                }}
-                className="group relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-xl transition-all duration-150 hover:scale-110"
-                style={{ backgroundColor: t.hex[500] }}
-                title={t.label}
-              >
-                {theme.key === t.key && (
-                  <Check className="h-4 w-4 text-white drop-shadow-sm" />
-                )}
-                <span className="absolute -bottom-5 left-1/2 -translate-x-1/2 whitespace-nowrap text-[10px] text-gray-500 opacity-0 transition-opacity group-hover:opacity-100">
-                  {t.label}
-                </span>
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,69 +0,0 @@
-'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

@@ -1,121 +0,0 @@
-'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>
-  );
-}