# TechTitans POS — Business Settings Rename & UI Alignment

**Date:** 2026-11-12 · **Branch:** `techtitans/integration` · Local commit only (no push/deploy).
**Frontend-only** (user-facing strings + CSS). No backend code, DB, API routes, models, services, config keys,
permissions, tenant data, logo storage or invoice/receipt/email branding changed.

## Objective

The Management → Settings page read as "Restaurant settings" (a leftover from the restaurant-POS fork). TechTitans is
a retail technology & repair business, so the customer-facing terminology is renamed to **Business**, and the page's
section alignment is fixed.

## Root cause of the misalignment

The screenshot showed section icons stranded on the far **left** with headings/descriptions on the far **right**. The
canonical rule is correct:

```css
.settings-section__head { display: flex; align-items: flex-start; gap: var(--space-3); }  /* icon beside heading */
```

…but a **later, unscoped** rule added for the Payment-gateways page overrode it **globally**:

```css
/* Payment gateways (Phase 4D-4) */
.settings-section__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; … }
```

`justify-content: space-between` on a two-child header (icon + meta) pushes them to opposite edges — on **every**
settings section, not just Payment gateways. Fix: delete the global override and let the Payment page's action button
sit right via a targeted rule instead of splitting the whole header.

## UI changes (Task 3 / 5)

- **Removed** the global `space-between` override; kept the canonical icon-beside-heading header and added
  `flex-wrap: wrap` + `.settings-section__meta { flex: 1 }`.
- Action buttons in a section header (e.g. Payment gateways' "Add gateway") now use
  `.settings-section__head > .btn, > button { margin-left: auto }` so they right-align **without** detaching the icon
  from its heading.
- Result (measured in a live browser): the section icon sits ~12 px beside its heading, the description is directly
  below, fields align in a consistent two-column grid with labels above inputs, uniform card padding/dividers, and the
  layout stacks cleanly on mobile. The left sub-nav (Business profile / Operations / Tax / Delivery & pickup / Payment
  gateways) keeps consistent icon sizes, labels, descriptions and a clearly highlighted active state.

## Old → New labels (Task 2 / 4)

| Old (user-facing) | New |
|---|---|
| Restaurant settings (eyebrow + title) | **Business settings** |
| "Manage your restaurant identity…" | "Manage your business identity…" |
| Restaurant profile (sub-nav + dashboard setup card) | **Business profile** |
| Restaurant identity | **Business identity** |
| Restaurant name | **Business name** |
| Legal name | **Legal business name** |
| Business number | **Business registration number** |
| Logo | **Business logo** |
| "…reach your restaurant." | "…reach your business." |
| `https://your-restaurant.com` (placeholder) | `https://your-business.com` |
| "Loading restaurant profile…" | "Loading business profile…" |
| "Enter your restaurant name." (validation) | "Enter your business name." |
| Operations: "Changes apply across your restaurant…" | "…across your business…" |
| Dashboard: "Add your restaurant name, contact details and branding." | "Add your business name, …" |

The Business Profile page is organised as **Business identity** (Business name · Workspace address · Legal business
name · Business registration number) → **Business logo** (preview · Replace · Remove · format/size hint) → **Contact
details** (Phone · Email · Website) → **Regional defaults** (Country · Currency · Timezone). All existing field values,
validation and persistence are unchanged.

**No new tenant/business-type configuration was added** — this is the retail/repair product, so the generic "Business"
terminology applies uniformly. Kitchen and Menu modules were not touched.

## What was deliberately NOT renamed (internal, non-user-facing)

`RestaurantProfile` / `RestaurantProfileInput` types, `settingsApi.getRestaurant()`, the `/settings/restaurant` route,
`ROUTES.settingsRestaurant`, the `restaurant.settings.manage` permission key, the backend
`RestaurantSettingsController`, and the `RestaurantProfilePage` component name — all unchanged, so no DB/API/permission
churn.

## Branding / invoice compatibility (Task 6)

No backend code ran. **TenantLogoService**, logo storage, invoice PDF rendering/branding, receipt branding and customer
email branding are untouched; **historical invoice PDF bytes are not modified**. In the live app the TechTitans logo
still loads in the Business logo preview, and Replace/Remove still function. The Business Settings still POST to the
same `/settings/restaurant` endpoint.

## Testing (Task 7 / 8)

**Automated (frontend):**
- `vitest` — settings + dashboard suites **127 passed**; `RestaurantProfilePage.test` **18 passed** (label assertions
  updated to the Business terms in `RestaurantProfilePage.test.tsx`, `DashboardPage.test.tsx`, `DashboardSetup.test.tsx`).
- `tsc -b` clean · `eslint` (changed files) clean · `npm run build` succeeds.

**Live Playwright (real TechTitans tenant):**
- Opened Business Settings; **9/9** renamed labels present; **no "restaurant" word anywhere** on the page.
- Sub-nav = Business profile / Operations / Tax / Delivery & pickup / Payment gateways.
- TechTitans logo preview present; Phone (`+1 647 667-1647`), Email, Country=Canada, Currency=CAD, Timezone=America/Toronto load correctly.
- **Save Changes** → edit shows "You have unsaved changes." → **Reset** reverts the field to "TechTitans".
- Tax ("Tax") and Payment gateways ("Payment gateways") sections accessible; **0 console errors**.
- **No horizontal overflow** at desktop (1440), tablet (768), mobile (390), and faithful browser-zoom emulation **125% /
  150% / 200%** (viewport 1152 / 960 / 720). Section headings, labels/fields, logo preview, nav and the sticky Save bar
  all render without clipping or hidden fields.

Backend tests were **not** run — no backend code changed.

## Before / after

`docs/techtitans/screenshots/business-settings/` — `settings-before-desktop.png` (misaligned, "Restaurant settings")
vs `settings-after-desktop.png` (icon-beside-heading, "Business settings"), plus after `tablet` / `mobile` /
`zoom150` / `zoom200`.

## Files changed

| File | Change |
|---|---|
| `src/pages/settings/settings.css` | Remove global `space-between` header override; canonical icon-beside-heading + `margin-left:auto` for header action buttons. |
| `src/pages/settings/SettingsLayout.tsx` | Business settings title/eyebrow/subtitle; "Business profile" sub-nav. |
| `src/pages/settings/RestaurantProfilePage.tsx` | Business identity / name / logo / contact / regional labels, hints, placeholder, messages. |
| `src/pages/settings/OperationsSettingsPage.tsx` | "across your business" copy. |
| `src/pages/DashboardPage.tsx` | "Business profile" setup-card copy. |
| `*.test.tsx` (RestaurantProfile, DashboardPage, DashboardSetup) | Label assertions updated to Business terms. |

## Commits (no push)

- **Frontend:** `e339adf` — rename + alignment fix + test updates.
- **Backend (docs):** `ff1c435` — this report + before/after screenshots.