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.