From 16bb970060b6f18a14af858cabeb706f3dbb5469 Mon Sep 17 00:00:00 2001
From: Alpha Diop <alpha.diop@outlook.com>
Date: Fri, 4 Sep 2026 09:37:56 +0000
Subject: [PATCH] =?UTF-8?q?Remplacer=20les=20wrappers=20shadcn=20chart=20p?=
 =?UTF-8?q?ar=20recharts=20direct=20sur=20l=E2=80=99analytique.=20Supprime?=
 =?UTF-8?q?=20chart.tsx=20et=20chart-configs,=20tooltips=20custom,=20et=20?=
 =?UTF-8?q?masque=20les=20mois=20futurs=20pour=20l=E2=80=99ann=C3=A9e=20en?=
 =?UTF-8?q?=20cours.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(dashboard)/dashboard/analytics/page.tsx  | 289 ++++++++------
 apps/web/components/ui/chart.tsx              | 374 ------------------
 apps/web/lib/chart-configs.ts                 |  15 -
 3 files changed, 171 insertions(+), 507 deletions(-)
 delete mode 100644 apps/web/components/ui/chart.tsx
 delete mode 100644 apps/web/lib/chart-configs.ts

diff --git a/apps/web/app/(dashboard)/dashboard/analytics/page.tsx b/apps/web/app/(dashboard)/dashboard/analytics/page.tsx
index 934c2d4..01e3a5c 100644
--- a/apps/web/app/(dashboard)/dashboard/analytics/page.tsx
+++ b/apps/web/app/(dashboard)/dashboard/analytics/page.tsx
@@ -12,6 +12,7 @@ import {
   UsersIcon,
 } from 'lucide-react';
 import { useState } from 'react';
+import type { TooltipProps as RechartsTooltipProps } from 'recharts';
 import {
   Area,
   AreaChart,
@@ -19,32 +20,101 @@ import {
   BarChart,
   CartesianGrid,
   Cell,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
 } from 'recharts';
+import type {
+  NameType,
+  ValueType,
+} from 'recharts/types/component/DefaultTooltipContent';
+
+type TooltipRenderProps<
+  TValue extends ValueType = ValueType,
+  TName extends NameType = NameType,
+> = Pick<RechartsTooltipProps<TValue, TName>, 'active'> & {
+  payload?: Array<{ value?: TValue; name?: TName }>;
+  label?: string | number;
+};
+
 import { AnalyticsSkeleton } from '@/components/analytics-skeleton';
 import { ErrorState } from '@/components/error-state';
 import { PageHeader } from '@/components/page-header';
 import { PaymentRateRing } from '@/components/payment-rate-ring';
 import { StatCard } from '@/components/stat-card';
 import { TopClientRow } from '@/components/top-client-row';
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from '@/components/ui/chart';
 import { Caption, Text } from '@/components/ui/typography';
 import type { AnalyticsData } from '@/lib/api';
-import { invoiceChartConfig, revenueChartConfig } from '@/lib/chart-configs';
 import { classifyError } from '@/lib/error-utils';
 import { formatCurrency } from '@/lib/format';
 import { useAnalytics } from '@/lib/hooks';
 
+const CHART_COLOR_1 = 'var(--chart-1)';
+const CHART_COLOR_2 = 'var(--chart-2)';
+
+const RECHARTS_WRAPPER =
+  'text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50';
+
 function pct(value: number, total: number) {
   if (total === 0) return 0;
   return Math.round((value / total) * 100);
 }
 
+function ChartTooltipShell({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="rounded-lg border border-border/50 bg-background px-3 py-2 text-xs shadow-xl">
+      {children}
+    </div>
+  );
+}
+
+function RevenueTooltip({
+  active,
+  payload,
+  label,
+}: TooltipRenderProps<number, string>) {
+  if (!active || !payload?.length) return null;
+  return (
+    <ChartTooltipShell>
+      <p className="mb-1 font-medium">{label}</p>
+      <div className="flex items-center gap-2">
+        <span
+          className="inline-block h-2.5 w-0.5 shrink-0 rounded-full"
+          style={{ backgroundColor: CHART_COLOR_1 }}
+        />
+        <span className="text-muted-foreground">Chiffre d&apos;affaires</span>
+        <span className="ml-auto font-medium tabular-nums">
+          {formatCurrency(Number(payload[0].value ?? 0))}
+        </span>
+      </div>
+    </ChartTooltipShell>
+  );
+}
+
+function InvoiceTooltip({
+  active,
+  payload,
+  label,
+}: TooltipRenderProps<number, string>) {
+  if (!active || !payload?.length) return null;
+  return (
+    <ChartTooltipShell>
+      <p className="mb-1 font-medium">{label}</p>
+      <div className="flex items-center gap-2">
+        <span
+          className="inline-block size-2.5 shrink-0 rounded-xs"
+          style={{ backgroundColor: CHART_COLOR_2 }}
+        />
+        <span className="text-muted-foreground">Factures</span>
+        <span className="ml-auto font-medium tabular-nums">
+          {payload[0].value}
+        </span>
+      </div>
+    </ChartTooltipShell>
+  );
+}
+
 export default function AnalyticsPage() {
   const currentYear = new Date().getFullYear();
   const [year, setYear] = useState(currentYear);
@@ -101,8 +171,13 @@ export default function AnalyticsPage() {
 }
 
 function AnalyticsContent({ data }: { data: AnalyticsData }) {
-  // Couleur des barres par mois — met en évidence le mois courant
   const currentMonth = new Date().getMonth() + 1;
+  const currentYear = new Date().getFullYear();
+
+  const chartData =
+    data.year === currentYear
+      ? data.monthlyRevenue.filter((m) => m.month <= currentMonth)
+      : data.monthlyRevenue;
 
   return (
     <div className="flex flex-1 flex-col gap-6 p-4 md:p-6">
@@ -146,7 +221,6 @@ function AnalyticsContent({ data }: { data: AnalyticsData }) {
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
         <PaymentRateRing rate={data.paymentRate} />
 
-        {/* Statut breakdown */}
         <div className="sm:col-span-2 rounded-xl border border-border bg-card p-4 flex flex-col gap-3">
           <Caption>Répartition des statuts</Caption>
           <div className="flex flex-col gap-2.5">
@@ -205,7 +279,7 @@ function AnalyticsContent({ data }: { data: AnalyticsData }) {
         <div className="flex items-center justify-between">
           <div>
             <Text size="sm" weight="semibold">
-              Chiffre d'affaires mensuel
+              Chiffre d&apos;affaires mensuel
             </Text>
             <Caption>Factures payées en {data.year}</Caption>
           </div>
@@ -228,137 +302,116 @@ function AnalyticsContent({ data }: { data: AnalyticsData }) {
           )}
         </div>
 
-        <ChartContainer config={revenueChartConfig} className="h-55 w-full">
-          <AreaChart
-            accessibilityLayer
-            data={data.monthlyRevenue}
-            margin={{ top: 4, right: 4, left: 0, bottom: 0 }}
-          >
-            <defs>
-              <linearGradient id="revenueGrad" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-revenue)"
-                  stopOpacity={0.15}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-revenue)"
-                  stopOpacity={0}
-                />
-              </linearGradient>
-            </defs>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="label"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => value}
-            />
-            <YAxis
-              tickFormatter={(v) =>
-                v >= 1_000_000
-                  ? `${(v / 1_000_000).toFixed(1)}M`
-                  : v >= 1_000
-                    ? `${(v / 1_000).toFixed(0)}k`
-                    : String(v)
-              }
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-            />
-            <ChartTooltip
-              content={
-                <ChartTooltipContent
-                  indicator="line"
-                  labelFormatter={(value) => `${value}`}
-                  formatter={(value) => formatCurrency(value as number)}
-                />
-              }
-            />
-            <Area
-              type="monotone"
-              dataKey="revenue"
-              fill="url(#revenueGrad)"
-              stroke="var(--color-revenue)"
-              strokeWidth={2}
-              dot={false}
-              activeDot={{
-                r: 4,
-                stroke: 'var(--color-revenue)',
-                strokeWidth: 0,
-              }}
-            />
-          </AreaChart>
-        </ChartContainer>
-      </div>
-
-      {/* ── Factures par mois + Top clients ── */}
-      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-        {/* Factures payées par mois — Bar chart */}
-        <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
-          <div>
-            <Text size="sm" weight="semibold">
-              Factures payées par mois
-            </Text>
-            <Caption>Nombre de factures encaissées</Caption>
-          </div>
-
-          <ChartContainer config={invoiceChartConfig} className="h-45 w-full">
-            <BarChart
-              accessibilityLayer
-              data={data.monthlyRevenue}
-              margin={{ top: 4, right: 4, left: -20, bottom: 0 }}
-              barSize={18}
+        <div className={`h-55 w-full ${RECHARTS_WRAPPER}`}>
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart
+              data={chartData}
+              margin={{ top: 4, right: 4, left: 0, bottom: 0 }}
             >
+              <defs>
+                <linearGradient id="revenueGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop
+                    offset="5%"
+                    stopColor={CHART_COLOR_1}
+                    stopOpacity={0.15}
+                  />
+                  <stop
+                    offset="95%"
+                    stopColor={CHART_COLOR_1}
+                    stopOpacity={0}
+                  />
+                </linearGradient>
+              </defs>
               <CartesianGrid vertical={false} />
               <XAxis
                 dataKey="label"
                 tickLine={false}
                 axisLine={false}
                 tickMargin={8}
-                tickFormatter={(value) => value}
               />
               <YAxis
-                allowDecimals={false}
+                tickFormatter={(v) =>
+                  v >= 1_000_000
+                    ? `${(v / 1_000_000).toFixed(1)}M`
+                    : v >= 1_000
+                      ? `${(v / 1_000).toFixed(0)}k`
+                      : String(v)
+                }
                 tickLine={false}
                 axisLine={false}
                 tickMargin={8}
               />
-              <ChartTooltip
-                content={
-                  <ChartTooltipContent
-                    indicator="dot"
-                    labelFormatter={(value) => `${value}`}
-                    formatter={(value) => `${value} factures`}
-                  />
-                }
+              <Tooltip content={<RevenueTooltip />} />
+              <Area
+                type="monotone"
+                dataKey="revenue"
+                fill="url(#revenueGrad)"
+                stroke={CHART_COLOR_1}
+                strokeWidth={2}
+                dot={false}
+                activeDot={{
+                  r: 4,
+                  stroke: CHART_COLOR_1,
+                  strokeWidth: 0,
+                }}
               />
-              <Bar dataKey="count" radius={[3, 3, 0, 0]}>
-                {data.monthlyRevenue.map((entry) => (
-                  <Cell
-                    key={entry.month}
-                    fill={
-                      entry.month === currentMonth
-                        ? 'var(--color-count)'
-                        : 'var(--color-count) / 0.3'
-                    }
-                  />
-                ))}
-              </Bar>
-            </BarChart>
-          </ChartContainer>
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      {/* ── Factures par mois + Top clients ── */}
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
+          <div>
+            <Text size="sm" weight="semibold">
+              Factures payées par mois
+            </Text>
+            <Caption>Nombre de factures encaissées</Caption>
+          </div>
+
+          <div className={`h-45 w-full ${RECHARTS_WRAPPER}`}>
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart
+                data={chartData}
+                margin={{ top: 4, right: 4, left: -20, bottom: 0 }}
+                barSize={18}
+              >
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey="label"
+                  tickLine={false}
+                  axisLine={false}
+                  tickMargin={8}
+                />
+                <YAxis
+                  allowDecimals={false}
+                  tickLine={false}
+                  axisLine={false}
+                  tickMargin={8}
+                />
+                <Tooltip content={<InvoiceTooltip />} />
+                <Bar dataKey="count" radius={[3, 3, 0, 0]}>
+                  {chartData.map((entry) => (
+                    <Cell
+                      key={entry.month}
+                      fill={CHART_COLOR_2}
+                      fillOpacity={entry.month === currentMonth ? 1 : 0.3}
+                    />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
         </div>
 
-        {/* Top clients */}
         <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-3">
           <div className="flex items-center justify-between">
             <div>
               <Text size="sm" weight="semibold">
                 Top clients
               </Text>
-              <Caption>Par chiffre d'affaires payé</Caption>
+              <Caption>Par chiffre d&apos;affaires payé</Caption>
             </div>
             <Caption className="text-right">
               <span className="hidden sm:inline">Payées/</span>Total
diff --git a/apps/web/components/ui/chart.tsx b/apps/web/components/ui/chart.tsx
deleted file mode 100644
index 5994cc1..0000000
--- a/apps/web/components/ui/chart.tsx
+++ /dev/null
@@ -1,374 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import type { TooltipValueType } from 'recharts';
-import * as RechartsPrimitive from 'recharts';
-
-import { cn } from '@/lib/utils';
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: '', dark: '.dark' } as const;
-
-const INITIAL_DIMENSION = { width: 320, height: 200 } as const;
-type TooltipNameType = number | string;
-
-export type ChartConfig = Record<
-  string,
-  {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
->;
-
-type ChartContextProps = {
-  config: ChartConfig;
-};
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-function useChart() {
-  const context = React.useContext(ChartContext);
-
-  if (!context) {
-    throw new Error('useChart must be used within a <ChartContainer />');
-  }
-
-  return context;
-}
-
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  initialDimension = INITIAL_DIMENSION,
-  ...props
-}: React.ComponentProps<'div'> & {
-  config: ChartConfig;
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >['children'];
-  initialDimension?: {
-    width: number;
-    height: number;
-  };
-}) {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className,
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer
-          initialDimension={initialDimension}
-        >
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  );
-}
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme ?? config.color,
-  );
-
-  if (!colorConfig.length) {
-    return null;
-  }
-
-  return (
-    <style
-      // biome-ignore lint/security/noDangerouslySetInnerHtml: This is safe CSS generation, not user content
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join('\n')}
-}
-`,
-          )
-          .join('\n'),
-      }}
-    />
-  );
-};
-
-const ChartTooltip = RechartsPrimitive.Tooltip;
-
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator = 'dot',
-  hideLabel = false,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<'div'> & {
-    hideLabel?: boolean;
-    hideIndicator?: boolean;
-    indicator?: 'line' | 'dot' | 'dashed';
-    nameKey?: string;
-    labelKey?: string;
-  } & Omit<
-    RechartsPrimitive.DefaultTooltipContentProps<
-      TooltipValueType,
-      TooltipNameType
-    >,
-    'accessibilityLayer'
-  >) {
-  const { config } = useChart();
-
-  const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null;
-    }
-
-    const [item] = payload;
-    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;
-    const itemConfig = getPayloadConfigFromPayload(config, item, key);
-    const value =
-      !labelKey && typeof label === 'string'
-        ? (config[label]?.label ?? label)
-        : itemConfig?.label;
-
-    if (labelFormatter) {
-      return (
-        <div className={cn('font-medium', labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      );
-    }
-
-    if (!value) {
-      return null;
-    }
-
-    return <div className={cn('font-medium', labelClassName)}>{value}</div>;
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ]);
-
-  if (!active || !payload?.length) {
-    return null;
-  }
-
-  const nestLabel = payload.length === 1 && indicator !== 'dot';
-
-  return (
-    <div
-      className={cn(
-        'grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
-        className,
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload
-          .filter((item) => item.type !== 'none')
-          .map((item) => {
-            const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color ?? item.payload?.fill ?? item.color;
-
-            return (
-              <div
-                key={`${item.dataKey ?? key}-${item.name ?? ''}-${item.value ?? ''}`}
-                className={cn(
-                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
-                  indicator === 'dot' && 'items-center',
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, 0, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
-                            {
-                              'h-2.5 w-2.5': indicator === 'dot',
-                              'w-1': indicator === 'line',
-                              'w-0 border-[1.5px] border-dashed bg-transparent':
-                                indicator === 'dashed',
-                              'my-0.5': nestLabel && indicator === 'dashed',
-                            },
-                          )}
-                          style={
-                            {
-                              '--color-bg': indicatorColor,
-                              '--color-border': indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        'flex flex-1 justify-between leading-none',
-                        nestLabel ? 'items-end' : 'items-center',
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label ?? item.name}
-                        </span>
-                      </div>
-                      {item.value != null && (
-                        <span className="font-mono font-medium text-foreground tabular-nums">
-                          {typeof item.value === 'number'
-                            ? item.value.toLocaleString()
-                            : String(item.value)}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            );
-          })}
-      </div>
-    </div>
-  );
-}
-
-const ChartLegend = RechartsPrimitive.Legend;
-
-function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = 'bottom',
-  nameKey,
-}: React.ComponentProps<'div'> & {
-  hideIcon?: boolean;
-  nameKey?: string;
-} & RechartsPrimitive.DefaultLegendContentProps) {
-  const { config } = useChart();
-
-  if (!payload?.length) {
-    return null;
-  }
-
-  return (
-    <div
-      className={cn(
-        'flex items-center justify-center gap-4',
-        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
-        className,
-      )}
-    >
-      {payload
-        .filter((item) => item.type !== 'none')
-        .map((item) => {
-          const key = `${nameKey ?? item.dataKey ?? 'value'}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-          return (
-            <div
-              key={`${item.dataKey ?? key}-${item.value ?? ''}`}
-              className={cn(
-                'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground',
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          );
-        })}
-    </div>
-  );
-}
-
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string,
-) {
-  if (typeof payload !== 'object' || payload === null) {
-    return undefined;
-  }
-
-  const payloadPayload =
-    'payload' in payload &&
-    typeof payload.payload === 'object' &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined;
-
-  let configLabelKey: string = key;
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === 'string'
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string;
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string;
-  }
-
-  return configLabelKey in config ? config[configLabelKey] : config[key];
-}
-
-export {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-  ChartTooltip,
-  ChartTooltipContent,
-};
diff --git a/apps/web/lib/chart-configs.ts b/apps/web/lib/chart-configs.ts
deleted file mode 100644
index aa9a515..0000000
--- a/apps/web/lib/chart-configs.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { ChartConfig } from '@/components/ui/chart';
-
-export const revenueChartConfig: ChartConfig = {
-  revenue: {
-    label: "Chiffre d'affaires",
-    color: 'var(--chart-1)',
-  },
-};
-
-export const invoiceChartConfig: ChartConfig = {
-  count: {
-    label: 'Factures',
-    color: 'var(--chart-2)',
-  },
-};