Network Flow Chart

app/dashboard/network/Networks.tsx

@@ -0,0 +1,99 @@
+import { AppSidebar } from "@/components/app-sidebar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { ReactFlow, Controls, Background } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { useEffect, useState } from "react";
+
+export default function Dashboard() {
+  const [nodes, setNodes] = useState<any[]>([]);
+  const [edges, setEdges] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchFlowData = async () => {
+      try {
+        const response = await fetch("/api/flowchart");
+        const data = await response.json();
+
+        setNodes(data.nodes);
+        setEdges(data.edges);
+      } catch (error) {
+        console.error("Error loading flowchart:", error);
+      }
+    };
+
+    fetchFlowData();
+  }, []);
+
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset className="flex flex-col h-screen">
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1 dark:text-white" />
+            <Separator
+              orientation="vertical"
+              className="mr-2 h-4 dark:bg-slate-700"
+            />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbPage className="dark:text-slate-300">
+                    /
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block dark:text-slate-500" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="dark:text-slate-300">
+                    My Infrastructure
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block dark:text-slate-500" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="dark:text-slate-300">
+                    Network
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+
+        <div className="flex-1 pl-4 pr-4">
+          <div
+            style={{ height: "100%" }}
+            className="dark:bg-black rounded-lg"
+          >
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              fitView
+              fitViewOptions={{ padding: 0.2 }}
+              connectionLineType="straight"
+              className="dark:[&_.react-flow__edge-path]:stroke-slate-500"
+            >
+              <Background
+                color="#64748b"
+                gap={40}
+                className="dark:opacity-20"
+              />
+            </ReactFlow>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}