EZSCALE/website
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update documentation after full frontend redesign and bug fix session

Browse Source 
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>
This commit is contained in:
Claude Dev
2026-03-14 19:20:41 -04:00
parent 0e7c363a04
commit b2fd5abc7e
3 changed files with 205 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
CLAUDE.md
View File

@@ -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)

133
SESSION_LOG_2026-03-14.md Normal file
View File

@@ -0,0 +1,133 @@
# Session Log — 2026-03-14
## Overview
Major frontend redesign session replacing the Vuexy-based design system with a custom EZSCALE design system. Also fixed several critical backend bugs related to billing, provisioning, and security. The redesign touched all 4 layouts, created new shared components, replaced the SCSS foundation, updated the color palette from purple (#7367F0) to navy blue (#1d4ed8), and migrated fonts to Plus Jakarta Sans + JetBrains Mono.
---
## Frontend Redesign
### Phase 0: Foundation
- Installed `echarts`, `vue-echarts`, `@vueuse/core`; removed `@mdi/font`
- Replaced Inter/Public Sans fonts with **Plus Jakarta Sans** (UI) + **JetBrains Mono** (code) via Bunny Fonts
- Deleted all 38 Vuexy `@core` SCSS files
- Created 8 new SCSS design system files:
- `_variables.scss`, `_mixins.scss`, `_animations.scss`, `_typography.scss`
- `_component-overrides.scss`, `_marketing.scss`, `_layouts.scss`, `styles.scss`
- Rewrote Vuetify config: navy blue palette (`#1d4ed8` primary, `#3b82f6` primary-light), pill buttons, subdomain-aware theming (light for marketing, dark for admin/account)
- Updated `vite.config.ts`: removed `@core-scss` and `@configured-variables` aliases
- Updated `variables/_vuetify.scss` and `variables/_template.scss`
### Phase 1: Layout Infrastructure
- Deleted 5 old VerticalNav* components and 4 `@layouts/styles` SCSS files
- Created 8 new shared components:
- `AppSidebar` — collapsible sidebar for admin/account layouts
- `AppTopNavbar` — top navigation bar with search, theme switcher, notifications
- `CommandPalette` — Cmd+K command palette for quick navigation
- `ToastStack` — toast notification display (uses Pinia store)
- `NotificationPanel` — slide-out notification panel
- `SkeletonLoader` — loading placeholder component
- `EmptyState` — empty state with icon/message/action
- `Breadcrumbs` — breadcrumb navigation component
- Created Pinia toast store (`stores/toast.ts`)
- Rebuilt all 4 layouts:
- `AdminLayout` — sidebar + navbar + command palette + notifications + toasts
- `AccountLayout` — same pattern + impersonation banner
- `MarketingLayout` — transparent navbar + mega footer + mobile drawer
- `AuthLayout` — split-screen with gradient art panel
- Updated admin navigation (reorganized groups) and marketing navigation (removed BattlefieldAcp)
### Phase 2: Marketing Components
Created 9 marketing components:
- `HeroSection` — reusable hero with gradient background and CTA buttons
- `NetworkHero` — animated SVG network visualization
- `VpsHero`, `DedicatedHero`, `WebHostingHero`, `GameServerHero` — product-specific animated heroes
- `GlassCard` — glassmorphism card component
- `ScrollReveal` — intersection observer scroll animation wrapper
- `PricingCard` — pricing plan card with feature list and CTA
### Phase 3: Page Migration
- Replaced `AppTextField`/`AppSelect`/`AppTextarea` with native `VTextField`/`VSelect`/`VTextarea` across all 28 pages
- Updated 5 marketing page heroes to use `HeroSection` + animated SVGs
- Merged `Products.vue` into `Home.vue`, `BattlefieldAcp.vue` into `GameServers.vue` (with featured section)
- Added 301 redirects for `/products` -> `/` and `/battlefield-acp` -> `/game-servers`
- Deleted old wrapper components (`AppTextField`, `AppSelect`, `AppTextarea`, `FlashMessages`, `NotificationBell`)
### Phase 4: Polish
- Theme persistence: `ThemeSwitcher` saves to localStorage (`ezscale-theme` key), Vuetify reads on init
- Theme-aware styles: navbar/footer use CSS custom properties, hero sections force white text
- Fixed `About.vue` sections (`bg-surface-variant` -> `section-alt-bg`)
- Set default VChip size to `small` globally
- Visual verification via headless Chrome screenshots
---
## Critical Bug Fixes
1. **placeOrder() column fixes** — Fixed wrong column names: `payment_method` -> `payment_gateway`, removed non-existent `order_id` on Service/Invoice, removed non-existent `subtotal` on Invoice, added `service_id`/`completed_at` on Order, added `service_type`/`platform` on Service
2. **VirtFusion provisioning_info** — Changed from non-existent column to storing in credentials via `array_merge`
3. **PayPal webhook verification** — Added header verification for `PAYPAL-TRANSMISSION-*` headers
4. **VPS root password exposure** — Moved from success flash to separate `new_password` flash key with secure dialog
5. **ensure_not_suspended middleware** — Applied to account routes, added bypass for impersonation stop, added banned check
6. **User::invoices() override** — Renamed to `billingInvoices()` to avoid conflict with Laravel Cashier's `invoices()` method, updated all 7+ call sites, aliased `withCount`
---
## Important Fixes
7. **Impersonation stop** — Added route on account subdomain, fixed AccountLayout link to use account domain
8. **Performance indexes** — Migration adding indexes on `invoices.status`, `orders.status`, `audit_logs.action`, `audit_logs.created_at`
9. **Invoice number collisions** — Replaced `count()+1` and `rand()` with `Str::random(6)`
10. **Dashboard caching** — Wrapped stats in `Cache::remember` with 5-min TTL
11. **last_four -> last4** — Fixed Stripe property name in BillingController
12. **FlashProps type** — Added `info` and `new_password` keys
---
## Files Changed Summary
### New Files
- 8 SCSS design system files (`resources/styles/`)
- 8 shared Vue components (`resources/ts/Components/`)
- 9 marketing Vue components (`resources/ts/Components/marketing/`)
- 1 Pinia store (`resources/ts/stores/toast.ts`)
- 1 migration (performance indexes)
### Deleted Files
- 38 Vuexy `@core` SCSS files
- 5 VerticalNav* components
- 4 `@layouts/styles` SCSS files
- 3 app-form-elements wrapper components (`AppTextField`, `AppSelect`, `AppTextarea`)
- `FlashMessages.vue`, `NotificationBell.vue`
- `Products.vue`, `BattlefieldAcp.vue` (merged into other pages)
### Modified Files
- All 4 layouts rebuilt
- 28+ Vue pages updated (component replacements)
- Vuetify plugin config rewritten
- `vite.config.ts` updated
- Navigation configs updated
- Multiple PHP controllers/models (bug fixes)
- `bootstrap/app.php` (middleware changes)
---
## Test Results
Tests were not re-run as part of this documentation session. Previous count: 347 tests, 1866 assertions.

23
TASKS.md
View File

@@ -45,7 +45,7 @@
- [x] Admin coupon management CRUD
- [x] Email notifications for payment events
## Frontend Migration: Tailwind → Vuetify/Vuexy ✅
## Frontend Migration: Tailwind → Vuetify/Vuexy ✅ (superseded by redesign below)
- [x] Install Vuetify 3, TypeScript, Pinia, Sass, vite-plugin-vuetify
- [x] Remove Tailwind CSS
- [x] Configure TypeScript (tsconfig.json, path aliases, strict mode)
@@ -63,6 +63,27 @@
- [x] Set purple primary color (#7367F0) matching Vuexy demo
- [x] 252 tests passing, 1310 assertions (12 pre-existing VpsControllerTest failures)
## Full Frontend Redesign (2026-03-14) ✅
- [x] Phase 0 — Foundation: new SCSS design system (8 files), navy blue palette (#1d4ed8), Plus Jakarta Sans + JetBrains Mono fonts, removed Vuexy @core SCSS (38 files), installed echarts/vue-echarts/@vueuse/core
- [x] Phase 1 — Layout Infrastructure: 8 new shared components (AppSidebar, AppTopNavbar, CommandPalette, ToastStack, NotificationPanel, SkeletonLoader, EmptyState, Breadcrumbs), Pinia toast store, rebuilt all 4 layouts
- [x] Phase 2 — Marketing Components: 9 new components (HeroSection, NetworkHero, VpsHero, DedicatedHero, WebHostingHero, GameServerHero, GlassCard, ScrollReveal, PricingCard)
- [x] Phase 3 — Page Migration: replaced AppTextField/AppSelect/AppTextarea with native Vuetify across 28 pages, merged Products→Home and BattlefieldAcp→GameServers, added 301 redirects
- [x] Phase 4 — Polish: theme persistence (localStorage), theme-aware CSS custom properties, headless Chrome visual verification
## Bug Fixes (2026-03-14) ✅
- [x] placeOrder() column name fixes (payment_method→payment_gateway, removed non-existent columns)
- [x] VirtFusion provisioning_info stored in credentials via array_merge (was using non-existent column)
- [x] PayPal webhook header verification (PAYPAL-TRANSMISSION-* headers)
- [x] VPS root password moved from success flash to secure new_password flash key with dialog
- [x] ensure_not_suspended middleware applied to account routes with impersonation bypass + banned check
- [x] User::invoices() renamed to billingInvoices() to avoid Cashier conflict (updated 7+ call sites)
- [x] Impersonation stop route added on account subdomain
- [x] Performance indexes migration (invoices.status, orders.status, audit_logs.action/created_at)
- [x] Invoice number collision fix (Str::random(6) instead of count()+1/rand())
- [x] Dashboard stats caching (Cache::remember with 5-min TTL)
- [x] Stripe last_four→last4 property fix in BillingController
- [x] FlashProps type updated with info and new_password keys
## Notifications System ✅
- [x] Create notification classes (PaymentSucceeded, PaymentFailed, SubscriptionCreated, SubscriptionCancelled, ServiceProvisioned, InvoiceGenerated)
- [x] Configure mail and database notification channels