Migrate frontend to Vuetify/Vuexy + add real WHMCS product data

- Migrate all frontend from plain JS/Tailwind to TypeScript/Vuetify 3 (Vuexy design system) - Replace placeholder plans with 25 real products scraped from WHMCS: 9 VPS plans ($4.20-$30/mo), 8 dedicated servers ($44.39-$107.99/mo), 4 web hosting plans ($2.39-$15.99/mo), 4 MySQL hosting plans ($6-$30/mo) - Fix Pricing page: correct field mapping (service_type, price), display feature values instead of keys, proper price formatting - Update all marketing pages (Home, Products, VPS, Dedicated, Web Hosting) with real specs, pricing, and features from production WHMCS - Add 38 Vuexy @core SCSS override files for component styling - Create 4 layouts (Account, Admin, Auth, Marketing) with Vuetify - Add AppTextField/AppSelect/AppTextarea wrapper components - Purple primary theme (#7367F0), dark mode default - 52 tests passing, build clean Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 10:16:41 -05:00
parent 0fe4e4ab42
commit ec8f0272ec
141 changed files with 9592 additions and 2440 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -14,6 +14,28 @@ All work MUST be tracked against GitHub issues and `TASKS.md`:

 GitHub issues: https://github.com/EZSCALE/accounting/issues

+## Documentation Updates (MANDATORY)
+When a phase is completed or a significant task within a phase is finished:
+
+1. **Update `TASKS.md`** — Check off completed items, add new items discovered during work
+2. **Update GitHub issues** — Add progress comments (`gh issue comment <number> --body "..."`) and close completed issues
+3. **Update `CLAUDE.md`** — Reflect any new tech stack changes, directory structure changes, or convention updates
+4. **Update memory files** — Record key patterns, gotchas, and environment details learned during the work
+5. **Update `PROJECT_DEVELOPMENT.md`** — If architectural decisions changed or new integrations were added
+
+### 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/
+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`
+
 ## Laravel App Location
 The Laravel application is in **`website/`**. All artisan, composer, and npm commands run from there.

@@ -33,12 +55,23 @@ website/
 │   ├── factories/           # 7 factories
 │   └── seeders/             # Roles, plans, admin user
 ├── resources/
-│   ├── js/                  # Vue 3 + Inertia pages (TO BE MIGRATED TO TypeScript)
-│   │   ├── Layouts/         # AppLayout, AuthLayout, AdminLayout
-│   │   ├── Pages/           # Auth/, Billing/, Plans/, Subscriptions/, Admin/
-│   │   └── Components/      # Card, Button, NavLink, FlashMessages
-│   ├── css/app.css          # Tailwind CSS 4
-│   └── views/app.blade.php  # Inertia root template
+│   ├── ts/                    # TypeScript source (migrated from js/)
+│   │   ├── app.ts             # Entry point with Vuetify + Pinia
+│   │   ├── bootstrap.ts
+│   │   ├── types/             # TypeScript interfaces
+│   │   ├── utils/             # Resolvers, formatters
+│   │   ├── 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/           # AccountLayout, AdminLayout, AuthLayout, MarketingLayout
+│   │   ├── Components/        # FlashMessages, StatCard, StatusChip, ThemeSwitcher, app-form-elements/
+│   │   └── Pages/             # Auth/ (7), Profile/ (2), Plans/ (2), Checkout/ (1), Subscriptions/ (2), Billing/ (3), Admin/ (1), Marketing/ (9), Dashboard
+│   ├── styles/                # SCSS with Vuexy @core overrides
+│   │   ├── @core/             # Copied from Vuexy: base + template SCSS overrides
+│   │   ├── variables/         # _vuetify.scss, _template.scss
+│   │   └── styles.scss        # Main entry — imports @core SCSS chain
+│   ├── images/
+│   └── views/app.blade.php    # Inertia root template
 ├── routes/                  # web.php, account.php, admin.php, marketing.php, webhooks.php, api.php
 ├── tests/                   # 53 Pest tests (Phase 1 + Phase 2)
 ├── composer.json
@@ -48,8 +81,8 @@ website/

 ## Tech Stack
 - **Framework:** Laravel 12 (PHP 8.3), Laravel 12 slim structure (no Kernel files)
- **Frontend:** Vue 3 + Inertia.js v2 + TypeScript (REQUIRED) + Tailwind CSS 4 + Vite 7
- **UI Theme:** Vuexy Vue + Laravel Admin Dashboard (reference at `../vuexy-theme-vue-laravel-full-example-typescript/`)
+- **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)
 - **Testing:** Pest 4 + PHPUnit 12
 - **Formatting:** Laravel Pint
 - **Payments:** Laravel Cashier (Stripe) + srmklive/paypal (PayPal)
@@ -142,6 +175,43 @@ vuexy-theme-vue-laravel-full-example-typescript/
 └── tsconfig.json              # Strict TypeScript config
 ```

+## 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.
+
+### Rules
+- **Parallel agents**: When multiple independent tasks exist (e.g., reading several files, researching different topics, building separate components), launch them as parallel agents in a single message rather than doing them sequentially in the main context.
+- **Delegate research**: Use `Explore` agents for codebase exploration, file searches, and understanding existing patterns. Do not manually grep/read dozens of files in the main context.
+- **Delegate implementation**: Use `general-purpose` agents for self-contained implementation tasks (e.g., "create this component", "write this migration", "update these 5 files with this pattern").
+- **Delegate reviews**: Use `feature-dev:code-reviewer` agents to review code after writing it.
+- **Delegate architecture**: Use `feature-dev:code-architect` or `Plan` agents for designing features before implementing.
+- **Keep main context for orchestration**: The main conversation should coordinate agents, communicate with the user, and handle simple/quick edits. Heavy lifting goes to agents.
+- **Background agents**: Use `run_in_background: true` for long-running tasks that don't block other work. Check results later with the Read tool on the output file.
+- **Batch similar work**: If updating 10+ files with the same pattern, send them to an agent rather than editing each one in the main context.
+
+### Headless Chrome
+Chrome is available for visual testing and screenshot comparison. Use it to verify UI matches design references.
+```bash
+google-chrome --headless=new --disable-gpu --no-sandbox --screenshot=/tmp/screenshot.png --window-size=1920,1080 --virtual-time-budget=15000 "URL"
+```
+- **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
+- 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
+
+### Examples of When to Use Agents
+- 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
+- Building a new API endpoint (controller + request + test) → `general-purpose` agent
+- Reviewing changes before committing → `feature-dev:code-reviewer` agent
+
 ## Code Conventions

 ### PHP
@@ -165,10 +235,12 @@ vuexy-theme-vue-laravel-full-example-typescript/
 ### Frontend (Vue/TypeScript)
 - All components use `<script setup lang="ts">`
 - Props defined via `interface Props` + `defineProps<Props>()`
- Dark mode is the default UI theme (`bg-gray-950` pages, `bg-gray-900` cards, `bg-gray-800` inputs)
+- 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
 - Use Inertia `Link` component for navigation (not `<a>` tags for internal links)
 - Use `useForm()` from `@inertiajs/vue3` for form submissions
- Status badges use semi-transparent colored backgrounds (e.g., `bg-green-900/50 text-green-300`)
+- Status badges use VChip with color prop and resolveStatusColor() utilities
 - Refer to Vuexy theme components and patterns when building new UI

 ## Security