add new storage modal and validation for storage creation

frontend/src/pages/Storages.tsx

@@ -1,12 +1,15 @@
 import { useQuery } from "@tanstack/react-query";
 import { getStorages } from "../utils/uxFncs";
-import { Sheet, Table, Button } from "@mui/joy";
+import { Sheet, Table, Button, CircularProgress } from "@mui/joy";
 import { useTranslation } from "react-i18next";
 import type { Storage } from "../misc/interfaces";
 import { StorageRow } from "../components/StorageRow";
+import { useState } from "react";
+import { AddStorageModal } from "../components/modals/AddStorageModal";
 
 export const Storages = () => {
   const { t } = useTranslation();
+  const [modal, setModal] = useState(false);
 
   const { data: storages, isLoading } = useQuery({
     queryKey: ["storages"],
@@ -15,29 +18,36 @@ export const Storages = () => {
 
   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>
+      {isLoading ? (
+        <CircularProgress />
+      ) : (
+        <>
+          <AddStorageModal isOpen={modal} setOpen={setModal} />
+          <Button onClick={() => setModal(true)}>+</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>
   );
 };