added logout button to sidebar and updated translations

frontend/src/components/Sidebar.tsx

@@ -4,6 +4,7 @@ import InventoryIcon from "@mui/icons-material/Inventory";
 import AddBoxIcon from "@mui/icons-material/AddBox";
 import StorageIcon from "@mui/icons-material/Storage";
 import SettingsIcon from "@mui/icons-material/Settings";
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
 import { useNavigate, useMatchRoute } from "@tanstack/react-router";
 import Cookies from "js-cookie";
 
@@ -68,6 +69,17 @@ export const Sidebar = () => {
         >
           {t("settings")}
         </Button>
+        <Button
+          onClick={() => {
+            Cookies.remove("token");
+            navigate({ to: "/login" });
+          }}
+          variant={variant("/login")}
+          startDecorator={<ExitToAppIcon />}
+          className={btnClass}
+        >
+          {t("logout")}
+        </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)]">

frontend/src/pages/Storages.tsx

@@ -6,7 +6,7 @@ import type { Storage } from "../misc/interfaces";
 import { StorageRow } from "../components/StorageRow";
 import { useState } from "react";
 import { AddStorageModal } from "../components/modals/AddStorageModal";
-import AddBoxIcon from "@mui/icons-material/AddBox";
+import AddIcon from "@mui/icons-material/Add";
 
 export const Storages = () => {
   const { t } = useTranslation();
@@ -19,67 +19,52 @@ export const Storages = () => {
 
   return (
     <>
-      <div className="space-y-6">
-        <div className="flex flex-wrap items-center gap-3">
-          <div className="space-y-1">
-            <Typography level="h2" className="text-slate-900">
-              {t("storages")}
-            </Typography>
-            <Typography level="body-lg" className="text-slate-500">
-              {t("storage-delete-info")}
-            </Typography>
-          </div>
+      <div className="flex flex-col gap-4">
+        <div className="min-w-65 space-y-2">
+          <Typography level="h2" className="text-slate-900">
+            {t("storages")}
+          </Typography>
+          <Typography level="body-lg" className="text-slate-500">
+            {t("storage-delete-info")}
+          </Typography>
+        </div>
+        <div className="flex items-center gap-3">
           <Button
+            startDecorator={<AddIcon />}
             onClick={() => setModal(true)}
-            size="lg"
-            startDecorator={<AddBoxIcon />}
-            className="ml-auto rounded-2xl bg-[#0b6bcb] px-5 text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
+            variant="solid"
+            className="rounded-full px-5 py-2 text-base font-semibold shadow-sm"
           >
             {t("add")}
           </Button>
         </div>
       </div>
 
-      <Sheet className="mt-6 rounded-3xl border border-white/70 bg-white/80 p-6 shadow-[0_24px_60px_rgba(12,38,78,0.12)] backdrop-blur">
+      <Sheet className="mt-6 rounded-3xl border border-slate-200/70 bg-white/90 p-6 shadow-[0_24px_60px_rgba(12,38,78,0.12)] backdrop-blur">
         <AddStorageModal isOpen={modal} setOpen={setModal} />
         {isLoading ? (
           <div className="flex items-center justify-center py-16">
             <CircularProgress size="lg" />
           </div>
         ) : (
-          <Table
-            hoverRow
-            className="min-w-240 text-slate-700"
-            sx={{
-              "--TableCell-headBackground": "transparent",
-              "& thead th": {
-                fontWeight: "lg",
-                color: "#475569",
-                padding: "16px 20px",
-              },
-              "& tbody td": {
-                padding: "18px 20px",
-              },
-              "& tbody tr": {
-                borderTop: "1px solid #e2e8f0",
-              },
-            }}
-          >
-            <thead>
-              <tr>
-                <th>{t("storage-name")}</th>
-                <th>{t("description")}</th>
-                <th>{t("created-at")}</th>
-                <th>{t("updated-at")}</th>
-                <th className="text-right"></th>
-              </tr>
-            </thead>
-            <tbody>
-              {storages?.map((storage: Storage) => (
-                <StorageRow key={storage.uuid} storage={storage} />
-              ))}
-            </tbody>
-          </Table>
+          <div className="overflow-hidden rounded-2xl border border-slate-200/80 bg-white">
+            <Table hoverRow className="min-w-240 text-slate-700">
+              <thead className="bg-slate-50/80 text-slate-500">
+                <tr className="text-sm uppercase tracking-wide">
+                  <th className="px-5 py-3 text-left">{t("storage-name")}</th>
+                  <th className="px-5 py-3 text-left">{t("description")}</th>
+                  <th className="px-5 py-3 text-left">{t("created-at")}</th>
+                  <th className="px-5 py-3 text-left">{t("updated-at")}</th>
+                  <th className="px-5 py-3 text-right"></th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-200">
+                {storages?.map((storage: Storage) => (
+                  <StorageRow key={storage.uuid} storage={storage} />
+                ))}
+              </tbody>
+            </Table>
+          </div>
         )}
       </Sheet>
     </>

frontend/src/utils/i18n/locales/en/en.json

@@ -39,5 +39,6 @@
     "quick-tips-2": "Choose a currency code that matches your pricing display, e.g. EUR, CHF, or USD.",
     "settings-sub": "Manage your app preferences and store defaults.",
     "preferences": "Preferences",
-    "selected": "selected"
+    "selected": "selected",
+    "logout": "Logout"
 }