website/SESSION_LOG_2026-03-14.md

# 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.