From b2fd5abc7e5fecc3aa7d4c280de4a07234fbc2fa35ede7107be313bb0c1f1f19 Mon Sep 17 00:00:00 2001 From: Claude Dev Date: Sat, 14 Mar 2026 19:20:41 -0400 Subject: [PATCH] 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) --- CLAUDE.md | 102 ++++++++++++++--------------- SESSION_LOG_2026-03-14.md | 133 ++++++++++++++++++++++++++++++++++++++ TASKS.md | 23 ++++++- 3 files changed, 205 insertions(+), 53 deletions(-) create mode 100644 SESSION_LOG_2026-03-14.md diff --git a/CLAUDE.md b/CLAUDE.md index a87795b..8aa4ea8 100644 --- a/CLAUDE.md +++ b/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()`, `computed()`, 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(() => props.count > 0) ``` -### 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:** `