ok

pos-frontend/app/page.tsx

@@ -1,36 +1,48 @@
+// "use client"
+
 import React from "react"
 import { Button, Nav, Stack } from "react-bootstrap"
 import 'bootstrap/dist/css/bootstrap.min.css'
+import Link from "next/link"
+
+const NavLink = (props: any) =>
+  <li className="nav-item">
+    <a className="nav-link" href={props.href}>
+      {props.children}
+    </a>
+  </li>
+
+const Text = (props: any) =>
+  <p>{props.children}</p>
 
 export default function Page() {
   return (
-    <div className="flex gap-4 items-center" style={{ padding: 4 }}>
+    <Stack direction="horizontal" gap={1} style={{ padding: '1rem' }}>
-      <Button color="primary" size="lg">Click me 2</Button>
+      <Stack gap={1} style={{ padding: '1rem' }}>
-      <Button size="sm">
+        <Text>Point of Sale</Text>
-        Medium
+        <Nav className="flex-column">
-      </Button>
+          <NavLink href="/stocks">
-      <Button size="lg">
+            Stocks
-        Large
+          </NavLink>
-      </Button>
+          <NavLink href="/quantities">
-      <Stack direction="horizontal" gap={3}>
+            Quantities
-        <div className="p-2">First item</div>
+          </NavLink>
-        <div className="p-2">Second item</div>
+          <NavLink href="/inventory">
-        <div className="p-2">Third item</div>
+            Inventory
+          </NavLink>
+          <NavLink href="/logs">
+            Logs
+          </NavLink>
+          <NavLink href="/receipts">
+            Receipts
+          </NavLink>
+        </Nav>
       </Stack>
-      <Nav className="flex-column">
+
-        <li className="nav-item">
+      <Stack gap={1} style={{ padding: '1rem', width: '100%', justifyContent: 'center', alignItems: 'center' }}>
-          <a className="nav-link active" href="/x">Active</a>
+        <Text>Stuff</Text>
-        </li>
+        <Button style={{ maxWidth: 'fit-content' }}>Submit THIS</Button>
-        <li className="nav-item">
+      </Stack>
-          <a className="nav-link" href="#">Link</a>
+    </Stack>
-        </li>
-        <li className="nav-item">
-          <a className="nav-link" href="#">Link</a>
-        </li>
-        <li className="nav-item">
-          <a className="nav-link disabled" href="#">Disabled</a>
-        </li>
-      </Nav>
-    </div>
   )
 }