Add business workshop management UI with Jalali scheduling and shared dashboard polish.

Includes workshop list/edit/details, registrations modal, category tree, shared EmptyState/RichTextEditor/toasts, and fixes for the Jalali date picker and thumbnail field layout. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-22 12:22:27 +03:30
parent 89269dff04
commit d5aca8bea7
76 changed files with 4719 additions and 974 deletions
@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { X } from 'lucide-react'
+import { useLocale } from '@meshkee/dashboard-ui'
+import type { BusinessCustomer } from '../services/customerService'
+import { useT } from '../i18n/useT'
+import { CustomerSearchSelect } from './CustomerSearchSelect'
+import modalStyles from './VariationsModal.module.css'
+import styles from './AddWorkshopRegistrationModal.module.css'
+
+interface AddWorkshopRegistrationModalProps {
+  open: boolean
+  excludeIds: string[]
+  isAdding: boolean
+  error?: string
+  onClose: () => void
+  onPick: (customer: BusinessCustomer) => void
+}
+
+const ANIMATION_MS = 220
+
+export function AddWorkshopRegistrationModal({
+  open,
+  excludeIds,
+  isAdding,
+  error = '',
+  onClose,
+  onPick,
+}: AddWorkshopRegistrationModalProps) {
+  const t = useT()
+  const { locale } = useLocale()
+  const isFa = locale === 'fa'
+  const [mounted, setMounted] = useState(open)
+  const [closing, setClosing] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true)
+      setClosing(false)
+    } else if (mounted) {
+      setClosing(true)
+      const timer = setTimeout(() => {
+        setMounted(false)
+        setClosing(false)
+      }, ANIMATION_MS)
+      return () => clearTimeout(timer)
+    }
+  }, [open, mounted])
+
+  useEffect(() => {
+    if (!mounted || closing) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [mounted, closing, onClose])
+
+  if (!mounted) return null
+
+  return createPortal(
+    <div
+      className={`${modalStyles.overlay} ${modalStyles.overlayNested} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
+      onClick={onClose}
+    >
+      <div
+        className={`${modalStyles.modal} ${styles.modal} ${closing ? modalStyles.modalOut : modalStyles.modalIn}`}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="add-workshop-registration-title"
+        lang={isFa ? 'fa' : 'en'}
+        dir={isFa ? 'rtl' : 'ltr'}
+      >
+        <div className={modalStyles.header}>
+          <h3 id="add-workshop-registration-title" className={modalStyles.title}>
+            {t('workshop.registrations.add')}
+          </h3>
+          <button
+            type="button"
+            className={modalStyles.closeBtn}
+            onClick={onClose}
+            aria-label={t('common.close')}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className={styles.body}>
+          {error ? (
+            <p className={styles.error} role="alert">
+              {error}
+            </p>
+          ) : null}
+
+          <div className={modalStyles.field}>
+            <label htmlFor="workshop-registration-customer-search">
+              {t('workshop.registrations.searchLabel')}
+            </label>
+            <CustomerSearchSelect
+              id="workshop-registration-customer-search"
+              value={null}
+              onChange={() => undefined}
+              onPick={onPick}
+              excludeIds={excludeIds}
+              disabled={isAdding}
+              placeholder={t('workshop.registrations.searchPlaceholder')}
+            />
+          </div>
+
+          <p className={styles.hint}>{t('workshop.registrations.searchHint')}</p>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}