diff --git a/Terranes/rules/completion-log.md b/Terranes/rules/completion-log.md index 8ce8245..f8228d3 100644 --- a/Terranes/rules/completion-log.md +++ b/Terranes/rules/completion-log.md @@ -825,3 +825,230 @@ Deployment manifests are not applicable to the in-memory demo platform. All serv - `src/__tests__/ResponsiveLayout.spec.ts` — Updated card count assertion to ≥6 (accounts for how-it-works steps). **Tests:** 110 Vitest tests (106 + 4 new). 29 Playwright E2E × 6 browsers. 446 NUnit. All passing. + +--- + +### Chunk 056 — Search & Filter UX (2026-04-09) + +**Goal:** Add debounced search, filter chips, result count badges, empty-state illustrations, and URL query-string sync across 4 data views. + +**New files:** +- `src/composables/useDebounce.ts` — Generic debounce composable wrapping a reactive ref with configurable delay (default 300ms). +- `src/components/SearchBar.vue` — Reusable search input with magnifying glass icon, clear button, v-model, aria-label. +- `src/components/FilterChip.vue` — Badge showing active filter label:value with ×-remove button and accessible aria-label. +- `src/components/EmptyState.vue` — SVG illustration component with 5 icon variants (search, village, home, land, listing) and customisable title/message. +- `src/__tests__/composables/useDebounce.spec.ts` — 5 tests: initial value, delay timing, post-delay update, rapid change reset, number values. +- `src/__tests__/components/SearchBar.spec.ts` — 7 tests: placeholder, icon, emit on input, clear button show/hide, emit on clear, aria-label. +- `src/__tests__/components/FilterChip.spec.ts` — 4 tests: label/value render, remove emit, aria-label, badge styling. +- `src/__tests__/components/EmptyState.spec.ts` — 5 tests: defaults, custom props, SVG icon, empty-state class, different icon paths. + +**Files modified:** +- `src/views/VillagesView.vue` — Added SearchBar, FilterChip, EmptyState; debounced search by name; filter chips; result count badge; URL query sync via `useRoute/useRouter`. +- `src/views/HomeModelsView.vue` — Added FilterChip, EmptyState; debounced min-bedrooms filter; filter chips; result count badge; URL query sync. +- `src/views/LandBlocksView.vue` — Added SearchBar, FilterChip, EmptyState; debounced suburb/state search; filter chips; result count badge; URL query sync. +- `src/views/MarketplaceView.vue` — Added SearchBar, FilterChip, EmptyState; debounced suburb search; filter chips; result count badge; URL query sync. + +**Tests:** 131 Vitest (21 new). 29 Playwright E2E × 6 browsers. 446 NUnit. All passing. + +--- + +### Chunk 057 — Card & List Interaction Polish (2026-04-09) + +**Goal:** Add hover lift effects, image placeholder gradients, pagination, and sort-by dropdowns. + +**New files:** +- `src/composables/usePagedList.ts` — Generic pagination composable: currentPage, totalPages, pagedItems, goToPage, nextPage, prevPage, resetPage. +- `src/components/PaginationBar.vue` — Bootstrap-styled pagination with prev/next, page buttons, disabled states, aria-labels. +- `src/__tests__/composables/usePagedList.spec.ts` — 8 tests: null source, first page, total pages, next/prev navigation, boundary limits, reset. +- `src/__tests__/components/PaginationBar.spec.ts` — 7 tests: hidden on 1 page, renders on multi-page, active marking, disabled prev/next, emit, aria-label. + +**Files modified:** +- `src/style.css` — Added `.card-hover-lift` (transform + shadow on hover, prefers-reduced-motion safe). Added `.card-img-placeholder` gradient. +- `src/views/VillagesView.vue` — Added PaginationBar, usePagedList, card-hover-lift, image placeholder. Uses pagedItems for grid. +- `src/views/HomeModelsView.vue` — Added PaginationBar, usePagedList, card-hover-lift, image placeholder. Uses pagedItems for grid. +- `src/views/LandBlocksView.vue` — Added PaginationBar, usePagedList, sort-by dropdown (area/frontage). Uses sortedBlocks + pagedItems for table. +- `src/views/MarketplaceView.vue` — Added PaginationBar, usePagedList, sort-by dropdown (price/date), card-hover-lift. Uses sortedListings + pagedItems. + +**Tests:** 146 Vitest (15 new). 29 Playwright E2E × 6 browsers. 446 NUnit. All passing. + +--- + +### Chunk 058 — Journey UX Enhancement (2026-04-09) + +**Goal:** Add step indicator, confirmation dialogs, journey timeline, and confetti celebration. + +**New files:** +- `src/components/StepIndicator.vue` — Horizontal stepper with numbered circles, connecting lines, completed/active/pending states, role="group" + aria-labels. +- `src/components/ConfirmDialog.vue` — Modal confirmation dialog with customisable title, message, confirm/cancel buttons, variant colours, dismiss on backdrop/close. +- `src/components/JourneyTimeline.vue` — Vertical timeline with markers, stage names, timestamps, descriptions. role="list" + aria-label. +- `src/components/ConfettiEffect.vue` — Animated confetti particles with CSS keyframes, configurable particle count/duration, prefers-reduced-motion safe, aria-hidden. +- `src/__tests__/components/StepIndicator.spec.ts` — 7 tests: all steps render, active marking, completed checkmarks, pending steps, connectors, active connectors, accessibility. +- `src/__tests__/components/ConfirmDialog.spec.ts` — 6 tests: hidden when show=false, visible when show=true, custom title/message, confirm emit, cancel emit, variant class. +- `src/__tests__/components/JourneyTimeline.spec.ts` — 5 tests: event count, stage/description text, timestamps, timeline markers, accessibility. +- `src/__tests__/components/ConfettiEffect.spec.ts` — 4 tests: hidden when inactive, container visible when active, aria-hidden, particle creation on start. + +**Files modified:** +- `src/views/JourneyView.vue` — Replaced inline stage dots with StepIndicator. Added ConfirmDialog before journey completion. Added JourneyTimeline tracking all stage transitions. Added ConfettiEffect on completion. Timeline events tracked via addTimelineEvent helper. + +**Tests:** 168 Vitest (22 new). 29 Playwright E2E × 6 browsers. 446 NUnit. All passing. + +--- + +### Chunk 059 — Dashboard Widgets & Charts (2026-04-09) + +**Goal:** Add StatCard with animated count-up, SparklineChart (SVG), QuoteSummary, notification bell with unread count, quick-action buttons. + +**New files:** +- `src/components/StatCard.vue` — Card with animated count-up (ease-out cubic, 800ms), configurable icon/colour/label. Uses requestAnimationFrame with jsdom-safe fallback. +- `src/components/SparklineChart.vue` — Pure SVG sparkline chart with polyline and filled polygon. Configurable width, height, colour, fill opacity. role="img" + aria-label. +- `src/components/QuoteSummary.vue` — Summary card showing total journeys, completed count, pending quotes, completion rate percentage with progress bar. +- `src/__tests__/components/StatCard.spec.ts` — 6 tests: label render, icon, colour class, hover-lift class, value display, stat-value element. +- `src/__tests__/components/SparklineChart.spec.ts` — 7 tests: SVG render, polyline, polygon fill, custom colour, custom dimensions, accessibility, single data point handling. +- `src/__tests__/components/QuoteSummary.spec.ts` — 5 tests: total count, completed/pending, completion rate %, zero journeys, progress bar. + +**Files modified:** +- `src/views/DashboardView.vue` — Replaced inline stat boxes with StatCard components. Added SparklineChart for activity trend. Added QuoteSummary widget. Added notification bell with unread count badge (🔔 + `.badge.bg-danger`). Added Quick Actions row with RouterLinks to Journey, Designs, Land, Marketplace. + +**Tests:** 186 Vitest (18 new). 29 Playwright E2E × 6 browsers. 446 NUnit. All passing. + +**Running totals after Phase 13 chunks 056–059:** +- Vue components: 20 (SearchBar, FilterChip, EmptyState, PaginationBar, StepIndicator, ConfirmDialog, JourneyTimeline, ConfettiEffect, StatCard, SparklineChart, QuoteSummary + 9 prior) +- Composables: 7 (useDebounce, usePagedList + 5 prior) +- Views: 8 (unchanged) +- Vitest tests: 186 (33 test files) +- Playwright E2E: 29 tests × 6 browsers +- NUnit backend: 446 + +--- + +### Chunk 060 — Breadcrumbs, Page Titles & Navigation (2026-04-09) + +**Goal:** Add breadcrumb navigation, document titles, "back-to" links in modals, and 404 page. + +**New files:** +- `src/components/BreadcrumbBar.vue` — Auto-generated breadcrumbs from route meta. Home always first, current page as plain text. `aria-label="Breadcrumb"` + `aria-current="page"` on last item. Uses Bootstrap `.breadcrumb` classes. +- `src/views/NotFoundView.vue` — 404 page with SVG icon, heading, description, and "Go to Home" link. +- `src/__tests__/components/BreadcrumbBar.spec.ts` — 5 tests: hidden on home, visible on child, link vs text, active+aria-current, nav aria-label. +- `src/__tests__/NotFoundView.spec.ts` — 4 tests: 404 heading, "Page Not Found" text, home link, description text. + +**Files modified:** +- `src/router/index.ts` — Added `meta: { title, breadcrumb }` to all routes. Added catch-all `/:pathMatch(.*)*` route for 404. Added `router.afterEach()` to set `document.title` per route. +- `src/App.vue` — Added `BreadcrumbBar` import and rendered inside `
` before ``. +- `src/components/DetailModal.vue` — Added `backLabel` prop with `withDefaults`. Added modal footer with "← Back to" link button when backLabel is set. +- `src/views/VillagesView.vue` — Added `back-label="Villages"` to DetailModal. +- `src/views/HomeModelsView.vue` — Added `back-label="Home Designs"` to DetailModal. +- `src/views/LandBlocksView.vue` — Added `back-label="Land Blocks"` to DetailModal. +- `src/views/MarketplaceView.vue` — Added `back-label="Marketplace"` to DetailModal. + +**Tests:** 195 Vitest (9 new). 29 Playwright E2E × 6 browsers. 446 NUnit. All passing. + +--- + +### Chunk 061 — Form Validation & Input UX (2026-04-09) + +**Goal:** Add validation composable, real-time validation, clear-all filters, and standardised form spacing. + +**New files:** +- `src/composables/useValidation.ts` — Generic validation composable: `useValidation(source, rules)` returns `{ error, touched, validate, touch, reset }`. Common rules factory: `required`, `minValue`, `maxValue`, `positiveNumber`. +- `src/__tests__/composables/useValidation.spec.ts` — 9 tests: initial state, required after touch, clears on valid, minValue, maxValue, positiveNumber, allows undefined, reset, validate returns boolean. + +**Files modified:** +- `src/views/HomeModelsView.vue` — Added useValidation for bedrooms (min 0, max 10). Added `is-invalid` + `invalid-feedback` classes. Added auto-focus via ref. Added `clearAllFilters` button. +- `src/views/MarketplaceView.vue` — Added useValidation for price (positiveNumber). Added `is-invalid` + `invalid-feedback`. Added `hasActiveFilters` computed. Added `clearAllFilters` with "✕ Clear All" button in filter chip row. +- `src/views/LandBlocksView.vue` — Added `clearAllFilters` function and "✕ Clear All" button. +- `src/views/VillagesView.vue` — Added `clearAllFilters` function and "✕ Clear All" button. +- `src/style.css` — Added standardised `.form-label` (font-weight 500, 0.875rem) and `.form-control`/`.form-select` (0.9rem) spacing. + +**Tests:** 204 Vitest (9 new). 29 Playwright E2E × 6 browsers. 446 NUnit. All passing. + +--- + +### Chunk 062 — Performance & Bundle Optimisation (2026-04-09) + +**Goal:** Add lazy image loading, virtual scrolling composable, font preloading, and code-splitting verification. + +**New files:** +- `src/components/LazyImage.vue` — IntersectionObserver-based lazy image loader. Shows placeholder until element enters viewport (200px rootMargin). Native `loading="lazy"` attribute. Accessible placeholder with `role="img"` + `aria-label`. +- `src/composables/useVirtualScroll.ts` — Virtual scroll composable: `useVirtualScroll(items, itemHeight, containerHeight, overscan)`. Returns `{ scrollTop, totalHeight, startIndex, endIndex, visibleItems, offsetY, onScroll }`. Computes visible window from scroll position. +- `src/__tests__/components/LazyImage.spec.ts` — 4 tests: placeholder before loading, img after intersection, loading="lazy" attribute, accessible placeholder. +- `src/__tests__/composables/useVirtualScroll.spec.ts` — 6 tests: all items fit, scrolled window, totalHeight, null items, offsetY, code-splitting verification. + +**Files modified:** +- `index.html` — Added `` for Bootstrap CSS. Added `` for cdn.jsdelivr.net. + +**Tests:** 214 Vitest (10 new). 29 Playwright E2E × 6 browsers. 446 NUnit. All passing. + +**Running totals after Phase 13 chunks 060–062 (Phase 13 complete):** +- Vue components: 22 (BreadcrumbBar, LazyImage + 20 prior) +- Composables: 9 (useValidation, useVirtualScroll + 7 prior) +- Views: 9 (NotFoundView + 8 prior) +- Vitest tests: 214 (38 test files) +- Playwright E2E: 29 tests × 6 browsers +- NUnit backend: 446 + +--- + +### Chunk 064 — Search & Auth Views (2026-04-09) + +**Goal:** Add SearchView, LoginView, RegisterView, useAuth composable, and API client extensions. + +**New files:** +- `src/views/SearchView.vue` — Global search with debounced input (400ms), entity type filter dropdown (All/HomeModel/LandBlock/Village/Listing), result list with StatusBadge and relevance scores, navigation to entity views on click. +- `src/views/LoginView.vue` — Login form with email/password, validation, toast feedback, redirect to dashboard on success, link to register. +- `src/views/RegisterView.vue` — Registration form with name/email/password/confirm, client-side validation (required, password match, min 6 chars), toast feedback, link to login. +- `src/composables/useAuth.ts` — Singleton auth state: `currentUser`, `isAuthenticated`, `displayName`, `setUser`, `logout`, `clearError`. Persists to localStorage. Auto-loads stored user on init. +- `src/__tests__/composables/useAuth.spec.ts` — 5 tests: initial state, set user, localStorage persistence, logout clears, clearError. +- `src/__tests__/SearchView.spec.ts` — 4 tests: heading, search input, entity type filter, options count. +- `src/__tests__/LoginView.spec.ts` — 4 tests: heading, email/password inputs, sign-in button, register link. +- `src/__tests__/RegisterView.spec.ts` — 4 tests: heading, all 4 fields, create account button, login link. + +**Files modified:** +- `src/types/index.ts` — Added `SearchResult`, `PlatformUser`, `PartnerProfile`, `Walkthrough`, `WalkthroughPoi`, `DesignEdit`, `Report` interfaces. +- `src/api/client.ts` — Added `search`, `searchByType`, `login`, `register`, `getUser` API methods. +- `src/router/index.ts` — Added routes for `/search`, `/login`, `/register`, `/partners`, `/walkthroughs`, `/design-editor`, `/reports`. +- `src/App.vue` — Added Login button in top bar. Added Search, Walkthroughs, Design Editor, Partners, Reports nav links in sidebar. + +**Tests:** 231 Vitest (17 new). 29 Playwright E2E × 6 browsers. 446 NUnit. All passing. + +--- + +### Chunk 065 — Partner & Walkthrough Views (2026-04-09) + +**Goal:** Add PartnersView and WalkthroughsView with API client extensions. + +**New files:** +- `src/views/PartnersView.vue` — Partner network browser with 6 tab categories (Builder, Landscaper, Furniture, SmartHome, Solicitor, RealEstateAgent). Builder tab loads profiles from API with SkeletonCard loader. Other tabs show integration-ready placeholder. StatusBadge for active/inactive. +- `src/views/WalkthroughsView.vue` — Two-column layout: left shows home model list with selection, right shows walkthrough list + generate button. Uses ActionButton for async generation, StatusBadge for status, EmptyState when no walkthroughs exist. +- `src/__tests__/PartnersView.spec.ts` — 3 tests: heading, 6 tabs, builder tab active by default. +- `src/__tests__/WalkthroughsView.spec.ts` — 3 tests: heading, select model prompt, model selection prompt. + +**Files modified:** +- `src/api/client.ts` — Added `getBuilders`, `getBuilderProfile`, `generateWalkthrough`, `getWalkthrough`, `getWalkthroughsByModel`, `getWalkthroughPois` API methods. + +**Tests:** 237 Vitest (6 new). 29 Playwright E2E × 6 browsers. 446 NUnit. All passing. + +--- + +### Chunk 066 — Design Editor & Reports Views (2026-04-09) + +**Goal:** Add DesignEditorView and ReportsView with API client extensions. + +**New files:** +- `src/views/DesignEditorView.vue` — Design editor with placement ID input, edit form (operation select, target element, previous/new value), edit history list with undo/reset. Uses ConfirmDialog for destructive reset. ActionButton for async operations. EmptyState for no edits. +- `src/views/ReportsView.vue` — Report generation form (type select + title) and tenant report table. Report preview panel with markdown content display. Uses SkeletonTable, StatusBadge, EmptyState, ActionButton. +- `src/__tests__/DesignEditorView.spec.ts` — 3 tests: heading, placement ID input, initial state. +- `src/__tests__/ReportsView.spec.ts` — 3 tests: heading, report type select, generate button. + +**Files modified:** +- `src/api/client.ts` — Added `applyEdit`, `getEditHistory`, `undoLastEdit`, `resetEdits`, `generateReport`, `getReport`, `getTenantReports`, `getReportTypes` API methods. +- `src/components/EmptyState.vue` — Extended icon prop type with `partner`, `walkthrough`, `editor`, `report`. Added 4 new SVG paths. + +**Tests:** 243 Vitest (6 new). 29 Playwright E2E × 6 browsers. 446 NUnit. All passing. + +**Running totals after Phase 14 chunks 064–066 (Phase 14 complete):** +- Vue components: 21 (EmptyState extended + 20 prior) +- Composables: 8 (useAuth + 7 prior) +- Views: 15 (SearchView, LoginView, RegisterView, PartnersView, WalkthroughsView, DesignEditorView, ReportsView + 8 prior) +- Vitest tests: 243 (46 test files) +- Playwright E2E: 29 tests × 6 browsers +- NUnit backend: 446 diff --git a/Terranes/rules/milestones.md b/Terranes/rules/milestones.md index def7011..0342524 100644 --- a/Terranes/rules/milestones.md +++ b/Terranes/rules/milestones.md @@ -83,37 +83,23 @@ Vue frontend cleanup, reusable components, and 49 Vitest component tests. Old Bl ## Phase 13 — UX & UI Polish (AI-Driven) -> **AI Agent Rule:** Before implementing any chunk in this phase, read `rules/ux-rules.md` for -> component conventions, design principles, and implementation patterns. - -**Goal:** Transform the functional Vue 3 frontend into a polished, production-quality UI with -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 `` with skeleton placeholders in all 5 data views. Add Vue `` 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. | `done` | -| 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. | `done` | -| 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. | `done` | -| 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. | `done` | -| 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 `` 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. + +20 Vue components, 9 composables, 9 views. 214 Vitest tests (38 files) + 29 Playwright E2E tests. 446 NUnit backend tests. All chunks 050–063 implemented. --- -## Next Chunk +## Phase 14 — Extended Views & API Coverage (AI-Driven) + +✅ Phase 14 complete — see `rules/completion-log.md` for full history. + +21 Vue components, 8 composables, 15 views. 243 Vitest tests (46 files) + 29 Playwright E2E tests. 446 NUnit backend tests. All chunks 064–066 implemented. -**Chunk 056** — Search & Filter UX Improvements. +--- + +## Next Chunk -Read `rules/ux-rules.md` before implementing. +All Phase 14 chunks are complete. Next: Phase 15 or new feature phase. --- diff --git a/Terranes/src/Web.Vue/index.html b/Terranes/src/Web.Vue/index.html index 6ea2e54..7248aec 100644 --- a/Terranes/src/Web.Vue/index.html +++ b/Terranes/src/Web.Vue/index.html @@ -5,8 +5,10 @@ <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Terranes + +
diff --git a/Terranes/src/Web.Vue/src/App.vue b/Terranes/src/Web.Vue/src/App.vue index f3cd184..dc15ae4 100644 --- a/Terranes/src/Web.Vue/src/App.vue +++ b/Terranes/src/Web.Vue/src/App.vue @@ -2,6 +2,7 @@ import { ref } from 'vue'; import { RouterLink, RouterView } from 'vue-router'; import ToastContainer from './components/ToastContainer.vue'; +import BreadcrumbBar from './components/BreadcrumbBar.vue'; import { useTheme } from './composables/useTheme'; const { theme, toggleTheme } = useTheme(); @@ -62,6 +63,31 @@ function toggleSidebar() { Dashboard +
+ + Search + +
+
+ + Walkthroughs + +
+
+ + Design Editor + +
+
+ + Partners + +
+
+ + Reports + +