Add store-product Excel bulk edit and polish the business dashboard.

Export/import price and stock from Store Products, keep card order after saves, localize variations, and drop unused website nav items.

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

apps/business/src/components/VariationsModal.tsx

@@ -1,10 +1,15 @@
 import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Plus, X } from 'lucide-react'
+import { useLocale } from '@meshkee/dashboard-ui'
+import { useT } from '../i18n/useT'
+import type { BusinessMessageKey } from '../i18n/messages'
 import type { Variation, VariationType } from '../types/variation'
+import { COLOR_OPTIONS } from '../types/variation'
 import { createId } from '../utils/id'
 import { textLocaleAttrs } from '../utils/textLocale'
 import { AddVariationModal } from './AddVariationModal'
+import { Tooltip } from './Tooltip'
 import styles from './VariationsModal.module.css'
 
 interface VariationsModalProps {
@@ -28,6 +33,9 @@ export function VariationsModal({
   onChange,
   onSave,
 }: VariationsModalProps) {
+  const t = useT()
+  const { locale } = useLocale()
+  const isFa = locale === 'fa'
   const [mounted, setMounted] = useState(open)
   const [closing, setClosing] = useState(false)
   const [addOpen, setAddOpen] = useState(false)
@@ -74,9 +82,23 @@ export function VariationsModal({
   }
 
   function typeLabel(type: VariationType) {
-    if (type === 'color') return 'Color'
-    if (type === 'size') return 'Size'
-    return 'Custom'
+    if (type === 'color') return t('categories.variations.type.color')
+    if (type === 'size') return t('categories.variations.type.size')
+    return t('categories.variations.type.custom')
+  }
+
+  function variationTitle(variation: Variation) {
+    if (variation.type === 'color' || variation.type === 'size') {
+      return typeLabel(variation.type)
+    }
+    return variation.name
+  }
+
+  function localizeValue(value: string) {
+    if ((COLOR_OPTIONS as string[]).includes(value)) {
+      return t(`categories.variations.color.${value}` as BusinessMessageKey)
+    }
+    return value
   }
 
   return createPortal(
@@ -91,11 +113,13 @@ export function VariationsModal({
           role="dialog"
           aria-modal="true"
           aria-labelledby="variations-modal-title"
+          lang={isFa ? 'fa' : 'en'}
+          dir={isFa ? 'rtl' : 'ltr'}
         >
           <div className={styles.header}>
             <div>
               <h3 id="variations-modal-title" className={styles.title}>
-                Variations
+                {t('categories.variations.title')}
               </h3>
               {categoryName && (
                 <p
@@ -107,7 +131,7 @@ export function VariationsModal({
                 </p>
               )}
             </div>
-            <button className={styles.closeBtn} onClick={onClose} aria-label="Close">
+            <button className={styles.closeBtn} onClick={onClose} aria-label={t('common.close')}>
               <X size={20} />
             </button>
           </div>
@@ -115,8 +139,10 @@ export function VariationsModal({
           <div className={styles.body}>
             <div className={styles.list}>
               {list.map((variation) => {
-                const nameLocale = textLocaleAttrs(variation.name)
-                const valuesText = variation.values.join(' · ') || 'No values'
+                const title = variationTitle(variation)
+                const nameLocale = textLocaleAttrs(title)
+                const valuesText =
+                  variation.values.map(localizeValue).join(' · ') || t('categories.variations.noValues')
                 const valuesLocale = textLocaleAttrs(valuesText)
                 return (
                 <div key={variation.id} className={styles.listItem}>
@@ -126,7 +152,7 @@ export function VariationsModal({
                       lang={nameLocale.lang}
                       dir={nameLocale.dir}
                     >
-                      {variation.name}
+                      {title}
                     </div>
                     <div
                       className={[styles.listItemValues, valuesLocale.className].filter(Boolean).join(' ')}
@@ -138,34 +164,36 @@ export function VariationsModal({
                   </div>
                   <div className={styles.listItemEnd}>
                     <span className={styles.listItemType}>{typeLabel(variation.type)}</span>
-                    <button
-                      type="button"
-                      className={styles.removeRowBtn}
-                      onClick={() => handleRemove(variation.id)}
-                      aria-label={`Remove ${variation.name}`}
-                    >
-                      <X size={16} />
-                    </button>
+                    <Tooltip label={t('categories.variations.remove')}>
+                      <button
+                        type="button"
+                        className={styles.removeRowBtn}
+                        onClick={() => handleRemove(variation.id)}
+                        aria-label={t('categories.variations.remove')}
+                      >
+                        <X size={16} />
+                      </button>
+                    </Tooltip>
                   </div>
                 </div>
                 )
               })}
               {!list.length && (
-                <p className={styles.emptyText}>No variations yet. Add color, size, or custom options.</p>
+                <p className={styles.emptyText}>{t('categories.variations.empty')}</p>
               )}
             </div>
 
             <button type="button" className={styles.addBtn} onClick={() => setAddOpen(true)}>
               <Plus size={18} />
-              Add Variation
+              {t('categories.variations.add')}
             </button>
 
             <div className={styles.actions}>
               <button type="button" className={styles.cancelBtn} onClick={onClose} disabled={isSaving}>
-                Cancel
+                {t('categories.modal.cancel')}
               </button>
               <button type="button" className={styles.submitBtn} onClick={onSave} disabled={isSaving}>
-                {isSaving ? 'Saving…' : 'Save variations'}
+                {isSaving ? t('categories.variations.saving') : t('categories.variations.save')}
               </button>
             </div>
           </div>