Improve product cards/pagination, Farsi locale fonts, and super-admin migrate UI.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/super-admin/src/components/AdminDomainGuard.tsx

@@ -1,10 +1,11 @@
-import type { ReactNode } from 'react'
+import { Outlet } from 'react-router-dom'
 import { getAdminDomain, isAllowedAdminHost } from '../lib/config'
 import styles from './AdminDomainGuard.module.css'
 
-export function AdminDomainGuard({ children }: { children: ReactNode }) {
+/** Protects manage-only routes. Public invoice routes stay outside this guard. */
+export function AdminDomainGuard() {
   if (isAllowedAdminHost()) {
-    return children
+    return <Outlet />
   }
 
   const expectedDomain = getAdminDomain()

apps/super-admin/src/components/ConfirmDeleteModal.module.css

@@ -1,13 +1,13 @@
 .overlay {
   position: fixed;
   inset: 0;
-  background: rgba(127, 29, 29, 0.2);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
+  background: rgba(127, 29, 29, 0.28);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 200;
+  z-index: 300;
   padding: 20px;
 }
 

apps/super-admin/src/components/ConfirmDeleteModal.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { AlertTriangle, X } from 'lucide-react'
 import styles from './ConfirmDeleteModal.module.css'
 
@@ -41,13 +42,18 @@ export function ConfirmDeleteModal({
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onCancel()
     }
+    const prevOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
     document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
+    return () => {
+      document.body.style.overflow = prevOverflow
+      document.removeEventListener('keydown', onKey)
+    }
   }, [mounted, closing, onCancel])
 
   if (!mounted) return null
 
-  return (
+  return createPortal(
     <div
       className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
       onClick={onCancel}
@@ -81,6 +87,7 @@ export function ConfirmDeleteModal({
           <X size={18} />
         </button>
       </div>
-    </div>
+    </div>,
+    document.body,
   )
 }

apps/super-admin/src/components/Modal.module.css

@@ -1,9 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  background: rgba(15, 23, 42, 0.25);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  background: rgba(15, 23, 42, 0.32);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -73,4 +73,3 @@
   flex: 1;
   min-height: 0;
 }
-

apps/super-admin/src/components/Modal.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import { createPortal } from 'react-dom'
 import { X } from 'lucide-react'
 import styles from './Modal.module.css'
 
@@ -18,17 +19,29 @@ export function Modal({ open, title, children, onClose, wide, xl }: ModalProps)
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onClose()
     }
+    const prevOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
     document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
+    return () => {
+      document.body.style.overflow = prevOverflow
+      document.removeEventListener('keydown', onKey)
+    }
   }, [open, onClose])
 
   if (!open) return null
 
   const sizeClass = xl ? styles.modalXl : wide ? styles.modalWide : ''
 
-  return (
-    <div className={styles.overlay} role="dialog" aria-modal="true" onClick={onClose}>
-      <div className={`${styles.modal} ${sizeClass}`} onClick={(e) => e.stopPropagation()}>
+  return createPortal(
+    <div
+      className={styles.overlay}
+      role="dialog"
+      aria-modal="true"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose()
+      }}
+    >
+      <div className={`${styles.modal} ${sizeClass}`} onMouseDown={(e) => e.stopPropagation()}>
         <div className={styles.header}>
           <h3 className={styles.title}>{title}</h3>
           <button type="button" className={styles.closeBtn} onClick={onClose} aria-label="Close">
@@ -37,7 +50,7 @@ export function Modal({ open, title, children, onClose, wide, xl }: ModalProps)
         </div>
         <div className={styles.body}>{children}</div>
       </div>
-    </div>
+    </div>,
+    document.body,
   )
 }
-

apps/super-admin/src/components/RouteErrorBoundary.tsx

@@ -0,0 +1,56 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+}
+
+interface State {
+  error: Error | null
+}
+
+export class RouteErrorBoundary extends Component<Props, State> {
+  state: State = { error: null }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('Route render error:', error, info.componentStack)
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ padding: 24, maxWidth: 640 }}>
+          <h2 style={{ marginBottom: 8 }}>Something went wrong</h2>
+          <p style={{ color: '#b91c1c', marginBottom: 12 }}>{this.state.error.message}</p>
+          <pre
+            style={{
+              whiteSpace: 'pre-wrap',
+              fontSize: 12,
+              background: 'rgba(15,23,42,0.06)',
+              padding: 12,
+              borderRadius: 8,
+              overflow: 'auto',
+            }}
+          >
+            {this.state.error.stack}
+          </pre>
+          <button
+            type="button"
+            style={{ marginTop: 16 }}
+            onClick={() => {
+              this.setState({ error: null })
+              window.location.assign('/businesses')
+            }}
+          >
+            Reload businesses
+          </button>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}