Polish dashboard page chrome and user access UI.

Rename Customers to Users with FA/EN titles, compact headers and filter bars across apps, and refine manager role copy plus a customer-header link to the business dashboard.

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

apps/business/src/pages/CustomersPage.tsx

@@ -6,6 +6,7 @@ import { Breadcrumbs } from '../components/Breadcrumbs'
 import { ChangeUserAccessModal } from '../components/ChangeUserAccessModal'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { EditCustomerModal } from '../components/EditCustomerModal'
+import { PageTitle } from '../components/PageTitle'
 import { Pagination } from '../components/Pagination'
 import { ToggleSwitch } from '../components/ToggleSwitch'
 import { Tooltip } from '../components/Tooltip'
@@ -32,7 +33,7 @@ import accessStyles from '../components/ChangeUserAccessModal.module.css'
 import styles from './CustomersPage.module.css'
 
 const PAGE_SIZE = 24
-const COLUMN_COUNT = 6
+const COLUMN_COUNT = 7
 
 function formatDate(value: string, locale: 'en' | 'fa') {
   const d = new Date(value)
@@ -53,13 +54,13 @@ function formatTransactionTotal(total: number | null | undefined) {
   return formatIrtPrice(total)
 }
 
-function accessBadgeKey(user: BusinessCustomerListItem): BusinessMessageKey | null {
+function accessBadgeKey(user: BusinessCustomerListItem): BusinessMessageKey {
   if (user.isBusinessOwner) return 'customers.access.badge.owner'
   if (user.teamRole === 'admin') return 'customers.access.badge.admin'
   if (user.teamRole === 'editor') return 'customers.access.badge.editor'
   if (user.teamRole === 'viewer') return 'customers.access.badge.viewer'
   if (user.businessMemberId) return 'customers.access.badge.manager'
-  return null
+  return 'customers.access.customer'
 }
 
 function teamRoleMessageKey(teamRole: string): BusinessMessageKey {
@@ -310,15 +311,13 @@ export function CustomersPage() {
     <main className={pageStyles.content}>
       <Breadcrumbs
         items={[
-          { label: 'Home', href: '/' },
-          { label: 'Customers' },
+          { label: t('nav.home'), href: '/' },
+          { label: t('customers.title') },
         ]}
       />
 
-      <div className={`${pageStyles.pageHeader} ${styles.pageHeaderCompact}`}>
-        <div>
-          <h2 className={pageStyles.pageTitle}>{t('customers.title')}</h2>
-        </div>
+      <div className={pageStyles.pageHeader}>
+        <PageTitle en="USERS">{t('customers.title')}</PageTitle>
       </div>
 
       <div className={filterStyles.filtersPanel}>
@@ -384,7 +383,6 @@ export function CustomersPage() {
       <div className={styles.tablePanel}>
         <div className={styles.tableWrap}>
           <div className={styles.tableHeader}>
-            <div className={styles.tableHeaderTitle}>{t('customers.listTitle')}</div>
             <div className={styles.meta}>
               {data ? (
                 data.total > 0 ? (
@@ -410,6 +408,7 @@ export function CustomersPage() {
           >
             <colgroup>
               <col className={styles.colName} />
+              <col className={styles.colRole} />
               <col className={styles.colCell} />
               <col className={styles.colOrders} />
               <col className={styles.colTransactions} />
@@ -419,6 +418,7 @@ export function CustomersPage() {
             <thead>
               <tr>
                 <th className={styles.th}>{t('customers.col.name')}</th>
+                <th className={styles.th}>{t('customers.col.role')}</th>
                 <th className={styles.th}>{t('customers.col.cell')}</th>
                 <th className={styles.th}>{t('customers.col.orders')}</th>
                 <th className={styles.th}>{t('customers.col.transactions')}</th>
@@ -468,13 +468,13 @@ export function CustomersPage() {
                         >
                           {name}
                         </div>
-                        {badgeKey ? (
-                          <span className={accessStyles.roleBadge}>{t(badgeKey)}</span>
-                        ) : null}
                         {!customer.isEnabled && (
                           <div className={styles.statusDisabled}>{t('customers.disabled')}</div>
                         )}
                       </td>
+                      <td className={styles.td}>
+                        <span className={accessStyles.roleBadge}>{t(badgeKey)}</span>
+                      </td>
                       <td className={styles.td}>{formatCellForDisplay(customer.cellNumber)}</td>
                       <td className={styles.td}>
                         {customer.orderCount == null || customer.orderCount === 0 ? (