Assist_Design/.kiro/specs/codebase-refactoring/tasks.md

Implementation Plan

• 1. Set up foundation and core infrastructure

  • Create new folder structure following the feature-driven architecture
  • Set up design tokens and CSS custom properties for consistent theming
  • Implement base TypeScript configuration with strict type checking
  • Requirements: 1.1, 1.2, 5.1, 7.1

• 1.1 Create centralized type definitions

  • Write shared TypeScript interfaces for API responses, entities, and common types
  • Create base entity interfaces and pagination types
  • Implement type utilities for form validation and API contracts
  • Requirements: 5.1, 5.2, 5.5

• 1.2 Implement design system foundation

  • Create CSS custom properties for colors, spacing, typography, and animations
  • Write utility classes for consistent spacing and layout patterns
  • Implement responsive design tokens and breakpoint system
  • Requirements: 7.1, 7.2, 7.5

• 2. Build atomic UI component library

  • Create base Button component with variants, sizes, and loading states
  • Implement Input component with validation states and accessibility features
  • Build Badge/StatusPill component to replace duplicate status indicators
  • Requirements: 1.1, 1.4, 7.2

• 2.1 Implement Button component system

  • Write Button component with variant-based styling using class-variance-authority
  • Add support for different sizes, states (loading, disabled), and as-prop polymorphism
  • Create comprehensive test suite for Button component interactions
  • Requirements: 1.1, 1.3, 8.1

• 2.2 Create Input and form components

  • Build Input component with validation states, icons, and accessibility labels
  • Implement Label component with proper association and styling
  • Create form validation utilities and error display components
  • Requirements: 1.1, 5.3, 8.1

• 2.3 Build status and feedback components

  • Consolidate StatusPill/Badge components to replace scattered status indicators
  • Create LoadingSpinner component to replace multiple loading implementations
  • Implement ErrorState and EmptyState components for consistent feedback
  • Requirements: 1.4, 1.5, 7.2

• 3. Refactor API client and service layer

  • Consolidate API client configuration and error handling
  • Create service classes for each business domain (auth, billing, subscriptions)
  • Implement consistent error handling and response type definitions
  • Requirements: 3.1, 3.4, 5.2

• 3.1 Build centralized API client

  • Refactor existing API client to use consistent error handling and type safety
  • Implement request/response interceptors for authentication and logging
  • Create base service class with common CRUD operations
  • Requirements: 3.1, 3.3, 5.2

• 3.2 Create domain-specific API services

  • Write AuthService class with login, signup, and session management methods
  • Implement BillingService for invoice and payment operations
  • Create SubscriptionService for subscription management and SIM operations
  • Requirements: 3.4, 4.1, 5.2

• 4. Implement layout component system

  • Create DashboardLayout component consolidating navigation and sidebar logic
  • Build PageLayout component for consistent page headers and breadcrumbs
  • Implement AuthLayout for authentication pages with consistent styling
  • Requirements: 2.1, 2.4, 4.2

• 4.1 Build DashboardLayout component

  • Consolidate navigation logic from existing layout components
  • Implement responsive sidebar with proper mobile navigation
  • Add user menu, notifications, and session timeout handling
  • Requirements: 2.1, 2.3, 4.2

• 4.2 Create PageLayout component

  • Build reusable page header with title, description, and action buttons
  • Implement breadcrumb navigation system
  • Add loading and error states for page-level feedback
  • Requirements: 2.1, 2.4, 1.4

• 5. Refactor authentication feature module

  • Consolidate auth store and API calls into cohesive auth feature
  • Create reusable auth forms (login, signup, password reset) with shared validation
  • Implement session management and token refresh logic
  • Requirements: 4.1, 4.2, 3.2

• 5.1 Consolidate authentication state management

  • Refactor useAuthStore to use consistent patterns and error handling
  • Implement token refresh logic and session timeout detection
  • Create auth guards and route protection utilities
  • Requirements: 3.2, 4.1, 4.4

• 5.2 Build reusable authentication forms

  • Create LoginForm component consolidating login page logic
  • Implement SignupForm with multi-step validation and progress indication
  • Build PasswordResetForm and SetPasswordForm components
  • Requirements: 1.4, 2.4, 5.3

• 6. Migrate dashboard feature to new architecture

  • Refactor dashboard components to use new design system
  • Consolidate dashboard data fetching and state management
  • Implement dashboard widgets as reusable components
  • Requirements: 4.1, 4.2, 1.4

• 6.1 Refactor dashboard data layer

  • Consolidate useDashboardSummary hook with proper error handling and caching
  • Create dashboard service for API calls and data transformation
  • Implement dashboard state management with loading and error states
  • Requirements: 3.1, 3.3, 4.1

• 6.2 Build dashboard UI components

  • Refactor StatCard component to use new design system
  • Create QuickAction component for dashboard shortcuts
  • Implement ActivityFeed component for recent activity display
  • Requirements: 1.1, 1.4, 7.2

• 7. Consolidate billing feature components

  • Merge duplicate invoice and payment components
  • Create reusable billing data table with sorting and filtering
  • Implement consistent billing status indicators and formatting
  • Requirements: 1.4, 1.5, 4.1

• 7.1 Build billing data components

  • Create InvoiceTable component consolidating invoice list functionality
  • Implement PaymentMethodCard for consistent payment method display
  • Build BillingStatusBadge to replace scattered status indicators
  • Requirements: 1.4, 2.4, 7.2

• 7.2 Refactor billing pages

  • Consolidate invoice pages to use shared components and layouts
  • Implement payment method management with consistent form patterns
  • Create billing summary components for dashboard integration
  • Requirements: 2.1, 2.4, 4.2

• 8. Refactor subscriptions and SIM management

  • Consolidate subscription list and detail components
  • Create reusable SIM management components for different subscription types
  • Implement subscription action components (cancel, upgrade, etc.)
  • Requirements: 1.4, 4.1, 4.2

• 8.1 Build subscription management components

  • Create SubscriptionCard component for list and grid displays
  • Implement SubscriptionDetails component with service-specific sections
  • Build SubscriptionActions component for common subscription operations
  • Requirements: 1.4, 4.2, 7.2

• 8.2 Consolidate SIM management functionality

  • Refactor SimManagementSection to use new component architecture
  • Create SimDetailsCard and SimActions components with consistent styling
  • Implement DataUsageChart component with proper loading and error states
  • Requirements: 1.4, 2.4, 4.2

• 9. Refactor catalog and ordering system

  • Consolidate product catalog components across different service types
  • Create reusable product configuration and ordering flow components
  • Implement consistent pricing display and order summary components
  • Make sure the design is good and not worse than the old implementation of catalog pages. Internet, Sim and VPN may have different steps and choices and levels because of their structure and do not lose current business logic because its very important how it gets the data and how it builds it etc.
  • Requirements: 1.4, 2.4, 4.1

• 9.1 Build product catalog components

  • Create ProductCard component for consistent product display across catalogs
  • Implement PricingDisplay component with currency formatting and feature lists
  • Build ProductComparison component for side-by-side product comparison
  • Requirements: 1.4, 7.2, 4.2

• 9.2 Consolidate ordering flow components

  • Create OrderSummary component for checkout and configuration pages
  • Implement ConfigurationStep component for multi-step product configuration
  • Build AddressForm and PaymentForm components for checkout process
  • Requirements: 2.4, 4.2, 5.3

• 10. Implement comprehensive testing framework

  • Set up testing utilities and custom render functions with providers
  • Create test factories for generating mock data and API responses
  • Write unit tests for all new components and services
  • Requirements: 8.1, 8.2, 8.5

• 10.1 Set up testing infrastructure

  • Configure Jest and React Testing Library with custom render utilities
  • Create mock factories for API responses and component props
  • Implement test utilities for user interactions and async operations
  • Requirements: 8.1, 8.3, 8.5

• 10.2 Write component and integration tests

  • Create unit tests for all UI components with interaction testing
  • Implement integration tests for feature modules and page components
  • Write API service tests with proper mocking and error scenarios
  • Requirements: 8.1, 8.2, 8.4

• 11. Optimize bundle size and performance

  • Implement code splitting for feature modules and heavy components
  • Analyze bundle size and remove unused dependencies
  • Set up performance monitoring and Core Web Vitals tracking
  • Requirements: 6.1, 6.2, 6.5

• 11.1 Implement code splitting strategy

  • Add dynamic imports for feature pages and heavy components
  • Configure Next.js bundle analyzer and optimize chunk splitting
  • Implement lazy loading for non-critical components and features
  • Requirements: 6.1, 6.3, 6.5

• 11.2 Performance optimization and monitoring

  • Optimize React Query configuration for better caching and performance
  • Implement image optimization and lazy loading for better Core Web Vitals
  • Set up bundle size monitoring and performance regression detection
  • Requirements: 6.2, 6.3, 6.4

• 12. Migration and cleanup

  • Gradually migrate existing pages to use new components and architecture
  • Remove duplicate components and unused code
  • Update imports and dependencies throughout the codebase
  • Requirements: 1.5, 6.5, 4.4

• 12.1 Execute component migration

  • Replace old Button, Input, and layout components with new design system
  • Update all pages to use new PageLayout and feature components
  • Remove duplicate status indicators, loading spinners, and form components
  • Requirements: 1.4, 1.5, 2.4

• 12.2 Final cleanup and optimization

  • Remove unused files, components, and dependencies
  • Update all import statements to use new component locations
  • Run final bundle analysis and performance testing
  • Requirements: 6.5, 1.5, 4.4