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

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

apps/business/src/pages/WebsiteContactPage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { RotateCcw, Search } from 'lucide-react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
 import { ContactSubmissionDetailModal } from '../components/ContactSubmissionDetailModal'
+import { Pagination } from '../components/Pagination'
 import { ApiError, isAbortError } from '../lib/api'
 import { formatCellForDisplay } from '../lib/cellNumber'
 import {
@@ -18,14 +19,6 @@ import styles from './WebsiteContactPage.module.css'
 const PAGE_SIZE = 20
 const COLUMN_COUNT = 6
 
-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 formatDateTime(value: string) {
   const d = new Date(value)
   if (Number.isNaN(d.getTime())) return { date: value, time: '' }
@@ -83,8 +76,6 @@ export function WebsiteContactPage() {
     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
@@ -252,37 +243,15 @@ export function WebsiteContactPage() {
 
           <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>