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>
+  )
+}