create-crm-tmp 2.0.0 → 2.1.0

package/template/src/components/contacts/filter-bar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { X, Plus, Filter, Save, RotateCcw } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import {
   FILTER_FIELD_DEFINITIONS,
   OPERATOR_LABELS,
@@ -20,6 +21,8 @@ interface FilterBarProps {
   isViewOwner?: boolean;
   statusOptions?: { id: string; name: string; color: string }[];
   userOptions?: { id: string; name: string }[];
+  /** Quand true, pas de padding (intégré sur une ligne avec la barre d'outils) */
+  inline?: boolean;
 }
 
 function getFieldLabel(field: string): string {
@@ -89,10 +92,16 @@ export function FilterBar({
   isViewOwner,
   statusOptions,
   userOptions,
+  inline = false,
 }: FilterBarProps) {
+  const rootClass = cn(
+    'flex flex-wrap items-center gap-2',
+    !inline && 'px-4 py-2 sm:px-6 lg:px-8',
+    inline && 'shrink-0',
+  );
   if (filters.length === 0 && !hasUnsavedChanges) {
     return (
-      <div className="flex items-center gap-2 px-4 py-2 sm:px-6 lg:px-8">
+      <div className={rootClass}>
         <button
           onClick={onAddFilter}
           className="flex cursor-pointer items-center gap-1.5 rounded-md border border-gray-200 px-3 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-50"
@@ -105,7 +114,7 @@ export function FilterBar({
   }
 
   return (
-    <div className="flex flex-wrap items-center gap-2 px-4 py-2 sm:px-6 lg:px-8">
+    <div className={rootClass}>
       <Filter className="h-3.5 w-3.5 shrink-0 text-gray-400" />
 
       {filters.map((filter, index) => (
@@ -120,7 +129,7 @@ export function FilterBar({
           </span>
           <button
             onClick={() => onRemoveFilter(index)}
-              className="ml-0.5 cursor-pointer rounded p-0.5 text-blue-400 hover:bg-blue-100 hover:text-blue-600"
+            className="ml-0.5 cursor-pointer rounded p-0.5 text-blue-400 hover:bg-blue-100 hover:text-blue-600"
           >
             <X className="h-3 w-3" />
           </button>

package/template/src/components/contacts/filter-builder.tsx

@@ -14,9 +14,9 @@ import {
   OPERATOR_LABELS,
   DATE_PRESET_LABELS,
 } from '@/types/contact-views';
-import type { Region, Department } from '@/lib/french-regions';
-import { FRENCH_REGIONS, FRENCH_DEPARTMENTS } from '@/lib/french-regions';
 import { useFocusTrap } from '@/hooks/use-focus-trap';
+import { FR_DEPARTMENTS, FR_REGIONS } from '@/lib/fr-geography';
+import { DatePicker } from '@/components/ui/date-picker';
 
 type Step = 'field' | 'operator' | 'value';
 
@@ -226,16 +226,10 @@ export function FilterBuilder({
       return originOptions.map((o) => ({ value: o, label: o }));
     }
     if (selectedField.field === 'region') {
-      return (FRENCH_REGIONS as Region[]).map((r) => ({
-        value: r.code,
-        label: r.name,
-      }));
+      return FR_REGIONS.map((r) => ({ value: r.code, label: r.name }));
     }
     if (selectedField.field === 'department') {
-      return (FRENCH_DEPARTMENTS as Department[]).map((d) => ({
-        value: d.code,
-        label: `${d.code} - ${d.name}`,
-      }));
+      return FR_DEPARTMENTS.map((d) => ({ value: d.code, label: `${d.code} — ${d.name}` }));
     }
     return [];
   }
@@ -308,7 +302,7 @@ export function FilterBuilder({
                   placeholder="Rechercher une propriété..."
                   value={fieldSearch}
                   onChange={(e) => setFieldSearch(e.target.value)}
-                  className="w-full rounded-md border border-gray-200 py-2 pr-3 pl-9 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                  className="w-full rounded-md border border-gray-200 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                   autoFocus
                 />
               </div>
@@ -369,8 +363,8 @@ export function FilterBuilder({
                       <button
                         key={preset}
                         onClick={() => applyFilter('date_preset', null, preset)}
-                    className={cn(
-                      'flex w-full cursor-pointer items-center justify-between px-4 py-2 text-sm hover:bg-gray-50',
+                        className={cn(
+                          'flex w-full cursor-pointer items-center justify-between px-4 py-2 text-sm hover:bg-gray-50',
                           selectedPreset === preset ? 'font-medium text-blue-600' : 'text-gray-700',
                         )}
                       >
@@ -394,7 +388,7 @@ export function FilterBuilder({
                       placeholder="Rechercher..."
                       value={selectSearch}
                       onChange={(e) => setSelectSearch(e.target.value)}
-                      className="w-full rounded-md border border-gray-200 py-2 pr-3 pl-9 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                      className="w-full rounded-md border border-gray-200 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       autoFocus
                     />
                   </div>
@@ -409,8 +403,8 @@ export function FilterBuilder({
                         <button
                           key={option.value}
                           onClick={() => handleToggleSelectValue(option.value)}
-                    className={cn(
-                      'flex w-full cursor-pointer items-center gap-2 px-4 py-2 text-sm hover:bg-gray-50',
+                          className={cn(
+                            'flex w-full cursor-pointer items-center gap-2 px-4 py-2 text-sm hover:bg-gray-50',
                             isSelected ? 'text-blue-600' : 'text-gray-700',
                           )}
                         >
@@ -469,7 +463,7 @@ export function FilterBuilder({
                         applyFilter(undefined, textInput.trim(), null);
                       }
                     }}
-                    className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     autoFocus
                   />
                   <button
@@ -503,7 +497,7 @@ export function FilterBuilder({
                         applyFilter(undefined, textInput.trim(), null);
                       }
                     }}
-                    className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     autoFocus
                   />
                   <button
@@ -525,12 +519,11 @@ export function FilterBuilder({
               selectedOperator !== 'date_preset' &&
               selectedOperator !== 'between' && (
                 <div className="p-4">
-                  <input
-                    type="date"
-                    value={dateInputStart}
-                    onChange={(e) => setDateInputStart(e.target.value)}
-                    className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    autoFocus
+                  <DatePicker
+                    embedded
+                    startDate={dateInputStart}
+                    onDateChange={(start) => setDateInputStart(start)}
+                    label="Choisir une date"
                   />
                   <button
                     onClick={() => {
@@ -549,25 +542,17 @@ export function FilterBuilder({
             {/* Date between */}
             {selectedField.type === 'date' && selectedOperator === 'between' && (
               <div className="space-y-3 p-4">
-                <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-500">Du</label>
-                  <input
-                    type="date"
-                    value={dateInputStart}
-                    onChange={(e) => setDateInputStart(e.target.value)}
-                    className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    autoFocus
-                  />
-                </div>
-                <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-500">Au</label>
-                  <input
-                    type="date"
-                    value={dateInputEnd}
-                    onChange={(e) => setDateInputEnd(e.target.value)}
-                    className="w-full rounded-md border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                  />
-                </div>
+                <DatePicker
+                  embedded
+                  isPeriod
+                  startDate={dateInputStart}
+                  endDate={dateInputEnd}
+                  label="Période"
+                  onDateChange={(start, end) => {
+                    setDateInputStart(start);
+                    if (end) setDateInputEnd(end);
+                  }}
+                />
                 <button
                   onClick={() => {
                     if (dateInputStart && dateInputEnd) {

package/template/src/components/contacts/save-view-dialog.tsx

@@ -91,7 +91,7 @@ export function SaveViewDialog({
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="Ex: Nouveaux contacts cette semaine"
-              className="w-full rounded-lg border border-gray-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+              className="w-full rounded-lg border border-gray-200 px-3 py-2.5 text-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
             />
           </div>
 

package/template/src/components/contacts/views-tab-bar.tsx

@@ -44,6 +44,8 @@ interface ViewsTabBarProps {
   hasUnsavedChanges?: boolean;
   activeFilters?: ViewFilter[];
   entityType?: 'contacts' | 'companies';
+  /** Quand true, pas de bordure ni padding (intégré sur une ligne avec le titre) */
+  inline?: boolean;
 }
 
 export type { ViewPermissions };
@@ -65,6 +67,7 @@ export function ViewsTabBar({
   hasUnsavedChanges,
   activeFilters,
   entityType = 'contacts',
+  inline = false,
 }: ViewsTabBarProps) {
   const [showAllViews, setShowAllViews] = useState(false);
   const [contextMenu, setContextMenu] = useState<string | null>(null);
@@ -120,12 +123,18 @@ export function ViewsTabBar({
     canEdit(view) || canDelete(view) || permissions.canCreate;
 
   return (
-    <div className="flex items-center gap-1 border-b border-gray-200 bg-white px-4 sm:px-6 lg:px-8">
+    <div
+      className={cn(
+        'flex min-w-0 items-center gap-1',
+        !inline && 'border-b border-gray-200 bg-white px-4 sm:px-6 lg:px-8',
+        inline && 'flex-1 overflow-x-clip',
+      )}
+    >
       {/* Vue "Tous les contacts" (défaut) */}
       <button
         onClick={() => onSelectView(null)}
         className={cn(
-          'relative flex shrink-0 cursor-pointer items-center gap-1.5 border-b-2 px-3 py-2.5 text-sm font-medium whitespace-nowrap transition-colors',
+          'ui-tab-indicator relative flex shrink-0 cursor-pointer items-center gap-1.5 border-b-2 px-3 py-2.5 text-sm font-medium whitespace-nowrap',
           activeViewId === null
             ? 'border-blue-600 text-blue-600'
             : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
@@ -150,7 +159,7 @@ export function ViewsTabBar({
           <button
             onClick={() => onSelectView(view.id)}
             className={cn(
-              'relative flex cursor-pointer items-center gap-1.5 border-b-2 px-3 py-2.5 text-sm font-medium whitespace-nowrap transition-colors',
+              'ui-tab-indicator relative flex cursor-pointer items-center gap-1.5 border-b-2 px-3 py-2.5 text-sm font-medium whitespace-nowrap',
               activeViewId === view.id
                 ? 'border-blue-600 text-blue-600'
                 : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
@@ -188,7 +197,7 @@ export function ViewsTabBar({
               {contextMenu === view.id && (
                 <div
                   ref={contextMenuRef}
-                  className="absolute top-full right-0 z-50 mt-1 w-48 rounded-lg border border-gray-200 bg-white py-1 shadow-lg"
+                  className="ui-dropdown-enter absolute top-full right-0 z-50 mt-1 w-48 rounded-lg border border-gray-200 bg-white py-1 shadow-lg"
                 >
                   {canEdit(view) && (
                     <button
@@ -289,7 +298,7 @@ export function ViewsTabBar({
           </button>
 
           {showAllViews && (
-            <div className="absolute top-full left-0 z-50 mt-1 w-72 rounded-lg border border-gray-200 bg-white py-1 shadow-lg">
+            <div className="ui-dropdown-enter absolute top-full left-0 z-50 mt-1 w-72 rounded-lg border border-gray-200 bg-white py-1 shadow-lg">
               <div className="px-3 py-2 text-xs font-semibold tracking-wide text-gray-400 uppercase">
                 Vues enregistrées
               </div>
@@ -338,7 +347,7 @@ export function ViewsTabBar({
                       {contextMenu === view.id && (
                         <div
                           ref={contextMenuRef}
-                          className="absolute top-full right-0 z-50 mt-1 w-48 rounded-lg border border-gray-200 bg-white py-1 shadow-lg"
+                          className="ui-dropdown-enter absolute top-full right-0 z-50 mt-1 w-48 rounded-lg border border-gray-200 bg-white py-1 shadow-lg"
                         >
                           {canEdit(view) && (
                             <button

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

@@ -1,56 +1,69 @@
 'use client';
 
-import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis, Legend } from 'recharts';
+import {
+  Bar,
+  BarChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Legend,
+} from 'recharts';
+import { useDashboardTheme } from '@/contexts/dashboard-theme-context';
 
 interface ActivityChartProps {
-  data: Array<{ date: string; interactions: number; tasks: number }>;
+  readonly data: Array<{ date: string; interactions: number; tasks: number }>;
 }
 
-export function ActivityChart({ data }: ActivityChartProps) {
+export function ActivityChart({ data }: Readonly<ActivityChartProps>) {
+  const { theme } = useDashboardTheme();
+
   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="flex h-full flex-col rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
       <div className="mb-4">
-        <h3 className="text-lg font-bold text-gray-900">Activité des 7 Derniers Jours</h3>
-        <p className="mt-1 text-sm text-gray-500">Interactions et tâches créées</p>
+        <h3 className="text-base font-semibold text-gray-900">Activité des 7 Derniers Jours</h3>
+        <p className="mt-0.5 text-xs text-gray-400">Interactions et tâches créées</p>
       </div>
-      <div className="h-[300px]">
+      <div className="min-h-0 flex-1">
         <ResponsiveContainer width="100%" height="100%">
-          <BarChart data={data} barCategoryGap="20%">
-            <defs>
-              <linearGradient id="interactionsGradient" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor="#6366f1" stopOpacity={1} />
-                <stop offset="100%" stopColor="#4f46e5" stopOpacity={0.8} />
-              </linearGradient>
-              <linearGradient id="tasksGradient" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor="#8b5cf6" stopOpacity={1} />
-                <stop offset="100%" stopColor="#7c3aed" stopOpacity={0.8} />
-              </linearGradient>
-            </defs>
+          <BarChart
+            data={data}
+            barCategoryGap="25%"
+            margin={{ top: 5, right: 5, left: -20, bottom: 0 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" vertical={false} />
             <XAxis
               dataKey="date"
-              stroke="#9ca3af"
-              fontSize={12}
+              stroke="#d1d5db"
+              fontSize={11}
               tickLine={false}
               axisLine={false}
+              dy={8}
             />
-            <YAxis stroke="#9ca3af" fontSize={12} tickLine={false} axisLine={false} />
+            <YAxis stroke="#d1d5db" fontSize={11} tickLine={false} axisLine={false} width={40} />
             <Tooltip
               contentStyle={{
-                backgroundColor: 'white',
-                border: '1px solid #e5e7eb',
+                backgroundColor: '#fff',
+                border: '1px solid #f3f4f6',
                 borderRadius: '12px',
-                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+                boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
+                fontSize: '13px',
               }}
               labelStyle={{ color: '#374151', fontWeight: 600 }}
             />
-            <Legend wrapperStyle={{ paddingTop: '20px' }} iconType="circle" />
+            <Legend
+              wrapperStyle={{ paddingTop: '12px', fontSize: '12px' }}
+              iconType="circle"
+              iconSize={8}
+            />
             <Bar
               dataKey="interactions"
-              fill="url(#interactionsGradient)"
-              radius={[8, 8, 0, 0]}
+              fill={theme.hex[500]}
+              radius={[6, 6, 0, 0]}
               name="Interactions"
             />
-            <Bar dataKey="tasks" fill="url(#tasksGradient)" radius={[8, 8, 0, 0]} name="Tâches" />
+            <Bar dataKey="tasks" fill={theme.hex[300]} radius={[6, 6, 0, 0]} name="Tâches" />
           </BarChart>
         </ResponsiveContainer>
       </div>

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

@@ -0,0 +1,157 @@
+'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="ui-fade-in fixed inset-0 z-50 flex items-center justify-center">
+      <button
+        type="button"
+        className="absolute inset-0 cursor-pointer bg-black/40 backdrop-blur-sm"
+        onClick={onClose}
+        aria-label="Fermer la fenêtre"
+      />
+
+      <div className="ui-scale-in relative z-10 w-full max-w-2xl rounded-2xl bg-white shadow-2xl">
+        <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
+            type="button"
+            onClick={onClose}
+            aria-label="Fermer"
+            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>
+
+        <div className="flex gap-2 border-b border-gray-100 px-6 py-3">
+          <button
+            type="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
+                type="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>
+
+        <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
+                  type="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-[color,background-color,border-color,box-shadow] duration-150',
+                    isAlreadyAdded
+                      ? 'cursor-not-allowed border-gray-100 bg-gray-50 opacity-50'
+                      : 'dash-hover-border dash-hover-bg border-gray-100 bg-white 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="dash-hover-text-gh h-4 w-4 text-gray-300 transition-colors" />
+                      )}
+                    </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>
+
+        <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

@@ -0,0 +1,64 @@
+'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);
+
+  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-[background-color,box-shadow,transform] duration-150 hover:bg-gray-50 hover:shadow-md active:scale-[0.98]"
+        title="Changer la couleur du thème"
+        aria-label="Changer la couleur du thème"
+      >
+        <Palette aria-hidden="true" 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-transform duration-150 hover:scale-110"
+                style={{ backgroundColor: t.hex[500] }}
+                title={t.label}
+                aria-label={t.label}
+              >
+                {theme.key === t.key && <Check aria-hidden="true" className="h-4 w-4 text-white drop-shadow-sm" />}
+                <span className="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[10px] whitespace-nowrap text-gray-500 opacity-0 transition-opacity group-hover:opacity-100">
+                  {t.label}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}