Update documentation after full frontend redesign and bug fix session

Updates CLAUDE.md (design system, tech stack, directory structure, conventions),
TASKS.md (redesign and bug fix items checked off), and creates session log for
the 2026-03-14 redesign session covering layout rebuild, SCSS replacement,
component migration, and 12 bug fixes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

CLAUDE.md

@@ -26,15 +26,13 @@ When a phase is completed or a significant task within a phase is finished:
 ### Visual Verification (MANDATORY)
 After every successful `npm run build`:
 1. Take headless Chrome screenshots of affected pages
-2. Compare layout and design against the Vuexy demo at: https://demos.pixinvent.com/vuexy-vuejs-laravel-admin-template/demo-6/
+2. Compare layout and design against the EZSCALE design system (navy blue palette, Plus Jakarta Sans font, custom SCSS in `resources/styles/`)
 3. Fix any visual discrepancies before considering the task complete
-4. Key demo pages for reference:
-   - Login: `.../demo-6/pages/authentication/login-v2`
-   - Register: `.../demo-6/pages/authentication/register-v2`
-   - Forgot Password: `.../demo-6/pages/authentication/forgot-password-v2`
-   - Dashboard: `.../demo-6/dashboards/analytics`
-   - Account Settings: `.../demo-6/pages/account-settings/account`
-   - Pricing: `.../demo-6/pages/pricing`
+4. Key pages to verify:
+   - Login/Register (split-screen auth layout with gradient art)
+   - Marketing homepage (transparent navbar, animated heroes, mega footer)
+   - Admin/Account dashboards (sidebar + top navbar layout)
+   - Pricing page (service type tabs, billing cycle toggle)
 
 ## Laravel App Location
 The Laravel application is in **`website/`**. All artisan, composer, and npm commands run from there.
@@ -63,16 +61,23 @@ website/
 │   │   ├── bootstrap.ts
 │   │   ├── types/             # TypeScript interfaces
 │   │   ├── utils/             # Resolvers, formatters
+│   │   ├── stores/            # Pinia stores (toast.ts)
 │   │   ├── navigation/        # account.ts, admin.ts, marketing.ts
 │   │   ├── plugins/vuetify/   # theme.ts, defaults.ts, icons.ts, index.ts
-│   │   ├── @layouts/          # Layout SCSS stubs for Vuexy compatibility
+│   │   ├── @layouts/          # Layout types (NavLink, NavGroup, NavSectionTitle)
 │   │   ├── Layouts/           # AccountLayout, AdminLayout, AuthLayout, MarketingLayout
-│   │   ├── Components/        # FlashMessages, StatCard, StatusChip, ThemeSwitcher, app-form-elements/
-│   │   └── Pages/             # Auth/ (7), Profile/ (2), Plans/ (1), Checkout/ (1), Subscriptions/ (2), Billing/ (3), Services/ (2), Tickets/ (3), Admin/ (30+), Marketing/ (14), Dashboard
-│   ├── styles/                # SCSS with Vuexy @core overrides
-│   │   ├── @core/             # Copied from Vuexy: base + template SCSS overrides
+│   │   ├── Components/        # AppSidebar, AppTopNavbar, CommandPalette, ToastStack, NotificationPanel, SkeletonLoader, EmptyState, Breadcrumbs, StatCard, StatusChip, ThemeSwitcher, marketing/ (HeroSection, PricingCard, GlassCard, ScrollReveal, etc.)
+│   │   └── Pages/             # Auth/ (7), Profile/ (2), Plans/ (1), Checkout/ (1), Subscriptions/ (2), Billing/ (3), Services/ (2), Tickets/ (3), Admin/ (30+), Marketing/ (12), Dashboard
+│   ├── styles/                # Custom EZSCALE design system SCSS
+│   │   ├── _variables.scss    # Design tokens (colors, spacing, typography)
+│   │   ├── _mixins.scss       # Reusable SCSS mixins
+│   │   ├── _animations.scss   # Keyframe animations and transitions
+│   │   ├── _typography.scss   # Font definitions (Plus Jakarta Sans, JetBrains Mono)
+│   │   ├── _component-overrides.scss  # Vuetify component style overrides
+│   │   ├── _marketing.scss    # Marketing-specific styles
+│   │   ├── _layouts.scss      # Layout-specific styles
 │   │   ├── variables/         # _vuetify.scss, _template.scss
-│   │   └── styles.scss        # Main entry — imports @core SCSS chain
+│   │   └── styles.scss        # Main entry — imports all design system files
 │   ├── images/
 │   └── views/app.blade.php    # Inertia root template
 ├── routes/                  # web.php, account.php, admin.php, marketing.php, webhooks.php, api.php
@@ -84,8 +89,10 @@ website/
 
 ## Tech Stack
 - **Framework:** Laravel 12 (PHP 8.3), Laravel 12 slim structure (no Kernel files)
-- **Frontend:** Vue 3 + Inertia.js v2 + TypeScript (REQUIRED) + Vuetify 3 (Vuexy design system) + Vite 7
-- **UI Theme:** Vuexy Vue + Laravel Admin Dashboard — SCSS overrides from @core integrated, AppTextField/AppSelect/AppTextarea wrapper components, purple primary (#7367F0)
+- **Frontend:** Vue 3 + Inertia.js v2 + TypeScript (REQUIRED) + Vuetify 3 + Vite 7
+- **UI Theme:** Custom EZSCALE design system — navy blue primary (#1d4ed8), Plus Jakarta Sans + JetBrains Mono fonts (Bunny Fonts CDN), subdomain-aware theming (light for marketing, dark for admin/account)
+- **Charts:** ECharts via `vue-echarts` for analytics dashboards
+- **Utilities:** `@vueuse/core` for composable utilities
 - **Testing:** Pest 4 + PHPUnit 12 (347 tests, 1866 assertions)
 - **Formatting:** Laravel Pint
 - **Payments:** Laravel Cashier (Stripe) + srmklive/paypal (PayPal)
@@ -115,7 +122,7 @@ vendor/bin/pint --dirty --format agent  # Format changed files
 - Define emits with typed `defineEmits<{ event: [payload: Type] }>()`
 - Use explicit types for `ref<Type>()`, `computed<Type>()`, and function return types
 - No `any` type — use proper interfaces or type aliases
-- Shared types go in `resources/js/types/` (e.g., `models.ts`, `billing.ts`)
+- Shared types go in `resources/ts/types/` (e.g., `models.ts`, `billing.ts`)
 - Inertia page props should be typed with interfaces
 
 ### Example Component Pattern
@@ -146,38 +153,31 @@ const isActive = computed<boolean>(() => props.count > 0)
 </script>
 ```
 
-### Migration Note
-Existing `.vue` files in `resources/js/` were written in plain JavaScript during Phase 1-2. They must be migrated to TypeScript as they are touched. When working on a page, convert it to TypeScript as part of the work.
+## Design System
 
-## Vuexy Theme Reference
-The Vuexy theme is at `../vuexy-theme-vue-laravel-full-example-typescript/`. Use it as a **reference** for UI patterns, component design, and styling conventions.
+The EZSCALE design system replaces the previous Vuexy-based theme. Key design tokens and patterns:
 
-### Key Vuexy Patterns to Follow
+### Colors
+- **Primary:** Navy blue `#1d4ed8`, lighter variant `#3b82f6`
+- **Subdomain theming:** Marketing uses light mode, Admin/Account use dark mode by default
+- **Theme persistence:** User preference saved to localStorage key `ezscale-theme`, read on Vuetify init
+
+### Typography
+- **UI font:** Plus Jakarta Sans (via Bunny Fonts CDN)
+- **Code font:** JetBrains Mono (via Bunny Fonts CDN)
+
+### Key Patterns
 - **Component structure:** `<script lang="ts" setup>` → props interface → state → computed → methods → watchers
-- **Vuetify components:** VCard, VBtn, VTextField, VIcon, VAvatar, VChip, VDataTable, etc.
-- **Layout system:** Vertical nav with collapsible sidebar, sticky navbar, configurable footer
-- **Theme system:** Light/dark/system modes with skin variants (default, bordered)
+- **Vuetify components:** VCard, VBtn, VTextField, VSelect, VTextarea, VIcon, VAvatar, VChip, VDataTable, etc.
+- **Layout system:** AppSidebar (collapsible) + AppTopNavbar (sticky) + CommandPalette (Cmd+K)
 - **Navigation types:** `NavLink`, `NavGroup`, `NavSectionTitle` (see `resources/ts/@layouts/types.ts`)
-- **Composables:** Reusable logic in `composables/` directory (e.g., `useApi.ts`)
-- **State management:** Pinia stores for shared state
+- **State management:** Pinia stores (e.g., `stores/toast.ts` for toast notifications)
 - **Icons:** Tabler icons via `@iconify/vue` (e.g., `tabler-smart-home`, `tabler-chart-bar`)
+- **Shared components:** AppSidebar, AppTopNavbar, CommandPalette, ToastStack, NotificationPanel, SkeletonLoader, EmptyState, Breadcrumbs
+- **Marketing components:** HeroSection, NetworkHero, VpsHero, DedicatedHero, WebHostingHero, GameServerHero, GlassCard, ScrollReveal, PricingCard
 
-### Vuexy Directory Reference
-```
-vuexy-theme-vue-laravel-full-example-typescript/
-├── resources/ts/              # TypeScript source
-│   ├── @core/                 # Core utilities, composables, components
-│   ├── @layouts/              # Layout system (vertical/horizontal nav)
-│   ├── layouts/               # Page layout templates (default, blank)
-│   ├── pages/                 # File-based routing pages
-│   ├── plugins/               # Vue plugins (router, pinia, vuetify, i18n, casl)
-│   ├── navigation/            # Nav item definitions (vertical/, horizontal/)
-│   └── composables/           # App-level composables
-├── resources/styles/          # SCSS with Vuetify variable overrides
-├── themeConfig.ts             # Global theme configuration
-├── vite.config.ts             # Vite with auto-import, file-based routing
-└── tsconfig.json              # Strict TypeScript config
-```
+### Model Notes
+- **User::billingInvoices()** — renamed from `invoices()` to avoid conflict with Laravel Cashier's built-in `invoices()` method. All call sites use `billingInvoices()`. The `withCount` uses alias `billing_invoices_count`.
 
 ## Agent Usage (MANDATORY)
 Always maximize use of subagents (Task tool) to reduce context usage in the main conversation. This keeps the main terminal fast and avoids running out of context on large tasks.
@@ -203,10 +203,8 @@ google-chrome --headless=new --disable-gpu --no-sandbox --screenshot=/tmp/screen
 - **Must use `--headless=new`** (not just `--headless`) for modern headless mode
 - **Must use `--virtual-time-budget=15000`** (or higher) to wait for SPA JavaScript to render before capturing
 - **Must use `--no-sandbox`** in this environment
-- **Vuexy demo base URL**: https://demos.pixinvent.com/vuexy-vuejs-laravel-admin-template/demo-6/
 - dbus errors in output are harmless — ignore them
-- Use for comparing our pages against the Vuexy demo visually
-- After every successful `npm run build`, screenshot key pages and compare layout/design against the Vuexy demo to ensure visual parity
+- After every successful `npm run build`, screenshot key pages to verify visual consistency
 - Use for verifying layout, spacing, and component rendering
 - Can be delegated to agents for parallel screenshot capture
 - Read the resulting PNG with the Read tool to view it
@@ -215,7 +213,7 @@ google-chrome --headless=new --disable-gpu --no-sandbox --screenshot=/tmp/screen
 - Exploring how a feature works across multiple files → `Explore` agent
 - Creating multiple Vue pages/components → parallel `general-purpose` agents
 - Writing tests for new code → `general-purpose` agent
-- Researching Vuexy theme patterns → `Explore` agent
+- Researching design system patterns → `Explore` agent
 - Building a new API endpoint (controller + request + test) → `general-purpose` agent
 - Reviewing changes before committing → `feature-dev:code-reviewer` agent
 
@@ -242,13 +240,13 @@ google-chrome --headless=new --disable-gpu --no-sandbox --screenshot=/tmp/screen
 ### Frontend (Vue/TypeScript)
 - All components use `<script setup lang="ts">`
 - Props defined via `interface Props` + `defineProps<Props>()`
-- Dark mode is the default UI theme via Vuetify theme system
-- Use Vuetify components (VCard, VBtn, VTextField via AppTextField wrapper, VChip, etc.) — not raw HTML
-- Use AppTextField, AppSelect, AppTextarea wrappers (in Components/app-form-elements/) instead of VTextField/VSelect/VTextarea directly
+- Subdomain-aware theming: marketing = light, admin/account = dark (user can toggle, persisted to localStorage)
+- Use Vuetify components directly (VCard, VBtn, VTextField, VSelect, VTextarea, VChip, etc.) — not raw HTML
 - Use Inertia `Link` component for navigation (not `<a>` tags for internal links)
 - Use `useForm()` from `@inertiajs/vue3` for form submissions
 - Status badges use VChip with color prop and resolveStatusColor() utilities
-- Refer to Vuexy theme components and patterns when building new UI
+- Use Pinia stores for shared state (e.g., `stores/toast.ts` for toast notifications)
+- Use ECharts via `vue-echarts` for charts and analytics visualizations
 
 ## Security
 - All API endpoints require authentication
@@ -280,4 +278,4 @@ google-chrome --headless=new --disable-gpu --no-sandbox --screenshot=/tmp/screen
 - `GETTING_STARTED.md` — Development setup guide
 - `IDEAS.md` — Future feature ideas
 - `website/CLAUDE.md` — Laravel Boost guidelines (auto-generated, Laravel/Pest/Pint conventions)
-- `vuexy-theme-vue-laravel-full-example-typescript/` — Vuexy theme reference (TypeScript, Vuetify, layouts)
+- `SESSION_LOG_2026-03-14.md` — Full frontend redesign session log (design system, bug fixes)