romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2a101f1ef5093d9f7ef0d3b0a1cbb6e2fe5311e9
roa2web-service-auto/.auto-build/specs/unified-app/MIGRATION_CHECKLIST.md

12 KiB
Raw Blame History

Unified App Migration Checklist

Track your progress as you implement the unified app.

Phase 1: Project Setup (0.5 days)

Directory Structure

  • Create directory structure in root (/mnt/e/proiecte/roa2web/)
  • Create src/ subdirectories:
    • src/modules/reports/views/
    • src/modules/reports/stores/
    • src/modules/reports/services/
    • src/modules/data-entry/views/receipts/
    • src/modules/data-entry/components/ocr/
    • src/modules/data-entry/stores/
    • src/modules/data-entry/services/
    • src/shared/components/
    • src/shared/stores/
    • src/shared/styles/
    • src/config/
    • src/router/
    • src/assets/css/

Core Configuration Files

  • Create package.json (merge dependencies from both apps)
  • Create vite.config.js (dual proxy + lazy loading)
  • Create src/main.js (PrimeVue setup)
  • Create .env.example (environment variables)
  • Create .gitignore
  • Create README.md

Copy Shared Resources

  • Copy shared/frontend/components/ → src/shared/components/
  • Copy shared/frontend/stores/ → src/shared/stores/
  • Copy shared/frontend/styles/ → src/shared/styles/
  • Copy reports-app/frontend/src/assets/css/ → src/assets/css/

Verification

  • Run npm install - succeeds
  • Run npm run dev - starts on port 3000
  • No console errors

Phase 2: Module Migration (1 day)

Reports Module - Views

  • Copy DashboardView.vue → src/modules/reports/views/
  • Copy InvoicesView.vue → src/modules/reports/views/
  • Copy BankCashRegisterView.vue → src/modules/reports/views/
  • Copy TrialBalanceView.vue → src/modules/reports/views/
  • Copy TelegramView.vue → src/modules/reports/views/
  • Copy CacheStatsView.vue → src/modules/reports/views/
  • Update imports in all views (if needed)

Reports Module - Stores

  • Copy dashboard.js → src/modules/reports/stores/
  • Copy invoices.js → src/modules/reports/stores/
  • Copy treasury.js → src/modules/reports/stores/
  • Copy trialBalance.js → src/modules/reports/stores/
  • Copy cacheStore.js → src/modules/reports/stores/
  • Update imports in all stores (if needed)

Reports Module - Services

  • Copy api.js → src/modules/reports/services/ (in root)
  • Update base URL to /api/reports/ in api.js
  • Test API calls route to localhost:8001

Data Entry Module - Views

  • Copy ReceiptsListView.vue → src/modules/data-entry/views/receipts/
  • Copy ReceiptCreateView.vue → src/modules/data-entry/views/receipts/
  • Update imports in views (if needed)

Data Entry Module - Components

  • Copy OCRUploadZone.vue → src/modules/data-entry/components/ocr/
  • Copy OCRPreview.vue → src/modules/data-entry/components/ocr/
  • Copy OCRConfidenceIndicator.vue → src/modules/data-entry/components/ocr/
  • Update imports in components (if needed)

Data Entry Module - Stores

  • Copy receiptsStore.js → src/modules/data-entry/stores/
  • Update imports in store (if needed)

Data Entry Module - Services

  • Copy api.js → src/modules/data-entry/services/ (in root)
  • Update base URL to /api/data-entry/ in api.js
  • Test API calls route to localhost:8003

CSS Merge

  • Review data-entry-app/frontend/src/assets/css/main.css
  • Merge unique styles into src/assets/css/ (in root)
  • Resolve any style conflicts
  • Test responsive design

Verification

  • All Reports views render without errors
  • All Data Entry views render without errors
  • No import errors in console
  • CSS loads correctly
  • No style conflicts

Phase 3: Routing & Navigation (0.5 days)

Router Configuration

  • Create src/router/index.js (in root)
  • Add /login route (eager loaded)
  • Add /reports/* routes (lazy loaded)
  • Add /data-entry/* routes (lazy loaded)
  • Add redirect / → /reports/dashboard
  • Add authentication guard
  • Add 404 handling
  • Test all routes work

Menu Configuration

  • Create src/config/menu.js (in root)
  • Define "Rapoarte" section
  • Define "Introduceri Date" section
  • Define "Sistem" section
  • Export menu configuration

Feature Flags

  • Create src/config/features.js (in root)
  • Add reports.enabled flag
  • Add dataEntry.enabled flag
  • Add module-level flags
  • Export isFeatureEnabled function

Root Component

  • Create src/App.vue (in root)
  • Integrate AppHeader with unified menu
  • Integrate SlideMenu with menu sections
  • Add router-view
  • Add Toast and ConfirmDialog
  • Test menu navigation

Verification

  • Can navigate to all routes
  • Menu highlights active route
  • Authentication guard works
  • Login redirects to dashboard
  • 404 redirects work

Phase 4: Error Boundaries & Resilience (0.25 days)

Error Boundary Component

  • Create src/shared/components/ErrorBoundary.vue (in root)
  • Implement onErrorCaptured hook
  • Add user-friendly error display
  • Add retry functionality
  • Add navigate away option
  • Test with intentional error

Module Layouts

  • Create src/modules/reports/ReportsLayout.vue (in root)
  • Wrap with ErrorBoundary component
  • Create src/modules/data-entry/DataEntryLayout.vue (in root)
  • Wrap with ErrorBoundary component

Error Isolation Testing

  • Introduce error in Reports module
  • Verify Data Entry still works
  • Introduce error in Data Entry module
  • Verify Reports still works
  • Test retry functionality
  • Test navigate away functionality

Feature Flags Testing

  • Disable Reports module
  • Verify menu items hidden
  • Disable Data Entry module
  • Verify menu items hidden
  • Re-enable all modules

Loading States

  • Add loading spinner for lazy routes
  • Test module switching loading
  • Add skeleton screens (optional)

Verification

  • Error boundary catches component errors
  • User sees friendly error message
  • Can retry or navigate away
  • Module isolation works (error in one doesn't crash other)
  • Feature flags work

Phase 5: Build & Deploy (0.25 days)

Production Build

  • Run npm run build
  • Build succeeds without errors
  • Check dist/ output
  • Verify chunks created:
    • vendor-core.[hash].js
    • vendor-primevue.[hash].js
    • vendor-utils.[hash].js
    • reports.[hash].js (lazy)
    • data-entry.[hash].js (lazy)
    • main.[hash].js
    • main.[hash].css

Bundle Analysis

  • Install rollup-plugin-visualizer
  • Analyze bundle sizes
  • Verify total size ≤ sum of current apps
  • Check for duplicate dependencies

Local Preview

  • Run npm run preview
  • Test all routes work
  • Test API calls work
  • Test error boundaries
  • Test lazy loading

IIS Configuration

  • Create web.config (in root) with URL rewrite rules
  • Add SPA routing rule (all → index.html)
  • Add proxy rule: /api/reports/* → http://localhost:8001/api/*
  • Add proxy rule: /api/data-entry/* → http://localhost:8003/api/*
  • Add proxy rule: /uploads/* → http://localhost:8003/uploads/*

Staging Deployment

  • Deploy to staging IIS site
  • Test all routes
  • Test API calls
  • Test error boundaries
  • Test on different browsers
  • Test on mobile devices

Production Deployment

  • Backup current IIS configuration
  • Backup current builds
  • Deploy unified app
  • Test all routes
  • Test API calls
  • Monitor error logs

Verification

  • Build succeeds
  • Chunks split correctly
  • IIS deployment works
  • API routing correct
  • All features work in production

Testing Checklist

Manual Testing

  • Login flow works
  • Navigate to all Reports views
  • Navigate to all Data Entry views
  • Switch between modules
  • Test company selector
  • Test period selector
  • Test logout
  • Test on mobile (375px)
  • Test on tablet (768px)
  • Test on desktop (1920px)

E2E Tests

  • Create tests/e2e/login.spec.js (in root)
  • Create tests/e2e/reports-navigation.spec.js (in root)
  • Create tests/e2e/data-entry-navigation.spec.js (in root)
  • Create tests/e2e/module-switching.spec.js (in root)
  • Create tests/e2e/error-isolation.spec.js (in root)
  • Run all E2E tests - pass

Performance Testing

  • Run Lighthouse audit
  • Performance score ≥ 90
  • Initial load < 2 seconds
  • Module switching < 500ms (cached)

Post-Implementation Checklist

Documentation Updates

  • Update CLAUDE.md - Architecture section
  • Update CLAUDE.md - Deployment section
  • Update README.md - Quick start
  • Update README.md - URL structure
  • Update DEPLOYMENT_GUIDE.md - IIS configuration
  • Update docs/ARCHITECTURE_SCHEMA.md - Diagrams
  • Update deployment/windows/README.md - Deployment steps

Cleanup (After 1 Week)

  • Archive reports-app/frontend/ → reports-app/frontend-archived/
  • Archive data-entry-app/frontend/ → data-entry-app/frontend-archived/
  • Update start-test.sh to use root directory
  • Update start-data-entry.sh to use root directory
  • Update CI/CD pipelines (if any)
  • Document migration in CHANGELOG.md

Monitoring (First Week)

  • Day 1: Review error logs
  • Day 2: Review error logs
  • Day 3: Review error logs
  • Day 4: Review error logs
  • Day 5: Review error logs
  • Day 6: Review error logs
  • Day 7: Review error logs + user feedback

Optimization (First Month)

  • Week 2: Analyze bundle sizes
  • Week 2: Optimize images/assets
  • Week 3: Consider further code splitting
  • Week 3: Add performance monitoring
  • Week 4: Evaluate feature flag usage
  • Week 4: Plan next improvements

Common Issues & Solutions

Issue: CSS Conflicts

Solution: Use CSS modules, check docs/CSS_PATTERNS.md

Issue: Import Errors

Solution: Update import paths, check alias configuration in vite.config.js

Issue: API Calls Failing

Solution: Verify proxy configuration, check backend is running

Issue: Error Boundary Not Catching

Solution: Check onErrorCaptured implementation, add global error handler

Issue: Large Bundle Size

Solution: Review manualChunks, enable tree shaking, lazy load more

Issue: IIS Routing Not Working

Solution: Check web.config URL rewrite rules, verify IIS URL Rewrite module installed

Issue: Store Contamination

Solution: Use module-scoped stores, check for global state

Issue: PrimeVue Theme Conflicts

Solution: Use single theme (saga-blue), override in vendor CSS

Progress Tracking

Phase 1: Setup

  • Started: ___________
  • Completed: ___________
  • Time Spent: ___________ hours

Phase 2: Migration

  • Started: ___________
  • Completed: ___________
  • Time Spent: ___________ hours

Phase 3: Routing

  • Started: ___________
  • Completed: ___________
  • Time Spent: ___________ hours

Phase 4: Error Boundaries

  • Started: ___________
  • Completed: ___________
  • Time Spent: ___________ hours

Phase 5: Build & Deploy

  • Started: ___________
  • Completed: ___________
  • Time Spent: ___________ hours

Total Time: ___________ hours (Estimated: 20 hours)

Success Metrics

Deployment

  • Single IIS site running (not 2)
  • Single build process (not 2)
  • Zero downtime during deployment

Performance

  • Initial load < 2 seconds
  • Module switching < 500ms
  • Lighthouse score ≥ 90
  • Bundle size ≤ sum of old apps

Quality

  • 100% feature parity
  • All E2E tests passing
  • Zero user-reported bugs (first week)
  • Error isolation verified

Status: ⬜ Not Started | 🔵 In Progress | ✅ Complete

Last Updated: ___________ Completed By: ___________ Production Deploy Date: ___________