# Phase 3: Apartment & Room Management UI

**Status:** ⬜ Not Started
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Build the apartment and room management pages — list, create, edit, delete apartments; list, create, edit, delete rooms within an apartment. Establish the frontend design system (colors, typography, layout patterns) and API client layer.

## Tasks

- [ ] Task 1: Set up React Router v7 with route structure: `/` (apartments list), `/apartments/:id` (apartment detail with rooms), `/apartments/:id/rooms/:roomId/editor` (placeholder for Phase 4)
- [ ] Task 2: Create API client module using `fetch` — typed request/response functions for all endpoints from Phase 2
- [ ] Task 3: Create a shared UI component library: Button, Input, Card, Modal, EmptyState, LoadingSpinner, ErrorBanner
- [ ] Task 4: Establish design tokens as CSS variables: colors (neutral + accent palette), spacing scale, typography scale, border radii, shadows
- [ ] Task 5: Create `ApartmentListPage` — displays apartments as cards with name, address, area, room count. "New Apartment" button.
- [ ] Task 6: Create `ApartmentFormModal` — form for creating/editing apartment (name, address, total area). Zod validation.
- [ ] Task 7: Create `ApartmentDetailPage` — shows apartment info header + list of rooms as cards. Each room card shows name, dimensions, shape preview (simple SVG outline). "Add Room" button.
- [ ] Task 8: Create `RoomFormModal` — form for creating/editing room (name, shape type selector: rectangular vs custom polygon, width/height for rectangular, wall height, plinth height, plinth thickness). For rectangular, auto-generate polygon points from width/height.
- [ ] Task 9: Implement delete confirmation dialog for apartments and rooms
- [ ] Task 10: Add navigation: clicking a room card navigates to `/apartments/:id/rooms/:roomId/editor` (shows placeholder "Editor coming in Phase 4")
- [ ] Task 11: Add responsive layout — sidebar navigation on desktop, bottom nav on mobile. App shell with header showing current location breadcrumbs.
- [ ] Task 12: Wire all UI to API client — loading states, error handling, optimistic updates where appropriate

## Files to Modify/Create
- `apps/client/src/main.tsx` — add RouterProvider
- `apps/client/src/router.tsx` — route definitions
- `apps/client/src/styles/tokens.css` — CSS custom properties (design tokens)
- `apps/client/src/styles/global.css` — global reset and base styles
- `apps/client/src/api/client.ts` — typed API client functions
- `apps/client/src/components/ui/Button.tsx` — shared Button component
- `apps/client/src/components/ui/Input.tsx` — shared Input component
- `apps/client/src/components/ui/Card.tsx` — shared Card component
- `apps/client/src/components/ui/Modal.tsx` — shared Modal component
- `apps/client/src/components/ui/EmptyState.tsx` — empty state placeholder
- `apps/client/src/components/ui/LoadingSpinner.tsx` — loading indicator
- `apps/client/src/components/ui/ErrorBanner.tsx` — error display
- `apps/client/src/components/layout/AppShell.tsx` — app shell with header, sidebar, breadcrumbs
- `apps/client/src/pages/ApartmentListPage.tsx` — apartment list
- `apps/client/src/pages/ApartmentDetailPage.tsx` — apartment detail with rooms
- `apps/client/src/pages/RoomEditorPage.tsx` — placeholder for Phase 4
- `apps/client/src/components/apartments/ApartmentCard.tsx` — apartment card
- `apps/client/src/components/apartments/ApartmentFormModal.tsx` — create/edit form
- `apps/client/src/components/rooms/RoomCard.tsx` — room card with shape preview
- `apps/client/src/components/rooms/RoomFormModal.tsx` — create/edit room form
- `apps/client/src/components/shared/ConfirmDialog.tsx` — delete confirmation

## Acceptance Criteria
- User can create, view, edit, and delete apartments
- User can create, view, edit, and delete rooms within an apartment
- Rectangular rooms auto-generate polygon shape from width/height
- Navigation works: apartment list → apartment detail → room editor (placeholder)
- All API interactions show loading states and handle errors gracefully
- Design is clean, consistent, and responsive
- All UI uses the design token system (no hardcoded colors/sizes)

## Notes
- Keep the design professional and clean — this is a tool for professionals (electricians, furniture makers)
- Room shape preview on the card is a simple SVG polygon outline — not the full editor
- The editor placeholder page should show room name and a message like "2D Editor loading in next phase"
- Use CSS Modules or plain CSS with design tokens (no Tailwind in this project)

## Review Checklist
- [ ] All tasks completed
- [ ] Code follows project conventions
- [ ] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)

## Handoff to Next Phase
<!-- Filled in by the implementation agent after completing this phase -->
