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

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

apps/business/src/pages/OrdersPage.tsx

@@ -5,6 +5,7 @@ import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { OrderItemsModal } from '../components/OrderItemsModal'
 import { OrderStepModal } from '../components/OrderStepModal'
 import { OrderTransactionsModal } from '../components/OrderTransactionsModal'
+import { Pagination } from '../components/Pagination'
 import { Tooltip } from '../components/Tooltip'
 import { useToast } from '../context/ToastContext'
 import { ApiError, isAbortError } from '../lib/api'
@@ -39,14 +40,6 @@ interface AppliedFilters {
   maxTotal?: number
 }
 
-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
-}
-
 function displayName(order: Order) {
   const name = [order.customer.firstName, order.customer.lastName].filter(Boolean).join(' ').trim()
   return name || '—'
@@ -202,8 +195,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
@@ -547,37 +538,15 @@ export function OrdersPage() {
 
           <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 ?? 0} total
             </div>
+            <Pagination
+              currentPage={page}
+              totalPages={totalPages}
+              onPageChange={setPage}
+              disabled={loading}
+              variant="inline"
+            />
           </div>
         </div>
       </div>