Hermina 360 Docs

Appearance

Contributing ​

Checklist Before Committing ​

  • [ ] Colors use constants from @/lib/colors — no hardcoded hex
  • [ ] Dashboard pages follow the 4-zone layout (Hero → KPIs → Charts → Action)
  • [ ] Charts in the same row have identical height props
  • [ ] Status indicators use blue/orange — NOT green/red
  • [ ] STATUS_CRITICAL (red) used only for genuinely critical alerts
  • [ ] Colorblind simulator tested (Chrome DevTools → Rendering → Emulate vision deficiencies)
  • [ ] No console.log left in code
  • [ ] TypeScript strict errors resolved (pnpm type-check)

Code Standards ​

  • Import colors from @/lib/colors — never hardcode hex values in components
  • Import hooks from @/hooks, stores from @/stores
  • Use @/ alias for all internal imports (never relative ../../)
  • Page components are thin — delegate API logic to use[Resource]Mutator hooks
  • Components used in only one page live in src/pages/[feature]/components/
  • Global reusable components live in src/components/

Starting a New Feature ​

bash
# 1. Create page folder
mkdir -p src/pages/your-feature/{components,hooks}

# 2. Create page component
touch src/pages/your-feature/YourFeaturePage.tsx

# 3. Create mutator hook (if CRUD)
touch src/pages/your-feature/hooks/useYourFeatureMutator.ts

# 4. Register route in src/routes/index.tsx

# 5. Add menu item in src/components/layout/dashboard/DashboardLayout.tsx

Running the Project ​

bash
# Install dependencies
npm install

# Start dev server (port 5174)
npm run dev

# Type check
npm run type-check

# Build
npm run build