@decido/shell 1.0.0

package/src/components/widgets/UsageWidget.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { AlertCircle } from 'lucide-react';
+
+interface UsageDataRow {
+    date: string;
+    [featureId: string]: string | number;
+}
+
+export const UsageWidget: React.FC = () => {
+    const [data, setData] = useState<UsageDataRow[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [quotaWarning, setQuotaWarning] = useState<boolean>(false);
+
+    // Hardcoded plan limit for Sprint 1
+    const PLAN_LIMIT = 50000;
+
+    useEffect(() => {
+        const fetchUsage = async () => {
+            try {
+                setLoading(true);
+                const baseUrl = (import.meta as any).env?.VITE_API_URL || 'http://localhost:3001/api';
+                const res = await fetch(`${baseUrl}/billing/usage`);
+                if (!res.ok) throw new Error('Failed to fetch billing usage');
+                const json = await res.json();
+                setData(json);
+
+                // Calculate total to trigger 80% warning
+                let totalGas = 0;
+                json.forEach((row: any) => {
+                    Object.keys(row).forEach(key => {
+                        if (key !== 'date') {
+                            totalGas += Number(row[key]);
+                        }
+                    });
+                });
+
+                if (totalGas >= PLAN_LIMIT * 0.8) {
+                    setQuotaWarning(true);
+                }
+
+            } catch (err: any) {
+                console.error("Failed to fetch billing usage:", err);
+                setError(err.message || "Failed to load usage data");
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchUsage();
+    }, []);
+
+    const getKeys = () => {
+        const keys = new Set<string>();
+        data.forEach(row => {
+            Object.keys(row).forEach(k => {
+                if (k !== 'date') keys.add(k);
+            });
+        });
+        return Array.from(keys);
+    };
+
+    const colors = ['#8884d8', '#82ca9d', '#ffc658', '#ff8042', '#00C49F'];
+
+    return (
+        <div className="w-full flex-1 bg-surface-overlay border border-border-default rounded-xl backdrop-blur-xl overflow-hidden shadow-2xl">
+            <div className="p-4 border-b border-border-subtle">
+                <h3 className="text-emerald-400 font-semibold flex items-center gap-2">
+                    Portal del Cliente - Consumo de IA (Gas)
+                </h3>
+            </div>
+            <div className="p-4">
+                {quotaWarning && (
+                    <div className="mb-4 flex items-center gap-2 text-rose-400 bg-rose-500/10 p-3 rounded-lg border border-rose-500/20">
+                        <AlertCircle className="w-5 h-5" />
+                        <span>Atención: Has superado el 80% de tu cuota mensual ({PLAN_LIMIT} Gas).</span>
+                    </div>
+                )}
+
+                {loading ? (
+                    <div className="h-64 flex items-center justify-center text-text-primary/50">Cargando consumo...</div>
+                ) : error ? (
+                    <div className="h-64 flex items-center justify-center text-rose-400">{error}</div>
+                ) : data.length === 0 ? (
+                    <div className="h-64 flex items-center justify-center text-text-primary/50">No hay datos de consumo registrados aún.</div>
+                ) : (
+                    <div className="h-64 w-full">
+                        <ResponsiveContainer width="100%" height="100%">
+                            <BarChart data={data}>
+                                <CartesianGrid strokeDasharray="3 3" stroke="#ffffff10" vertical={false} />
+                                <XAxis
+                                    dataKey="date"
+                                    stroke="#ffffff50"
+                                    tickFormatter={(val) => new Date(val).toLocaleDateString()}
+                                />
+                                <YAxis stroke="#ffffff50" />
+                                <Tooltip
+                                    contentStyle={{ backgroundColor: '#1a1a1a', border: '1px solid #333' }}
+                                    itemStyle={{ color: '#fff' }}
+                                />
+                                <Legend />
+                                {getKeys().map((key, i) => (
+                                    <Bar key={key} dataKey={key} stackId="a" fill={colors[i % colors.length]} />
+                                ))}
+                            </BarChart>
+                        </ResponsiveContainer>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};