create-crm-tmp 1.1.2 → 2.0.0

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

@@ -1,157 +0,0 @@
-'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 flex items-start gap-3 rounded-xl border-l-2 border-transparent px-3 py-2.5 transition-all duration-150 dash-hover-border-left"
-              >
-                <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/sales-analytics-chart.tsx

@@ -1,77 +0,0 @@
-'use client';
-
-import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-
-interface SalesAnalyticsChartProps {
-  data: Array<{ month: string; count: number }>;
-}
-
-export function SalesAnalyticsChart({ data }: SalesAnalyticsChartProps) {
-  // Calculer le total et la croissance
-  const total = data.reduce((sum, item) => sum + item.count, 0);
-  const previousTotal =
-    data.length > 1 ? data.slice(0, -1).reduce((sum, item) => sum + item.count, 0) : 0;
-  const growth = previousTotal > 0 ? ((total - previousTotal) / previousTotal) * 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 flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-bold text-gray-900">Analytiques des Ventes</h3>
-        </div>
-        <select className="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
-          <option>Mensuel</option>
-          <option>Hebdomadaire</option>
-          <option>Annuel</option>
-        </select>
-      </div>
-      <div className="mb-4 flex items-baseline gap-4">
-        <div>
-          <p className="text-2xl font-bold text-gray-900">
-            {total.toLocaleString('fr-FR')} contacts ce mois
-          </p>
-          <p className="mt-1 text-sm font-semibold text-emerald-600">
-            Augmentation ce mois : +{growth.toFixed(1)}%
-          </p>
-        </div>
-      </div>
-      <div className="h-[280px]">
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart data={data} barCategoryGap="20%">
-            <defs>
-              <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor="#8b5cf6" stopOpacity={1} />
-                <stop offset="100%" stopColor="#6366f1" stopOpacity={0.8} />
-              </linearGradient>
-            </defs>
-            <XAxis
-              dataKey="month"
-              stroke="#9ca3af"
-              fontSize={12}
-              tickLine={false}
-              axisLine={false}
-            />
-            <YAxis
-              stroke="#9ca3af"
-              fontSize={12}
-              tickLine={false}
-              axisLine={false}
-              tickFormatter={(value) => `${value}`}
-            />
-            <Tooltip
-              contentStyle={{
-                backgroundColor: 'white',
-                border: '1px solid #e5e7eb',
-                borderRadius: '12px',
-                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
-              }}
-              labelStyle={{ color: '#374151', fontWeight: 600 }}
-              formatter={(value: number) => [`${value.toLocaleString('fr-FR')}`, 'Contacts']}
-            />
-            <Bar dataKey="count" fill="url(#barGradient)" radius={[8, 8, 0, 0]} />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-}

package/template/src/components/dashboard/status-distribution-chart.tsx

@@ -1,82 +0,0 @@
-'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();
-
-  // Générer une palette basée sur le thème actif + couleurs complémentaires
-  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/top-contacts-list.tsx

@@ -1,119 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { Users } from 'lucide-react';
-
-interface Contact {
-  id: string;
-  name: string;
-  phone: string;
-  email: string | null;
-  status: string;
-  interactionsCount: number;
-  assignedCommercial?: string;
-  assignedTelepro?: string;
-}
-
-interface TopContactsListProps {
-  readonly contacts: Contact[];
-}
-
-export function TopContactsList({ contacts }: TopContactsListProps) {
-  if (contacts.length === 0) {
-    return (
-      <div className="flex h-full flex-col rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-base font-semibold text-gray-900">Derniers Prospects</h3>
-            <p className="mt-0.5 text-xs text-gray-400">Contacts récemment ajoutés</p>
-          </div>
-          <Link
-            href="/contacts"
-            className="dash-link cursor-pointer text-xs font-medium"
-          >
-            Voir tout →
-          </Link>
-        </div>
-        <div className="flex flex-1 items-center justify-center">
-          <div className="text-center">
-            <Users className="mx-auto h-10 w-10 text-gray-200" />
-            <p className="mt-2 text-sm text-gray-400">Aucun contact</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  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">Derniers Prospects</h3>
-          <p className="mt-0.5 text-xs text-gray-400">Contacts récemment ajoutés</p>
-        </div>
-        <Link
-          href="/contacts"
-          className="dash-link cursor-pointer text-xs font-medium"
-        >
-          Voir tout →
-        </Link>
-      </div>
-      <div className="flex-1 overflow-auto">
-        <table className="w-full">
-          <thead>
-            <tr className="border-b border-gray-100">
-              <th className="pb-2.5 text-left text-[11px] font-medium tracking-wider text-gray-400 uppercase">
-                Prospect
-              </th>
-              <th className="pb-2.5 text-left text-[11px] font-medium tracking-wider text-gray-400 uppercase">
-                Email
-              </th>
-              <th className="pb-2.5 text-left text-[11px] font-medium tracking-wider text-gray-400 uppercase">
-                Télépro
-              </th>
-              <th className="pb-2.5 text-left text-[11px] font-medium tracking-wider text-gray-400 uppercase">
-                Statut
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {contacts.map((contact) => {
-              const nameParts = contact.name.split(' ');
-              const firstName = nameParts[0] || '';
-              const lastName = nameParts.slice(1).join(' ') || '';
-              const initials = `${firstName[0] || ''}${lastName[0] || ''}`.toUpperCase();
-
-              return (
-                <tr
-                  key={contact.id}
-                  className="border-b border-gray-50 transition-colors dash-hover-bg"
-                >
-                  <td className="py-3">
-                    <div className="flex items-center gap-2.5">
-                      <div className="dash-avatar flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold">
-                        {initials || '?'}
-                      </div>
-                      <Link
-                        href={`/contacts/${contact.id}`}
-                        className="dash-hover-text cursor-pointer text-sm font-medium text-gray-900 transition-colors"
-                      >
-                        {contact.name}
-                      </Link>
-                    </div>
-                  </td>
-                  <td className="py-3 text-xs text-gray-500">{contact.email || '-'}</td>
-                  <td className="py-3 text-xs text-gray-500">{contact.assignedTelepro || '-'}</td>
-                  <td className="py-3">
-                    <span className="inline-flex rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-700">
-                      {contact.status}
-                    </span>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}

package/template/src/components/dashboard/widget-wrapper.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import { X, GripVertical } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-interface WidgetWrapperProps {
-  readonly children: React.ReactNode;
-  readonly onRemove?: () => void;
-  readonly className?: string;
-}
-
-export function WidgetWrapper({ children, onRemove, className }: WidgetWrapperProps) {
-  return (
-    <div className={cn('group/widget relative h-full w-full', className)}>
-      {/* Barre d'outils au hover (visible uniquement si des actions sont disponibles) */}
-      {onRemove && (
-        <div className="absolute top-0 right-0 z-10 flex items-center gap-1 opacity-0 transition-opacity duration-150 group-hover/widget:opacity-100">
-          {/* Poignée de drag */}
-          <div className="drag-handle flex h-7 w-7 cursor-grab items-center justify-center rounded-lg bg-white/90 shadow-sm ring-1 ring-gray-200/60 backdrop-blur-sm transition-colors hover:bg-gray-50 active:cursor-grabbing">
-            <GripVertical className="h-3.5 w-3.5 text-gray-400" />
-          </div>
-          {/* Bouton supprimer */}
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              onRemove();
-            }}
-            className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg bg-white/90 shadow-sm ring-1 ring-gray-200/60 backdrop-blur-sm transition-colors hover:bg-red-50 hover:text-red-600"
-          >
-            <X className="h-3.5 w-3.5" />
-          </button>
-        </div>
-      )}
-
-      {/* Contenu du widget */}
-      {children}
-    </div>
-  );
-}

package/template/src/contexts/dashboard-theme-context.tsx

@@ -1,58 +0,0 @@
-'use client';
-
-import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
-import {
-  type DashboardTheme,
-  DASHBOARD_THEMES,
-  DEFAULT_THEME_KEY,
-  getThemeByKey,
-} from '@/lib/dashboard-themes';
-
-interface DashboardThemeContextType {
-  theme: DashboardTheme;
-  setThemeKey: (key: string) => void;
-  themes: DashboardTheme[];
-}
-
-const DashboardThemeContext = createContext<DashboardThemeContextType | undefined>(undefined);
-
-const STORAGE_KEY = 'dashboard_theme';
-
-export function DashboardThemeProvider({ children }: Readonly<{ children: ReactNode }>) {
-  const [themeKey, setThemeKeyState] = useState(DEFAULT_THEME_KEY);
-
-  // Charger le thème depuis le localStorage
-  useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored && DASHBOARD_THEMES.some((t) => t.key === stored)) {
-      setThemeKeyState(stored);
-    }
-  }, []);
-
-  const setThemeKey = (key: string) => {
-    setThemeKeyState(key);
-    localStorage.setItem(STORAGE_KEY, key);
-  };
-
-  const theme = getThemeByKey(themeKey);
-
-  const value = useMemo(
-    () => ({ theme, setThemeKey, themes: DASHBOARD_THEMES }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [theme],
-  );
-
-  return (
-    <DashboardThemeContext.Provider value={value}>
-      {children}
-    </DashboardThemeContext.Provider>
-  );
-}
-
-export function useDashboardTheme() {
-  const context = useContext(DashboardThemeContext);
-  if (!context) {
-    throw new Error('useDashboardTheme doit être utilisé dans un DashboardThemeProvider');
-  }
-  return context;
-}

package/template/src/lib/dashboard-themes.ts

@@ -1,140 +0,0 @@
-/**
- * Thèmes de couleur pour le tableau de bord
- * Chaque thème fournit des valeurs hex pour toutes les nuances nécessaires
- */
-
-export interface DashboardTheme {
-  key: string;
-  label: string;
-  hex: {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-  };
-}
-
-export const DASHBOARD_THEMES: DashboardTheme[] = [
-  {
-    key: 'orange',
-    label: 'Orange',
-    hex: {
-      50: '#fff7ed',
-      100: '#ffedd5',
-      200: '#fed7aa',
-      300: '#fdba74',
-      400: '#fb923c',
-      500: '#f97316',
-      600: '#ea580c',
-      700: '#c2410c',
-    },
-  },
-  {
-    key: 'blue',
-    label: 'Bleu',
-    hex: {
-      50: '#eff6ff',
-      100: '#dbeafe',
-      200: '#bfdbfe',
-      300: '#93c5fd',
-      400: '#60a5fa',
-      500: '#3b82f6',
-      600: '#2563eb',
-      700: '#1d4ed8',
-    },
-  },
-  {
-    key: 'violet',
-    label: 'Violet',
-    hex: {
-      50: '#f5f3ff',
-      100: '#ede9fe',
-      200: '#ddd6fe',
-      300: '#c4b5fd',
-      400: '#a78bfa',
-      500: '#8b5cf6',
-      600: '#7c3aed',
-      700: '#6d28d9',
-    },
-  },
-  {
-    key: 'emerald',
-    label: 'Émeraude',
-    hex: {
-      50: '#ecfdf5',
-      100: '#d1fae5',
-      200: '#a7f3d0',
-      300: '#6ee7b7',
-      400: '#34d399',
-      500: '#10b981',
-      600: '#059669',
-      700: '#047857',
-    },
-  },
-  {
-    key: 'rose',
-    label: 'Rose',
-    hex: {
-      50: '#fff1f2',
-      100: '#ffe4e6',
-      200: '#fecdd3',
-      300: '#fda4af',
-      400: '#fb7185',
-      500: '#f43f5e',
-      600: '#e11d48',
-      700: '#be123c',
-    },
-  },
-  {
-    key: 'cyan',
-    label: 'Cyan',
-    hex: {
-      50: '#ecfeff',
-      100: '#cffafe',
-      200: '#a5f3fc',
-      300: '#67e8f9',
-      400: '#22d3ee',
-      500: '#06b6d4',
-      600: '#0891b2',
-      700: '#0e7490',
-    },
-  },
-  {
-    key: 'amber',
-    label: 'Ambre',
-    hex: {
-      50: '#fffbeb',
-      100: '#fef3c7',
-      200: '#fde68a',
-      300: '#fcd34d',
-      400: '#fbbf24',
-      500: '#f59e0b',
-      600: '#d97706',
-      700: '#b45309',
-    },
-  },
-  {
-    key: 'indigo',
-    label: 'Indigo',
-    hex: {
-      50: '#eef2ff',
-      100: '#e0e7ff',
-      200: '#c7d2fe',
-      300: '#a5b4fc',
-      400: '#818cf8',
-      500: '#6366f1',
-      600: '#4f46e5',
-      700: '#4338ca',
-    },
-  },
-];
-
-export const DEFAULT_THEME_KEY = 'orange';
-
-export function getThemeByKey(key: string): DashboardTheme {
-  return DASHBOARD_THEMES.find((t) => t.key === key) || DASHBOARD_THEMES[0];
-}

package/template/src/lib/default-widgets.ts

@@ -1,14 +0,0 @@
-// Layout par défaut pour les nouveaux utilisateurs
-// Ce fichier est séparé du widget-registry pour être importable côté serveur
-export const DEFAULT_WIDGETS = [
-  { type: 'stat_total_contacts', x: 0, y: 0, w: 3, h: 2 },
-  { type: 'stat_new_contacts', x: 3, y: 0, w: 3, h: 2 },
-  { type: 'stat_completed_tasks', x: 6, y: 0, w: 3, h: 2 },
-  { type: 'stat_pending_tasks', x: 9, y: 0, w: 3, h: 2 },
-  { type: 'contacts_chart', x: 0, y: 2, w: 6, h: 4 },
-  { type: 'top_contacts', x: 6, y: 2, w: 6, h: 4 },
-  { type: 'activity_chart', x: 0, y: 6, w: 8, h: 4 },
-  { type: 'tasks_pie', x: 8, y: 6, w: 4, h: 4 },
-  { type: 'upcoming_tasks', x: 0, y: 10, w: 6, h: 5 },
-  { type: 'recent_activity', x: 6, y: 10, w: 6, h: 5 },
-];