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

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

apps/business/src/pages/ProductDetailsPage.tsx

@@ -9,6 +9,7 @@ import {
   mapProductApiToUi,
 } from '../services/productService'
 import type { Product } from '../types/product'
+import { textLocaleAttrs } from '../utils/textLocale'
 import pageStyles from '../components/PageContent.module.css'
 import styles from './ProductDetailsPage.module.css'
 
@@ -78,6 +79,14 @@ export function ProductDetailsPage() {
     )
   }
 
+  const nameEnLocale = textLocaleAttrs(product.nameEn)
+  const nameFaLocale = textLocaleAttrs(product.nameFa)
+  const summaryLocale = textLocaleAttrs(product.summary)
+  const descriptionLocale = textLocaleAttrs(
+    product.description?.replace(/<[^>]+>/g, ' ') ?? '',
+  )
+  const categoryLocale = textLocaleAttrs(product.category)
+
   return (
     <main className={pageStyles.content}>
       <Breadcrumbs
@@ -127,27 +136,69 @@ export function ProductDetailsPage() {
         </div>
 
         <div className={styles.details}>
-          {product.category && <span className={styles.categoryChip}>{product.category}</span>}
+          {product.category && (
+            <span
+              className={[styles.categoryChip, categoryLocale.className].filter(Boolean).join(' ')}
+              lang={categoryLocale.lang}
+              dir={categoryLocale.dir}
+            >
+              {product.category}
+            </span>
+          )}
 
-          <h1 className={styles.nameEn}>{product.nameEn}</h1>
-          {product.nameFa && <p className={styles.nameFa}>{product.nameFa}</p>}
+          <h1
+            className={[styles.nameEn, nameEnLocale.className].filter(Boolean).join(' ')}
+            lang={nameEnLocale.lang}
+            dir={nameEnLocale.dir}
+          >
+            {product.nameEn}
+          </h1>
+          {product.nameFa && (
+            <p
+              className={[styles.nameFa, nameFaLocale.className].filter(Boolean).join(' ')}
+              lang={nameFaLocale.lang}
+              dir={nameFaLocale.dir}
+            >
+              {product.nameFa}
+            </p>
+          )}
 
-          {product.summary && <p className={styles.summary}>{product.summary}</p>}
+          {product.summary && (
+            <p
+              className={[styles.summary, summaryLocale.className].filter(Boolean).join(' ')}
+              lang={summaryLocale.lang}
+              dir={summaryLocale.dir}
+            >
+              {product.summary}
+            </p>
+          )}
 
           {product.description && (
             <div
-              className={styles.description}
+              className={[styles.description, descriptionLocale.className]
+                .filter(Boolean)
+                .join(' ')}
+              lang={descriptionLocale.lang}
+              dir={descriptionLocale.dir}
               dangerouslySetInnerHTML={{ __html: product.description }}
             />
           )}
 
           {product.tags.length > 0 && (
             <div className={styles.tags}>
-              {product.tags.map((tag) => (
-                <span key={tag} className={styles.tag}>
-                  {tag}
-                </span>
-              ))}
+              {product.tags.map((tag) => {
+                const tagLocale = textLocaleAttrs(tag)
+                return (
+                  <span
+                    key={tag}
+                    className={[styles.tag, tagLocale.className].filter(Boolean).join(' ')}
+                    lang={tagLocale.lang}
+                    dir={tagLocale.dir}
+                  >
+                    {tag}
+                  </span>
+                )
+              })}
             </div>
           )}
         </div>