add storage management features including update functionality and storage listing page

2026-05-27 22:20:12 +02:00
parent 96488a3137
commit b0731b22db
10 changed files with 252 additions and 13 deletions
@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/react-query";
+import { getStorages } from "../utils/uxFncs";
+import { Sheet, Table, Button } from "@mui/joy";
+import { useTranslation } from "react-i18next";
+import type { Storage } from "../misc/interfaces";
+import { StorageRow } from "../components/StorageRow";
+
+export const Storages = () => {
+  const { t } = useTranslation();
+
+  const { data: storages, isLoading } = useQuery({
+    queryKey: ["storages"],
+    queryFn: () => getStorages(),
+  });
+
+  return (
+    <Sheet>
+      <Button>+</Button>
+      <Table
+        borderAxis="x"
+        color="neutral"
+        stickyHeader
+        stripe="odd"
+        variant="soft"
+      >
+        <thead>
+          <tr>
+            <th>{t("name")}</th>
+            <th>{t("description")}</th>
+            <th>{t("created-at")}</th>
+            <th>{t("updated-at")}</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {storages?.map((storage: Storage) => (
+            <StorageRow key={storage.uuid} storage={storage} />
+          ))}
+        </tbody>
+      </Table>
+    </Sheet>
+  );
+};