Frontend Vite Modals

Modals & Dialogs

Radix Dialog (create/edit)

<Dialog open={open}
  <DialogContent>
    <DialogHeader><DialogTitle>Create Item</DialogTitle></DialogHeader>
    {/* form */}
    <DialogFooter>
      <Button => setOpen(false)}>Cancel</Button>
      <Button
    </DialogFooter>
  </DialogContent>
</Dialog>

Used for: inline CRUD on list pages (box-color, coupon), global CreateOrderModal.

AlertDialog (destructive confirm)

<AlertDialog open={!!deleteId}>
  <AlertDialogContent>
    <AlertDialogTitle>Delete?</AlertDialogTitle>
    <AlertDialogAction
    <AlertDialogCancel>Cancel</AlertDialogCancel>
  </AlertDialogContent>
</AlertDialog>

Detail Modals (read-only)

OrderDetailsModal, ProductDetailsModal, LogDetailsModal:

• Large scrollable DialogContent
• Fetch by ID when opened
• Cross-links to storefront via VITE_FRONTEND_URL
• Sub-modals for payment/delivery info

Global FAB

dashboard-layout.tsx — floating + button opens CreateOrderModal for order handlers.

Deep-Link Modal

// URL ?orderId=123 → open OrderDetailsModal
// Closing removes param from URL

Info Modals

Small explanatory dialogs: PaymentMethodInfoModal, DateTimeInfoModal — icon button triggers.

Inline vs Dedicated Page

| Simple entity (colors, tags) | Dialog on list page | | Complex entity (product, category) | Dedicated create/edit page |