From 1e1a9fe4a09026dcca8a390f60537f5a2300e566 Mon Sep 17 00:00:00 2001
From: jonas <x@4z.nu>
Date: Tue, 10 Mar 2026 23:22:38 +0100
Subject: [PATCH] Fixed dark light colors for charts

---
 client/src/App.tsx             |  2 +-
 client/src/pages/StatsPage.tsx | 57 ++++++++++++++++++++--------------
 2 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 9e91844..0d1a21e 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -56,7 +56,7 @@ export default function App() {
         <main className="max-w-[1600px] mx-auto px-4 py-4">
           <Routes>
             <Route path="/" element={<ItemsPage />} />
-            <Route path="/stats" element={<StatsPage />} />
+            <Route path="/stats" element={<StatsPage dark={dark} />} />
             <Route path="/deleted" element={<DeletedItemsPage />} />
           </Routes>
         </main>
diff --git a/client/src/pages/StatsPage.tsx b/client/src/pages/StatsPage.tsx
index c6e5a00..c2e9fb4 100644
--- a/client/src/pages/StatsPage.tsx
+++ b/client/src/pages/StatsPage.tsx
@@ -7,11 +7,21 @@ import { api } from '../api';
 import type { StatsResponse } from '../types';
 import { STATUS_LABELS, type ItemStatus } from '../types';
 
-const COLORS = ['#111827', '#6b7280', '#3b82f6', '#ef4444', '#f59e0b', '#10b981', '#8b5cf6', '#ec4899'];
+const COLORS_LIGHT = ['#111827', '#6b7280', '#3b82f6', '#ef4444', '#f59e0b', '#10b981', '#8b5cf6', '#ec4899'];
+const COLORS_DARK = ['#e5e7eb', '#9ca3af', '#60a5fa', '#f87171', '#fbbf24', '#34d399', '#a78bfa', '#f472b6'];
 
-export default function StatsPage() {
+export default function StatsPage({ dark }: { dark: boolean }) {
   const [stats, setStats] = useState<StatsResponse | null>(null);
 
+  const colors = dark ? COLORS_DARK : COLORS_LIGHT;
+  const gridColor = dark ? '#374151' : '#f3f4f6';
+  const tickColor = dark ? '#9ca3af' : '#6b7280';
+  const tooltipBg = dark ? '#1f2937' : '#ffffff';
+  const tooltipBorder = dark ? '#374151' : '#e5e7eb';
+  const barFill = dark ? '#e5e7eb' : '#111827';
+  const barFillAlt = dark ? '#9ca3af' : '#6b7280';
+  const areaStroke = dark ? '#e5e7eb' : '#111827';
+
   useEffect(() => {
     api.getStats().then(setStats);
   }, []);
@@ -48,13 +58,13 @@ export default function StatsPage() {
           <ChartCard title="Inflow / Outflow">
             <ResponsiveContainer width="100%" height={220}>
               <AreaChart data={stats.inflowOutflow}>
-                <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-                <XAxis dataKey="month" tick={{ fontSize: 11 }} />
-                <YAxis tick={{ fontSize: 11 }} allowDecimals={false} />
-                <Tooltip contentStyle={{ fontSize: 12 }} />
-                <Area type="monotone" dataKey="added" name="Added" stroke="#111827" fill="#111827" fillOpacity={0.1} />
-                <Area type="monotone" dataKey="removed" name="Removed" stroke="#ef4444" fill="#ef4444" fillOpacity={0.1} />
-                <Legend wrapperStyle={{ fontSize: 12 }} />
+                <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
+                <XAxis dataKey="month" tick={{ fontSize: 11, fill: tickColor }} />
+                <YAxis tick={{ fontSize: 11, fill: tickColor }} allowDecimals={false} />
+                <Tooltip contentStyle={{ fontSize: 12, backgroundColor: tooltipBg, borderColor: tooltipBorder, color: tickColor }} />
+                <Area type="monotone" dataKey="added" name="Added" stroke={areaStroke} fill={areaStroke} fillOpacity={0.15} />
+                <Area type="monotone" dataKey="removed" name="Removed" stroke="#ef4444" fill="#ef4444" fillOpacity={0.15} />
+                <Legend wrapperStyle={{ fontSize: 12, color: tickColor }} />
               </AreaChart>
             </ResponsiveContainer>
           </ChartCard>
@@ -72,15 +82,16 @@ export default function StatsPage() {
                   innerRadius={50}
                   outerRadius={80}
                   dataKey="value"
-                  label={({ name, value }) => `${name}: ${value}`}
+                  label={({ x, y, name, value }: { x: number; y: number; name: string; value: number }) => (
+                    <text x={x} y={y} fill={tickColor} fontSize={11} textAnchor="middle" dominantBaseline="central">{name}: {value}</text>
+                  )}
                   labelLine={false}
-                  style={{ fontSize: 11 }}
                 >
                   {statusData.map((_, i) => (
-                    <Cell key={i} fill={COLORS[i % COLORS.length]} />
+                    <Cell key={i} fill={colors[i % colors.length]} />
                   ))}
                 </Pie>
-                <Tooltip contentStyle={{ fontSize: 12 }} />
+                <Tooltip contentStyle={{ fontSize: 12, backgroundColor: tooltipBg, borderColor: tooltipBorder, color: tickColor }} />
               </PieChart>
             </ResponsiveContainer>
           </ChartCard>
@@ -91,11 +102,11 @@ export default function StatsPage() {
           <ChartCard title="Value by Category">
             <ResponsiveContainer width="100%" height={220}>
               <BarChart data={stats.valueByCategory} layout="vertical">
-                <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-                <XAxis type="number" tick={{ fontSize: 11 }} tickFormatter={v => `${v} kr`} />
-                <YAxis type="category" dataKey="category" tick={{ fontSize: 11 }} width={100} />
-                <Tooltip contentStyle={{ fontSize: 12 }} formatter={(v: number) => [`${v.toLocaleString('sv-SE')} kr`, 'Value']} />
-                <Bar dataKey="value" fill="#111827" radius={[0, 4, 4, 0]} />
+                <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
+                <XAxis type="number" tick={{ fontSize: 11, fill: tickColor }} tickFormatter={v => `${v} kr`} />
+                <YAxis type="category" dataKey="category" tick={{ fontSize: 11, fill: tickColor }} width={100} />
+                <Tooltip contentStyle={{ fontSize: 12, backgroundColor: tooltipBg, borderColor: tooltipBorder, color: tickColor }} formatter={(v: number) => [`${v.toLocaleString('sv-SE')} kr`, 'Value']} />
+                <Bar dataKey="value" fill={barFill} radius={[0, 4, 4, 0]} />
               </BarChart>
             </ResponsiveContainer>
           </ChartCard>
@@ -106,11 +117,11 @@ export default function StatsPage() {
           <ChartCard title="Value by Location">
             <ResponsiveContainer width="100%" height={220}>
               <BarChart data={stats.valueByLocation} layout="vertical">
-                <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-                <XAxis type="number" tick={{ fontSize: 11 }} tickFormatter={v => `${v} kr`} />
-                <YAxis type="category" dataKey="location" tick={{ fontSize: 11 }} width={100} />
-                <Tooltip contentStyle={{ fontSize: 12 }} formatter={(v: number) => [`${v.toLocaleString('sv-SE')} kr`, 'Value']} />
-                <Bar dataKey="value" fill="#6b7280" radius={[0, 4, 4, 0]} />
+                <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
+                <XAxis type="number" tick={{ fontSize: 11, fill: tickColor }} tickFormatter={v => `${v} kr`} />
+                <YAxis type="category" dataKey="location" tick={{ fontSize: 11, fill: tickColor }} width={100} />
+                <Tooltip contentStyle={{ fontSize: 12, backgroundColor: tooltipBg, borderColor: tooltipBorder, color: tickColor }} formatter={(v: number) => [`${v.toLocaleString('sv-SE')} kr`, 'Value']} />
+                <Bar dataKey="value" fill={barFillAlt} radius={[0, 4, 4, 0]} />
               </BarChart>
             </ResponsiveContainer>
           </ChartCard>