From 9290a0b2d0e114040e472e9264be4f09cf740f05 Mon Sep 17 00:00:00 2001
From: Egutierrez <egutierrez@dead.dd>
Date: Fri, 8 May 2026 00:38:32 +0200
Subject: [PATCH] chore: auto-commit (1 archivos)

- frontend/src/components/Dashboard.tsx

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/Dashboard.tsx | 82 ++++++++++++++++++++-------
 1 file changed, 62 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx
index a63eeee..58b2273 100644
--- a/frontend/src/components/Dashboard.tsx
+++ b/frontend/src/components/Dashboard.tsx
@@ -1,5 +1,15 @@
-import { AreaChart, BarChart, LineChart } from "@mantine/charts";
+import { BarChart, LineChart } from "@mantine/charts";
 import "@mantine/charts/styles.css";
+import {
+  Area,
+  AreaChart as RAreaChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
 import {
   Badge,
   Box,
@@ -120,8 +130,13 @@ export function Dashboard({ users }: Props) {
     if (!data) return [];
     const arr = data.cumulative_flow;
     const firstIdx = arr.findIndex((p) => p.total > 0 || p.done > 0);
-    if (firstIdx <= 0) return arr;
-    return arr.slice(Math.max(0, firstIdx - 1));
+    const sliced = firstIdx <= 0 ? arr : arr.slice(Math.max(0, firstIdx - 1));
+    return sliced.map((p) => ({
+      date: p.date,
+      done: p.done,
+      wip: Math.max(0, p.total - p.done),
+      total: p.total,
+    }));
   }, [data]);
 
   const throughputSeries = useMemo(() => {
@@ -277,23 +292,50 @@ export function Dashboard({ users }: Props) {
                   Sin datos.
                 </Text>
               ) : (
-                <AreaChart
-                  h={260}
-                  data={cumulativeFlow}
-                  dataKey="date"
-                  withLegend
-                  withDots
-                  withGradient
-                  fillOpacity={0.5}
-                  strokeWidth={2.5}
-                  curveType="monotone"
-                  gridAxis="xy"
-                  series={[
-                    { name: "total", label: "Total", color: "blue.6" },
-                    { name: "done", label: "Hechas", color: "green.6" },
-                  ]}
-                  yAxisProps={{ allowDecimals: false }}
-                />
+                <div style={{ height: 260, width: "100%" }}>
+                  <ResponsiveContainer width="100%" height="100%">
+                    <RAreaChart data={cumulativeFlow} margin={{ top: 10, right: 16, left: 0, bottom: 0 }}>
+                      <CartesianGrid strokeDasharray="5 5" stroke="var(--mantine-color-gray-4)" />
+                      <XAxis dataKey="date" tick={{ fontSize: 12, fill: "currentColor" }} />
+                      <YAxis allowDecimals={false} tick={{ fontSize: 12, fill: "currentColor" }} />
+                      <Tooltip
+                        contentStyle={{
+                          background: "var(--mantine-color-body)",
+                          border: "1px solid var(--mantine-color-gray-3)",
+                          borderRadius: 6,
+                          fontSize: 12,
+                        }}
+                      />
+                      <Legend wrapperStyle={{ fontSize: 12 }} />
+                      <Area
+                        type="linear"
+                        dataKey="done"
+                        name="Hechas"
+                        stackId="cfd"
+                        stroke="var(--mantine-color-green-6)"
+                        fill="var(--mantine-color-green-6)"
+                        fillOpacity={0.55}
+                        strokeWidth={2}
+                        isAnimationActive={false}
+                        dot={{ r: 3, fill: "var(--mantine-color-green-6)", strokeWidth: 0 }}
+                        activeDot={{ r: 5 }}
+                      />
+                      <Area
+                        type="linear"
+                        dataKey="wip"
+                        name="En curso"
+                        stackId="cfd"
+                        stroke="var(--mantine-color-blue-6)"
+                        fill="var(--mantine-color-blue-6)"
+                        fillOpacity={0.55}
+                        strokeWidth={2}
+                        isAnimationActive={false}
+                        dot={{ r: 3, fill: "var(--mantine-color-blue-6)", strokeWidth: 0 }}
+                        activeDot={{ r: 5 }}
+                      />
+                    </RAreaChart>
+                  </ResponsiveContainer>
+                </div>
               )}
             </Paper>