fix: Correct Back Navigation & Use Existing Dialog Pattern! 🔧

## Issue #1: Back Button Navigation Fixed

**Problem:** Back button navigated too far to Notifications.tsx
**Root Cause:** Wrong route - should go to /staff or /customer page with templates tab

**Solution:**
- Detect if staff or customer event
- Navigate to `/settings/notifications/{staff|customer}?tab=templates`
- Staff.tsx and Customer.tsx read tab query param
- Auto-open templates tab on return

**Files:**
- `routes/Settings/Notifications/EditTemplate.tsx`
- `routes/Settings/Notifications/Staff.tsx`
- `routes/Settings/Notifications/Customer.tsx`

## Issue #2: Dialog Pattern - Use Existing, Dont Reinvent!

**Problem:** Created new DialogBody component, over-engineered
**Root Cause:** Didnt check existing dialog usage in project

**Solution:**
- Reverted dialog.tsx to original
- Use existing pattern from Shipping.tsx:
  ```tsx
  <DialogContent className="max-h-[90vh] overflow-y-auto">
  ```
- Simple, proven, works!

**Files:**
- `components/ui/dialog.tsx` - Reverted to original
- `components/ui/rich-text-editor.tsx` - Use existing pattern

**Lesson Learned:**
Always scan project for existing patterns before creating new ones!

Both issues fixed! ✅

admin-spa/src/components/ui/dialog.tsx

@@ -35,16 +35,14 @@ const DialogContent = React.forwardRef<
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
-      onPointerDownOutside={(e) => e.preventDefault()}
-      onInteractOutside={(e) => e.preventDefault()}
       className={cn(
-        "fixed left-[50%] top-[50%] z-[99999] flex flex-col w-full max-w-lg max-h-[90vh] translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-[99999] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground z-10">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -59,7 +57,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left px-6 pt-6 pb-4 border-b",
+      "flex flex-col space-y-1.5 text-center sm:text-left",
       className
     )}
     {...props}
@@ -73,7 +71,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 px-6 py-4 border-t mt-auto",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
       className
     )}
     {...props}
@@ -108,20 +106,6 @@ const DialogDescription = React.forwardRef<
 ))
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 
-const DialogBody = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex-1 overflow-y-auto px-6 py-4",
-      className
-    )}
-    {...props}
-  />
-)
-DialogBody.displayName = "DialogBody"
-
 export {
   Dialog,
   DialogPortal,
@@ -133,5 +117,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-  DialogBody,
 }