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/super-admin/src/components/PageContent.module.css

@@ -8,19 +8,44 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 24px;
+  margin-bottom: 12px;
 }
 
 .pageTitle {
   font-size: 24px;
   font-weight: 700;
   color: var(--text-primary);
-  margin-bottom: 4px;
+  margin-bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.15em 0.4em;
+}
+
+.pageTitleEn {
+  font-size: 0.52em;
+  font-weight: 700;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  font-family: var(--font-en), var(--font-ui);
+}
+
+.pageTitleEn::before {
+  content: '•';
+  margin-inline-end: 0.4em;
+  letter-spacing: 0;
 }
 
 .pageSubtitle {
+  display: none;
+}
+
+.pageSubtitleContent {
+  display: block;
   font-size: 14px;
   color: var(--text-secondary);
+  margin-top: 6px;
 }
 
 .dateBadge {

apps/super-admin/src/components/PageTitle.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react'
+import pageStyles from './PageContent.module.css'
+
+interface PageTitleProps {
+  children: ReactNode
+  /** English accent shown after a bullet (e.g. USERS). */
+  en?: string
+}
+
+export function PageTitle({ children, en }: PageTitleProps) {
+  return (
+    <h2 className={pageStyles.pageTitle}>
+      {children}
+      {en ? <span className={pageStyles.pageTitleEn}>{en}</span> : null}
+    </h2>
+  )
+}

apps/super-admin/src/pages/BusinessesPage.module.css

@@ -9,10 +9,7 @@
 }
 
 .filtersTitle {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin-bottom: 10px;
+  display: none;
 }
 
 .filtersGrid {

apps/super-admin/src/pages/UsersPage.module.css

@@ -68,6 +68,10 @@
   cursor: pointer;
 }
 
+.roleOption input[type='radio'] {
+  accent-color: var(--primary);
+}
+
 .roleOption:has(input:checked) {
   border-color: rgba(var(--primary-rgb) / 0.35);
   background: rgba(var(--primary-rgb) / 0.08);

apps/super-admin/src/pages/UsersPage.tsx

@@ -46,7 +46,7 @@ const TEAM_ROLE_ORDER = ['admin', 'editor', 'viewer'] as const
 const TEAM_ROLE_LABELS: Record<string, string> = {
   admin: 'Admin',
   editor: 'Editor',
-  viewer: 'Viewer',
+  viewer: 'Observer',
 }
 
 function teamRoleLabel(slug: string | null | undefined, teamRoles: RoleOption[]) {
@@ -1021,8 +1021,7 @@ export function UsersPage() {
             {businessAccess === 'staff' ? (
               <>
                 <p className={styles.roleHint}>
-                  Only a super admin can assign Admin. Admins can assign Editor or Viewer. Admins
-                  cannot change other admins.
+                  Only a super admin can assign Admin. Admins can assign Editor or Observer.
                 </p>
                 <div className={`${styles.roleList} ${styles.roleListNested}`}>
                   {orderedTeamRoles.map((role) => (