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

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

apps/business/src/components/VariationsModal.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { Plus, X } from 'lucide-react'
 import type { Variation, VariationType } from '../types/variation'
 import { createId } from '../utils/id'
+import { textLocaleAttrs } from '../utils/textLocale'
 import { AddVariationModal } from './AddVariationModal'
 import styles from './VariationsModal.module.css'
 
@@ -57,6 +59,7 @@ export function VariationsModal({
   if (!mounted) return null
 
   const list = variations
+  const categoryLocale = textLocaleAttrs(categoryName)
 
   function handleAdd(variation: Omit<Variation, 'id'>) {
     onChange([
@@ -76,7 +79,7 @@ export function VariationsModal({
     return 'Custom'
   }
 
-  return (
+  return createPortal(
     <>
       <div
         className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
@@ -95,7 +98,13 @@ export function VariationsModal({
                 Variations
               </h3>
               {categoryName && (
-                <p className={styles.subtitle}>{categoryName}</p>
+                <p
+                  className={[styles.subtitle, categoryLocale.className].filter(Boolean).join(' ')}
+                  lang={categoryLocale.lang}
+                  dir={categoryLocale.dir}
+                >
+                  {categoryName}
+                </p>
               )}
             </div>
             <button className={styles.closeBtn} onClick={onClose} aria-label="Close">
@@ -105,12 +114,26 @@ export function VariationsModal({
 
           <div className={styles.body}>
             <div className={styles.list}>
-              {list.map((variation) => (
+              {list.map((variation) => {
+                const nameLocale = textLocaleAttrs(variation.name)
+                const valuesText = variation.values.join(' · ') || 'No values'
+                const valuesLocale = textLocaleAttrs(valuesText)
+                return (
                 <div key={variation.id} className={styles.listItem}>
                   <div className={styles.listItemInfo}>
-                    <div className={styles.listItemName}>{variation.name}</div>
-                    <div className={styles.listItemValues}>
-                      {variation.values.join(' · ') || 'No values'}
+                    <div
+                      className={[styles.listItemName, nameLocale.className].filter(Boolean).join(' ')}
+                      lang={nameLocale.lang}
+                      dir={nameLocale.dir}
+                    >
+                      {variation.name}
+                    </div>
+                    <div
+                      className={[styles.listItemValues, valuesLocale.className].filter(Boolean).join(' ')}
+                      lang={valuesLocale.lang}
+                      dir={valuesLocale.dir}
+                    >
+                      {valuesText}
                     </div>
                   </div>
                   <div className={styles.listItemEnd}>
@@ -125,7 +148,8 @@ export function VariationsModal({
                     </button>
                   </div>
                 </div>
-              ))}
+                )
+              })}
               {!list.length && (
                 <p className={styles.emptyText}>No variations yet. Add color, size, or custom options.</p>
               )}
@@ -153,6 +177,7 @@ export function VariationsModal({
         onClose={() => setAddOpen(false)}
         onSubmit={handleAdd}
       />
-    </>
+    </>,
+    document.body,
   )
 }