One system for every Vesta screen, from the ops desk to the washroom kiosk.

Buttons

Fields

Choosing

Chips, tags, counts

Cards and numbers

Table

One table pattern replaces MUI DataGrid, the custom request table, raw Tailwind tables and card grids: sticky header, 44px rows, primary column with a meta line, numbers right aligned, the whole row opens the record, pagination at the bottom.

Feedback and states

Toast for success after an action. Inline alert for something that needs reading. Empty states say why and offer the way out. Loading uses skeletons in place of the content, never a card that says "Loading data".

Overlays

Records open in a right drawer beside the list (see Task log, detail). Create and confirm use a centered dialog (New task). Mobile uses bottom sheets. Escape closes all of them.

Mobile and kiosk

Floor: app bar, progress, big answer buttons, evidence slot, sticky Save and Submit, four bottom tabs. Kiosk: one question, five labelled faces, org brand slot. Full flows in Screens.

Page anatomy (desk)

Admin

Checklists app

Guest feedback kiosk

Superadmin

Order of work

Admin (MUI v5)

Replace the Minimal template's blue preset and the green base palette in theme/palette.ts; drop gradients.button and the hard-coded navy and purple. Keep MUI; only the theme and a few overrides change.

// theme/palette.ts (excerpt): values from tokens.css
const PRIMARY = { lighter: '#ffe6d8', light: '#ff7340', main: '#d93a00', dark: '#b33000', darker: '#8a2500', contrastText: '#fff' };
const GREY = { 100: '#f3f1ec', 200: '#ebe8e1', 300: '#e0dcd2', 400: '#c9c3b6', 500: '#8a8579', 600: '#6b665c', 700: '#57534a', 800: '#35322c', 900: '#1c1a17' };
// semantic: success #1f9d55, warning #e09a00, error #d92d20, info #2a78d6 (text: the *-fg tokens)
background: { default: '#faf9f7', paper: '#ffffff', neutral: '#f3f1ec' },
text: { primary: '#1c1a17', secondary: '#57534a', disabled: '#8a8579' },
divider: '#e4e0d7'

// theme/index.tsx
shape: { borderRadius: 8 },
typography: { fontFamily: '"Public Sans", "Segoe UI", system-ui, sans-serif', button: { textTransform: 'none', fontWeight: 600 } },
components: {
  MuiButton: { defaultProps: { disableElevation: true }, styleOverrides: { root: { height: 36, borderRadius: 8 } } },
  MuiCard:   { styleOverrides: { root: { borderRadius: 12, border: '1px solid #e4e0d7', boxShadow: '0 1px 2px rgba(28,26,23,.05)' } } },
  MuiTableCell: { styleOverrides: { root: { height: 44, fontSize: 13 } } }
}
// config.ts: themeColorPresets 'blue' is no longer used; remove the preset switch.

Tailwind sub-apps in Admin (Airside, Vendor SLA, EM shift brief) are on Tailwind 3: extend tailwind.config.js colours with the same values and replace purple-600, indigo-600, teal-600 accents with primary. Iconify stays; use icon="tabler:clipboard-list".

Superadmin (Tailwind v4)

Already closest to v4. Import tokens, point the theme at them, and switch dark mode to the data-theme attribute so the login page follows it too.

/* src/index.css */
@import "tailwindcss";
@import "./tokens.css";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@theme inline {
  --color-primary: var(--primary);     --color-primary-hover: var(--primary-hover);
  --color-accent: var(--accent);       --color-surface: var(--surface);
  --color-border: var(--border);       --color-fg: var(--text);
  --color-fg-2: var(--text-2);         --color-fg-3: var(--text-3);
  --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --font-sans: var(--font-sans);
}
/* primary button: bg-primary hover:bg-primary-hover (600/700, white text passes AA) */

Checklists and Feedback (Onsen + MUI, React 17)

Add a single MUI ThemeProvider (today MUI runs on defaults, which is where the extra blues come from) with the same palette as Admin. Override Onsen through its CSS variables and stop forcing Karla. Replace cl-styles.js constants with token references.

/* src/theme.css, imported after onsen-css-components.css */
@import "./tokens.css";
:root {
  --background-color: var(--bg);              --text-color: var(--text);
  --button-background-color: var(--primary);   --button-cta-background-color: var(--primary);
  --toolbar-background-color: var(--surface);  --toolbar-border-color: var(--border);
  --list-background-color: var(--surface);     --card-background-color: var(--surface);
}
html, body, .page { font-family: var(--font-sans); }   /* drop the Karla !important block in public/index.html */
/* Onsen variable names: confirm against node_modules/onsenui/css/onsen-css-components.css */

/* Kiosk org themes shrink to two variables each (FbsOrgCustomThemes.css); root gets class v-light */
.theme-custom-bial   { --kiosk-brand: #05807a; --kiosk-bg: #fdfdfd; }  /* logo teal #0bb3ab is 2.6:1 with white text */
.theme-custom-violet { --kiosk-brand: #8d278f; --kiosk-bg: #fff5fe; }
.theme-custom-encalm-light { --kiosk-brand: #152347; --kiosk-bg: #e7e2d9; }

Status module (all apps)

// status.ts: one source for labels, tones and icons (values from AppConstants.php)
export const TASK_STATUS = {
  0:  { label: 'Pending',     tone: 'amber',  icon: 'tabler:clock' },
  2:  { label: 'In progress', tone: 'blue',   icon: 'tabler:progress' },
  5:  { label: 'Completed',   tone: 'blue',   icon: 'tabler:checks' },
  3:  { label: 'Parked',      tone: 'slate',  icon: 'tabler:player-pause' },
  6:  { label: 'Resolved',    tone: 'violet', icon: 'tabler:circle-check' },
  1:  { label: 'Closed',      tone: 'green',  icon: 'tabler:circle-check' },
  [-1]: { label: 'Rejected',  tone: 'red',    icon: 'tabler:circle-x' },
};
export const CHECKLIST_STATUS = {
  0: { label: 'Pending', tone: 'amber' }, 2: { label: 'Jobs in progress', tone: 'blue' },
  3: { label: 'Awaiting approval', tone: 'violet' }, 1: { label: 'Completed', tone: 'green' },
  [-1]: { label: 'Missed', tone: 'red' },
};
// tone -> CSS vars: --{tone}-fg (text), --{tone}-bg (fill), --{tone}-line (border), --{tone} (dot)

Files in this folder