Add custom color picker, move website link to store items, and fix sidebar logo aspect.

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

apps/business/src/components/AddVariationModal.tsx

@@ -3,10 +3,10 @@ import { createPortal } from 'react-dom'
 import { Plus, Search, X } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
 import { useT } from '../i18n/useT'
-import type { BusinessMessageKey } from '../i18n/messages'
+import { COLOR_PRESETS, getColorHex, normalizeColorName } from '../data/colorPresets'
-import { COLOR_PRESETS } from '../data/colorPresets'
 import type { Variation, VariationType } from '../types/variation'
-import { SIZE_OPTIONS, normalizeColorNames } from '../types/variation'
+import { SIZE_OPTIONS } from '../types/variation'
+import { localizeVariationOptionLabel } from '../utils/localizeVariationOption'
 import { Tooltip } from './Tooltip'
 import styles from './VariationsModal.module.css'
 
@@ -18,15 +18,42 @@ interface AddVariationModalProps {
   initial?: Variation | null
 }
 
+interface SelectedColor {
+  label: string
+  hex: string
+}
+
 const ANIMATION_MS = 220
+const DEFAULT_CUSTOM_HEX = '#64748B'
 
 function seedCustomValues(values: string[]) {
   const trimmed = values.map((value) => value.trim()).filter(Boolean)
   return trimmed.length ? trimmed : ['']
 }
 
-function colorLabelKey(name: string): BusinessMessageKey {
+function normalizeHex(value: string): string {
-  return `categories.variations.color.${name}` as BusinessMessageKey
+  const trimmed = value.trim()
+  if (/^#[0-9a-fA-F]{6}$/.test(trimmed)) return trimmed.toUpperCase()
+  if (/^[0-9a-fA-F]{6}$/.test(trimmed)) return `#${trimmed.toUpperCase()}`
+  return DEFAULT_CUSTOM_HEX
+}
+
+function colorsFromInitial(initial: Variation): SelectedColor[] {
+  return initial.values
+    .map((raw, index) => {
+      const label = raw.trim()
+      if (!label) return null
+      const canonical = normalizeColorName(label)
+      const provided = initial.colorHexes?.[index]
+      const hex =
+        (provided && /^#[0-9a-fA-F]{6}$/.test(provided.trim())
+          ? provided.trim().toUpperCase()
+          : null) ??
+        getColorHex(canonical) ??
+        DEFAULT_CUSTOM_HEX
+      return { label: canonical, hex }
+    })
+    .filter((item): item is SelectedColor => item !== null)
 }
 
 export function AddVariationModal({ open, onClose, onSubmit, initial = null }: AddVariationModalProps) {
@@ -38,10 +65,13 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
   const [closing, setClosing] = useState(false)
   const [type, setType] = useState<VariationType>('color')
   const [customName, setCustomName] = useState('')
-  const [selectedColors, setSelectedColors] = useState<string[]>([])
+  const [selectedColors, setSelectedColors] = useState<SelectedColor[]>([])
   const [selectedSizes, setSelectedSizes] = useState<string[]>([])
   const [customValues, setCustomValues] = useState<string[]>([''])
   const [colorQuery, setColorQuery] = useState('')
+  const [customColorName, setCustomColorName] = useState('')
+  const [customColorHex, setCustomColorHex] = useState(DEFAULT_CUSTOM_HEX)
+  const [customColorError, setCustomColorError] = useState('')
   const valueInputRefs = useRef<(HTMLInputElement | null)[]>([])
   const pendingFocusIndex = useRef<number | null>(null)
 
@@ -56,12 +86,13 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
       setMounted(true)
       setClosing(false)
       setColorQuery('')
+      setCustomColorName('')
+      setCustomColorHex(DEFAULT_CUSTOM_HEX)
+      setCustomColorError('')
       if (initial) {
         setType(initial.type)
         setCustomName(initial.type === 'custom' ? initial.name : '')
-        setSelectedColors(
+        setSelectedColors(initial.type === 'color' ? colorsFromInitial(initial) : [])
-          initial.type === 'color' ? normalizeColorNames(initial.values) : [],
-        )
         setSelectedSizes(initial.type === 'size' ? [...initial.values] : [])
         setCustomValues(
           initial.type === 'custom' ? seedCustomValues(initial.values) : [''],
@@ -92,26 +123,67 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
     return () => document.removeEventListener('keydown', onKey)
   }, [mounted, closing, onClose])
 
+  const selectedColorLabels = useMemo(
+    () => new Set(selectedColors.map((color) => color.label.toLowerCase())),
+    [selectedColors],
+  )
+
   const filteredColors = useMemo(() => {
     const q = colorQuery.trim().toLowerCase()
     if (!q) return COLOR_PRESETS
     return COLOR_PRESETS.filter((color) => {
       const en = color.name.toLowerCase()
-      const fa = t(colorLabelKey(color.name)).toLowerCase()
+      const fa = localizeVariationOptionLabel(color.name, t).toLowerCase()
       return en.includes(q) || fa.includes(q)
     })
   }, [colorQuery, t])
 
   if (!mounted) return null
 
-  function toggleOption(value: string, selected: string[], setSelected: (v: string[]) => void) {
+  function togglePresetColor(name: string, hex: string) {
-    setSelected(
+    setSelectedColors((prev) => {
-      selected.includes(value)
+      const exists = prev.some((item) => item.label === name)
-        ? selected.filter((item) => item !== value)
+      if (exists) return prev.filter((item) => item.label !== name)
-        : [...selected, value],
+      return [...prev, { label: name, hex }]
+    })
+    setCustomColorError('')
+  }
+
+  function removeSelectedColor(label: string) {
+    setSelectedColors((prev) => prev.filter((item) => item.label !== label))
+  }
+
+  function toggleSize(value: string) {
+    setSelectedSizes((prev) =>
+      prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value],
     )
   }
 
+  function addCustomColor() {
+    const label = customColorName.trim()
+    if (!label) {
+      setCustomColorError(t('categories.variations.customColorNameRequired'))
+      return
+    }
+
+    const hex = normalizeHex(customColorHex)
+    const key = label.toLowerCase()
+    const canonical = normalizeColorName(label)
+    const alreadySelected =
+      selectedColorLabels.has(key) ||
+      selectedColorLabels.has(canonical.toLowerCase())
+
+    if (alreadySelected) {
+      setCustomColorError(t('categories.variations.customColorExists'))
+      return
+    }
+
+    setSelectedColors((prev) => [...prev, { label, hex }])
+    setCustomColorName('')
+    setCustomColorHex(DEFAULT_CUSTOM_HEX)
+    setCustomColorError('')
+  }
+
   function updateCustomValue(index: number, value: string) {
     setCustomValues((prev) => prev.map((v, i) => (i === index ? value : v)))
   }
@@ -142,7 +214,12 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
     e.preventDefault()
 
     if (type === 'color') {
-      onSubmit({ name: t('categories.variations.type.color'), type: 'color', values: selectedColors })
+      onSubmit({
+        name: t('categories.variations.type.color'),
+        type: 'color',
+        values: selectedColors.map((color) => color.label),
+        colorHexes: selectedColors.map((color) => color.hex),
+      })
     } else if (type === 'size') {
       onSubmit({ name: t('categories.variations.type.size'), type: 'size', values: selectedSizes })
     } else {
@@ -224,27 +301,22 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
               </div>
               {selectedColors.length > 0 ? (
                 <div className={styles.selectedColors}>
-                  {selectedColors.map((color) => {
+                  {selectedColors.map((color) => (
-                    const preset = COLOR_PRESETS.find((item) => item.name === color)
-                    return (
                     <button
-                        key={color}
+                      key={color.label}
                       type="button"
                       className={`${styles.chip} ${styles.chipSelected}`}
-                        onClick={() =>
+                      onClick={() => removeSelectedColor(color.label)}
-                          toggleOption(color, selectedColors, setSelectedColors)
-                        }
                     >
                       <span
                         className={styles.colorSwatch}
-                          style={{ backgroundColor: preset?.hex ?? '#94a3b8' }}
+                        style={{ backgroundColor: color.hex }}
                         aria-hidden="true"
                       />
-                        {t(colorLabelKey(color))}
+                      {localizeVariationOptionLabel(color.label, t)}
                       <X size={12} aria-hidden="true" />
                     </button>
-                    )
+                  ))}
-                  })}
                 </div>
               ) : null}
               <div className={styles.chipGrid}>
@@ -256,22 +328,67 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
                       key={color.name}
                       type="button"
                       className={`${styles.chip} ${
-                        selectedColors.includes(color.name) ? styles.chipSelected : ''
+                        selectedColorLabels.has(color.name.toLowerCase())
+                          ? styles.chipSelected
+                          : ''
                       }`}
-                      onClick={() =>
+                      onClick={() => togglePresetColor(color.name, color.hex)}
-                        toggleOption(color.name, selectedColors, setSelectedColors)
-                      }
                     >
                       <span
                         className={styles.colorSwatch}
                         style={{ backgroundColor: color.hex }}
                         aria-hidden="true"
                       />
-                      {t(colorLabelKey(color.name))}
+                      {localizeVariationOptionLabel(color.name, t)}
                     </button>
                   ))
                 )}
               </div>
+
+              <div className={styles.customColorBlock}>
+                <span className={styles.customColorTitle}>
+                  {t('categories.variations.addCustomColor')}
+                </span>
+                <div className={styles.customColorRow}>
+                  <input
+                    type="text"
+                    className={styles.customColorNameInput}
+                    value={customColorName}
+                    onChange={(e) => {
+                      setCustomColorName(e.target.value)
+                      if (customColorError) setCustomColorError('')
+                    }}
+                    placeholder={t('categories.variations.customColorNamePlaceholder')}
+                    aria-label={t('categories.variations.customColorName')}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault()
+                        addCustomColor()
+                      }
+                    }}
+                  />
+                  <label className={styles.customColorPickerLabel}>
+                    <span className={styles.srOnly}>{t('categories.variations.customColorHex')}</span>
+                    <input
+                      type="color"
+                      className={styles.customColorPicker}
+                      value={customColorHex}
+                      onChange={(e) => setCustomColorHex(normalizeHex(e.target.value))}
+                    />
+                  </label>
+                  <button
+                    type="button"
+                    className={styles.addValueBtn}
+                    onClick={addCustomColor}
+                  >
+                    <Plus size={14} />
+                    {t('categories.variations.addCustomColorBtn')}
+                  </button>
+                </div>
+                {customColorError ? (
+                  <p className={styles.customColorError}>{customColorError}</p>
+                ) : null}
+              </div>
             </div>
           )}
 
@@ -284,7 +401,7 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
                     key={size}
                     type="button"
                     className={`${styles.chip} ${selectedSizes.includes(size) ? styles.chipSelected : ''}`}
-                    onClick={() => toggleOption(size, selectedSizes, setSelectedSizes)}
+                    onClick={() => toggleSize(size)}
                   >
                     {size}
                   </button>

apps/business/src/components/CreateProductVariantModal.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { X } from 'lucide-react'
+import { useT } from '../i18n/useT'
 import type { ProductVariant } from '../types/productVariant'
 import { buildVariantLabel } from '../types/productVariant'
 import type { ProductVariantAttribute } from '../services/productVariantService'
+import { localizeVariationOptionLabel } from '../utils/localizeVariationOption'
 import styles from './VariationsModal.module.css'
 
 interface CreateProductVariantModalProps {
@@ -27,6 +29,7 @@ export function CreateProductVariantModal({
   onClose,
   onSubmit,
 }: CreateProductVariantModalProps) {
+  const t = useT()
   const [mounted, setMounted] = useState(open)
   const [closing, setClosing] = useState(false)
   const [variationId, setVariationId] = useState('')
@@ -150,7 +153,7 @@ export function CreateProductVariantModal({
                 >
                   {options.map((option) => (
                     <option key={option.id} value={option.id}>
-                      {option.label}
+                      {localizeVariationOptionLabel(option.label, t)}
                     </option>
                   ))}
                 </select>

apps/business/src/components/CreateStoreItemsModal.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { PackagePlus, Plus, X } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
 import { useToast } from '../context/ToastContext'
 import { useT } from '../i18n/useT'
 import { ApiError } from '../lib/api'
-import { listAllProducts } from '../services/productService'
+import { listAllProducts, listProducts } from '../services/productService'
 import {
   getProductVariationValues,
   type ProductVariationSelection,
@@ -22,11 +22,15 @@ import {
   getVariationOptions,
   type StoreItemDraftRow,
 } from '../utils/storeItemRows'
+import { localizeVariationOptionLabel } from '../utils/localizeVariationOption'
 import {
   ConfirmBulkAddStoreItemsModal,
   type BulkAddResult,
 } from './ConfirmBulkAddStoreItemsModal'
-import { ProductSearchSelect } from './ProductSearchSelect'
+import {
+  ProductSearchSelect,
+  type ProductSearchOption,
+} from './ProductSearchSelect'
 import { Tooltip } from './Tooltip'
 import modalStyles from './VariationsModal.module.css'
 import rowStyles from './CreateStoreItemsModal.module.css'
@@ -40,6 +44,7 @@ interface CreateStoreItemsModalProps {
 }
 
 const ANIMATION_MS = 220
+const PRODUCT_SEARCH_PAGE_SIZE = 20
 
 export function CreateStoreItemsModal({
   open,
@@ -53,21 +58,29 @@ export function CreateStoreItemsModal({
   const { showToast } = useToast()
   const [mounted, setMounted] = useState(open)
   const [closing, setClosing] = useState(false)
-  const [products, setProducts] = useState<{ id: string; title: string; nameFa: string }[]>([])
+  const [searchResults, setSearchResults] = useState<ProductSearchOption[]>([])
+  const [selectedProduct, setSelectedProduct] = useState<ProductSearchOption | null>(null)
   const [productId, setProductId] = useState('')
   const [isUsed, setIsUsed] = useState(false)
   const [variations, setVariations] = useState<ProductVariationSelection[]>([])
   const [rows, setRows] = useState<StoreItemDraftRow[]>([])
-  const [isLoadingProducts, setIsLoadingProducts] = useState(false)
+  const [isSearchingProducts, setIsSearchingProducts] = useState(false)
   const [isLoadingVariations, setIsLoadingVariations] = useState(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [isBulkCreating, setIsBulkCreating] = useState(false)
   const [bulkConfirmOpen, setBulkConfirmOpen] = useState(false)
   const [bulkResult, setBulkResult] = useState<BulkAddResult | null>(null)
   const [error, setError] = useState('')
+  const searchControllerRef = useRef<AbortController | null>(null)
 
   const busy = isSubmitting || isBulkCreating
 
+  const productOptions = useMemo(() => {
+    if (!selectedProduct) return searchResults
+    if (searchResults.some((item) => item.id === selectedProduct.id)) return searchResults
+    return [selectedProduct, ...searchResults]
+  }, [searchResults, selectedProduct])
+
   const formVariations = useMemo(
     () => variations.filter((variation) => getVariationOptions(variation).length > 0),
     [variations],
@@ -120,6 +133,8 @@ export function CreateStoreItemsModal({
         setClosing(false)
         setProductId('')
         setIsUsed(false)
+        setSelectedProduct(null)
+        setSearchResults([])
         setVariations([])
         setRows([])
         setError('')
@@ -131,12 +146,53 @@ export function CreateStoreItemsModal({
   }, [open, mounted])
 
   useEffect(() => {
-    if (!open) return
+    if (!open) {
+      searchControllerRef.current?.abort()
+      return
+    }
+  }, [open])
+
+  const searchProducts = useCallback(
+    async (query: string) => {
+      searchControllerRef.current?.abort()
+
+      if (!query) {
+        setSearchResults([])
+        setIsSearchingProducts(false)
+        return
+      }
 
       const controller = new AbortController()
-    void loadProducts(controller.signal)
+      searchControllerRef.current = controller
-    return () => controller.abort()
+      setIsSearchingProducts(true)
-  }, [open])
+
+      try {
+        const data = await listProducts(1, PRODUCT_SEARCH_PAGE_SIZE, controller.signal, {
+          name: query,
+        })
+        if (controller.signal.aborted) return
+        setSearchResults(
+          data.items.map((item) => ({
+            id: item.id,
+            title: item.title,
+            nameFa: item.nameFa,
+          })),
+        )
+      } catch (err) {
+        if (err instanceof DOMException && err.name === 'AbortError') return
+        if (controller.signal.aborted) return
+        setSearchResults([])
+        if (err instanceof ApiError) {
+          setError(err.message)
+        } else {
+          setError(t('storeItems.create.errorProducts'))
+        }
+      } finally {
+        if (!controller.signal.aborted) setIsSearchingProducts(false)
+      }
+    },
+    [t],
+  )
 
   useEffect(() => {
     if (!productId) {
@@ -150,31 +206,6 @@ export function CreateStoreItemsModal({
     return () => controller.abort()
   }, [productId])
 
-  async function loadProducts(signal?: AbortSignal) {
-    setIsLoadingProducts(true)
-    setError('')
-
-    try {
-      const items = await listAllProducts(signal)
-      setProducts(
-        items.map((item) => ({
-          id: item.id,
-          title: item.title,
-          nameFa: item.nameFa,
-        })),
-      )
-    } catch (err) {
-      if (err instanceof DOMException && err.name === 'AbortError') return
-      if (err instanceof ApiError) {
-        setError(err.message)
-      } else {
-        setError(t('storeItems.create.errorProducts'))
-      }
-    } finally {
-      setIsLoadingProducts(false)
-    }
-  }
-
   async function loadVariations(nextProductId: string, signal?: AbortSignal) {
     setIsLoadingVariations(true)
     setError('')
@@ -215,6 +246,15 @@ export function CreateStoreItemsModal({
       return
     }
     setProductId(nextProductId)
+    if (!nextProductId) {
+      setSelectedProduct(null)
+      return
+    }
+    const match =
+      productOptions.find((item) => item.id === nextProductId) ??
+      searchResults.find((item) => item.id === nextProductId) ??
+      null
+    setSelectedProduct(match)
   }
 
   function updateRow(rowId: string, patch: Partial<StoreItemDraftRow>) {
@@ -300,7 +340,7 @@ export function CreateStoreItemsModal({
   }
 
   function openBulkConfirm() {
-    if (busy || isLoadingProducts || products.length === 0) return
+    if (busy) return
     setBulkResult(null)
     setBulkConfirmOpen(true)
   }
@@ -318,7 +358,7 @@ export function CreateStoreItemsModal({
   }
 
   async function handleAddAllProducts() {
-    if (isBulkCreating || isLoadingProducts) return
+    if (isBulkCreating) return
 
     setIsBulkCreating(true)
     setError('')
@@ -330,10 +370,7 @@ export function CreateStoreItemsModal({
     const skip = new Set(existingProductIds)
 
     try {
-      const catalog =
+      const catalog = (await listAllProducts()).map((item) => ({
-        products.length > 0
-          ? products
-          : (await listAllProducts()).map((item) => ({
         id: item.id,
         title: item.title,
         nameFa: item.nameFa,
@@ -415,11 +452,13 @@ export function CreateStoreItemsModal({
           <div className={modalStyles.field}>
             <ProductSearchSelect
               id="store-item-product"
-              options={products}
+              options={productOptions}
               value={productId}
               onChange={handleProductChange}
+              onQueryChange={(query) => void searchProducts(query)}
+              isSearching={isSearchingProducts}
               placeholder={t('storeItems.create.productPlaceholder')}
-              disabled={isLoadingProducts || busy}
+              disabled={busy}
               aria-label={t('storeItems.create.productPlaceholder')}
             />
           </div>
@@ -476,7 +515,7 @@ export function CreateStoreItemsModal({
                           <option value="">—</option>
                           {options.map((option) => (
                             <option key={option.id} value={option.id}>
-                              {option.label}
+                              {localizeVariationOptionLabel(option.label, t)}
                             </option>
                           ))}
                         </select>
@@ -551,7 +590,7 @@ export function CreateStoreItemsModal({
               type="button"
               className={rowStyles.footerBulkBtn}
               onClick={openBulkConfirm}
-              disabled={busy || isLoadingProducts || products.length === 0}
+              disabled={busy}
             >
               <PackagePlus size={16} />
               {t('storeItems.create.addAllProducts')}

apps/business/src/components/EditStoreItemsModal.tsx

@@ -19,6 +19,7 @@ import {
   getVariationOptions,
   type StoreItemDraftRow,
 } from '../utils/storeItemRows'
+import { localizeVariationOptionLabel } from '../utils/localizeVariationOption'
 import { Tooltip } from './Tooltip'
 import modalStyles from './VariationsModal.module.css'
 import rowStyles from './CreateStoreItemsModal.module.css'
@@ -343,7 +344,7 @@ export function EditStoreItemsModal({
                           <option value="">—</option>
                           {options.map((option) => (
                             <option key={option.id} value={option.id}>
-                              {option.label}
+                              {localizeVariationOptionLabel(option.label, t)}
                             </option>
                           ))}
                         </select>

apps/business/src/components/MultiSelectDropdown.module.css

@@ -13,7 +13,7 @@
   font-size: var(--field-font-size);
   font-family: inherit;
   color: var(--text-primary);
-  text-align: left;
+  text-align: start;
   background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);

apps/business/src/components/ProductCard.module.css

@@ -155,6 +155,10 @@
   border-radius: 50px;
   direction: rtl;
   unicode-bidi: plaintext;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
 }
 
 .bodyLtr {

apps/business/src/components/ProductCard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, type ReactNode } from 'react'
+import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import {
   Pencil,
@@ -7,7 +7,6 @@ import {
   Layers,
   ClipboardList,
   ImageOff,
-  ExternalLink,
   Info,
   MessageSquare,
   Search,
@@ -20,8 +19,6 @@ import { Tooltip } from './Tooltip'
 import { useTenantBranding } from '../context/TenantBrandingContext'
 import { hasBusinessModule } from '../utils/businessModules'
 import { formatProductCategoryChip } from '../services/productService'
-import { buildWebsiteContentUrl } from '../utils/websiteLinks'
-import { OpenOnWebsiteControl } from './OpenOnWebsiteControl'
 import { ProductCardOverflowMenu } from './ProductCardOverflowMenu'
 import styles from './ProductCard.module.css'
 
@@ -46,7 +43,6 @@ type CardAction = {
   onClick: () => void
   danger?: boolean
   badge?: number
-  render?: () => ReactNode
 }
 
 export function ProductCard({
@@ -75,7 +71,6 @@ export function ProductCard({
       : ''
     : product.nameFa
   const categoryLabel = formatProductCategoryChip(product, isFa)
-  const websiteUrl = buildWebsiteContentUrl('product', product)
   const imageSrc = product.image?.trim() || ''
   const [imageFailed, setImageFailed] = useState(false)
   const showImage = Boolean(imageSrc) && !imageFailed
@@ -91,15 +86,6 @@ export function ProductCard({
       icon: Pencil,
       onClick: () => onEdit(product.id),
     },
-    {
-      key: 'website',
-      label: t('common.viewOnWebsite'),
-      icon: ExternalLink,
-      onClick: () => {
-        if (websiteUrl) window.open(websiteUrl, '_blank', 'noopener,noreferrer')
-      },
-      render: () => <OpenOnWebsiteControl href={websiteUrl} />,
-    },
     ...(showTranslationControls
       ? [
           {
@@ -192,15 +178,15 @@ export function ProductCard({
             </>
           )}
           {categoryLabel ? (
-            <span className={styles.categoryChip}>{categoryLabel}</span>
+            <span className={styles.categoryChip} title={categoryLabel}>
+              {categoryLabel}
+            </span>
           ) : null}
         </div>
       </Link>
 
       <div className={styles.controls}>
         {primaryActions.map((action) => {
-          if (action.render) return <span key={action.key}>{action.render()}</span>
-
           const Icon = action.icon
           return (
             <Tooltip key={action.key} label={action.label}>

apps/business/src/components/ProductSearchSelect.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { ChevronDown, Search, X } from 'lucide-react'
+import { ChevronDown, Loader2, Search, X } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
 import { useT } from '../i18n/useT'
 import styles from './SearchableSelect.module.css'
 
+export const PRODUCT_SEARCH_DEBOUNCE_MS = 350
+
 export interface ProductSearchOption {
   id: string
   title: string
@@ -18,6 +20,13 @@ interface ProductSearchSelectProps {
   disabled?: boolean
   id?: string
   minSearchLength?: number
+  isSearching?: boolean
+  /**
+   * When set, typing is debounced and the parent fetches results.
+   * Local filtering is skipped.
+   */
+  onQueryChange?: (query: string) => void
+  debounceMs?: number
   'aria-label'?: string
 }
 
@@ -36,6 +45,9 @@ export function ProductSearchSelect({
   disabled = false,
   id,
   minSearchLength = 3,
+  isSearching = false,
+  onQueryChange,
+  debounceMs = PRODUCT_SEARCH_DEBOUNCE_MS,
   'aria-label': ariaLabel,
 }: ProductSearchSelectProps) {
   const t = useT()
@@ -45,20 +57,35 @@ export function ProductSearchSelect({
   const [query, setQuery] = useState('')
   const containerRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
+  const onQueryChangeRef = useRef(onQueryChange)
+  onQueryChangeRef.current = onQueryChange
 
   const selected = options.find((option) => option.id === value)
   const selectedLabel = selected ? formatProductLabel(selected, preferFa) : ''
+  const trimmedQuery = query.trim()
+  const canSearch = trimmedQuery.length >= minSearchLength
+
+  useEffect(() => {
+    const cb = onQueryChangeRef.current
+    if (!cb) return
+    if (!canSearch) {
+      cb('')
+      return
+    }
+    const timer = window.setTimeout(() => cb(trimmedQuery), debounceMs)
+    return () => window.clearTimeout(timer)
+  }, [canSearch, trimmedQuery, debounceMs])
 
   const filtered = useMemo(() => {
-    const trimmed = query.trim()
+    if (!canSearch) return []
-    if (trimmed.length < minSearchLength) return []
+    if (onQueryChange) return options
-    const q = trimmed.toLowerCase()
+    const q = trimmedQuery.toLowerCase()
     return options.filter(
       (option) =>
         option.title.toLowerCase().includes(q) ||
-        option.nameFa.includes(trimmed),
+        option.nameFa.includes(trimmedQuery),
     )
-  }, [options, query, minSearchLength])
+  }, [canSearch, onQueryChange, options, trimmedQuery])
 
   useEffect(() => {
     if (!open) return
@@ -76,13 +103,14 @@ export function ProductSearchSelect({
     onChange(id)
     setOpen(false)
     setQuery('')
+    onQueryChangeRef.current?.('')
   }
 
   function handleFocus() {
     if (!disabled) setOpen(true)
   }
 
-  const showDropdown = open && query.trim().length >= minSearchLength
+  const showDropdown = open && (canSearch || trimmedQuery.length > 0)
 
   return (
     <div className={styles.wrapper} ref={containerRef} dir={preferFa ? 'rtl' : 'ltr'}>
@@ -115,17 +143,19 @@ export function ProductSearchSelect({
             <X size={14} />
           </button>
         )}
+        {isSearching && open ? (
+          <Loader2 size={16} className={`${styles.chevron} ${styles.spin}`} />
+        ) : (
           <ChevronDown size={16} className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`} />
+        )}
       </div>
 
-      {showDropdown && (
+      {showDropdown && canSearch && (
         <ul className={`${styles.dropdown} ${styles.dropdownInFlow}`} role="listbox">
-          {filtered.length === 0 ? (
+          {isSearching && filtered.length === 0 ? (
-            <li className={styles.noResults}>
+            <li className={styles.noResults}>{t('storeItems.search.searching')}</li>
-              {options.length === 0
+          ) : filtered.length === 0 ? (
-                ? t('storeItems.search.noProducts')
+            <li className={styles.noResults}>{t('storeItems.search.noMatch')}</li>
-                : t('storeItems.search.noMatch')}
-            </li>
           ) : (
             filtered.map((option) => (
               <li key={option.id}>
@@ -172,7 +202,7 @@ export function ProductSearchSelect({
         </ul>
       )}
 
-      {open && query.trim().length > 0 && query.trim().length < minSearchLength && (
+      {open && trimmedQuery.length > 0 && trimmedQuery.length < minSearchLength && (
         <ul className={`${styles.dropdown} ${styles.dropdownInFlow}`}>
           <li className={styles.noResults}>
             {t('storeItems.search.minChars', { count: minSearchLength })}

apps/business/src/components/ProductVariantsModal.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { X } from 'lucide-react'
+import { useLocale } from '@meshkee/dashboard-ui'
+import { useT } from '../i18n/useT'
 import { ApiError } from '../lib/api'
 import {
   countSelectedOptions,
@@ -8,6 +10,7 @@ import {
   saveProductVariationValues,
   type ProductVariationSelection,
 } from '../services/productVariationService'
+import { localizeVariationOptionLabel } from '../utils/localizeVariationOption'
 import { MultiSelectDropdown } from './MultiSelectDropdown'
 import styles from './VariationsModal.module.css'
 
@@ -30,6 +33,9 @@ export function ProductVariantsModal({
   onClose,
   onVariantsChange,
 }: ProductVariantsModalProps) {
+  const t = useT()
+  const { locale } = useLocale()
+  const isFa = locale === 'fa'
   const [mounted, setMounted] = useState(open)
   const [closing, setClosing] = useState(false)
   const [variations, setVariations] = useState<ProductVariationSelection[]>([])
@@ -72,7 +78,7 @@ export function ProductVariantsModal({
       if (err instanceof ApiError) {
         setError(err.message)
       } else {
-        setError('Unable to load product variations.')
+        setError(t('products.variants.loadError'))
       }
     } finally {
       setIsLoading(false)
@@ -90,6 +96,12 @@ export function ProductVariantsModal({
 
   if (!mounted) return null
 
+  function variationLabel(variation: ProductVariationSelection) {
+    if (variation.type === 'color') return t('categories.variations.type.color')
+    if (variation.type === 'size') return t('categories.variations.type.size')
+    return variation.name
+  }
+
   function handleSelectionChange(variationId: string, optionIds: string[]) {
     setVariations((prev) =>
       prev.map((variation) =>
@@ -113,7 +125,7 @@ export function ProductVariantsModal({
       if (err instanceof ApiError) {
         setError(err.message)
       } else {
-        setError('Unable to save product variations.')
+        setError(t('products.variants.saveError'))
       }
     } finally {
       setIsSaving(false)
@@ -131,54 +143,63 @@ export function ProductVariantsModal({
         role="dialog"
         aria-modal="true"
         aria-labelledby="product-variants-title"
+        lang={isFa ? 'fa' : 'en'}
+        dir={isFa ? 'rtl' : 'ltr'}
       >
         <div className={styles.header}>
           <div>
             <h3 id="product-variants-title" className={styles.title}>
-              Product Variations
+              {t('products.variants.title')}
             </h3>
             {productName && <p className={styles.subtitle}>{productName}</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>
 
         <div className={styles.body}>
           {!categoryId && (
-            <p className={styles.errorText}>
+            <p className={styles.errorText}>{t('products.variants.needCategory')}</p>
-              Assign a category to this product before managing variations.
-            </p>
           )}
 
           {error && <p className={styles.errorText}>{error}</p>}
 
           {isLoading ? (
-            <p className={styles.emptyText}>Loading variations...</p>
+            <p className={styles.emptyText}>{t('products.variants.loading')}</p>
           ) : variations.length === 0 ? (
             <p className={styles.emptyText}>
               {categoryId
-                ? 'This category has no variations. Add variations on the category first.'
+                ? t('products.variants.emptyCategory')
-                : 'No variations available.'}
+                : t('products.variants.empty')}
             </p>
           ) : (
             <div className={styles.variationFields}>
-              {variations.map((variation) => (
+              {variations.map((variation) => {
+                const name = variationLabel(variation)
+                return (
                   <div key={variation.id} className={styles.field}>
-                  <label htmlFor={`variation-${variation.id}`}>{variation.name}</label>
+                    <label htmlFor={`variation-${variation.id}`}>{name}</label>
                     <MultiSelectDropdown
                       id={`variation-${variation.id}`}
                       options={variation.options.map((option) => ({
                         value: option.id,
-                      label: option.label,
+                        label: localizeVariationOptionLabel(option.label, t),
                       }))}
                       value={variation.selectedOptionIds}
-                    onChange={(optionIds) => handleSelectionChange(variation.id, optionIds)}
+                      onChange={(optionIds) =>
-                    placeholder={`Select ${variation.name.toLowerCase()} values`}
+                        handleSelectionChange(variation.id, optionIds)
+                      }
+                      placeholder={t('products.variants.selectValues', { name })}
                       disabled={isSaving}
                     />
                   </div>
-              ))}
+                )
+              })}
             </div>
           )}
 
@@ -189,7 +210,7 @@ export function ProductVariantsModal({
               onClick={onClose}
               disabled={isSaving}
             >
-              Cancel
+              {t('common.cancel')}
             </button>
             <button
               type="button"
@@ -197,13 +218,12 @@ export function ProductVariantsModal({
               onClick={() => void handleSave()}
               disabled={!categoryId || isLoading || isSaving || variations.length === 0}
             >
-              {isSaving ? 'Saving…' : 'Save variations'}
+              {isSaving ? t('products.variants.saving') : t('products.variants.save')}
             </button>
           </div>
         </div>
       </div>
-    </div>
+    </div>,
-  ,
     document.body,
   )
 }

apps/business/src/components/SearchableSelect.module.css

@@ -101,6 +101,16 @@
   z-index: auto;
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spin {
+  animation: spin 0.8s linear infinite;
+}
+
 @keyframes dropdownIn {
   from {
     opacity: 0;

apps/business/src/components/Sidebar.module.css

@@ -25,22 +25,24 @@
 
 .brandLogo {
   display: block;
-  width: 40px;
+  /* Same height as brandName + domain stack; width follows image aspect ratio */
-  height: 40px;
+  height: calc(13px * 1.2 + 2px + 11px * 1.2);
+  width: auto;
+  max-width: 7.5rem;
   object-fit: contain;
   flex-shrink: 0;
   background: transparent;
 }
 
 .brandLogoUploaded {
-  border-radius: 8px;
+  border-radius: 0;
-  object-fit: cover;
+  object-fit: contain;
-  background: var(--card-media-bg);
+  background: transparent;
 }
 
 .brandEditBtn {
-  width: 40px;
+  width: calc(13px * 1.2 + 2px + 11px * 1.2);
-  height: 40px;
+  height: calc(13px * 1.2 + 2px + 11px * 1.2);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -69,6 +71,7 @@
   font-weight: 500;
   color: var(--text-muted);
   margin-top: 2px;
+  line-height: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

apps/business/src/components/StoreItemCard.module.css

@@ -200,7 +200,8 @@
   justify-content: space-around;
 }
 
-.controlsLeft button {
+.controlsLeft button,
+.controlsLeft a {
   width: 32px;
   height: 32px;
   display: flex;
@@ -208,10 +209,12 @@
   justify-content: center;
   border-radius: 8px;
   color: var(--text-secondary);
+  text-decoration: none;
   transition: background 0.2s, color 0.2s;
 }
 
-.controlsLeft button:hover {
+.controlsLeft button:hover,
+.controlsLeft a:hover {
   background: rgba(var(--primary-rgb) / 0.1);
   color: var(--primary);
 }

apps/business/src/components/StoreItemCard.tsx

@@ -6,6 +6,8 @@ import {
   formatVariantCount,
   type StoreProductListing,
 } from '../utils/storeProductGroups'
+import { buildWebsiteContentUrl } from '../utils/websiteLinks'
+import { OpenOnWebsiteControl } from './OpenOnWebsiteControl'
 import { StoreItemPrice } from './StoreItemPrice'
 import { Tooltip } from './Tooltip'
 import styles from './StoreItemCard.module.css'
@@ -83,6 +85,14 @@ export function StoreItemCard({
   const imageSrc = listing.productImage?.trim() || ''
   const [imageFailed, setImageFailed] = useState(false)
   const showImage = Boolean(imageSrc) && !imageFailed
+  const websiteUrl =
+    listing.variantCount > 0
+      ? buildWebsiteContentUrl('product', {
+          id: listing.productId,
+          nameFa: listing.productNameFa,
+          nameEn: listing.productTitle,
+        })
+      : ''
 
   useEffect(() => {
     setImageFailed(false)
@@ -167,6 +177,7 @@ export function StoreItemCard({
                   <Pencil size={16} />
                 </button>
               </Tooltip>
+              <OpenOnWebsiteControl href={websiteUrl} />
               <Tooltip label={t('storeItems.card.discount')}>
                 <button
                   type="button"

apps/business/src/components/StoreItemPrice.module.css

@@ -1,28 +1,30 @@
-.priceChip {
+.price,
-  display: inline-block;
+.contactPrice,
-  padding: 3px 10px;
+.discountWrap {
-  font-size: 11px;
+  display: block;
-  font-weight: 600;
+  width: 100%;
-  color: var(--primary);
+  text-align: left;
-  background: rgba(var(--primary-rgb) / 0.12);
+  direction: ltr;
-  border-radius: 50px;
+}
+
+.price {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-primary);
 }
 
 .contactPrice {
-  display: inline-block;
+  font-size: 12px;
-  padding: 3px 10px;
-  font-size: 11px;
   font-weight: 600;
   font-family: var(--font-ui);
   color: var(--text-muted);
-  background: rgba(148, 163, 184, 0.14);
-  border-radius: 50px;
 }
 
 .discountWrap {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  align-items: flex-start;
 }
 
 .originalPrice {
@@ -36,12 +38,13 @@
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
+  justify-content: flex-start;
 }
 
 .salePrice {
   font-size: 12px;
   font-weight: 700;
-  color: #dc2626;
+  color: var(--text-primary);
 }
 
 .percent {

apps/business/src/components/StoreItemPrice.tsx

@@ -31,5 +31,5 @@ export function StoreItemPrice({ price, discountedPrice = null }: StoreItemPrice
     )
   }
 
-  return <span className={styles.priceChip}>{formatIrtPrice(price)}</span>
+  return <span className={styles.price}>{formatIrtPrice(price)}</span>
 }

apps/business/src/components/TechnicalFormAiPromptModal.tsx

@@ -18,6 +18,8 @@ export function buildTechnicalFormAiPrompt(categoryName: string) {
 
 همیشه در انتهای فرم یک فیلد «سایر ویژگی‌ها» از نوع multi_value در نظر گرفته می‌شود؛ خودت آن را نساز.
 
+اگر برای این دسته مناسب است، فیلدهای «ابعاد» و «وزن» را هم به‌صورت text اضافه کن (با واحد رایج در ایران در برچسب، مثلاً سانتی‌متر یا کیلوگرم). اگر برای دسته بی‌معناست، اضافه نکن.
+
 روی مشخصات و ویژگی‌هایی تمرکز کن که خریداران معمولاً هنگام مقایسه این نوع محصول بررسی می‌کنند.
 برچسب‌ها و گزینه‌ها را به فارسی بنویس.
 در صورت نیاز، لینک یک صفحه محصول نمونه را در ادامه اضافه کن (سیستم صفحه را باز می‌کند و فرم را بر اساس مشخصات واقعی آن می‌سازد).`

apps/business/src/components/TechnicalFormModal.module.css

@@ -18,7 +18,7 @@
 
 .fieldMainRow {
   display: grid;
-  grid-template-columns: 6fr 3fr 2fr 32px;
+  grid-template-columns: 6fr 3fr 2fr auto;
   gap: 8px;
   align-items: center;
 }
@@ -61,6 +61,18 @@
   align-items: center;
 }
 
+.rowActions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+}
+
+.rowActions button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
 .requiredCell {
   display: flex;
   align-items: center;

apps/business/src/components/TechnicalFormModal.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { Plus, Sparkles, Trash2, X } from 'lucide-react'
+import { ChevronDown, ChevronUp, Plus, Sparkles, Trash2, X } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
 import type { TechnicalFieldType, TechnicalFormFieldDraft } from '../types/technicalForm'
 import { useT } from '../i18n/useT'
@@ -112,6 +112,17 @@ export function TechnicalFormModal({
     onChange(fields.filter((field) => field.id !== fieldId))
   }
 
+  function moveField(fieldId: string, delta: -1 | 1) {
+    const index = fields.findIndex((field) => field.id === fieldId)
+    if (index < 0) return
+    const nextIndex = index + delta
+    if (nextIndex < 0 || nextIndex >= fields.length) return
+    const next = [...fields]
+    const [item] = next.splice(index, 1)
+    next.splice(nextIndex, 0, item)
+    onChange(next)
+  }
+
   function addField() {
     onChange([...fields, createEmptyField()])
   }
@@ -216,7 +227,7 @@ export function TechnicalFormModal({
           ) : (
             <>
               <div className={fieldStyles.fieldList}>
-                {fields.map((field) => (
+                {fields.map((field, index) => (
                   <div key={field.id} className={fieldStyles.fieldCard}>
                     <div className={fieldStyles.fieldMainRow}>
                       <input
@@ -265,7 +276,29 @@ export function TechnicalFormModal({
                         />
                         <span>{t('categories.technical.required')}</span>
                       </label>
-                      <div className={fieldStyles.removeCell}>
+                      <div className={fieldStyles.rowActions}>
+                        <Tooltip label={t('categories.technical.moveUp')}>
+                          <button
+                            type="button"
+                            className={styles.removeRowBtn}
+                            onClick={() => moveField(field.id, -1)}
+                            disabled={index === 0}
+                            aria-label={t('categories.technical.moveUp')}
+                          >
+                            <ChevronUp size={15} />
+                          </button>
+                        </Tooltip>
+                        <Tooltip label={t('categories.technical.moveDown')}>
+                          <button
+                            type="button"
+                            className={styles.removeRowBtn}
+                            onClick={() => moveField(field.id, 1)}
+                            disabled={index === fields.length - 1}
+                            aria-label={t('categories.technical.moveDown')}
+                          >
+                            <ChevronDown size={15} />
+                          </button>
+                        </Tooltip>
                         <Tooltip label={t('categories.technical.removeField')}>
                           <button
                             type="button"

apps/business/src/components/VariationsModal.module.css

@@ -280,34 +280,43 @@
 }
 
 .colorSearchWrap {
-  position: relative;
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
+  gap: 8px;
-}
-
-.colorSearchIcon {
-  position: absolute;
-  inset-inline-start: 12px;
-  color: var(--text-muted);
-  pointer-events: none;
-}
-
-.colorSearchInput {
-  width: 100%;
   min-height: var(--field-height);
-  padding: var(--field-padding-y) 36px;
+  margin-bottom: 10px;
-  font-size: var(--field-font-size);
+  padding: 0 var(--field-padding-x);
-  font-family: var(--font-ui);
-  color: var(--text-primary);
   background-color: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
-  outline: none;
   box-sizing: border-box;
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 
+.colorSearchWrap:focus-within {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
+}
+
+.colorSearchIcon {
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.colorSearchInput {
+  flex: 1;
+  min-width: 0;
+  min-height: calc(var(--field-height) - 2px);
+  padding: var(--field-padding-y) 0;
+  font-size: var(--field-font-size);
+  font-family: var(--font-ui);
+  color: var(--text-primary);
+  background: transparent;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
 .colorSearchInput::placeholder {
   font-family: var(--font-ui);
   opacity: 1;
@@ -315,13 +324,11 @@
 }
 
 .colorSearchInput:focus {
-  border-color: var(--primary);
+  outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
 }
 
 .colorSearchClear {
-  position: absolute;
+  flex-shrink: 0;
-  inset-inline-end: 8px;
   width: 28px;
   height: 28px;
   display: flex;
@@ -358,6 +365,89 @@
   color: var(--text-muted);
 }
 
+.customColorBlock {
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px dashed rgba(148, 163, 184, 0.35);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.customColorTitle {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.customColorRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.customColorNameInput {
+  flex: 1;
+  min-width: 140px;
+  min-height: var(--field-height);
+  padding: var(--field-padding-y) var(--field-padding-x);
+  font-size: var(--field-font-size);
+  font-family: var(--font-ui);
+  color: var(--text-primary);
+  background: var(--surface);
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  border-radius: var(--radius-sm);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.customColorNameInput:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
+}
+
+.customColorPickerLabel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  overflow: hidden;
+  cursor: pointer;
+  background: var(--surface);
+}
+
+.customColorPicker {
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.customColorError {
+  margin: 0;
+  font-size: 12px;
+  color: #dc2626;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .customValues {
   display: flex;
   flex-direction: column;
@@ -500,6 +590,12 @@
   color: #ef4444;
 }
 
+.removeRowBtn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .preview {
   font-size: 13px;
   color: var(--text-primary);

apps/business/src/components/VariationsModal.tsx

@@ -3,10 +3,9 @@ import { createPortal } from 'react-dom'
 import { Pencil, 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, normalizeColorName } from '../types/variation'
 import { createId } from '../utils/id'
+import { localizeVariationOptionLabel } from '../utils/localizeVariationOption'
 import { textLocaleAttrs } from '../utils/textLocale'
 import { AddVariationModal } from './AddVariationModal'
 import { Tooltip } from './Tooltip'
@@ -122,11 +121,7 @@ export function VariationsModal({
   }
 
   function localizeValue(value: string) {
-    const normalized = normalizeColorName(value)
+    return localizeVariationOptionLabel(value, t)
-    if ((COLOR_OPTIONS as string[]).includes(normalized)) {
-      return t(`categories.variations.color.${normalized}` as BusinessMessageKey)
-    }
-    return value
   }
 
   return createPortal(

apps/business/src/i18n/messages.ts

@@ -662,6 +662,18 @@ const en = {
     'Edit the prefilled prompt if you want. Paste a product page URL and the system will open it and fill from that page.',
   'products.technical.ai.error': 'Unable to fill technical data with AI.',
   'products.technical.ai.filled': 'Technical fields filled with AI. Review and save.',
+  'products.variants.title': 'Product Variations',
+  'products.variants.loading': 'Loading variations…',
+  'products.variants.needCategory':
+    'Assign a category to this product before managing variations.',
+  'products.variants.emptyCategory':
+    'This category has no variations. Add variations on the category first.',
+  'products.variants.empty': 'No variations available.',
+  'products.variants.selectValues': 'Select {name} values',
+  'products.variants.loadError': 'Unable to load product variations.',
+  'products.variants.saveError': 'Unable to save product variations.',
+  'products.variants.save': 'Save variations',
+  'products.variants.saving': 'Saving…',
   'products.form.images': 'Product Images',
   'products.form.imagesAdd': 'Add images',
   'products.form.imagesHint': 'Upload multiple product images. Click + to add more.',
@@ -747,6 +759,13 @@ const en = {
   'categories.variations.selectColors': 'Select colors',
   'categories.variations.searchColors': 'Search colors…',
   'categories.variations.noColorMatch': 'No colors match your search.',
+  'categories.variations.addCustomColor': 'Add custom color',
+  'categories.variations.customColorName': 'Color name',
+  'categories.variations.customColorNamePlaceholder': 'e.g. Metallic White',
+  'categories.variations.customColorHex': 'Color',
+  'categories.variations.addCustomColorBtn': 'Add color',
+  'categories.variations.customColorNameRequired': 'Enter a color name.',
+  'categories.variations.customColorExists': 'This color is already selected.',
   'categories.variations.selectSizes': 'Select sizes',
   'categories.variations.name': 'Variation name',
   'categories.variations.namePlaceholder': 'e.g. Guarantee, Material',
@@ -819,6 +838,8 @@ const en = {
   'categories.technical.inputType': 'Input type',
   'categories.technical.required': 'Required',
   'categories.technical.removeField': 'Remove field',
+  'categories.technical.moveUp': 'Move up',
+  'categories.technical.moveDown': 'Move down',
   'categories.technical.options': 'Options',
   'categories.technical.optionN': 'Option {n}',
   'categories.technical.removeOption': 'Remove option',
@@ -981,6 +1002,7 @@ const en = {
   'storeItems.search.noProducts': 'No products available.',
   'storeItems.search.noMatch': 'No matching products.',
   'storeItems.search.minChars': 'Type at least {count} characters to search',
+  'storeItems.search.searching': 'Searching…',
   'storeItems.discount.title': 'Set Discounts',
   'storeItems.discount.variant': 'Variant',
   'storeItems.discount.regularPrice': 'Regular price',
@@ -3257,6 +3279,18 @@ const fa: Record<MessageKey, string> = {
     'در صورت نیاز پرامپت را ویرایش کنید. لینک صفحه محصول را اضافه کنید تا سیستم صفحه را باز کند و فیلدها را از آن پر کند.',
   'products.technical.ai.error': 'پر کردن اطلاعات فنی با هوش مصنوعی ممکن نشد.',
   'products.technical.ai.filled': 'فیلدهای فنی با هوش مصنوعی پر شد. بررسی کنید و ذخیره کنید.',
+  'products.variants.title': 'تنوع‌های محصول',
+  'products.variants.loading': 'در حال بارگذاری تنوع‌ها…',
+  'products.variants.needCategory':
+    'قبل از مدیریت تنوع‌ها، یک دسته‌بندی به این محصول اختصاص دهید.',
+  'products.variants.emptyCategory':
+    'این دسته‌بندی تنوعی ندارد. ابتدا روی دسته‌بندی تنوع اضافه کنید.',
+  'products.variants.empty': 'تنوعی موجود نیست.',
+  'products.variants.selectValues': 'انتخاب مقادیر {name}',
+  'products.variants.loadError': 'بارگذاری تنوع‌های محصول ممکن نشد.',
+  'products.variants.saveError': 'ذخیره تنوع‌های محصول ممکن نشد.',
+  'products.variants.save': 'ذخیره تنوع‌ها',
+  'products.variants.saving': 'در حال ذخیره…',
   'products.form.images': 'تصاویر محصول',
   'products.form.imagesAdd': 'افزودن تصاویر',
   'products.form.imagesHint': 'چند تصویر محصول آپلود کنید. برای افزودن بیشتر روی + کلیک کنید.',
@@ -3342,6 +3376,13 @@ const fa: Record<MessageKey, string> = {
   'categories.variations.selectColors': 'انتخاب رنگ‌ها',
   'categories.variations.searchColors': 'جستجوی رنگ…',
   'categories.variations.noColorMatch': 'رنگی با این جستجو پیدا نشد.',
+  'categories.variations.addCustomColor': 'افزودن رنگ دلخواه',
+  'categories.variations.customColorName': 'نام رنگ',
+  'categories.variations.customColorNamePlaceholder': 'مثلاً سفید متالیک',
+  'categories.variations.customColorHex': 'رنگ',
+  'categories.variations.addCustomColorBtn': 'افزودن رنگ',
+  'categories.variations.customColorNameRequired': 'نام رنگ را وارد کنید.',
+  'categories.variations.customColorExists': 'این رنگ از قبل انتخاب شده است.',
   'categories.variations.selectSizes': 'انتخاب سایزها',
   'categories.variations.name': 'نام تنوع',
   'categories.variations.namePlaceholder': 'مثلاً گارانتی، جنس',
@@ -3414,6 +3455,8 @@ const fa: Record<MessageKey, string> = {
   'categories.technical.inputType': 'نوع ورودی',
   'categories.technical.required': 'الزامی',
   'categories.technical.removeField': 'حذف فیلد',
+  'categories.technical.moveUp': 'جابه‌جایی به بالا',
+  'categories.technical.moveDown': 'جابه‌جایی به پایین',
   'categories.technical.options': 'گزینه‌ها',
   'categories.technical.optionN': 'گزینه {n}',
   'categories.technical.removeOption': 'حذف گزینه',
@@ -3576,6 +3619,7 @@ const fa: Record<MessageKey, string> = {
   'storeItems.search.noProducts': 'محصولی موجود نیست.',
   'storeItems.search.noMatch': 'محصولی یافت نشد.',
   'storeItems.search.minChars': 'حداقل {count} کاراکتر برای جستجو وارد کنید',
+  'storeItems.search.searching': 'در حال جستجو…',
   'storeItems.discount.title': 'تنظیم تخفیف',
   'storeItems.discount.variant': 'تنوع',
   'storeItems.discount.regularPrice': 'قیمت عادی',

apps/business/src/pages/StoreItemsPage.tsx

@@ -370,7 +370,7 @@ function StoreItemsPageContent() {
         <div className={filterStyles.filtersTitle}>{t('storeItems.filters')}</div>
         <form className={filterStyles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
           <div className={filterStyles.filtersInputs}>
-            <div className={`${filterStyles.field} ${filterStyles.fieldCol3}`}>
+            <div className={`${filterStyles.field} ${filterStyles.fieldCol4}`}>
               <input
                 id="filter-store-name"
                 value={draftName}
@@ -380,7 +380,7 @@ function StoreItemsPageContent() {
                 disabled={isLoading}
               />
             </div>
-            <div className={`${filterStyles.field} ${filterStyles.fieldCol2} ${filterStyles.fieldHalfWidth}`}>
+            <div className={`${filterStyles.field} ${filterStyles.fieldCol2}`}>
               <input
                 id="filter-store-min-price"
                 inputMode="numeric"
@@ -391,7 +391,7 @@ function StoreItemsPageContent() {
                 disabled={isLoading}
               />
             </div>
-            <div className={`${filterStyles.field} ${filterStyles.fieldCol2} ${filterStyles.fieldHalfWidth}`}>
+            <div className={`${filterStyles.field} ${filterStyles.fieldCol2}`}>
               <input
                 id="filter-store-max-price"
                 inputMode="numeric"
@@ -402,7 +402,7 @@ function StoreItemsPageContent() {
                 disabled={isLoading}
               />
             </div>
-            <div className={`${filterStyles.switchField} ${filterStyles.fieldCol3}`}>
+            <div className={`${filterStyles.switchField} ${filterStyles.fieldCol2}`}>
               <div className={filterStyles.switchInline}>
                 <ToggleSwitch
                   checked={draftOnlyDiscounted}
@@ -418,7 +418,7 @@ function StoreItemsPageContent() {
                 </span>
               </div>
             </div>
-            <div className={`${filterStyles.switchField} ${filterStyles.fieldCol3}`}>
+            <div className={`${filterStyles.switchField} ${filterStyles.fieldCol2}`}>
               <div className={filterStyles.switchInline}>
                 <ToggleSwitch
                   checked={draftOnlyUsed}

apps/business/src/services/categoryVariationsService.ts

@@ -36,6 +36,10 @@ export function mapApiVariationToUi(item: CategoryVariationApi): Variation {
     name: item.name,
     type: item.type,
     values: item.values,
+    colorHexes:
+      item.type === 'color'
+        ? item.options.map((option) => option.colorHex)
+        : undefined,
   }
 }
 
@@ -77,6 +81,9 @@ export async function saveCategoryVariations(
           type: variation.type,
           name: variation.name,
           values: variation.values,
+          ...(variation.type === 'color' && variation.colorHexes
+            ? { colorHexes: variation.colorHexes }
+            : {}),
         })),
       },
     },

apps/business/src/types/variation.ts

@@ -14,6 +14,8 @@ export interface Variation {
   name: string
   type: VariationType
   values: string[]
+  /** Parallel to `values` for color type; null means resolve from presets. */
+  colorHexes?: (string | null)[]
 }
 
 export const DEFAULT_VARIATIONS: Variation[] = [

apps/business/src/utils/localizeVariationOption.ts

@@ -0,0 +1,13 @@
+import type { BusinessMessageKey } from '../i18n/messages'
+import { COLOR_OPTIONS, normalizeColorName } from '../types/variation'
+
+type TranslateFn = (key: BusinessMessageKey) => string
+
+/** Localize preset color option labels (e.g. Black → مشکی when locale is FA). */
+export function localizeVariationOptionLabel(label: string, t: TranslateFn): string {
+  const normalized = normalizeColorName(label)
+  if ((COLOR_OPTIONS as string[]).includes(normalized)) {
+    return t(`categories.variations.color.${normalized}` as BusinessMessageKey)
+  }
+  return label
+}

apps/customer/src/components/Sidebar.module.css

@@ -38,8 +38,10 @@
 
 .brandLogo {
   display: block;
-  width: 40px;
+  /* Same height as brandName + domain stack; width follows image aspect ratio */
-  height: 40px;
+  height: calc(13px * 1.2 + 2px + 11px * 1.2);
+  width: auto;
+  max-width: 7.5rem;
   object-fit: contain;
   flex-shrink: 0;
   background: none;
@@ -51,8 +53,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
+  width: calc(13px * 1.2 + 2px + 11px * 1.2);
-  height: 40px;
+  height: calc(13px * 1.2 + 2px + 11px * 1.2);
   flex-shrink: 0;
   border-radius: 8px;
   background: rgba(148, 163, 184, 0.18);

apps/super-admin/src/pages/PublicInvoicePage.module.css

@@ -268,7 +268,7 @@
   margin: 0;
   padding-inline-start: 16px;
   font-size: 12px;
-  line-height: 1.45;
+  line-height: 1.85;
   color: var(--text-secondary, #475569);
   text-align: justify;
 }