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

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

apps/customer/src/components/OrderItemsModal.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { X } from 'lucide-react'
 import type { Order } from '../services/orderService'
 import { formatCellForDisplay } from '../lib/cellNumber'
@@ -59,7 +60,7 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
 
   const itemCount = totalQuantity(order)
 
-  return (
+  return createPortal(
     <div
       className={`${modalStyles.overlay} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
       onClick={onClose}
@@ -148,5 +149,7 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
         </div>
       </div>
     </div>
+  ,
+  document.body,
   )
 }

apps/customer/src/pages/FavoritesPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Heart } from 'lucide-react'
-import { Breadcrumbs, useToast } from '@meshkee/dashboard-ui'
+import { Breadcrumbs, Pagination, useToast } from '@meshkee/dashboard-ui'
 import { FavoriteStoreItemCard } from '../components/FavoriteStoreItemCard'
 import { ApiError, isAbortError } from '../lib/api'
 import {
@@ -113,25 +113,12 @@ export function FavoritesPage() {
       )}
 
       {data && data.total > PAGE_SIZE && (
-        <div className={styles.pagination}>
-          <button
-            type="button"
-            disabled={page <= 1}
-            onClick={() => setPage((p) => Math.max(1, p - 1))}
-          >
-            Previous
-          </button>
-          <span>
-            Page {page} of {Math.max(1, Math.ceil(data.total / data.pageSize))}
-          </span>
-          <button
-            type="button"
-            disabled={page >= Math.ceil(data.total / data.pageSize)}
-            onClick={() => setPage((p) => p + 1)}
-          >
-            Next
-          </button>
-        </div>
+        <Pagination
+          currentPage={page}
+          totalPages={Math.max(1, Math.ceil(data.total / data.pageSize))}
+          onPageChange={setPage}
+          disabled={loading}
+        />
       )}
     </main>
   )

apps/customer/src/pages/OrdersPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
-import { Breadcrumbs } from '@meshkee/dashboard-ui'
+import { Breadcrumbs, Pagination } from '@meshkee/dashboard-ui'
 import { OrderItemsModal } from '../components/OrderItemsModal'
 import { OrderRow } from '../components/OrderRow'
 import { ApiError, isAbortError } from '../lib/api'
@@ -15,14 +15,6 @@ import styles from './OrdersPage.module.css'
 const PAGE_SIZE = 20
 const COLUMN_COUNT = 7
 
-function buildPageNumbers(page: number, totalPages: number) {
-  const start = Math.max(1, page - 2)
-  const end = Math.min(totalPages, page + 2)
-  const numbers: number[] = []
-  for (let i = start; i <= end; i++) numbers.push(i)
-  return numbers
-}
-
 export function OrdersPage() {
   const [data, setData] = useState<OrdersListResponse | null>(null)
   const [loading, setLoading] = useState(false)
@@ -58,8 +50,6 @@ export function OrdersPage() {
     return Math.max(1, Math.ceil(total / PAGE_SIZE))
   }, [data?.total])
 
-  const pageNumbers = useMemo(() => buildPageNumbers(page, totalPages), [page, totalPages])
-
   const showingFrom = useMemo(() => {
     if (!data || data.total === 0) return 0
     return (page - 1) * PAGE_SIZE + 1
@@ -155,37 +145,15 @@ export function OrdersPage() {
           {data && data.total > PAGE_SIZE && (
             <div className={styles.pagination}>
               <div>
-                Page {page} / {totalPages}
-              </div>
-              <div className={styles.pagerBtns}>
-                <button
-                  type="button"
-                  className={styles.pageBtn}
-                  onClick={() => setPage((p) => Math.max(1, p - 1))}
-                  disabled={page <= 1 || loading}
-                >
-                  Prev
-                </button>
-                {pageNumbers.map((n) => (
-                  <button
-                    key={n}
-                    type="button"
-                    className={`${styles.pageBtn} ${n === page ? styles.pageBtnActive : ''}`}
-                    onClick={() => setPage(n)}
-                    disabled={loading}
-                  >
-                    {n}
-                  </button>
-                ))}
-                <button
-                  type="button"
-                  className={styles.pageBtn}
-                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
-                  disabled={page >= totalPages || loading}
-                >
-                  Next
-                </button>
+                Page {page} / {totalPages} · {PAGE_SIZE} per page · {data.total} total
               </div>
+              <Pagination
+                currentPage={page}
+                totalPages={totalPages}
+                onPageChange={setPage}
+                disabled={loading}
+                variant="inline"
+              />
             </div>
           )}
         </div>