Initial commit: Meshkee dashboards monorepo.

Includes business, customer, and super-admin apps with shared packages and production deploy scripts. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-12 06:40:57 +04:30 · 2026-07-22 13:48:53 +03:30
commit f566387c61
509 changed files with 62690 additions and 0 deletions
@@ -0,0 +1,188 @@
+import { useEffect, useState } from 'react'
+import { X } from 'lucide-react'
+import type { ProductVariant } from '../types/productVariant'
+import { buildVariantLabel } from '../types/productVariant'
+import type { ProductVariantAttribute } from '../services/productVariantService'
+import styles from './VariationsModal.module.css'
+
+interface CreateProductVariantModalProps {
+  open: boolean
+  attributes: ProductVariantAttribute[]
+  existingVariants: ProductVariant[]
+  isSubmitting?: boolean
+  error?: string
+  onClose: () => void
+  onSubmit: (payload: { variationId: string; optionId: string }) => void
+}
+
+const ANIMATION_MS = 220
+
+export function CreateProductVariantModal({
+  open,
+  attributes,
+  existingVariants,
+  isSubmitting = false,
+  error = '',
+  onClose,
+  onSubmit,
+}: CreateProductVariantModalProps) {
+  const [mounted, setMounted] = useState(open)
+  const [closing, setClosing] = useState(false)
+  const [variationId, setVariationId] = useState('')
+  const [optionId, setOptionId] = useState('')
+
+  const selectedVariation = attributes.find((item) => item.id === variationId)
+  const options = selectedVariation?.options ?? []
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true)
+      setClosing(false)
+      const first = attributes[0]
+      setVariationId(first?.id ?? '')
+      setOptionId(first?.options[0]?.id ?? '')
+    } else if (mounted) {
+      setClosing(true)
+      const timer = setTimeout(() => {
+        setMounted(false)
+        setClosing(false)
+      }, ANIMATION_MS)
+      return () => clearTimeout(timer)
+    }
+  }, [open, mounted, attributes])
+
+  useEffect(() => {
+    if (!selectedVariation) return
+    if (!options.some((item) => item.id === optionId)) {
+      setOptionId(options[0]?.id ?? '')
+    }
+  }, [selectedVariation, options, optionId])
+
+  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
+
+  const selectedOption = options.find((item) => item.id === optionId)
+  const selectionList = selectedVariation && selectedOption
+    ? [
+        {
+          attributeId: selectedVariation.id,
+          attributeName: selectedVariation.name,
+          optionId: selectedOption.id,
+          value: selectedOption.label,
+        },
+      ]
+    : []
+
+  const label = buildVariantLabel(selectionList)
+  const isDuplicate = existingVariants.some((variant) =>
+    variant.selections.some((selection) => selection.optionId === optionId),
+  )
+  const canSubmit =
+    Boolean(variationId && optionId && selectionList.length) &&
+    !isDuplicate &&
+    !isSubmitting
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!canSubmit) return
+    onSubmit({ variationId, optionId })
+  }
+
+  return (
+    <div
+      className={`${styles.overlay} ${styles.overlayNested} ${closing ? styles.overlayOut : styles.overlayIn}`}
+      onClick={onClose}
+    >
+      <div
+        className={`${styles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="create-variant-title"
+      >
+        <div className={styles.header}>
+          <h3 id="create-variant-title" className={styles.title}>
+            Create Variation
+          </h3>
+          <button className={styles.closeBtn} onClick={onClose} aria-label="Close">
+            <X size={20} />
+          </button>
+        </div>
+
+        <form className={styles.body} onSubmit={handleSubmit}>
+          {attributes.length === 0 ? (
+            <p className={styles.emptyText}>
+              This product category has no variations. Add variations on the category first.
+            </p>
+          ) : (
+            <>
+              <div className={styles.field}>
+                <label htmlFor="variation-type">Variation</label>
+                <select
+                  id="variation-type"
+                  value={variationId}
+                  onChange={(e) => setVariationId(e.target.value)}
+                >
+                  {attributes.map((attr) => (
+                    <option key={attr.id} value={attr.id}>
+                      {attr.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className={styles.field}>
+                <label htmlFor="variation-value">Value</label>
+                <select
+                  id="variation-value"
+                  value={optionId}
+                  onChange={(e) => setOptionId(e.target.value)}
+                  disabled={!selectedVariation}
+                >
+                  {options.map((option) => (
+                    <option key={option.id} value={option.id}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </>
+          )}
+
+          {label && (
+            <div className={styles.preview}>
+              <span className={styles.previewLabel}>Preview:</span> {label}
+            </div>
+          )}
+
+          {isDuplicate && (
+            <p className={styles.errorText}>This variation value already exists.</p>
+          )}
+
+          {error && <p className={styles.errorText}>{error}</p>}
+
+          <div className={styles.actions}>
+            <button type="button" className={styles.cancelBtn} onClick={onClose}>
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className={styles.submitBtn}
+              disabled={!canSubmit || attributes.length === 0}
+            >
+              {isSubmitting ? 'Creating...' : 'Create'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}