From 9271cdae4bb04e40a2368290394a7e6b90fdb126 Mon Sep 17 00:00:00 2001
From: Crumb Owl <crumbowl@proton.me>
Date: Thu, 10 Jul 2025 18:40:02 +0200
Subject: [PATCH] ProductBarcode: architecture: move to strongly typed DialogID
 and parameters

---
 frontend/components/App/CreateModal.vue       |   3 +-
 frontend/components/App/ImportDialog.vue      |   3 +-
 frontend/components/App/QuickMenuModal.vue    |  15 ++-
 frontend/components/App/ScannerModal.vue      |  11 +-
 frontend/components/Item/BarcodeModal.vue     |  40 +++---
 frontend/components/Item/CreateModal.vue      | 124 +++++++++---------
 frontend/components/Item/View/Table.vue       |   7 +-
 frontend/components/Label/CreateModal.vue     |   7 +-
 frontend/components/Location/CreateModal.vue  |   9 +-
 frontend/components/Maintenance/EditModal.vue |  13 +-
 frontend/components/global/LabelMaker.vue     |   7 +-
 frontend/components/global/PageQRCode.vue     |   5 +-
 .../components/ui/command/CommandDialog.vue   |   3 +-
 .../ui/dialog-provider/DialogProvider.vue     |  28 +++-
 .../components/ui/dialog-provider/utils.ts    |  49 +++++--
 frontend/components/ui/dialog/Dialog.vue      |   6 +-
 frontend/components/ui/drawer/Drawer.vue      |   6 +-
 frontend/layouts/default.vue                  |  20 ++-
 frontend/pages/item/[id]/index.vue            |   9 +-
 frontend/pages/item/[id]/index/edit.vue       |   7 +-
 frontend/pages/label/[id].vue                 |   7 +-
 frontend/pages/location/[id].vue              |   7 +-
 frontend/pages/profile.vue                    |  15 ++-
 frontend/pages/tools.vue                      |   3 +-
 24 files changed, 233 insertions(+), 171 deletions(-)

diff --git a/frontend/components/App/CreateModal.vue b/frontend/components/App/CreateModal.vue
index 526c0257..504c83db 100644
--- a/frontend/components/App/CreateModal.vue
+++ b/frontend/components/App/CreateModal.vue
@@ -39,13 +39,14 @@
 
 <script setup lang="ts">
   import { useMediaQuery } from "@vueuse/core";
+  import type { DialogID } from "@/components/ui/dialog-provider/utils";
   import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer";
   import { Dialog, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 
   const isDesktop = useMediaQuery("(min-width: 768px)");
 
   defineProps<{
-    dialogId: string;
+    dialogId: DialogID;
     title: string;
   }>();
 </script>
diff --git a/frontend/components/App/ImportDialog.vue b/frontend/components/App/ImportDialog.vue
index 4f76e358..eaf1048d 100644
--- a/frontend/components/App/ImportDialog.vue
+++ b/frontend/components/App/ImportDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog dialog-id="import">
+  <Dialog :dialog-id="DialogID.Import">
     <DialogContent>
       <DialogHeader>
         <DialogTitle>{{ $t("components.app.import_dialog.title") }}</DialogTitle>
@@ -38,6 +38,7 @@
 
 <script setup lang="ts">
   import { useI18n } from "vue-i18n";
+  import { DialogID } from "@/components/ui/dialog-provider/utils";
   import { toast } from "@/components/ui/sonner";
   import {
     Dialog,
diff --git a/frontend/components/App/QuickMenuModal.vue b/frontend/components/App/QuickMenuModal.vue
index 8c5db74e..8ce72f56 100644
--- a/frontend/components/App/QuickMenuModal.vue
+++ b/frontend/components/App/QuickMenuModal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import { useI18n } from "vue-i18n";
+  import { DialogID } from "@/components/ui/dialog-provider/utils";
   import {
     CommandDialog,
     CommandInput,
@@ -14,7 +15,7 @@
 
   export type QuickMenuAction =
     | { text: string; href: string; type: "navigate" }
-    | { text: string; dialogId: string; shortcut: string; type: "create" };
+    | { text: string; dialogId: DialogID; shortcut: string; type: "create" };
 
   const props = defineProps({
     actions: {
@@ -27,11 +28,11 @@
   const { t } = useI18n();
   const { closeDialog, openDialog } = useDialog();
 
-  useDialogHotkey("quick-menu", { code: "Backquote", ctrl: true });
+  useDialogHotkey(DialogID.QuickMenu, { code: "Backquote", ctrl: true });
 </script>
 
 <template>
-  <CommandDialog dialog-id="quick-menu">
+  <CommandDialog :dialog-id="DialogID.QuickMenu">
     <CommandInput
       :placeholder="t('components.quick_menu.shortcut_hint')"
       @keydown="
@@ -44,7 +45,7 @@
           // if esc is pressed, close the dialog
           if (e.key === 'Escape') {
             e.preventDefault();
-            closeDialog('quick-menu');
+            closeDialog(DialogID.QuickMenu);
           }
         }
       "
@@ -76,7 +77,7 @@
           :value="`global.navigate_${i + 1}`"
           @select="
             () => {
-              closeDialog('quick-menu');
+              closeDialog(DialogID.QuickMenu);
               navigateTo(navigate.href);
             }
           "
@@ -87,8 +88,8 @@
           value="scanner"
           @select="
             () => {
-              closeDialog('quick-menu');
-              openDialog('scanner');
+              closeDialog(DialogID.QuickMenu);
+              openDialog(DialogID.Scanner);
             }
           "
         >
diff --git a/frontend/components/App/ScannerModal.vue b/frontend/components/App/ScannerModal.vue
index 7edd4033..406ac842 100644
--- a/frontend/components/App/ScannerModal.vue
+++ b/frontend/components/App/ScannerModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog dialog-id="scanner">
+  <Dialog :dialog-id="DialogID.Scanner">
     <DialogScrollContent>
       <DialogHeader>
         <DialogTitle>{{ t("scanner.title") }}</DialogTitle>
@@ -55,6 +55,7 @@
   import { ref, watch, computed } from "vue";
   import { BrowserMultiFormatReader, NotFoundException, BarcodeFormat } from "@zxing/library";
   import { useI18n } from "vue-i18n";
+  import { DialogID } from "@/components/ui/dialog-provider/utils";
   import { Dialog, DialogHeader, DialogTitle, DialogScrollContent } from "@/components/ui/dialog";
   import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
   import { Button } from "@/components/ui/button";
@@ -64,8 +65,8 @@
   
 
   const { t } = useI18n();
-  const { activeDialog, openDialog, closeDialog } = useDialog();
-  const open = computed(() => activeDialog.value && activeDialog.value.id === "scanner");
+  const { activeDialog, openDialog, closeDialog} = useDialog();
+  const open = computed(() => activeDialog && activeDialog.value === DialogID.Scanner);
 
   const sources = ref<MediaDeviceInfo[]>([]);
   const selectedSource = ref<string | null>(null);
@@ -93,7 +94,7 @@
   };
 
   const handleButtonClick = () => {
-    openDialog("product-import", detectedBarcode.value);
+    openDialog(DialogID.ProductImport, { barcode: detectedBarcode.value });
   };
 
   const startScanner = async () => {
@@ -157,7 +158,7 @@
               throw new Error(t("scanner.invalid_url"));
             }
             const sanitizedPath = url.pathname.replace(/[^a-zA-Z0-9-_/]/g, "");
-            closeDialog("scanner");
+            closeDialog(DialogID.Scanner);
             navigateTo(sanitizedPath);
           } catch (err) {
             // Check if it's a barcode for a new element
diff --git a/frontend/components/Item/BarcodeModal.vue b/frontend/components/Item/BarcodeModal.vue
index b5c5b147..d9462f77 100644
--- a/frontend/components/Item/BarcodeModal.vue
+++ b/frontend/components/Item/BarcodeModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog dialog-id="product-import">
+  <Dialog :dialog-id="DialogID.ProductImport">
     <DialogContent :class="'w-full md:max-w-xl lg:max-w-4xl'">
       <DialogHeader>
         <DialogTitle>{{ $t("components.item.product_import.title") }}</DialogTitle>
@@ -93,13 +93,14 @@
 </template>
 
 <script setup lang="ts">
+  import { DialogID } from "@/components/ui/dialog-provider/utils";
   import { Button } from "~/components/ui/button";
   import type { BarcodeProduct } from "~~/lib/api/types/data-contracts";
   import { useDialog } from "~/components/ui/dialog-provider";
   import MdiBarcode from "~icons/mdi/barcode";
   import type { TableData } from "~/components/Item/View/Table.types";
 
-  const { openDialog, activeDialog } = useDialog();
+  const { openDialog, registerOpenDialogCallback } = useDialog();
 
   const searching = ref(false);
   const barcode = ref<string>("");
@@ -128,35 +129,32 @@
   // Need for later filtering
   const headers = defaultHeaders;
 
-  watch(
-    () => activeDialog.value,
-    active => {
-      if (active && active.id === "product-import") {
-        selectedRow.value = -1;
+  onMounted(() => {
+    registerOpenDialogCallback(DialogID.ProductImport, params => {
+      selectedRow.value = -1;
 
-        if (active.params) {
-          // Reset if the barcode is different
-          if (active.params !== barcode.value) {
-            barcode.value = active.params;
+      if (params?.barcode) {
+        // Reset if the barcode is different
+        if (params.barcode !== barcode.value) {
+          barcode.value = params.barcode;
 
-            retrieveProductInfo(barcode.value).then(() => {
-              console.log("Processing finished");
-            });
-          }
-        } else {
-          barcode.value = "";
-          products.value = null;
+          retrieveProductInfo(barcode.value).then(() => {
+            console.log("Processing finished");
+          });
         }
+      } else {
+        barcode.value = "";
+        products.value = null;
       }
-    }
-  );
+    });
+  });
 
   const api = useUserApi();
 
   function createItem() {
     if (products !== null) {
       const p = products.value![selectedRow.value];
-      openDialog("create-item", p);
+      openDialog(DialogID.CreateItem, { product: p });
     }
   }
 
diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index daf3bb2c..e8927669 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseModal dialog-id="create-item" :title="$t('components.item.create_modal.title')">
+  <BaseModal :dialog-id="DialogID.CreateItem" :title="$t('components.item.create_modal.title')">
     <div class="flex flex-row-reverse">
       <TooltipProvider :delay-duration="0">
         <ButtonGroup>
@@ -172,6 +172,7 @@
 
 <script setup lang="ts">
   import { useI18n } from "vue-i18n";
+  import { DialogID } from "@/components/ui/dialog-provider/utils";
   import { toast } from "@/components/ui/sonner";
   import { Button, ButtonGroup } from "~/components/ui/button";
   import BaseModal from "@/components/App/CreateModal.vue";
@@ -201,9 +202,9 @@
   }
 
   const { t } = useI18n();
-  const { activeDialog, openDialog, closeDialog } = useDialog();
+  const { openDialog, closeDialog, registerOpenDialogCallback } = useDialog();
 
-  useDialogHotkey("create-item", { code: "Digit1", shift: true });
+  useDialogHotkey(DialogID.CreateItem, { code: "Digit1", shift: true });
 
   const api = useUserApi();
 
@@ -301,70 +302,67 @@
     }
   }
 
-  watch(
-    () => activeDialog.value,
-    async active => {
-      if (active !== null && active.id === "create-item") {
-        // needed since URL will be cleared in the next step => ParentId Selection should stay though
-        subItemCreate.value = subItemCreateParam.value === "y";
-        let parentItemLocationId = null;
+  onMounted(() => {
+    registerOpenDialogCallback(DialogID.CreateItem, async params => {
+      // needed since URL will be cleared in the next step => ParentId Selection should stay though
+      subItemCreate.value = subItemCreateParam.value === "y";
+      let parentItemLocationId = null;
 
-        if (subItemCreate.value && itemId.value) {
-          const itemIdRead = typeof itemId.value === "string" ? (itemId.value as string) : itemId.value[0];
-          const { data, error } = await api.items.get(itemIdRead);
-          if (error || !data) {
-            toast.error(t("components.item.create_modal.toast.failed_load_parent"));
-            console.error("Parent item fetch error:", error);
-          }
-
-          if (data) {
-            parent.value = data;
-          }
-
-          if (data.location) {
-            const { location } = data;
-            parentItemLocationId = location.id;
-          }
-
-          // clear URL Parameter (subItemCreate) since intention was communicated and received
-          const currentQuery = { ...route.query };
-          delete currentQuery.subItemCreate;
-          await router.push({ query: currentQuery });
-        } else {
-          // since Input is hidden in this case, make sure no accidental parent information is sent out
-          parent.value = {};
-          form.parentId = null;
+      if (subItemCreate.value && itemId.value) {
+        const itemIdRead = typeof itemId.value === "string" ? (itemId.value as string) : itemId.value[0];
+        const { data, error } = await api.items.get(itemIdRead);
+        if (error || !data) {
+          toast.error(t("components.item.create_modal.toast.failed_load_parent"));
+          console.error("Parent item fetch error:", error);
         }
 
-        const locId = locationId.value ? locationId.value : parentItemLocationId;
-
-        if (locId) {
-          const found = locations.value.find(l => l.id === locId);
-          if (found) {
-            form.location = found;
-          }
+        if (data) {
+          parent.value = data;
         }
 
-        if (active.params) {
-          form.name = active.params.item.name;
-          form.description = active.params.item.description;
-
-          if (active.params.imageURL) {
-            form.photos.push({
-              photoName: "product_view.jpg",
-              fileBase64: active.params.imageBase64,
-              primary: form.photos.length === 0,
-              file: dataURLtoFile(active.params.imageBase64, "product_view.jpg"),
-            });
-          }
+        if (data.location) {
+          const { location } = data;
+          parentItemLocationId = location.id;
         }
 
-        if (labelId.value) {
-          form.labels = labels.value.filter(l => l.id === labelId.value).map(l => l.id);
+        // clear URL Parameter (subItemCreate) since intention was communicated and received
+        const currentQuery = { ...route.query };
+        delete currentQuery.subItemCreate;
+        await router.push({ query: currentQuery });
+      } else {
+        // since Input is hidden in this case, make sure no accidental parent information is sent out
+        parent.value = {};
+        form.parentId = null;
+      }
+
+      const locId = locationId.value ? locationId.value : parentItemLocationId;
+
+      if (locId) {
+        const found = locations.value.find(l => l.id === locId);
+        if (found) {
+          form.location = found;
         }
       }
-    }
-  );
+
+      if (params?.product) {
+        form.name = params.product.item.name;
+        form.description = params.product.item.description;
+
+        if (params.product.imageURL) {
+          form.photos.push({
+            photoName: "product_view.jpg",
+            fileBase64: params.product.imageBase64,
+            primary: form.photos.length === 0,
+            file: dataURLtoFile(params.product.imageBase64, "product_view.jpg"),
+          });
+        }
+      }
+
+      if (labelId.value) {
+        form.labels = labels.value.filter(l => l.id === labelId.value).map(l => l.id);
+      }
+    });
+  });
 
   async function create(close = true) {
     if (!form.location?.id) {
@@ -435,7 +433,7 @@
     loading.value = false;
 
     if (close) {
-      closeDialog("create-item");
+      closeDialog(DialogID.CreateItem);
       navigateTo(`/item/${data.id}`);
     }
   }
@@ -516,12 +514,12 @@
   }
 
   function openQrScannerPage() {
-    closeDialog("create-item");
-    openDialog("scanner");
+    closeDialog(DialogID.CreateItem);
+    openDialog(DialogID.Scanner);
   }
 
   function openBarcodeDialog() {
-    closeDialog("create-item");
-    openDialog("product-import");
+    closeDialog(DialogID.CreateItem);
+    openDialog(DialogID.ProductImport);
   }
 </script>
diff --git a/frontend/components/Item/View/Table.vue b/frontend/components/Item/View/Table.vue
index c2741476..62f19062 100644
--- a/frontend/components/Item/View/Table.vue
+++ b/frontend/components/Item/View/Table.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog dialog-id="item-table-settings">
+  <Dialog :dialog-id="DialogID.ItemTableSettings">
     <DialogContent>
       <DialogHeader>
         <DialogTitle>{{ $t("components.item.view.table.table_settings") }}</DialogTitle>
@@ -41,7 +41,7 @@
       </div>
 
       <DialogFooter>
-        <Button @click="closeDialog('item-table-settings')"> {{ $t("global.save") }} </Button>
+        <Button @click="closeDialog(DialogID.ItemTableSettings)"> {{ $t("global.save") }} </Button>
       </DialogFooter>
     </DialogContent>
   </Dialog>
@@ -123,7 +123,7 @@
         hidden: disableControls,
       }"
     >
-      <Button class="size-10 p-0" variant="outline" @click="openDialog('item-table-settings')">
+      <Button class="size-10 p-0" variant="outline" @click="openDialog(DialogID.ItemTableSettings)">
         <MdiTableCog />
       </Button>
       <Pagination
@@ -174,6 +174,7 @@
   import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
   import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
   import { useDialog } from "@/components/ui/dialog-provider";
+  import { DialogID } from "~/components/ui/dialog-provider/utils";
 
   const { openDialog, closeDialog } = useDialog();
 
diff --git a/frontend/components/Label/CreateModal.vue b/frontend/components/Label/CreateModal.vue
index 51a59a1f..aec9dbbb 100644
--- a/frontend/components/Label/CreateModal.vue
+++ b/frontend/components/Label/CreateModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseModal dialog-id="create-label" :title="$t('components.label.create_modal.title')">
+  <BaseModal :dialog-id="DialogID.CreateLabel" :title="$t('components.label.create_modal.title')">
     <form class="flex flex-col gap-2" @submit.prevent="create()">
       <FormTextField
         v-model="form.name"
@@ -29,6 +29,7 @@
 
 <script setup lang="ts">
   import { useI18n } from "vue-i18n";
+  import { DialogID } from "@/components/ui/dialog-provider/utils";
   import { toast } from "@/components/ui/sonner";
   import BaseModal from "@/components/App/CreateModal.vue";
   import { useDialog, useDialogHotkey } from "~/components/ui/dialog-provider";
@@ -38,7 +39,7 @@
 
   const { closeDialog } = useDialog();
 
-  useDialogHotkey("create-label", { code: "Digit2", shift: true });
+  useDialogHotkey(DialogID.CreateLabel, { code: "Digit2", shift: true });
 
   const loading = ref(false);
   const focused = ref(false);
@@ -85,7 +86,7 @@
     reset();
 
     if (close) {
-      closeDialog("create-label");
+      closeDialog(DialogID.CreateLabel);
       navigateTo(`/label/${data.id}`);
     }
   }
diff --git a/frontend/components/Location/CreateModal.vue b/frontend/components/Location/CreateModal.vue
index 09f661fa..a03abb9a 100644
--- a/frontend/components/Location/CreateModal.vue
+++ b/frontend/components/Location/CreateModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseModal dialog-id="create-location" :title="$t('components.location.create_modal.title')">
+  <BaseModal :dialog-id="DialogID.CreateLocation" :title="$t('components.location.create_modal.title')">
     <form class="flex flex-col gap-2" @submit.prevent="create()">
       <LocationSelector v-model="form.parent" />
       <FormTextField
@@ -31,6 +31,7 @@
 
 <script setup lang="ts">
   import { useI18n } from "vue-i18n";
+  import { DialogID } from "@/components/ui/dialog-provider/utils";
   import { toast } from "@/components/ui/sonner";
   import { Button, ButtonGroup } from "~/components/ui/button";
   import BaseModal from "@/components/App/CreateModal.vue";
@@ -41,7 +42,7 @@
 
   const { activeDialog, closeDialog } = useDialog();
 
-  useDialogHotkey("create-location", { code: "Digit3", shift: true });
+  useDialogHotkey(DialogID.CreateLocation, { code: "Digit3", shift: true });
 
   const loading = ref(false);
   const focused = ref(false);
@@ -54,7 +55,7 @@
   watch(
     () => activeDialog.value,
     active => {
-      if (active && active.id === "create-location") {
+      if (active && active === DialogID.CreateLocation) {
         if (locationId.value) {
           const found = locations.value.find(l => l.id === locationId.value);
           form.parent = found || null;
@@ -113,7 +114,7 @@
     reset();
 
     if (close) {
-      closeDialog("create-location");
+      closeDialog(DialogID.CreateLocation);
       navigateTo(`/location/${data.id}`);
     }
   }
diff --git a/frontend/components/Maintenance/EditModal.vue b/frontend/components/Maintenance/EditModal.vue
index ff53bfb7..37d48570 100644
--- a/frontend/components/Maintenance/EditModal.vue
+++ b/frontend/components/Maintenance/EditModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog dialog-id="edit-maintenance">
+  <Dialog :dialog-id="DialogID.EditMaintenance">
     <DialogContent>
       <DialogHeader>
         <DialogTitle>
@@ -27,6 +27,7 @@
 
 <script setup lang="ts">
   import { useI18n } from "vue-i18n";
+  import { DialogID } from "@/components/ui/dialog-provider/utils";
   import { toast } from "@/components/ui/sonner";
   import type { MaintenanceEntry, MaintenanceEntryWithDetails } from "~~/lib/api/types/data-contracts";
   import MdiPost from "~icons/mdi/post";
@@ -77,7 +78,7 @@
       return;
     }
 
-    closeDialog("edit-maintenance");
+    closeDialog(DialogID.EditMaintenance);
     emit("changed");
   }
 
@@ -99,7 +100,7 @@
       return;
     }
 
-    closeDialog("edit-maintenance");
+    closeDialog(DialogID.EditMaintenance);
     emit("changed");
   }
 
@@ -111,7 +112,7 @@
     entry.description = "";
     entry.cost = "";
     entry.itemId = itemId;
-    openDialog("edit-maintenance");
+    openDialog(DialogID.EditMaintenance);
   };
 
   const openUpdateModal = (maintenanceEntry: MaintenanceEntry | MaintenanceEntryWithDetails) => {
@@ -122,7 +123,7 @@
     entry.description = maintenanceEntry.description;
     entry.cost = maintenanceEntry.cost;
     entry.itemId = null;
-    openDialog("edit-maintenance");
+    openDialog(DialogID.EditMaintenance);
   };
 
   const confirm = useConfirm();
@@ -164,7 +165,7 @@
     entry.description = maintenanceEntry.description;
     entry.cost = maintenanceEntry.cost;
     entry.itemId = itemId;
-    openDialog("edit-maintenance");
+    openDialog(DialogID.EditMaintenance);
   }
 
   defineExpose({ openCreateModal, openUpdateModal, deleteEntry, complete, duplicate });
diff --git a/frontend/components/global/LabelMaker.vue b/frontend/components/global/LabelMaker.vue
index 858004fc..bbf83c71 100644
--- a/frontend/components/global/LabelMaker.vue
+++ b/frontend/components/global/LabelMaker.vue
@@ -2,6 +2,7 @@
   import { useI18n } from "vue-i18n";
   import { route } from "../../lib/api/base";
   import PageQRCode from "./PageQRCode.vue";
+  import { DialogID } from "@/components/ui/dialog-provider/utils";
   import { toast } from "@/components/ui/sonner";
   import MdiLoading from "~icons/mdi/loading";
   import MdiPrinterPos from "~icons/mdi/printer-pos";
@@ -63,7 +64,7 @@
     }
 
     toast.success(t("components.global.label_maker.toast.print_success"));
-    closeDialog("print-label");
+    closeDialog(DialogID.PrintLabel);
     serverPrinting.value = false;
   }
 
@@ -93,7 +94,7 @@
 
 <template>
   <div>
-    <Dialog dialog-id="print-label">
+    <Dialog :dialog-id="DialogID.PrintLabel">
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
@@ -137,7 +138,7 @@
 
         <Tooltip>
           <TooltipTrigger as-child>
-            <Button size="icon" @click="openDialog('print-label')">
+            <Button size="icon" @click="openDialog(DialogID.PrintLabel)">
               <MdiPrinterPos name="mdi-printer-pos" />
             </Button>
           </TooltipTrigger>
diff --git a/frontend/components/global/PageQRCode.vue b/frontend/components/global/PageQRCode.vue
index 8b5f9e02..8b9e8cac 100644
--- a/frontend/components/global/PageQRCode.vue
+++ b/frontend/components/global/PageQRCode.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { DialogID } from "@/components/ui/dialog-provider/utils";
   import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
   import { route } from "~/lib/api/base";
   import MdiQrcode from "~icons/mdi/qrcode";
@@ -16,7 +17,7 @@
 </script>
 
 <template>
-  <Dialog dialog-id="page-qr-code">
+  <Dialog :dialog-id="DialogID.PageQRCode">
     <DialogContent>
       <DialogHeader>
         <DialogTitle>
@@ -29,7 +30,7 @@
 
   <Tooltip>
     <TooltipTrigger as-child>
-      <Button size="icon" @click="openDialog('page-qr-code')">
+      <Button size="icon" @click="openDialog(DialogID.PageQRCode)">
         <MdiQrcode name="mdi-qrcode" />
       </Button>
     </TooltipTrigger>
diff --git a/frontend/components/ui/command/CommandDialog.vue b/frontend/components/ui/command/CommandDialog.vue
index 6356ed26..50175f99 100644
--- a/frontend/components/ui/command/CommandDialog.vue
+++ b/frontend/components/ui/command/CommandDialog.vue
@@ -3,8 +3,9 @@ import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
 import { Dialog, DialogContent } from '@/components/ui/dialog'
 import { useForwardPropsEmits } from 'reka-ui'
 import Command from './Command.vue'
+import type { DialogID } from '@/components/ui/dialog-provider/utils';
 
-const props = defineProps<DialogRootProps & { dialogId: string }>();
+const props = defineProps<DialogRootProps & { dialogId: DialogID }>();
 const emits = defineEmits<DialogRootEmits>()
 
 const forwarded = useForwardPropsEmits(props, emits)
diff --git a/frontend/components/ui/dialog-provider/DialogProvider.vue b/frontend/components/ui/dialog-provider/DialogProvider.vue
index d767a921..adde56b2 100644
--- a/frontend/components/ui/dialog-provider/DialogProvider.vue
+++ b/frontend/components/ui/dialog-provider/DialogProvider.vue
@@ -1,21 +1,34 @@
 <!-- DialogProvider.vue -->
 <script setup lang="ts">
   import { ref, reactive, computed } from "vue";
-  import { provideDialogContext, ActiveDialog } from "./utils";
+  import { provideDialogContext, type DialogID, type DialogParamsMap } from "./utils";
 
-  const activeDialog =  ref<ActiveDialog | null>(null);
+  const activeDialog =  ref<DialogID | null>(null);
   const activeAlerts = reactive<string[]>([]);
+  const openDialogCallbacks = new Map<DialogID, (params: any) => void>();
 
-  const openDialog = (dialogId: string, params?: any) => {
+  const registerOpenDialogCallback = <T extends DialogID>(
+    dialogId: T,
+    callback: (params?: T extends keyof DialogParamsMap ? DialogParamsMap[T] : undefined) => void
+  ) =>
+  {
+    openDialogCallbacks.set(dialogId, callback as (params: any) => void);
+  }
+
+  const openDialog = (dialogId: DialogID, params?: any) => {
     if (activeAlerts.length > 0) return;
 
-    const ad = new ActiveDialog(dialogId, params);
-    activeDialog.value = ad;
+    activeDialog.value = dialogId;
+
+    const openCallback = openDialogCallbacks.get(dialogId);
+    if (openCallback) {
+      openCallback(params);
+    }
   };
 
-  const closeDialog = (dialogId?: string) => {
+  const closeDialog = (dialogId?: DialogID) => {
     if (dialogId) {
-      if (activeDialog.value && activeDialog.value.id === dialogId) {
+      if (activeDialog.value && activeDialog.value === dialogId) {
         activeDialog.value = null;
       }
     } else {
@@ -37,6 +50,7 @@
   // Provide context to child components
   provideDialogContext({
     activeDialog: computed(() => activeDialog.value),
+    registerOpenDialogCallback,
     openDialog,
     closeDialog,
     activeAlerts: computed(() => activeAlerts),
diff --git a/frontend/components/ui/dialog-provider/utils.ts b/frontend/components/ui/dialog-provider/utils.ts
index 3ae869f9..f3b1856e 100644
--- a/frontend/components/ui/dialog-provider/utils.ts
+++ b/frontend/components/ui/dialog-provider/utils.ts
@@ -1,28 +1,55 @@
 import type { ComputedRef } from "vue";
 import { createContext } from "reka-ui";
 import { useMagicKeys, useActiveElement } from "@vueuse/core";
+import type { BarcodeProduct } from "~~/lib/api/types/data-contracts";
 
-export class ActiveDialog {
-    id: string;
-    params: any;
+export enum DialogID {
+  AttachmentEdit = 'attachment-edit',
+  ChangePassword = 'changePassword',
+  CreateItem = 'create-item',
+  CreateLocation = 'create-location',
+  CreateLabel = 'create-label',
+  CreateNotifier = 'create-notifier',
+  EditMaintenance = 'edit-maintenance',
+  Import = 'import',
+  ItemImage = 'item-image',
+  ItemTableSettings = 'item-table-settings',
+  PrintLabel = 'print-label',
+  ProductImport = 'product-import',
+  QuickMenu = 'quick-menu',
+  Scanner = 'scanner',
+  PageQRCode = 'page-qr-code',
+  UpdateLabel = 'update-label',
+  UpdateLocation = 'update-location',
+}
 
-    constructor(id: string, params: any = null) {
-        this.id = id;
-        this.params = params;
-    }
+export type DialogParamsMap = {
+  [DialogID.CreateItem]: { product?: BarcodeProduct };
+  [DialogID.ProductImport]: { barcode?: string };
+};
+
+type DialogsWithParams = keyof DialogParamsMap;
+
+type OpenDialog = {
+  <T extends DialogID>(dialogId: T, params?: T extends DialogsWithParams ? DialogParamsMap[T] : undefined): void;
+};
+
+type OpenCallback = {
+  <T extends DialogID>(dialogId: T, callback: (params?: T extends keyof DialogParamsMap ? DialogParamsMap[T] : undefined) => void): void;
 }
 
 export const [useDialog, provideDialogContext] = createContext<{
-  activeDialog: ComputedRef<ActiveDialog | null>;
+  activeDialog: ComputedRef<DialogID | null>;
   activeAlerts: ComputedRef<string[]>;
-  openDialog: (dialogId: string, params?: any) => void;
-  closeDialog: (dialogId?: string) => void;
+  registerOpenDialogCallback: OpenCallback;
+  openDialog: OpenDialog;
+  closeDialog: (dialogId?: DialogID) => void;
   addAlert: (alertId: string) => void;
   removeAlert: (alertId: string) => void;
 }>("DialogProvider");
 
 export const useDialogHotkey = (
-  dialogId: string,
+  dialogId: DialogID,
   key: {
     shift?: boolean;
     ctrl?: boolean;
diff --git a/frontend/components/ui/dialog/Dialog.vue b/frontend/components/ui/dialog/Dialog.vue
index 738fec0a..db0d3347 100644
--- a/frontend/components/ui/dialog/Dialog.vue
+++ b/frontend/components/ui/dialog/Dialog.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
   import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from "reka-ui";
-  import { useDialog, type ActiveDialog } from "../dialog-provider/utils";
+  import { useDialog, type DialogID } from "@/components/ui/dialog-provider/utils";
 
-  const props = defineProps<DialogRootProps & { dialogId: string }>();
+  const props = defineProps<DialogRootProps & { dialogId: DialogID }>();
   const emits = defineEmits<DialogRootEmits>();
 
   const { closeDialog, activeDialog } = useDialog();
 
-  const isOpen = computed(() => (activeDialog.value && activeDialog.value.id === props.dialogId));
+  const isOpen = computed(() => (activeDialog.value && activeDialog.value === props.dialogId));
   const onOpenChange = (open: boolean) => {
     if (!open) closeDialog(props.dialogId);
   };
diff --git a/frontend/components/ui/drawer/Drawer.vue b/frontend/components/ui/drawer/Drawer.vue
index 58ab268b..ec1b7f46 100644
--- a/frontend/components/ui/drawer/Drawer.vue
+++ b/frontend/components/ui/drawer/Drawer.vue
@@ -2,17 +2,17 @@
   import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";
   import { useForwardPropsEmits } from "reka-ui";
   import { DrawerRoot } from "vaul-vue";
-  import { useDialog } from "../dialog-provider/utils";
+  import { DialogID, useDialog } from "@/components/ui/dialog-provider/utils";
 
   const props = withDefaults(defineProps<DrawerRootProps & { dialogId: string }>(), {
     shouldScaleBackground: true,
-  }) as DrawerRootProps & { dialogId: string };
+  }) as DrawerRootProps & { dialogId: DialogID };
 
   const emits = defineEmits<DrawerRootEmits>();
 
   const { closeDialog, activeDialog } = useDialog();
 
-  const isOpen = computed(() => activeDialog.value !== null && activeDialog.value.id === props.dialogId);
+  const isOpen = computed(() => activeDialog.value !== null && activeDialog.value === props.dialogId);
   const onOpenChange = (open: boolean) => {
     if (!open) closeDialog(props.dialogId);
   };
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 3ecb7267..b0c0d79f 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -79,7 +79,7 @@
                     'text-nowrap': typeof locale === 'string' && locale.startsWith('zh-'),
                   }"
                   :tooltip="$t('menu.scanner')"
-                  @click.prevent="openDialog('scanner')"
+                  @click.prevent="openDialog(DialogID.Scanner)"
                 >
                   <MdiQrcodeScan />
                   <span>{{ $t("menu.scanner") }}</span>
@@ -210,6 +210,7 @@
   import { Input } from "~/components/ui/input";
   import { Button } from "~/components/ui/button";
   import { toast } from "@/components/ui/sonner";
+  import { DialogID } from "~/components/ui/dialog-provider/utils";
 
   const { t, locale } = useI18n();
   const username = computed(() => authCtx.user?.name || "User");
@@ -250,7 +251,7 @@
       navigator.mediaDevices
         .getUserMedia({ video: true })
         .then(() => {
-          openDialog("scanner");
+          openDialog(DialogID.Scanner);
         })
         .catch(err => {
           console.error(err);
@@ -264,24 +265,31 @@
   // Preload currency format
   useFormatCurrency();
 
-  const dropdown = [
+  type DropdownItem = {
+    id: number;
+    name: ComputedRef<string>;
+    shortcut: string;
+    dialogId: DialogID;
+  };
+
+  const dropdown: DropdownItem[] = [
     {
       id: 0,
       name: computed(() => t("menu.create_item")),
       shortcut: "Shift+1",
-      dialogId: "create-item",
+      dialogId: DialogID.CreateItem,
     },
     {
       id: 1,
       name: computed(() => t("menu.create_location")),
       shortcut: "Shift+3",
-      dialogId: "create-location",
+      dialogId: DialogID.CreateLocation,
     },
     {
       id: 2,
       name: computed(() => t("menu.create_label")),
       shortcut: "Shift+2",
-      dialogId: "create-label",
+      dialogId: DialogID.CreateLabel,
     },
   ];
 
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index b54a0524..1acc3cbc 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/frontend/pages/item/[id]/index.vue
@@ -25,6 +25,7 @@
   import { Label } from "@/components/ui/label";
   import { Switch } from "@/components/ui/switch";
   import { Card } from "@/components/ui/card";
+  import { DialogID } from "~/components/ui/dialog-provider/utils";
 
   const { t } = useI18n();
 
@@ -406,11 +407,11 @@
     dialoged.originalSrc = img.originalSrc;
     dialoged.originalType = img.originalType;
     dialoged.thumbnailSrc = img.thumbnailSrc;
-    openDialog("item-image");
+    openDialog(DialogID.ItemImage);
   }
 
   function closeImageDialog() {
-    closeDialog("item-image");
+    closeDialog(DialogID.ItemImage);
   }
 
   const currentUrl = computed(() => {
@@ -535,7 +536,7 @@
       },
     });
 
-    openDialog("create-item");
+    openDialog(DialogID.CreateItem);
   }
 </script>
 
@@ -544,7 +545,7 @@
     <!-- set page title -->
     <Title>{{ item.name }}</Title>
 
-    <Dialog dialog-id="item-image">
+    <Dialog :dialog-id="DialogID.ItemImage">
       <DialogContent class="w-auto border-transparent bg-transparent p-0" disable-close>
         <picture>
           <source :srcset="dialoged.originalSrc" :type="dialoged.originalType" />
diff --git a/frontend/pages/item/[id]/index/edit.vue b/frontend/pages/item/[id]/index/edit.vue
index b32c401c..755441d4 100644
--- a/frontend/pages/item/[id]/index/edit.vue
+++ b/frontend/pages/item/[id]/index/edit.vue
@@ -17,6 +17,7 @@
   import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
   import { Switch } from "@/components/ui/switch";
   import { Label } from "@/components/ui/label";
+  import { DialogID } from "~/components/ui/dialog-provider/utils";
 
   const { t } = useI18n();
 
@@ -369,7 +370,7 @@
     editState.title = attachment.title;
     editState.type = attachment.type;
     editState.primary = attachment.primary;
-    openDialog("attachment-edit");
+    openDialog(DialogID.AttachmentEdit);
 
     editState.obj = attachmentOpts.find(o => o.value === attachment.type) || attachmentOpts[0];
   }
@@ -390,7 +391,7 @@
     item.value.attachments = data.attachments;
 
     editState.loading = false;
-    closeDialog("attachment-edit");
+    closeDialog(DialogID.AttachmentEdit);
 
     editState.id = "";
     editState.title = "";
@@ -498,7 +499,7 @@
 
 <template>
   <div v-if="item" class="pb-8">
-    <Dialog dialog-id="attachment-edit">
+    <Dialog :dialog-id="DialogID.AttachmentEdit">
       <DialogContent>
         <DialogHeader>
           <DialogTitle>{{ $t("items.edit.edit_attachment_dialog.title") }}</DialogTitle>
diff --git a/frontend/pages/label/[id].vue b/frontend/pages/label/[id].vue
index d60aaacb..34819c64 100644
--- a/frontend/pages/label/[id].vue
+++ b/frontend/pages/label/[id].vue
@@ -12,6 +12,7 @@
   import { Separator } from "@/components/ui/separator";
   import ColorSelector from "@/components/Form/ColorSelector.vue";
   import { getContrastTextColor } from "~/lib/utils";
+  import { DialogID } from "~/components/ui/dialog-provider/utils";
 
   definePageMeta({
     middleware: ["auth"],
@@ -66,7 +67,7 @@
     updateData.name = label.value?.name || "";
     updateData.description = label.value?.description || "";
     updateData.color = "";
-    openDialog("update-label");
+    openDialog(DialogID.UpdateLabel);
   }
 
   async function update() {
@@ -81,7 +82,7 @@
 
     toast.success(t("labels.toast.label_updated"));
     label.value = data;
-    closeDialog("update-label");
+    closeDialog(DialogID.UpdateLabel);
     updating.value = false;
   }
 
@@ -111,7 +112,7 @@
 
 <template>
   <!-- Update Dialog -->
-  <Dialog dialog-id="update-label">
+  <Dialog :dialog-id="DialogID.UpdateLabel">
     <DialogContent>
       <DialogHeader>
         <DialogTitle> {{ $t("labels.update_label") }} </DialogTitle>
diff --git a/frontend/pages/location/[id].vue b/frontend/pages/location/[id].vue
index 6554e40f..94e16add 100644
--- a/frontend/pages/location/[id].vue
+++ b/frontend/pages/location/[id].vue
@@ -20,6 +20,7 @@
   import { Button } from "@/components/ui/button";
   import { Badge } from "@/components/ui/badge";
   import { Separator } from "@/components/ui/separator";
+  import { DialogID } from "~/components/ui/dialog-provider/utils";
 
   definePageMeta({
     middleware: ["auth"],
@@ -82,7 +83,7 @@
   function openUpdate() {
     updateData.name = location.value?.name || "";
     updateData.description = location.value?.description || "";
-    openDialog("update-location");
+    openDialog(DialogID.UpdateLocation);
   }
 
   async function update() {
@@ -98,7 +99,7 @@
 
     toast.success(t("locations.toast.location_updated"));
     location.value = data;
-    closeDialog("update-location");
+    closeDialog(DialogID.UpdateLocation);
     updating.value = false;
   }
 
@@ -128,7 +129,7 @@
 <template>
   <div>
     <!-- Update Dialog -->
-    <Dialog dialog-id="update-location">
+    <Dialog :dialog-id="DialogID.UpdateLocation">
       <DialogContent>
         <DialogHeader>
           <DialogTitle> {{ $t("locations.update_location") }} </DialogTitle>
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 101cacda..3e826e92 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -20,6 +20,7 @@
   import { badgeVariants } from "@/components/ui/badge";
   import LanguageSelector from "~/components/App/LanguageSelector.vue";
   import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
+  import { DialogID } from "~/components/ui/dialog-provider/utils";
 
   const { t } = useI18n();
 
@@ -184,7 +185,7 @@
     }
 
     toast.success(t("profile.toast.password_changed"));
-    closeDialog("change-password");
+    closeDialog(DialogID.ChangePassword);
     passwordChange.new = "";
     passwordChange.current = "";
     passwordChange.loading = false;
@@ -218,7 +219,7 @@
       };
     }
 
-    openDialog("create-notifier");
+    openDialog(DialogID.CreateNotifier);
   }
 
   async function createNotifier() {
@@ -242,7 +243,7 @@
     }
 
     notifier.value = null;
-    closeDialog("create-notifier");
+    closeDialog(DialogID.CreateNotifier);
 
     await notifiers.refresh();
   }
@@ -263,7 +264,7 @@
     }
 
     notifier.value = null;
-    closeDialog("create-notifier");
+    closeDialog(DialogID.CreateNotifier);
     targetID.value = "";
 
     await notifiers.refresh();
@@ -304,7 +305,7 @@
 
 <template>
   <div>
-    <Dialog dialog-id="changePassword">
+    <Dialog :dialog-id="DialogID.ChangePassword">
       <DialogContent>
         <DialogHeader>
           <DialogTitle> {{ $t("profile.change_password") }} </DialogTitle>
@@ -330,7 +331,7 @@
       </DialogContent>
     </Dialog>
 
-    <Dialog dialog-id="create-notifier">
+    <Dialog :dialog-id="DialogID.CreateNotifier">
       <DialogContent>
         <DialogHeader>
           <DialogTitle> {{ $t("profile.notifier_modal", { type: notifier != null }) }} </DialogTitle>
@@ -371,7 +372,7 @@
 
         <div class="p-4">
           <div class="flex gap-2">
-            <Button variant="secondary" size="sm" @click="openDialog('changePassword')">
+            <Button variant="secondary" size="sm" @click="openDialog(DialogID.ChangePassword)">
               {{ $t("profile.change_password") }}
             </Button>
             <Button variant="secondary" size="sm" @click="generateToken"> {{ $t("profile.gen_invite") }} </Button>
diff --git a/frontend/pages/tools.vue b/frontend/pages/tools.vue
index 7fb0ac3d..ea9143fb 100644
--- a/frontend/pages/tools.vue
+++ b/frontend/pages/tools.vue
@@ -37,7 +37,7 @@
           </BaseSectionHeader>
         </template>
         <div class="divide-y border-t px-6 pb-3">
-          <DetailAction @action="openDialog('import')">
+          <DetailAction @action="openDialog(DialogID.Import)">
             <template #title> {{ $t("tools.import_export_set.import") }} </template>
             <!-- eslint-disable-next-line vue/no-v-html -->
             <div v-html="DOMPurify.sanitize($t('tools.import_export_set.import_sub'))"></div>
@@ -105,6 +105,7 @@
   import MdiDatabase from "~icons/mdi/database";
   import MdiAlert from "~icons/mdi/alert";
   import { useDialog } from "~/components/ui/dialog-provider";
+  import { DialogID } from "~/components/ui/dialog-provider/utils";
 
   const { t } = useI18n();