- Migrate all frontend from plain JS/Tailwind to TypeScript/Vuetify 3 (Vuexy design system) - Replace placeholder plans with 25 real products scraped from WHMCS: 9 VPS plans ($4.20-$30/mo), 8 dedicated servers ($44.39-$107.99/mo), 4 web hosting plans ($2.39-$15.99/mo), 4 MySQL hosting plans ($6-$30/mo) - Fix Pricing page: correct field mapping (service_type, price), display feature values instead of keys, proper price formatting - Update all marketing pages (Home, Products, VPS, Dedicated, Web Hosting) with real specs, pricing, and features from production WHMCS - Add 38 Vuexy @core SCSS override files for component styling - Create 4 layouts (Account, Admin, Auth, Marketing) with Vuetify - Add AppTextField/AppSelect/AppTextarea wrapper components - Purple primary theme (#7367F0), dark mode default - 52 tests passing, build clean Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
15 KiB
15 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:
adminandcustomer - 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
BillingServiceInterfaceabstraction - 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 (dedicated package)
- 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 ✅
- 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
- All 53 tests passing, build clean
Phase 3: Provisioning Automation
- Create
ProvisioningServiceInterfaceabstraction - 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
PaymentSucceededevents) - Build provisioning failure handling and retry logic
- Send credentials email on successful provisioning
- Log all provisioning actions to
provisioning_logstable
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)
- SupportPal integration:
- SSO to SupportPal
- View recent tickets widget
- Create ticket button (opens SupportPal or API)
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 expiry)
- View provisioning logs
- 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
- Tax rate configuration (by region)
- Suspension policy settings (days before suspend/terminate)
- Bandwidth overage rates
- Discord webhook URLs
- API credentials (VirtFusion, Pterodactyl, etc.)
- Audit log viewer:
- Filter by user, action, date
- View changes (before/after state)
- Export logs
Phase 6: Bandwidth Monitoring & Billing
- Set up NetFlow/sFlow export from Juniper switches
- Deploy ElastiFlow collector
- Build
BandwidthServiceto query ElastiFlow API - Create scheduled job to collect daily bandwidth data
- Store bandwidth usage in
bandwidth_usagetable - 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 7: SupportPal Integration
- Implement SSO for SupportPal:
- Laravel Passport OAuth2 integration
- SupportPal SAML or custom SSO config
- Test seamless login flow
- Build SupportPal API integration:
- Fetch user's recent tickets
- Create ticket via API
- Fetch ticket details and replies
- Build webhook handlers for SupportPal:
- New ticket created
- Ticket reply added
- Ticket status changed
- Ticket closed
- Display tickets in customer dashboard:
- Recent tickets widget
- Link to full ticket in SupportPal
- Admin ticket overview:
- Open tickets count
- Tickets by priority
- Link to SupportPal admin
- Discord notifications for tickets:
- New ticket opened
- Ticket escalated (high priority)
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
- Currency selector (USD, EUR, GBP)
- Coupon code application
- Add to cart / checkout flow
- About page
- Contact page
- 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)
- Signup flow:
- Plan selection
- Account creation
- Payment information
- Order confirmation
- Redirect to account dashboard
Phase 9: API Development
- Customer API (RESTful, Sanctum auth):
- GET /api/v1/services - List customer's services
- GET /api/v1/services/{id} - Service details
- POST /api/v1/services/{id}/reboot - Reboot server
- GET /api/v1/invoices - Invoice history
- GET /api/v1/invoices/{id}/pdf - Download invoice PDF
- GET /api/v1/bandwidth - Bandwidth usage
- POST /api/v1/subscriptions/{id}/cancel - Cancel subscription
- POST /api/v1/tickets - Create support ticket
- Admin API:
- GET /api/v1/admin/customers - List all customers
- GET /api/v1/admin/services - List all services
- POST /api/v1/admin/services/{id}/suspend - Suspend service
- GET /api/v1/admin/analytics - Analytics data
- API documentation (OpenAPI/Swagger)
- API rate limiting and throttling
- API versioning strategy
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
- SupportPal 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-customersmigrate:whmcs-subscriptionsmigrate:whmcs-invoicesmigrate:whmcs-paymentsmigrate:whmcs-servicesmigrate:whmcs-tickets
- Test migration in staging
- Verify data integrity
- Map WHMCS product IDs to new plan IDs
- Coordinate Stripe/PayPal subscription transfer
- Create migration commands:
- 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