refactor(lst): more dashboard work

frontend/src/routes/index.tsx

@@ -1,30 +1,48 @@
 import {createFileRoute} from "@tanstack/react-router";
-import LoginForm from "../components/auth/LoginForm";
-import {Button} from "../components/ui/button";
-import {useLogout} from "../lib/hooks/useLogout";
-import {useSession} from "../lib/hooks/useSession";
-import {useSessionStore} from "../lib/store/sessionStore";
+import GridLayout from "react-grid-layout";
+import "../../node_modules/react-grid-layout/css/styles.css";
+import "../../node_modules/react-resizable/css/styles.css";
 
 export const Route = createFileRoute("/")({
     component: Index,
 });
 
 function Index() {
-    const {session} = useSession();
-    const {user} = useSessionStore();
-    const logout = useLogout();
+    // const [layout, setLayout] = useState([
+    //     {
+    //         i: "PPOO",
+    //         x: 0,
+    //         y: 0,
+    //         w: 5,
+    //         h: 3,
+    //         minW: 2,
+    //         maxW: 6,
+    //         minH: 2,
+    //         maxH: 4,
+    //         isResizable: true,
+    //         isDraggable: true,
+    //     },
+    //     {i: "OCPLogs", x: 2, y: 0, w: 5, h: 3, isResizable: true, isDraggable: true},
+    // ]);
+
+    // const [cardData, setCardData] = useState([
+    //     {i: "card1", name: "PPOO"},
+    //     {i: "card2", name: "OCPLogs"},
+    // ]);
     return (
-        <div className="p-2">
-            {session ? (
-                <>
-                    <h3>Welcome Home {user?.username}</h3>
-                    <p>Your current role is: {user?.role}</p>
-                    <br></br>
-                    <Button onClick={() => logout()}>Logout</Button>{" "}
-                </>
-            ) : (
-                <LoginForm />
-            )}
-        </div>
+        <>
+            {/* <AddCards addCard={addCard} cards={cards} /> */}
+            <GridLayout className="layout" cols={12} rowHeight={30} width={window.innerWidth}>
+                <div className="bg-blue-400" key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>
+                    a
+                </div>
+                <div className="bg-blue-400" key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>
+                    b
+                </div>
+                <div className="bg-blue-400" key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>
+                    c
+                </div>
+            </GridLayout>
+        </>
     );
 }