Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
279 changes: 279 additions & 0 deletions Terranes/rules/completion-log.md
Original file line number Diff line number Diff line change
Expand Up @@ -763,3 +763,282 @@ Deployment manifests are not applicable to the in-memory demo platform. All serv
- `rules/milestones.md` — Added Chunk 063 (done)

**Tests:** 29 Playwright E2E tests × 6 browser projects = 174 cross-browser runs. 83 Vitest component tests. 446 NUnit tests. All passing.

---

### Chunk 052 — Responsive Layout Overhaul (2026-04-09)

**Goal:** Migrate sidebar breakpoint from 641px to Bootstrap md (768px). Slide animation sidebar. Mobile-first column classes on all views.

**Changes:**
- `style.css` — All breakpoints changed from 641px→768px. `.nav-scrollable` uses `max-height` transition instead of `display:none`. `prefers-reduced-motion` support. Card hover effect added. Hardcoded colours replaced with CSS variables (`var(--bs-body-bg)`, `var(--bs-border-color)`).
- All 7 views — Added `col-12` base class for mobile stacking (`col-12 col-md-4`, `col-12 col-md-6`, etc.)

**Tests:** 4 new tests in `responsive-layout.spec.ts`.

---

### Chunk 053 — Accessibility & Keyboard Navigation (2026-04-09)

**Goal:** Add ARIA attributes, Escape-to-close, focus trap, skip-to-content link.

**Changes:**
- `App.vue` — Added skip-to-content link, `id="main-content"` on `<main>`, `aria-label="Toggle navigation"` on toggler
- `DetailModal.vue` — Added `role="dialog"`, `aria-modal="true"`, `aria-label="Close modal"`, Escape key listener, focus trap on open
- VillagesView, HomeModelsView, LandBlocksView, MarketplaceView — `aria-label` on all action buttons

**Tests:** 7 new tests in `accessibility.spec.ts`.

---

### Chunk 054 — Dark Mode Support (2026-04-09)

**Goal:** useTheme composable with system-preference detection, localStorage persistence, toggle button.

**Files created:**
- `src/composables/useTheme.ts` — `useTheme()` composable with `isDark` ref, `toggleTheme()`, `_resetTheme()` test helper. Reads localStorage first, then `prefers-color-scheme`. Sets `data-bs-theme` attribute.
- `src/__tests__/composables/useTheme.spec.ts` — 5 tests

**Files modified:**
- `App.vue` — Theme toggle button in sidebar
- `style.css` — Replaced hardcoded `#f7f7f7` and `#d6d5d5` with CSS variables

---

### Chunk 055 — Enhanced Home Landing Page (2026-04-09)

**Goal:** Hero section, how-it-works flow, testimonials, footer.

**Files modified:**
- `HomeView.vue` — Added hero section with animated gradient, "How It Works" 4-step section, testimonials carousel with prev/next, footer. `scrollTo()` for smooth scroll. All sections responsive with `col-12 col-md-*`.

**Tests:** 4 new tests added to `HomeView.spec.ts` (total 10).

---

### Chunk 056 — Search & Filter UX Improvements (2026-04-09)

**Goal:** Debounced search, filter chips, result count, empty-state SVGs, URL query-string sync.

**Files created:**
- `src/composables/useDebounce.ts` — Debounce composable (300ms default)
- `src/components/FilterChip.vue` — Badge with ×-remove button
- `src/components/EmptyState.vue` — SVG magnifying glass + message
- `src/__tests__/composables/useDebounce.spec.ts` — 3 tests
- `src/__tests__/components/FilterChip.spec.ts` — 2 tests
- `src/__tests__/components/EmptyState.spec.ts` — 2 tests

**Files modified:**
- VillagesView, HomeModelsView, LandBlocksView, MarketplaceView — Debounced search inputs, filter chips, result count badges, EmptyState component, URL query-string sync with `useRoute`/`useRouter`

---

### Chunk 057 — Card & List Interaction Polish (2026-04-09)

**Goal:** Card hover lift, pagination, sort-by dropdowns.

**Files created:**
- `src/components/PaginationBar.vue` — Reusable pagination (prev/next, page numbers, "Showing X–Y of Z")
- `src/__tests__/components/PaginationBar.spec.ts` — 4 tests

**Files modified:**
- `style.css` — Card hover effect (`translateY(-4px)` + shadow), `prefers-reduced-motion`
- MarketplaceView — Sort-by dropdown (price/date), pagination
- LandBlocksView — Sort-by dropdown (area/suburb), pagination

---

### Chunk 058 — Journey UX Enhancement (2026-04-09)

**Goal:** Step indicator, confirmation dialog, timeline, confetti on completion.

**Files created:**
- `src/components/StepIndicator.vue` — Horizontal stepper with circles and connecting lines
- `src/components/ConfirmDialog.vue` — Confirmation modal (confirm/cancel emits)
- `src/components/ConfettiEffect.vue` — 30+ CSS-animated confetti particles, auto-dismiss 3s
- `src/components/JourneyTimeline.vue` — Vertical timeline of completed stages
- `src/__tests__/components/StepIndicator.spec.ts` — 3 tests
- `src/__tests__/components/ConfirmDialog.spec.ts` — 3 tests

**Files modified:**
- JourneyView.vue — Replaced progress bar with StepIndicator, added ConfirmDialog before completion, ConfettiEffect on completion, JourneyTimeline sidebar

---

### Chunk 059 — Dashboard Widgets & Charts (2026-04-09)

**Goal:** StatCard with animated count-up, sparkline SVG, notification bell, quick actions.

**Files created:**
- `src/components/StatCard.vue` — Animated count-up with requestAnimationFrame, `prefers-reduced-motion` skip
- `src/components/SparklineChart.vue` — Pure SVG sparkline (polyline from data points)
- `src/__tests__/components/StatCard.spec.ts` — 3 tests
- `src/__tests__/components/SparklineChart.spec.ts` — 2 tests

**Files modified:**
- DashboardView.vue — StatCard components, SparklineChart in each card, notification bell with unread count badge, quick-action router-links

---

### Chunk 060 — Breadcrumbs, Page Titles & Navigation (2026-04-09)

**Goal:** BreadcrumbBar, document title per route, 404 page.

**Files created:**
- `src/components/BreadcrumbBar.vue` — Auto-generated from `route.meta.breadcrumb`
- `src/views/NotFoundView.vue` — 404 page with back-to-home link
- `src/__tests__/components/BreadcrumbBar.spec.ts` — 3 tests
- `src/__tests__/NotFoundView.spec.ts` — 2 tests

**Files modified:**
- `router/index.ts` — Added `meta: { title, breadcrumb }` to all routes, catch-all 404 route
- `App.vue` — `router.afterEach` sets `document.title`, BreadcrumbBar component

---

### Chunk 061 — Form Validation & Input UX (2026-04-09)

**Goal:** Real-time validation, clear-all-filters, auto-focus.

**Files created:**
- `src/composables/useValidation.ts` — Validation composable with `required`, `minValue`, `maxValue`, `pattern` rules
- `src/__tests__/composables/useValidation.spec.ts` — 5 tests

**Files modified:**
- HomeModelsView — minBedrooms validation (0–10), auto-focus, clear-all-filters
- MarketplaceView — maxPrice validation (≥0), auto-focus, clear-all-filters
- LandBlocksView — Auto-focus, clear-all-filters

---

### Chunk 062 — Performance & Bundle Optimisation (2026-04-09)

**Goal:** Route-based code splitting verification, paged list, lazy loading.

**Files created:**
- `src/composables/usePagedList.ts` — Batched list rendering (20 items per batch, "Show More")
- `src/__tests__/composables/usePagedList.spec.ts` — 3 tests

**Files modified:**
- LandBlocksView — Uses `usePagedList` for "Show More" rendering instead of full list
- `router/index.ts` — Verified all routes use `() => import(...)` lazy loading (including catch-all 404)

**Phase 13 Summary:**
- 18 shared components, 6 composables in src/Web.Vue
- 7 view pages + 1 NotFoundView
- 141 Vitest tests across 32 test files
- 29 Playwright E2E tests across 5 spec files
- 446 NUnit tests (.NET backend)

---

## Phase 14 — Feature Expansion

### Chunk 064 — Global Search (2026-04-09)

**Goal:** Wire frontend to /api/search endpoints. Global search bar + full search page.

**Files created:**
- `src/views/SearchView.vue` — Full search page with query input, entity type filter, result cards, debounce, URL sync
- `src/components/SearchBar.vue` — Compact search bar for App.vue header, navigates to /search on Enter
- `src/__tests__/SearchView.spec.ts` — 4 tests
- `src/__tests__/components/SearchBar.spec.ts` — 4 tests

**Files modified:**
- `src/types/index.ts` — Added `SearchResult` type
- `src/api/client.ts` — Added `search()` and `searchByType()` methods
- `src/router/index.ts` — Added /search route
- `src/App.vue` — Added SearchBar in top-row header

---

### Chunk 065 — Quote Details in Journey (2026-04-09)

**Goal:** Wire journey quote flow to /api/aggregated-quotes. Show quote breakdown after QuoteReceived.

**Files created:**
- `src/components/QuoteSummary.vue` — Quote display with total amount, line items table, loading state
- `src/__tests__/components/QuoteSummary.spec.ts` — 3 tests

**Files modified:**
- `src/types/index.ts` — Added `AggregatedQuote` and `QuoteLineItem` types
- `src/api/client.ts` — Added `aggregateQuote()` and `getJourneyQuotes()` methods
- `src/views/JourneyView.vue` — Added QuoteSummary display after QuoteReceived stage

---

### Chunk 066 — User Authentication (2026-04-09)

**Goal:** Login/register views with useAuth composable. Wire to /api/auth endpoints.

**Files created:**
- `src/composables/useAuth.ts` — Auth composable with login, register, logout, restoreSession, localStorage persistence
- `src/views/LoginView.vue` — Login form with validation, error handling, redirect to dashboard
- `src/views/RegisterView.vue` — Register form with password confirmation, validation, redirect
- `src/__tests__/composables/useAuth.spec.ts` — 6 tests
- `src/__tests__/LoginView.spec.ts` — 3 tests

**Files modified:**
- `src/types/index.ts` — Added `PlatformUser` type
- `src/api/client.ts` — Added `login()`, `register()`, `getUser()` methods
- `src/router/index.ts` — Added /login and /register routes
- `src/App.vue` — Added auth state display (user name + logout or login link), restoreSession on mount

---

### Chunk 067 — Partner Directory (2026-04-09)

**Goal:** Partner directory page with category filter. Wire to partner endpoints.

**Files created:**
- `src/views/PartnersView.vue` — Partner directory with category filter, search, card grid, detail modal
- `src/__tests__/PartnersView.spec.ts` — 5 tests

**Files modified:**
- `src/types/index.ts` — Added `Partner` type
- `src/api/client.ts` — Added `getBuilders()` and `getBuilderProfile()` methods
- `src/router/index.ts` — Added /partners route
- `src/App.vue` — Added Partners + Search nav links

---

### Chunk 068 — 3D Walkthroughs & Design Editor (2026-04-09)

**Goal:** Walkthrough sessions list and text-based design editor. Wire to /api/walkthroughs and /api/design-editor.

**Files created:**
- `src/views/WalkthroughsView.vue` — Walkthrough sessions with generate form, card grid, detail modal
- `src/views/DesignEditorView.vue` — Design editor with edit form, operation selector, edit history, undo
- `src/__tests__/WalkthroughsView.spec.ts` — 4 tests
- `src/__tests__/DesignEditorView.spec.ts` — 3 tests

**Files modified:**
- `src/types/index.ts` — Added `Walkthrough`, `WalkthroughScene`, `WalkthroughPoi`, `DesignEdit` types
- `src/api/client.ts` — Added `generateWalkthrough()`, `getWalkthrough()`, `getWalkthroughsByModel()`, `getWalkthroughPois()`, `applyEdit()`, `getEditHistory()`, `undoLastEdit()` methods
- `src/router/index.ts` — Added /walkthroughs and /design-editor routes
- `src/App.vue` — Added Walkthroughs + Design Editor nav links

---

### Chunk 069 — Reporting & Compliance (2026-04-09)

**Goal:** Reports generation and compliance checking. Wire to /api/reports and /api/compliance.

**Files created:**
- `src/views/ReportsView.vue` — Two-section page: reports (generate, list, view) and compliance (check, results)
- `src/__tests__/ReportsView.spec.ts` — 4 tests

**Files modified:**
- `src/types/index.ts` — Added `Report` and `ComplianceResult` types
- `src/api/client.ts` — Added `generateReport()`, `getReport()`, `getTenantReports()`, `getReportTypes()`, `runComplianceCheck()`, `getComplianceResult()`, `getComplianceByPlacement()` methods
- `src/router/index.ts` — Added /reports route
- `src/App.vue` — Added Reports nav link

**Phase 14 Summary:**
- 7 new views (Search, Login, Register, Partners, Walkthroughs, DesignEditor, Reports)
- 2 new components (SearchBar, QuoteSummary)
- 1 new composable (useAuth)
- 18 new API methods in client.ts
- 8 new TypeScript types
- 177 Vitest tests across 41 test files
- All backend API endpoint groups now wired to frontend
38 changes: 19 additions & 19 deletions Terranes/rules/milestones.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,30 +90,30 @@ Vue frontend cleanup, reusable components, and 49 Vitest component tests. Old Bl
smooth interactions, responsive layouts, accessible controls, and user-friendly feedback.
Each chunk is independently deployable and testable.

| Chunk | Scope | Status |
|-------|-------|--------|
| 050 | **Toast Notifications & Action Feedback** — Create `ToastContainer.vue` + `useToast()` composable. Add success/error toasts to Journey actions (advance stage, request quote, complete). Add loading-disabled state to all async buttons. 6+ Vitest tests. | `done` |
| 051 | **Skeleton Loaders & Smooth Transitions** — Create `SkeletonCard.vue` and `SkeletonTable.vue` components. Replace `<LoadingSpinner>` with skeleton placeholders in all 5 data views. Add Vue `<Transition>` fade on route changes and list enter/leave in card grids. 8+ Vitest tests. | `done` |
| 052 | **Responsive Layout Overhaul** — Migrate sidebar breakpoint from 641px to Bootstrap md (768px). Add collapsible sidebar with slide animation. Make all card grids stack to 1-column on mobile. Add responsive table scrolling. Fix top-bar on mobile. Verify on 320px/768px/1200px. 4+ Vitest tests. | `not-started` |
| 053 | **Accessibility & Keyboard Navigation** — Add `aria-label` to all buttons and interactive elements. Add Escape-to-close on all modals. Add focus trap inside modals. Add skip-to-content link. Add `aria-live` region for toast announcements. Audit with axe-core rules. 6+ Vitest tests. | `not-started` |
| 054 | **Dark Mode Support** — Add `useTheme()` composable with system-preference detection + manual toggle. Add theme toggle button in sidebar. Migrate `style.css` hardcoded colours to Bootstrap CSS variables. Sidebar gradient adapts to dark mode. Persist preference in localStorage. 4+ Vitest tests. | `not-started` |
| 055 | **Enhanced Home Landing Page** — Add hero section with animated gradient background. Add "How it works" 4-step visual flow. Add testimonial carousel (static data). Add footer with links. Add smooth scroll to sections. Mobile-optimised layout. 4+ Vitest tests. | `not-started` |
| 056 | **Search & Filter UX Improvements** — Add debounced search inputs (300ms) across Villages, Home Models, Land, Marketplace. Add filter chips showing active filters with ×-remove. Add result count badge. Add empty-state illustrations (SVG). Add URL query-string sync for shareable filter URLs. 6+ Vitest tests. | `not-started` |
| 057 | **Card & List Interaction Polish** — Add hover lift effect on all cards (transform + shadow). Add click-ripple feedback. Add image placeholder gradients on model/village cards. Add pagination component for lists > 12 items. Add sort-by dropdown on Marketplace and Land views. 6+ Vitest tests. | `not-started` |
| 058 | **Journey UX Enhancement** — Add animated step indicator (horizontal stepper with connecting lines). Add confirmation dialogs before irreversible actions (complete journey). Add journey timeline sidebar showing all past actions with timestamps. Add confetti animation on journey completion. 5+ Vitest tests. | `not-started` |
| 059 | **Dashboard Widgets & Charts** — Add `StatCard.vue` with animated count-up numbers. Add mini sparkline chart for analytics trends (pure SVG, no chart library). Add notification bell icon in top-bar with unread count badge. Add quick-action buttons (New Journey, Browse Designs). 6+ Vitest tests. | `not-started` |
| 060 | **Breadcrumbs, Page Titles & Navigation** — Add `BreadcrumbBar.vue` component with auto-generated breadcrumbs from route meta. Add `<title>` updates per route. Add active-page icon highlighting in sidebar. Add "Back to" links in detail modals. Add 404 page. 5+ Vitest tests. | `not-started` |
| 061 | **Form Validation & Input UX** — Add real-time validation on all filter inputs (number ranges, required fields). Add input masking for price fields (AUD format). Add clear-all-filters button. Add auto-focus on first input when views mount. Standardise form-group spacing. 5+ Vitest tests. | `not-started` |
| 062 | **Performance & Bundle Optimisation** — Add route-based code splitting verification. Add image lazy loading for card thumbnails. Add virtual scrolling for large lists (> 50 items). Add web font preloading. Measure and log Lighthouse scores. 3+ Vitest tests. | `not-started` |
| 063 | **Playwright Multi-Browser E2E Tests** — Add Playwright with Chromium, Firefox, WebKit + mobile + tablet viewports. 29 E2E tests across 5 spec files: navigation, home page, responsive layout, views smoke, UX feedback/accessibility. AI agent rule in `rules/playwright-rules.md`. | `done` |
✅ Phase 13 complete — see `rules/completion-log.md` for full history.

18 shared components, 6 composables, 141 Vitest tests, 29 Playwright E2E tests. Full UX/UI polish: responsive layout (Bootstrap md breakpoints), accessibility (ARIA, focus trap, skip link), dark mode, enhanced home page, search/filter UX, card hover effects, pagination, journey step indicator with confetti, dashboard widgets with sparklines, breadcrumbs with route titles, form validation, and performance optimisation.

---

## Next Chunk
## Phase 14 — Feature Expansion (Wire Frontend to Backend APIs)

> **AI Agent Rule:** Before implementing any chunk in this phase, read `rules/ux-rules.md` for
> component conventions, design principles, and implementation patterns.

**Goal:** Connect the Vue 3 frontend to the remaining backend API endpoints that are already
implemented but not yet exposed in the UI. Each chunk adds a new view or feature page with
full API integration, tests, and navigation.

**Chunk 052** — Responsive Layout Overhaul.
✅ Phase 14 complete — see `rules/completion-log.md` for full history.

6 chunks (064-069). 5 new views (SearchView, LoginView, RegisterView, PartnersView, WalkthroughsView, DesignEditorView, ReportsView) + 2 new components (SearchBar, QuoteSummary) + 1 composable (useAuth). 177 Vitest tests. 18 API methods added. All backend API groups now wired to frontend.

---

## Next Chunk

Read `rules/ux-rules.md` before implementing.
All Phase 14 chunks are complete. Ready for Phase 15 or next feature work.

---

Expand Down
Loading
Loading