working version before responsiveness updates

src/components/dashboard/NetworkTrafficChart.tsx

@@ -14,6 +14,17 @@ import { Card } from '@/components/ui/Card';
 
 import { vpsApi } from '@/services/vpsApi';
 
+type TrafficMode =
+  | 'wireguard'
+  | 'udp2raw';
+
+type NetworkTrafficChartProps = {
+  title?: string;
+  subtitle?: string;
+  mode?: TrafficMode;
+  compact?: boolean;
+};
+
 type TrafficPoint = {
   time: string;
   downloadMbps: number;
@@ -22,7 +33,12 @@ type TrafficPoint = {
 
 const MAX_POINTS = 24;
 
-export function NetworkTrafficChart() {
+export function NetworkTrafficChart({
+  title = 'Tráfego de Rede',
+  subtitle = 'Débito RX/TX em direto',
+  mode = 'wireguard',
+  compact = false,
+}: NetworkTrafficChartProps) {
   const [points, setPoints] = useState<
     TrafficPoint[]
   >([]);
@@ -35,7 +51,9 @@ export function NetworkTrafficChart() {
     async function loadTraffic() {
       try {
         const response =
-          await vpsApi.networkTraffic();
+          mode === 'udp2raw'
+            ? await vpsApi.udp2rawTraffic()
+            : await vpsApi.networkTraffic();
 
         if (!mounted) {
           return;
@@ -66,6 +84,9 @@ export function NetworkTrafficChart() {
       }
     }
 
+    setPoints([]);
+    setError('');
+
     loadTraffic();
 
     const intervalId = window.setInterval(
@@ -77,23 +98,28 @@ export function NetworkTrafficChart() {
       mounted = false;
       window.clearInterval(intervalId);
     };
-  }, []);
+  }, [mode]);
+
+  const latestPoint =
+    points[points.length - 1];
 
   return (
-    <Card className="h-full">
-      <div className="mb-4 flex items-center justify-between">
-        <div>
-          <h3 className="font-semibold text-white">
-            Tráfego de Rede
+    <Card className="relative h-full overflow-hidden">
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-blue-400/30 to-transparent" />
+
+      <div className="mb-4 flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <h3 className="truncate font-semibold text-white">
+            {title}
           </h3>
 
-          <p className="text-xs text-slate-500">
-            Débito RX/TX wg0 em direto
+          <p className="mt-1 truncate text-xs text-slate-500">
+            {subtitle}
           </p>
         </div>
 
-        <span className="rounded-lg border border-white/10 bg-slate-900 px-3 py-1 text-xs text-slate-400">
-          Atualização 3s
+        <span className="shrink-0 rounded-lg border border-white/10 bg-slate-900 px-3 py-1 text-xs text-slate-400">
+          3s
         </span>
       </div>
 
@@ -103,12 +129,59 @@ export function NetworkTrafficChart() {
         </div>
       )}
 
-      <div className="h-[calc(100%-4.5rem)] min-h-[360px]">
+      {compact && latestPoint && (
+        <div className="mb-3 grid grid-cols-2 gap-2">
+          <div className="rounded-xl border border-white/10 bg-white/[0.025] p-3">
+            <p className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+              Entrada
+            </p>
+
+            <p className="mt-1 font-mono text-sm font-bold text-green-300">
+              {latestPoint.downloadMbps.toFixed(3)} Mbps
+            </p>
+          </div>
+
+          <div className="rounded-xl border border-white/10 bg-white/[0.025] p-3">
+            <p className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+              Saída
+            </p>
+
+            <p className="mt-1 font-mono text-sm font-bold text-blue-300">
+              {latestPoint.uploadMbps.toFixed(3)} Mbps
+            </p>
+          </div>
+        </div>
+      )}
+
+      <div
+        className={
+          compact
+            ? 'h-[calc(100%-8.5rem)] min-h-[140px]'
+            : 'h-[calc(100%-4.5rem)] min-h-[360px]'
+        }
+      >
         <ResponsiveContainer
           width="100%"
           height="100%"
         >
-          <AreaChart data={points}>
+          <AreaChart
+            data={points}
+            margin={
+              compact
+                ? {
+                    top: 8,
+                    right: 8,
+                    left: -28,
+                    bottom: 0,
+                  }
+                : {
+                    top: 8,
+                    right: 16,
+                    left: 0,
+                    bottom: 0,
+                  }
+            }
+          >
             <CartesianGrid
               strokeDasharray="3 3"
               stroke="rgba(148,163,184,.12)"
@@ -117,13 +190,15 @@ export function NetworkTrafficChart() {
             <XAxis
               dataKey="time"
               stroke="#94a3b8"
-              fontSize={12}
-              minTickGap={24}
+              fontSize={compact ? 10 : 12}
+              minTickGap={compact ? 32 : 24}
+              tick={compact ? false : undefined}
             />
 
             <YAxis
               stroke="#94a3b8"
-              fontSize={12}
+              fontSize={compact ? 10 : 12}
+              width={compact ? 42 : 60}
               tickFormatter={(value) =>
                 `${value} Mbps`
               }
@@ -147,7 +222,11 @@ export function NetworkTrafficChart() {
             <Area
               type="monotone"
               dataKey="downloadMbps"
-              name="Download"
+              name={
+                mode === 'udp2raw'
+                  ? 'Entrada'
+                  : 'Download'
+              }
               stroke="#19d16f"
               fill="#19d16f"
               fillOpacity={0.2}
@@ -156,7 +235,11 @@ export function NetworkTrafficChart() {
             <Area
               type="monotone"
               dataKey="uploadMbps"
-              name="Upload"
+              name={
+                mode === 'udp2raw'
+                  ? 'Saída'
+                  : 'Upload'
+              }
               stroke="#3b82f6"
               fill="#3b82f6"
               fillOpacity={0.16}