create-crm-tmp 1.0.2 → 1.1.0

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

@@ -0,0 +1,65 @@
+'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,59 +1,65 @@
 'use client';
 
-import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import {
+  Area,
+  AreaChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+} from 'recharts';
+import { useDashboardTheme } from '@/contexts/dashboard-theme-context';
 
 interface ContactsChartProps {
-  data: Array<{ month: string; count: number }>;
+  readonly data: Array<{ month: string; count: number }>;
 }
 
-export function ContactsChart({ data }: ContactsChartProps) {
+export function ContactsChart({ data }: Readonly<ContactsChartProps>) {
+  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="mb-4 flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-bold text-gray-900">Évolution des Contacts</h3>
-          <p className="mt-1 text-sm text-gray-500">Nombre de contacts créés par mois</p>
-        </div>
+    <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="h-[300px]">
+      <div className="min-h-0 flex-1">
         <ResponsiveContainer width="100%" height="100%">
-          <AreaChart data={data}>
+          <AreaChart data={data} margin={{ top: 5, right: 5, left: -20, bottom: 0 }}>
             <defs>
-              <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.4} />
-                <stop offset="50%" stopColor="#6366f1" stopOpacity={0.3} />
-                <stop offset="95%" stopColor="#6366f1" stopOpacity={0} />
+              <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="#9ca3af"
-              fontSize={12}
-              tickLine={false}
-              axisLine={false}
-            />
-            <YAxis
-              stroke="#9ca3af"
-              fontSize={12}
+              stroke="#d1d5db"
+              fontSize={11}
               tickLine={false}
               axisLine={false}
-              tickFormatter={(value) => `${value}`}
+              dy={8}
             />
+            <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 }}
             />
             <Area
               type="monotone"
               dataKey="count"
-              stroke="#8b5cf6"
-              strokeWidth={3}
-              fill="url(#colorCount)"
+              stroke={theme.hex[500]}
+              strokeWidth={2.5}
+              fill="url(#colorContactsAccent)"
+              name="Contacts"
             />
           </AreaChart>
         </ResponsiveContainer>

package/template/src/components/dashboard/interactions-by-type-chart.tsx

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

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

@@ -29,10 +29,10 @@ interface Interaction {
 }
 
 interface RecentActivityProps {
-  interactions: Interaction[];
+  readonly interactions: Interaction[];
 }
 
-const interactionIcons = {
+const interactionIcons: Record<string, typeof Phone> = {
   CALL: Phone,
   SMS: MessageSquare,
   EMAIL: Mail,
@@ -46,21 +46,21 @@ const interactionIcons = {
   ASSIGNMENT_CHANGE: UserCheck,
 };
 
-const interactionColors = {
-  CALL: 'bg-blue-100 text-blue-600',
-  SMS: 'bg-green-100 text-green-600',
-  EMAIL: 'bg-purple-100 text-purple-600',
-  MEETING: 'bg-indigo-100 text-indigo-600',
-  NOTE: 'bg-gray-100 text-gray-600',
-  STATUS_CHANGE: 'bg-amber-100 text-amber-600',
-  CONTACT_UPDATE: 'bg-cyan-100 text-cyan-600',
-  APPOINTMENT_CREATED: 'bg-emerald-100 text-emerald-600',
-  APPOINTMENT_DELETED: 'bg-red-100 text-red-600',
-  APPOINTMENT_CHANGED: 'bg-orange-100 text-orange-600',
-  ASSIGNMENT_CHANGE: 'bg-pink-100 text-pink-600',
+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 = {
+const interactionLabels: Record<string, string> = {
   CALL: 'Appel',
   SMS: 'SMS',
   EMAIL: 'Email',
@@ -75,90 +75,83 @@ const interactionLabels = {
 };
 
 export function RecentActivity({ interactions }: RecentActivityProps) {
-  if (interactions.length === 0) {
-    return (
-      <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-semibold text-gray-900">Activité Récente</h3>
-        </div>
-        <div className="mt-6 text-center text-sm text-gray-500">
-          <FileText className="mx-auto h-12 w-12 text-gray-400" />
-          <p className="mt-2">Aucune activité récente</p>
-        </div>
-      </div>
-    );
-  }
-
   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 flex items-center justify-between">
-        <h3 className="text-lg font-bold text-gray-900">Activité Récente</h3>
+        <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="text-sm font-semibold text-indigo-600 transition-colors hover:text-indigo-700"
+          className="dash-link cursor-pointer text-xs font-medium"
         >
           Voir tout →
         </Link>
       </div>
-      <div className="space-y-3">
-        {interactions.map((interaction) => {
-          const Icon =
-            interactionIcons[interaction.type as keyof typeof interactionIcons] || FileText;
-          const color =
-            interactionColors[interaction.type as keyof typeof interactionColors] ||
-            'bg-gray-100 text-gray-600';
-          const label =
-            interactionLabels[interaction.type as keyof typeof interactionLabels] ||
-            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',
-            });
-          }
+      {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));
 
-          return (
-            <div
-              key={interaction.id}
-              className="group flex items-start gap-3 rounded-lg border-l-4 border-transparent bg-gray-50/50 p-3 transition-all duration-200 hover:border-indigo-400 hover:bg-indigo-50/30"
-            >
-              <div className={cn('rounded-lg p-2 shadow-sm', color)}>
-                <Icon className="h-4 w-4" />
-              </div>
-              <div className="flex-1">
-                <div className="flex items-start justify-between">
-                  <div>
-                    <p className="text-sm font-semibold text-gray-900">{label}</p>
-                    <Link
-                      href={`/contacts/${interaction.contact.id}`}
-                      className="text-sm text-gray-600 transition-colors hover:text-indigo-600"
-                    >
-                      {interaction.contact.name}
-                    </Link>
-                    {interaction.title && (
-                      <p className="mt-1 text-xs text-gray-500">{interaction.title}</p>
-                    )}
+            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>
-                  <span className="text-xs font-medium text-gray-500">{timeAgo}</span>
                 </div>
               </div>
-            </div>
-          );
-        })}
-      </div>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }

package/template/src/components/dashboard/sales-analytics-chart.tsx

@@ -9,7 +9,8 @@ interface SalesAnalyticsChartProps {
 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 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 (
@@ -18,7 +19,7 @@ export function SalesAnalyticsChart({ data }: SalesAnalyticsChartProps) {
         <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:outline-none focus:ring-2 focus:ring-indigo-500">
+        <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>
@@ -67,15 +68,10 @@ export function SalesAnalyticsChart({ data }: SalesAnalyticsChartProps) {
               labelStyle={{ color: '#374151', fontWeight: 600 }}
               formatter={(value: number) => [`${value.toLocaleString('fr-FR')}`, 'Contacts']}
             />
-            <Bar
-              dataKey="count"
-              fill="url(#barGradient)"
-              radius={[8, 8, 0, 0]}
-            />
+            <Bar dataKey="count" fill="url(#barGradient)" radius={[8, 8, 0, 0]} />
           </BarChart>
         </ResponsiveContainer>
       </div>
     </div>
   );
 }
-

package/template/src/components/dashboard/stat-card.tsx

@@ -1,61 +1,63 @@
 'use client';
 
-import { LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 interface StatCardProps {
-  title: string;
-  value: string | number;
-  icon: LucideIcon;
-  trend?: {
-    value: number;
-    label: string;
+  readonly title: string;
+  readonly value: string | number;
+  readonly trend?: {
+    readonly value: number;
+    readonly label: string;
   };
-  iconColor?: string;
-  iconBgColor?: string;
+  readonly subtitle?: string;
+  readonly accentColor?: string;
 }
 
 export function StatCard({
   title,
   value,
-  icon: Icon,
   trend,
-  iconColor = 'text-indigo-600',
-  iconBgColor = 'bg-indigo-100',
+  subtitle,
+  accentColor = 'dash-accent-bar',
 }: StatCardProps) {
   return (
-    <div className="group relative overflow-hidden rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
-      <div className="absolute inset-0 bg-gradient-to-br from-white via-purple-50/30 to-indigo-50/30 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
-      <div className="relative flex items-center justify-between">
+    <div className="group relative flex h-full flex-col justify-between overflow-hidden rounded-2xl border border-gray-100 bg-white p-5 shadow-sm transition-all duration-200 hover:shadow-md">
+      {/* Barre d'accent en haut */}
+      <div className={cn('absolute top-0 left-0 h-1 w-full', accentColor)} />
+
+      <div className="flex items-start justify-between">
         <div className="flex-1">
-          <p className="text-sm font-medium text-gray-600">{title}</p>
-          <p className="mt-2 bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-3xl font-bold text-transparent">
-            {value}
-          </p>
-          {trend && (
-            <p className="mt-2 flex items-center gap-1 text-sm">
-              <span
-                className={cn(
-                  'font-semibold',
-                  trend.value >= 0 ? 'text-emerald-600' : 'text-red-600',
-                )}
-              >
-                {trend.value >= 0 ? '+' : ''}
-                {trend.value}%
-              </span>
-              <span className="text-gray-500">{trend.label}</span>
-            </p>
-          )}
+          <p className="text-sm font-medium text-gray-500">{title}</p>
+          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900">{value}</p>
         </div>
-        <div
-          className={cn(
-            'rounded-xl bg-gradient-to-br p-4 shadow-md transition-transform duration-300 group-hover:scale-110 group-hover:shadow-lg',
-            iconBgColor,
-          )}
-        >
-          <Icon className={cn('h-6 w-6', iconColor)} />
+
+        {/* Mini bar chart décoratif */}
+        <div className="flex items-end gap-[3px] opacity-60">
+          {[40, 65, 45, 80, 55, 70, 90].map((barH) => (
+            <div
+              key={`bar-${barH}`}
+              className={cn('w-[4px] rounded-full', accentColor)}
+              style={{ height: `${barH * 0.3}px`, opacity: 0.4 + (barH / 90) * 0.6 }}
+            />
+          ))}
         </div>
       </div>
+
+      <div className="mt-3 flex items-center gap-2">
+        {trend && (
+          <span
+            className={cn(
+              'inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-xs font-semibold',
+              trend.value >= 0 ? 'bg-emerald-50 text-emerald-600' : 'bg-red-50 text-red-600',
+            )}
+          >
+            {trend.value >= 0 ? '↑' : '↓'} {Math.abs(trend.value)}%
+          </span>
+        )}
+        {(subtitle || trend?.label) && (
+          <span className="text-xs text-gray-400">{subtitle || trend?.label}</span>
+        )}
+      </div>
     </div>
   );
 }