feat: add profile route and sidebar navigation; implement inventory and view product pages

- Added a new profile route under the hidden layout. - Introduced a Sidebar component for navigation between inventory, add product, and profile pages. - Created InventoryPage to display a list of products with sorting and pagination. - Implemented ViewProduct page to show details of a selected product. - Integrated API calls for fetching products and product details. - Updated route tree to include new routes and components.
2026-05-26 21:37:30 +02:00
parent 56a31bb614
commit 616058b603
13 changed files with 1091 additions and 12 deletions
@@ -0,0 +1,73 @@
+import { useTranslation } from "react-i18next";
+import { Button, Typography } from "@mui/joy";
+import InventoryIcon from "@mui/icons-material/Inventory";
+import AddBoxIcon from "@mui/icons-material/AddBox";
+import AccountBoxIcon from "@mui/icons-material/AccountBox";
+import { useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+
+export const Sidebar = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const currentURL = window.location.href;
+  const [currentPage, setCurrentPage] = useState(
+    currentURL.substring(currentURL.lastIndexOf("/") + 1),
+  );
+
+  return (
+    <aside className="flex h-full min-h-screen w-full max-w-70 flex-col gap-8 border-r border-white/80 bg-linear-to-b from-[#f7fbff] via-[#f2f6fb] to-[#eef3f9] px-6 py-8 shadow-[0_20px_60px_rgba(11,107,203,0.08)]">
+      <div className="space-y-2">
+        <Typography
+          level="h2"
+          className="text-[22px] font-semibold text-[#0b6bcb]"
+        >
+          {t("app-title")}
+        </Typography>
+        <Typography
+          level="body-lg"
+          className="text-sm font-medium text-slate-500"
+        >
+          {t("app-subtitle")}
+        </Typography>
+      </div>
+      <div className="flex flex-1 flex-col gap-2">
+        <Button
+          onClick={() => {
+            navigate({ to: "/app/inventory" });
+            setCurrentPage("inventory");
+          }}
+          variant={currentPage === "inventory" ? "soft" : "plain"}
+          startDecorator={<InventoryIcon />}
+          className="h-11 w-full justify-start! rounded-2xl px-4 text-left text-sm font-semibold text-slate-700 transition hover:bg-white/80 hover:text-[#0b6bcb] [&_.MuiButton-startDecorator]:mr-3! [&_.MuiButton-startDecorator]:ml-0!"
+        >
+          {t("inventory")}
+        </Button>
+        <Button
+          onClick={() => {
+            navigate({ to: "/app/add-product" });
+            setCurrentPage("add-product");
+          }}
+          variant={currentPage === "add-product" ? "soft" : "plain"}
+          startDecorator={<AddBoxIcon />}
+          className="h-11 w-full justify-start! rounded-2xl px-4 text-left text-sm font-semibold text-slate-700 transition hover:bg-white/80 hover:text-[#0b6bcb] [&_.MuiButton-startDecorator]:mr-3! [&_.MuiButton-startDecorator]:ml-0!"
+        >
+          {t("add")}
+        </Button>
+        <Button
+          onClick={() => {
+            navigate({ to: "/app/profile" });
+            setCurrentPage("profile");
+          }}
+          variant={currentPage === "profile" ? "soft" : "plain"}
+          startDecorator={<AccountBoxIcon />}
+          className="h-11 w-full justify-start! rounded-2xl px-4 text-left text-sm font-semibold text-slate-700 transition hover:bg-white/80 hover:text-[#0b6bcb] [&_.MuiButton-startDecorator]:mr-3! [&_.MuiButton-startDecorator]:ml-0!"
+        >
+          {t("profile")}
+        </Button>
+      </div>
+      <div className="rounded-2xl border border-white/70 bg-white/80 px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-[#0b6bcb] shadow-[0_12px_30px_rgba(12,38,78,0.12)]">
+        Stockhome
+      </div>
+    </aside>
+  );
+};