feat: complete multi-user RBAC integration, login system, and fix backend API crashing

src/app/(dashboard)/flows/page.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useFlows } from "@/lib/api";
+import { DataTable, Column } from "@/components/ui/DataTable";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Loader2 } from "lucide-react";
+import { fmtBytes } from "@/lib/utils";
+
+export default function FlowsPage() {
+  const [mounted, setMounted] = useState(false);
+  const { data, isLoading } = useFlows(100); // fetch 100 flows
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  const columns: Column<typeof data[0]>[] = [
+    { header: "#", accessor: (row, i) => i + 1 },
+    { header: "Flow ID", accessor: (row) => row.flow_id },
+    { header: "Src IP", accessor: (row) => <span className="text-blue-400">{row.src_ip}</span> },
+    { header: "Dst IP", accessor: (row) => <span className="text-blue-400">{row.dst_ip}</span> },
+    { header: "Dst Port", accessor: (row) => row.dst_port },
+    { header: "Protocol", accessor: (row) => row.protocol },
+    { header: "App / Domain", accessor: (row) => row.app_label || row.domain || "-" },
+    { 
+      header: "Download", 
+      accessor: (row) => <span className="text-blue-400">{fmtBytes(row.bytes_download)}</span> 
+    },
+    { 
+      header: "Upload", 
+      accessor: (row) => <span className="text-green-500">{fmtBytes(row.bytes_upload)}</span> 
+    }
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-bold tracking-tight text-white flex items-center gap-3">
+          Active Flows
+          {isLoading && <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />}
+        </h2>
+      </div>
+      
+      <Card className="bg-card/50 backdrop-blur-sm border-border/50">
+        <CardHeader>
+          <CardTitle className="text-white">Active Flows ({data.length})</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DataTable
+            data={data}
+            columns={columns}
+            searchPlaceholder="Search flows by IP, App, or Domain..."
+            searchFilter={(row, query) => {
+              const q = query.toLowerCase();
+              return (
+                (row.src_ip || "").toLowerCase().includes(q) ||
+                (row.dst_ip || "").toLowerCase().includes(q) ||
+                (row.app_label || "").toLowerCase().includes(q) ||
+                (row.domain || "").toLowerCase().includes(q) ||
+                (row.protocol || "").toLowerCase().includes(q)
+              );
+            }}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}