@decido/shell 1.0.0 → 4.0.1

package/src/components/widgets/UsageWidget.tsx

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