Files
website/TASKS.md
Claude Dev b2fd5abc7e 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) <noreply@anthropic.com>
2026-03-14 19:20:41 -04:00

19 KiB

TASKS.md - EZSCALE Site Task Tracker

Phase 1: Foundation & Core Setup

  • Initialize Laravel 12 project with Vue + Inertia starter kit (base install in website/)
  • Configure domain routing (ezscale.dev, account.ezscale.dev, admin.ezscale.dev)
  • Set up MySQL 8.x database (ezscale_billing + test DB)
  • Configure Redis (cache, queue, sessions)
  • Install core dependencies (cashier, fortify, passport, paypal, spatie, inertia, vue3)
  • Create complete database schema (30 migrations, 15 custom tables)
  • Set up Laravel Fortify with Vue/Inertia auth pages (7 pages: login, register, forgot/reset password, verify email, confirm password, 2FA challenge)
  • Implement 2FA (TOTP via Fortify)
  • Configure spatie roles: admin and customer
  • Set up middleware: auth, role-based, rate limiting, HandleInertiaRequests, EnsureUserNotSuspended
  • Create 14 Eloquent models with factories, relationships, and casts
  • Create seeders (roles/permissions, plans, admin user)
  • Build customer dashboard + admin dashboard (placeholder)
  • Set up Pest testing framework (24 Phase 1 tests passing)
  • Dark mode UI across all pages
  • Migrate frontend from Tailwind CSS to Vuetify 3 (Vuexy design system) with TypeScript
  • Configure Cloudflare Zero Trust for admin panel
  • Set up GitHub Actions CI/CD pipeline
  • Create staging environment (staging.account.ezscale.cloud)
  • Configure Mailgun or SendGrid for emails

Phase 2: Billing & Subscriptions

  • Implement BillingServiceInterface abstraction
  • Build StripeBillingService (wraps Laravel Cashier)
  • Build PayPalBillingService (wraps srmklive/laravel-paypal)
  • Create plan catalog with seeder (6 sample plans across VPS, dedicated, hosting, game)
  • Implement subscription creation flow (plan browsing → checkout → payment → coupon support)
  • Build payment method management (add/remove/set default via Stripe)
  • Build invoice and transaction history pages (paginated, download support)
  • Set up webhook handlers for Stripe and PayPal
  • Build subscription management (cancel/resume/swap plan)
  • Build dunning system (DunningService + scheduled ProcessDunning command)
  • Implement coupon system (validation, redemption, percentage/fixed discounts)
  • Automatic suspension policy (grace period → suspend → terminate)
  • Event-driven architecture (PaymentSucceeded/Failed, SubscriptionCreated/Cancelled)
  • 8 Vue pages for billing flow (plans, checkout, subscriptions, billing/invoices/transactions)
  • 29 Phase 2 tests (53 total passing)
  • Invoice PDF generation (barryvdh/laravel-dompdf)
  • Multi-currency support (EUR, GBP, USD, etc.)
  • Tax calculation integration (TaxJar/Avalara or manual rates)
  • Proration logic for upgrades/downgrades (Cashier swap method)
  • Admin coupon management CRUD
  • Email notifications for payment events

Frontend Migration: Tailwind → Vuetify/Vuexy (superseded by redesign below)

  • Install Vuetify 3, TypeScript, Pinia, Sass, vite-plugin-vuetify
  • Remove Tailwind CSS
  • Configure TypeScript (tsconfig.json, path aliases, strict mode)
  • Set up Vuetify plugin (theme, defaults, icons)
  • Rename resources/js → resources/ts, convert to TypeScript
  • Copy Vuexy @core SCSS overrides (38 files — base + template + 25 components)
  • Create @layouts stubs for Vuexy SCSS compatibility
  • Configure Vite aliases (@core-scss, @configured-variables, @layouts)
  • Create 4 layouts: AccountLayout, AdminLayout, AuthLayout, MarketingLayout
  • Create shared components: FlashMessages, StatCard, StatusChip, ThemeSwitcher
  • Create AppTextField, AppSelect, AppTextarea wrapper components (Vuexy pattern)
  • Migrate all 19 existing pages to Vuetify + TypeScript
  • Create 9 marketing pages (Home, Products, VPS, Dedicated, Web, Game, Pricing, About, Contact)
  • Create navigation configs (account.ts, admin.ts, marketing.ts)
  • Set purple primary color (#7367F0) matching Vuexy demo
  • 252 tests passing, 1310 assertions (12 pre-existing VpsControllerTest failures)

Full Frontend Redesign (2026-03-14)

  • 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
  • Phase 1 — Layout Infrastructure: 8 new shared components (AppSidebar, AppTopNavbar, CommandPalette, ToastStack, NotificationPanel, SkeletonLoader, EmptyState, Breadcrumbs), Pinia toast store, rebuilt all 4 layouts
  • Phase 2 — Marketing Components: 9 new components (HeroSection, NetworkHero, VpsHero, DedicatedHero, WebHostingHero, GameServerHero, GlassCard, ScrollReveal, PricingCard)
  • Phase 3 — Page Migration: replaced AppTextField/AppSelect/AppTextarea with native Vuetify across 28 pages, merged Products→Home and BattlefieldAcp→GameServers, added 301 redirects
  • Phase 4 — Polish: theme persistence (localStorage), theme-aware CSS custom properties, headless Chrome visual verification

Bug Fixes (2026-03-14)

  • placeOrder() column name fixes (payment_method→payment_gateway, removed non-existent columns)
  • VirtFusion provisioning_info stored in credentials via array_merge (was using non-existent column)
  • PayPal webhook header verification (PAYPAL-TRANSMISSION-* headers)
  • VPS root password moved from success flash to secure new_password flash key with dialog
  • ensure_not_suspended middleware applied to account routes with impersonation bypass + banned check
  • User::invoices() renamed to billingInvoices() to avoid Cashier conflict (updated 7+ call sites)
  • Impersonation stop route added on account subdomain
  • Performance indexes migration (invoices.status, orders.status, audit_logs.action/created_at)
  • Invoice number collision fix (Str::random(6) instead of count()+1/rand())
  • Dashboard stats caching (Cache::remember with 5-min TTL)
  • Stripe last_four→last4 property fix in BillingController
  • FlashProps type updated with info and new_password keys

Notifications System

  • Create notification classes (PaymentSucceeded, PaymentFailed, SubscriptionCreated, SubscriptionCancelled, ServiceProvisioned, InvoiceGenerated)
  • Configure mail and database notification channels
  • Wire notifications to relevant events (PaymentSucceeded, PaymentFailed, SubscriptionCreated, SubscriptionCancelled, ServiceProvisioned, InvoiceGenerated)
  • Build NotificationBell component in Account and Admin layouts
  • Implement NotificationController (index, markAsRead, markAllAsRead)
  • FlashMessages supports info alerts
  • Inertia shared data includes impersonation state

Phase 3: Provisioning Automation

  • Create ProvisioningServiceInterface abstraction
  • Build VirtFusion provisioning service:
    • Create VPS via API
    • Suspend/unsuspend VPS
    • Terminate VPS
    • Get status and resource usage
    • Credential generation and secure storage
  • Build Pterodactyl provisioning service:
    • Create game server via API
    • Suspend/unsuspend server
    • Delete server
    • Get server status and resources
  • Build SynergyCP provisioning service:
    • Provision dedicated server
    • Suspend/unsuspend server
    • Terminate server
    • Get server details
    • Handle limited hardware inventory (waitlist/semi-auto)
  • Build Enhance provisioning service:
    • Create web hosting account
    • Suspend/delete account
    • Get account status
  • Implement event-driven provisioning (listen to PaymentSucceeded events)
  • Build provisioning failure handling and retry logic
  • Send credentials email on successful provisioning
  • Log all provisioning actions to provisioning_logs table
  • Idempotent provisioning (Service::firstOrCreate to prevent duplicates on retry)
  • Provisioning retry command (provisioning:retry scheduled every 5 minutes)

Support Ticket System (Standalone)

  • TicketReply model with relationships
  • Updated SupportTicket model with replies() relationship and department field
  • Migration: ticket_replies table + department column on support_tickets
  • Customer TicketController (index, create, store, show, reply, close)
  • Admin TicketController (index with filters, show, reply, updateStatus)
  • SupportTicketFactory with open/closed/urgent states
  • TicketReplyFactory with staffReply state
  • Customer Vue pages: Tickets/Index, Tickets/Create, Tickets/Show
  • Admin Vue pages: Admin/Tickets/Index, Admin/Tickets/Show
  • Ticket status/priority color resolvers
  • TypeScript interfaces for SupportTicket and TicketReply
  • Navigation items for both account and admin sidebars
  • Routes for both account and admin subdomains
  • 42 Pest tests for tickets (252 total, 1310 assertions)

Phase 4: Customer Dashboard (account.ezscale.cloud)

  • Build service overview dashboard:
    • Active services list with status indicators
    • Resource usage widgets (CPU, RAM, disk, bandwidth)
    • Next invoice and payment due date
    • Recent support tickets
    • Quick actions (renew, upgrade, create ticket)
  • Build service detail pages:
    • VPS details (IP, credentials, resource graphs, control buttons)
    • Game server details (connect info, resource usage, restart button)
    • Dedicated server details (IPs, access info, bandwidth graph)
    • Web hosting details (domain, cPanel/Enhance link, disk usage)
  • Bandwidth usage graphs (from ElastiFlow integration)
  • Billing section:
    • Invoice history (with PDF download)
    • Payment history
    • Manage payment methods (add/remove cards, set default)
    • Upcoming renewals
  • Plan upgrade/downgrade flow (self-service with proration)
  • Subscription cancellation flow (with optional survey)
  • Profile and account settings:
    • Contact information
    • Billing/shipping addresses
    • Tax ID
    • Password change
    • 2FA setup (TOTP, passkeys)

Phase 5: Admin Panel (admin.ezscale.cloud)

  • Analytics dashboard:
    • MRR (Monthly Recurring Revenue) graph
    • ARR (Annual Recurring Revenue)
    • Churn rate calculation and graph
    • Customer growth chart
    • Revenue trends (daily, monthly, yearly)
    • Popular plans and conversion rates
    • Outstanding invoices total
    • Overdue accounts list
  • Customer management:
    • Customer list (searchable, filterable)
    • Customer detail view (profile, services, billing history, notes)
    • Edit customer information
    • Impersonate customer (with audit logging)
    • Add admin notes to customer account
    • View customer audit log
  • Service management:
    • All services list (filter by type, status, platform)
    • Manually provision service
    • Suspend/unsuspend service
    • Terminate service
    • Modify service (change plan)
    • Extend service expiry (admin override subscription end date)
    • View provisioning logs
    • Archive/restore services (soft-delete with SoftDeletes trait)
  • Order management:
    • Pending orders list
    • Approve/reject orders (for semi-automated provisioning)
    • View order details
  • Invoice management:
    • All invoices list (filter by status, date, customer)
    • Create manual invoice
    • Edit invoice (before sending)
    • Void/refund invoice
    • Resend invoice email
  • Coupon management:
    • Create coupon (percentage, fixed, applies to plans)
    • Edit coupon details
    • View redemption history
    • Deactivate/delete coupon
  • Plan management:
    • Create new plan (set pricing, features, billing cycle)
    • Edit existing plan
    • Archive/hide plan
    • Set stock quantity (for limited dedicated servers)
  • System configuration:
    • Email template editor (7 templates with variable substitution, preview, reset to default)
    • Tax rate configuration (by country/region, inclusive/exclusive, priority-based)
    • Suspension policy settings (days before suspend/terminate)
    • Bandwidth overage rates (in billing settings tab)
    • Discord webhook URLs (4 channels with test buttons)
    • API credentials (VirtFusion, Pterodactyl, SynergyCP, Enhance — with test connection)
  • Audit log viewer:
    • Filter by user, action, date
    • View changes (before/after state with expandable rows and detail dialog)
    • Export logs

Phase 6: Bandwidth Monitoring & Billing

  • Set up NetFlow/sFlow export from Juniper switches
  • Deploy ElastiFlow collector
  • Build BandwidthService to query ElastiFlow API
  • Create scheduled job to collect daily bandwidth data
  • Store bandwidth usage in bandwidth_usage table
  • Build bandwidth usage graphs for customer dashboard
  • Implement multi-threshold alerts:
    • 75% quota warning email
    • 90% quota warning email
    • 100% quota reached email
    • Discord webhook for high usage customers
  • Implement automatic overage billing:
    • Calculate overages at end of billing cycle
    • Generate overage invoice
    • Email customer with overage details
  • Build admin bandwidth reports:
    • Top bandwidth users
    • Total bandwidth by service type
    • Overage revenue report

Phase 8: Marketing Frontend (ezscale.cloud)

  • Homepage:
    • Hero section with value proposition
    • Featured services/plans
    • Trust indicators (uptime, customers, years in business)
    • Call to action (Get Started, View Plans)
  • Product pages:
    • VPS hosting page with plan comparison
    • Dedicated servers page with configurations
    • Web hosting page with features
    • Game server hosting page with supported games
  • Pricing page:
    • Interactive plan comparison table
    • Billing cycle toggle (monthly/quarterly/semi-annual/annual)
    • Service type tabs with per-type feature display
    • Popular/Best Value badges on plans
    • Currency selector (USD, EUR, GBP)
    • Coupon code application
    • Add to cart / checkout flow
  • About page
  • Contact page with form submission backend
  • Blog/news section (optional, or use WordPress?)
  • Knowledge base / FAQ:
    • Getting started guides
    • Tutorials
    • Troubleshooting
    • API documentation
  • Legal pages:
    • Terms of Service
    • Privacy Policy
    • Acceptable Use Policy
    • SLA (Service Level Agreement)
    • Footer links to legal pages
  • Signup flow:
    • Plan selection (CTAs on pricing + product pages link to checkout)
    • Account creation (register/login pages show plan context)
    • Payment information (checkout page with Stripe/PayPal)
    • Order confirmation (success redirect with flash message)
    • Redirect to account dashboard (via Fortify intended URL)

Phase 9: API Development

  • Customer API (RESTful, Passport auth):
    • GET /api/v1/services - List customer's services (paginated)
    • GET /api/v1/services/{id} - Service details
    • POST /api/v1/services/{id}/reboot - Reboot server (VPS only)
    • GET /api/v1/invoices - Invoice history (filterable by status)
    • GET /api/v1/invoices/{id}/pdf - Download invoice PDF
    • GET /api/v1/bandwidth - Bandwidth usage (depends on Phase 6)
    • POST /api/v1/subscriptions/{id}/cancel - Cancel subscription
    • POST /api/v1/tickets - Create support ticket
    • GET /api/v1/tickets/{id} - Ticket details with replies
    • POST /api/v1/tickets/{id}/reply - Reply to ticket
    • GET /api/v1/subscriptions - List subscriptions
  • Admin API:
    • GET /api/v1/admin/customers - List all customers (searchable, filterable)
    • GET /api/v1/admin/customers/{id} - Customer details
    • GET /api/v1/admin/services - List all services (filterable)
    • GET /api/v1/admin/services/{id} - Service details
    • POST /api/v1/admin/services/{id}/suspend - Suspend service
    • POST /api/v1/admin/services/{id}/unsuspend - Unsuspend service
    • GET /api/v1/admin/analytics - Analytics data (MRR, ARR, churn, growth)
  • API documentation (public marketing page at /api-docs with all endpoints, params, responses)
  • API rate limiting and throttling (60/min customer, 120/min admin)
  • API versioning strategy (v1 prefix)
  • API Resources (Service, Invoice, Subscription, Ticket, Customer, AdminService, Analytics)
  • 49 API tests (373 assertions)

Phase 10: Testing, Migration & Launch

  • Unit tests for all services and models

  • Feature tests for critical user flows:

    • Signup and subscription creation
    • Payment processing (Stripe + PayPal)
    • Service provisioning (all platforms)
    • Upgrades/downgrades
    • Cancellations
    • Invoice generation
    • Bandwidth overage billing
  • Integration tests:

    • VirtFusion API integration
    • Pterodactyl API integration
    • SynergyCP API integration
    • Enhance API integration
    • ElastiFlow API integration
  • Security testing:

    • Penetration testing (OWASP Top 10)
    • Dependency vulnerability scanning
    • CSRF and XSS testing
    • SQL injection testing
    • Rate limiting testing
  • Performance testing:

    • Load testing (100+ concurrent users)
    • Database query optimization
    • Redis caching implementation
    • CDN for static assets
  • WHMCS migration:

    • Create migration commands:
      • migrate:whmcs-customers
      • migrate:whmcs-subscriptions
      • migrate:whmcs-invoices
      • migrate:whmcs-payments
      • migrate:whmcs-services
      • migrate:whmcs-tickets
    • Test migration in staging
    • Verify data integrity
    • Map WHMCS product IDs to new plan IDs
    • Coordinate Stripe/PayPal subscription transfer
  • Pre-launch checklist:

    • Email customers about migration
    • Set up WHMCS URL redirects
    • Configure monitoring (Laravel Telescope, log aggregation)
    • Set up error tracking (Sentry, Bugsnag)
    • Configure backups (database, files, Redis)
    • DNS configuration for all domains
    • SSL certificates for all domains
    • Cloudflare Zero Trust for admin panel
  • Launch:

    • Execute final WHMCS migration during maintenance window
    • Enable production mode
    • Monitor for errors and performance issues
    • 30-day parallel operation (keep WHMCS read-only)
    • Gather customer feedback
    • Address bugs and issues
  • Post-launch:

    • Monitor analytics and revenue
    • Track customer satisfaction
    • Iterate based on feedback
    • Plan future features

Phase 11: Future Enhancements (Post-Launch)

  • Mobile app (iOS/Android) using API
  • Advanced analytics (cohort analysis, LTV predictions)
  • Automated resource scaling (auto-upgrade when limits reached)
  • Custom server configurations (customer can configure RAM, CPU, disk)
  • Marketplace for add-ons (additional IPs, backups, snapshots)
  • Advanced bandwidth analytics (top talkers, traffic patterns)
  • Integration with accounting software (QuickBooks, Xero)
  • Advanced reporting (custom reports, scheduled exports)
  • Customer referral program (instead of affiliates)
  • Live chat support integration
  • Status page for service health
  • Automated security scanning for customer servers
  • Backup management interface
  • Server snapshots and restoration