mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-09-30 08:03:13 +00:00
a0cf7b9ef0
* chore: add eslint, prettier, husky and commitlint tooling * ci: add GitHub Actions workflow for lint and build * build: migrate from CRA to Vite with TypeScript config * docs: add architecture plan and design system documentation * fix: scope ESLint to new components and hooks directories * feat: add HTTP client, query cache and shared utilities * feat: add theme system and global application styles * feat: add shared UI, layout and domain badge components * feat: add auth domain, provider and login page * feat: add app shell, file-based routing and bootstrap * feat: add protected layout and dashboard module * feat: add accounts CRUD module * feat: add assets CRUD module * feat: add contacts CRUD module * feat: add employees CRUD module * feat: add locations CRUD module * feat: add calendar events module * feat: add follow-ups CRUD module * feat: add PM schedules CRUD module * feat: add work orders module with dispatch modals * feat: add vendors CRUD and portal token panel * feat: add vendor purchase orders module * feat: add uplifts queue module * feat: add settings for dropdowns and task templates * feat: add vendor portal routes and signature capture * test: add Vitest setup and Playwright login e2e spec * chore: remove legacy CRA pages, Redux store and JS hooks * chore: update gitignore and env example for Vite * docs: translate pt-BR docs and Cursor rules to English * fix(ci): fix login e2e session mock and prettier formatting * fix(build): use mjs router script for Node 20 CI compatibility * chore: remove migration scripts and unused generouted router * fix(auth): restore JWT and align CRUD with backend routes * fix(api): add no-content helpers and align paths with backend * fix(accounts): align detail and mutation payloads with backend * fix(contacts): resolve detail via GetContacts and map address DTOs * fix(work-orders): align routes, delete body, and create payload * fix(vendors): delete vendors via REST route * fix(pm-schedules): handle empty save and delete responses * fix(employees): add fallbacks for detail and dropdown calls * chore(calendar): disable routes until backend exists * chore(env): switch tracked env vars to Vite prefixes * fix(api): align frontend contracts with backend review findings Correct Work Order getById query param, asset site options via Location API, Employee JobTitleId payload, and remove stale API paths. * fix(employees,pm-schedules): align forms with backend API contracts Align PM Schedule form and save payload with PMSchedule_DTO fields. Bind employee Job Title select to jobTitleId for create/update payloads. Add regression tests for both flows. * fix(pm-schedules): gate edit/delete for Dev API contract Production Dev API exposes only GetList and Save. Hide unsupported edit/delete UI and block the edit route. Add regression tests for disabled actions. * docs(env): document VITE_API_URL must include /api suffix * refactor(api): extract shared API prefix URL resolution * feat(build): fail build on misconfigured absolute VITE_API_URL * test(api): cover API URL contract and prefix resolution * feat(auth): disable login submit until email and password are valid * test(auth): align login tests with disabled submit behavior * Feat/ab/menu-and-header (#17) * chore(deps): add lucide-react for layout icon migration * feat(auth): add getPrimaryUserRole helper for header display * style(theme): add sidebar active tokens and nav group typography * refactor(menu): migrate nav icons to lucide and trim menu groups * feat(layout): redesign sidebar, topbar, and admin shell viewport * chore(menu): hide Reports and Documents from sidebar --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> * ci: add frontend PR quality baseline (#18) * chore(deps): add lucide-react for layout icon migration * feat(auth): add getPrimaryUserRole helper for header display * style(theme): add sidebar active tokens and nav group typography * refactor(menu): migrate nav icons to lucide and trim menu groups * feat(layout): redesign sidebar, topbar, and admin shell viewport * chore(menu): hide Reports and Documents from sidebar * ci: add PR quality baseline checks * ci: avoid self-matching standards guard * ci: split frontend quality gates --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> Co-authored-by: Alexandre Brandizzi <alex_brandizzi@hotmail.com>
137 lines
6 KiB
Markdown
137 lines
6 KiB
Markdown
# SeaHaven Design System
|
||
|
||
Visual foundation for **seaheven.front**, aligned with [seahaven.desing](https://github.com) tokens and IrisLoan.Admin integration patterns (centralized CSS, `@theme inline`, `cn()`).
|
||
|
||
## Stack
|
||
|
||
- **MUI-only** — no Radix/shadcn; MUI is the sole component library
|
||
- **Tailwind v4** — semantic utility classes from CSS tokens
|
||
- **Fonts** — Montserrat (headings), DM Sans (body), JetBrains Mono (code) via `@fontsource`
|
||
|
||
## Token source of truth
|
||
|
||
| File | Purpose |
|
||
| --------------------------- | ------------------------------------------------------------ |
|
||
| `src/styles/theme.css` | All `:root` CSS variables + `@theme inline` Tailwind aliases |
|
||
| `src/styles/fonts.css` | `@fontsource` imports |
|
||
| `src/styles/typography.css` | Base `html`, `body`, `h1–h6`, `.text-caption`, `.text-label` |
|
||
| `src/styles/motion.css` | `--duration-fast`, `--duration-normal`, `--ease-default` |
|
||
| `src/styles/globals.css` | Entry: imports all above + `@custom-variant dark` |
|
||
|
||
## Key tokens
|
||
|
||
### Brand & surfaces
|
||
|
||
| Token | Value | Usage |
|
||
| -------------------- | --------- | -------------------------- |
|
||
| `--primary` | `#1c75bc` | Buttons, links, focus ring |
|
||
| `--primary-hover` | `#155a92` | Hover states |
|
||
| `--foreground` | `#262262` | Primary text |
|
||
| `--background` | `#ffffff` | Cards, inputs |
|
||
| `--color-bg-page` | `#f9fafb` | Page background |
|
||
| `--border` | `#dfe3ea` | Dividers, outlines |
|
||
| `--muted-foreground` | `#58595b` | Secondary text |
|
||
|
||
### Layout
|
||
|
||
| Token | Value |
|
||
| ----------------------------- | ------- |
|
||
| `--spacing-sidebar` | `220px` |
|
||
| `--spacing-sidebar-collapsed` | `56px` |
|
||
| `--spacing-topbar` | `64px` |
|
||
|
||
### Typography scale
|
||
|
||
| Token | Size |
|
||
| ---------------- | ---- |
|
||
| `--text-xs` | 11px |
|
||
| `--text-sm` | 12px |
|
||
| `--text-base-sm` | 13px |
|
||
| `--text-base` | 14px |
|
||
| `--text-md` | 16px |
|
||
| `--text-lg` | 18px |
|
||
| `--text-xl` | 22px |
|
||
| `--text-2xl` | 28px |
|
||
|
||
### Elevation
|
||
|
||
| Token | Usage |
|
||
| ------------- | ------------------- |
|
||
| `--shadow-sm` | Cards, subtle depth |
|
||
| `--shadow-md` | Dropdowns, panels |
|
||
| `--shadow-lg` | Dialogs, modals |
|
||
|
||
### Work order badges (immutable)
|
||
|
||
Type, status, and completion-doc tokens (`--type-*`, `--status-*`, `--doc-*`) must not be changed — see `src/components/domain/`.
|
||
|
||
## Typography hierarchy
|
||
|
||
| Element | Font | Weight | Size |
|
||
| --------------- | ---------- | ------ | -------------- |
|
||
| `h1` | Montserrat | 800 | 28px |
|
||
| `h2` | Montserrat | 700 | 22px |
|
||
| `h3` | Montserrat | 600 | 18px |
|
||
| `h4–h6` | Montserrat | 600 | 16–13px |
|
||
| Body | DM Sans | 400 | 14px |
|
||
| `.text-caption` | DM Sans | 400 | 12px |
|
||
| `.text-label` | DM Sans | 600 | 11px uppercase |
|
||
|
||
MUI typography variants in `src/lib/theme/mui-theme.ts` mirror this hierarchy.
|
||
|
||
## MUI + Tailwind usage
|
||
|
||
### Prefer themed MUI in forms and data tables
|
||
|
||
MUI components inherit Seahaven styling via `mui-theme.ts` overrides (`Button`, `TextField`, `Table`, `Chip`, `Paper`, `Dialog`, `Alert`).
|
||
|
||
### Prefer semantic Tailwind in layout shells
|
||
|
||
```tsx
|
||
<div className="bg-background text-foreground border-border" />
|
||
<div className="text-muted-foreground" />
|
||
<div className="bg-primary text-primary-foreground" />
|
||
```
|
||
|
||
### Compose classes with `cn()`
|
||
|
||
```tsx
|
||
import { cn } from "@/lib/utils";
|
||
|
||
<div className={cn("flex gap-2", isActive && "bg-sidebar-accent")} />;
|
||
```
|
||
|
||
### Shared UI wrappers
|
||
|
||
| Component | Path | Pattern |
|
||
| ------------ | ------------------------------- | ---------------------------- |
|
||
| `Button` | `components/ui/button.tsx` | MUI Button + variant presets |
|
||
| `Badge` | `components/ui/badge.tsx` | MUI Chip |
|
||
| `PageHeader` | `components/ui/page-header.tsx` | PATTERN_001 |
|
||
| `EmptyState` | `components/ui/empty-state.tsx` | PATTERN_003 |
|
||
| `FormField` | `components/ui/form-field.tsx` | PATTERN_004 |
|
||
|
||
### Domain badges
|
||
|
||
| Component | Path |
|
||
| -------------------------------------- | ------------------------------------ |
|
||
| `TypeBadge` | `components/domain/type-badge.tsx` |
|
||
| `StatusBadge` / `WorkOrderStatusBadge` | `components/domain/status-badge.tsx` |
|
||
| `DocBadge` | `components/domain/doc-badge.tsx` |
|
||
|
||
## Legacy → Seahaven mapping
|
||
|
||
| Legacy | Seahaven | Consumption |
|
||
| ------------------------- | ------------------------------ | -------------------------------- |
|
||
| `#0c4f6f` / `--blue-main` | `--primary` (`#1c75bc`) | MUI `primary.main`, `bg-primary` |
|
||
| `#083a52` / `--blue-dark` | `--primary-hover` | Button hover |
|
||
| `#f4f6f7` / `--bg` | `--color-bg-page` | Body, page shell |
|
||
| `#d9dde0` / `--border` | `--border` | Dividers, inputs |
|
||
| `#fbfbfb` sidebar | `--color-sidebar-bg` | App sidebar |
|
||
| Segoe UI 13px | DM Sans 14px | Body typography |
|
||
| Bootstrap calendar colors | `--primary`, `--success`, etc. | `calendar-utils.ts` |
|
||
| `#1a3a5c` login header | `--color-header-bg-start` | Login branding strip |
|
||
|
||
## Dark mode
|
||
|
||
`@custom-variant dark (&:is(.dark *))` is configured in `globals.css`. Full dark token set is a future enhancement; light mode is the current default.
|