Phase 4: Migrate All Pages + Shared Components

Depends on: Phase 3 complete (layouts working)
Result: All 22 pages and ~50 shared components fully styled with Tailwind + shadcn-vue.

Goal

Convert every page and its associated shared components from Bulma classes to Tailwind utilities. Migrate in 4 batches from simple → complex. Run visual tests after each batch.

Per-Page Migration Checklist

Apply to EVERY page:

1. Replace all Bulma utility classes with Tailwind (see Phase 3 class reference)
2. Replace all remaining Vuero component usage with shadcn-vue (base components done in Phase 2, but shared components may still use old patterns)
3. Convert scoped <style> that references Bulma variables/classes
4. Test light and dark mode
5. Test all interactive elements (forms, modals, dropdowns, navigation)
6. Run visual test for this page

Batch 1: Auth + Simple Pages (5 pages)

Tasks

• [ ] Migrate src/pages/[...all].vue (404)
• [ ] Migrate src/pages/index.vue (landing)
• [ ] Migrate src/pages/auth/index.vue (login)
• [ ] Migrate src/pages/auth/signup.vue (signup)
• [ ] Migrate src/pages/auth/profile.vue (profile)

Verify

• [ ] Auth flow works end-to-end (login → redirect to dashboard)
• [ ] Landing page renders in light and dark mode
• [ ] 404 page displays correctly
• [ ] Run: pnpm playwright test visual-migration --grep "landing|auth|404"
• [ ] Update baselines if diffs are approved: pnpm test:visual:update

Batch 2: List/CRUD Pages (3 pages + 6 shared components)

Shared components to migrate

• [ ] src/components/pages/clients/ClientList.vue
• [ ] src/components/pages/posts/PostsList.vue
• [ ] src/components/partials/posts/PostDetailModal.vue → Dialog
• [ ] src/components/partials/dropdowns/ClientListDropdown.vue → DropdownMenu
• [ ] src/components/partials/dropdowns/CampaignListDropdown.vue → DropdownMenu
• [ ] src/components/partials/dropdowns/WidgetDropdown.vue → DropdownMenu

Tasks

• [ ] Migrate src/pages/app/clients.vue
• [ ] Migrate src/pages/app/posts.vue
• [ ] Migrate src/pages/app/settings.vue
• [ ] Migrate all 6 shared components listed above

Verify

• [ ] Client list renders with correct layout
• [ ] Post table shows status badges
• [ ] Settings tabs switch correctly
• [ ] Modals open and close
• [ ] Run: pnpm playwright test visual-migration --grep "clients|posts|settings"
• [ ] Update baselines if diffs are approved

Batch 3: Client Detail Pages (5 pages + 13 shared components)

Shared components to migrate

• [ ] src/components/pages/clients/ClientOverview.vue
• [ ] src/components/pages/integrations/BloggerIntegration.vue
• [ ] src/components/pages/integrations/FacebookIntegration.vue
• [ ] src/components/pages/integrations/GhostIntegration.vue
• [ ] src/components/pages/integrations/OutstandIntegration.vue
• [ ] src/components/pages/integrations/ResendIntegration.vue
• [ ] src/components/pages/integrations/SmtpIntegration.vue
• [ ] src/components/pages/integrations/WordPressIntegration.vue
• [ ] src/components/pages/connections/TelegramConnectionCard.vue
• [ ] src/components/partials/posts/AIPostEdit.vue
• [ ] src/components/partials/posts/AdHocPostModal.vue → Dialog
• [ ] src/components/partials/posts/PostAutoChip.vue → Badge
• [ ] src/components/partials/posts/PostGenerationInfo.vue

Tasks

• [ ] Migrate src/pages/app/client/[id].vue (parent layout)
• [ ] Migrate src/pages/app/client/[id]/index.vue (overview)
• [ ] Migrate src/pages/app/client/[id]/settings.vue
• [ ] Migrate src/pages/app/client/[id]/integrations.vue
• [ ] Migrate src/pages/app/client/[id]/review-posts.vue
• [ ] Migrate all 13 shared components listed above

Verify

• [ ] Client detail navigates between sub-tabs
• [ ] All 7 integration cards render
• [ ] Post review approve/reject/edit actions work
• [ ] Modals function correctly
• [ ] Run: pnpm playwright test visual-migration --grep "client-"
• [ ] Update baselines if diffs are approved

Batch 4: Complex Pages (7 pages + ~15 shared components)

Shared components to migrate

• [ ] src/components/pages/campaigns/CampaignDetail.vue
• [ ] src/components/pages/campaigns/CampaignList.vue
• [ ] src/components/pages/campaigns/CampaignPosts.vue
• [ ] src/components/forms/campaigns/NewCampaignForm.vue — complex multi-step form
• [ ] src/components/pages/posts/EditPost.vue
• [ ] src/components/pages/admin/AdminDashboard.vue
• [ ] src/components/pages/company/CompanyDashboard.vue
• [ ] src/components/pages/email/EmailContactsManager.vue
• [ ] src/components/pages/email/EmailTemplateMapper.vue
• [ ] src/components/partials/widgets/stat/*.vue — stat cards
• [ ] src/components/partials/lifestyle/*.vue — dashboard widgets
• [ ] src/components/partials/notepad/*.vue — notepad widget
• [ ] src/components/partials/popover/*.vue — popover content

Tasks

• [ ] Migrate src/pages/app/index.vue (dashboard)
• [ ] Migrate src/pages/app/edit.vue (post editor)
• [ ] Migrate src/pages/app/campaign/[id].vue (campaign detail)
• [ ] Migrate src/pages/app/campaign/new.vue (new campaign)
• [ ] Migrate src/pages/app/client/campaigns/[id].vue
• [ ] Migrate src/pages/app/client/[id]/analytics/[metric].vue
• [ ] Migrate src/pages/app/admin/index.vue
• [ ] Migrate all shared components listed above

Verify

• [ ] Dashboard charts render (ApexCharts theme colors correct)
• [ ] Post editor loads with Summernote WYSIWYG
• [ ] Campaign forms submit correctly
• [ ] Date pickers work
• [ ] Analytics charts display
• [ ] Admin table renders
• [ ] Run: pnpm playwright test visual-migration (full suite)
• [ ] Generate report: pnpm test:visual:report
• [ ] Update baselines

Third-Party Library Styling

These libraries need CSS adjustments after the Bulma → Tailwind switch:

• [ ] v-calendar — override default styles with Tailwind-compatible CSS in app.css
• [ ] @vueform/multiselect — was importing SCSS theme; add custom CSS or replace with shadcn Command (combobox)
• [ ] @vueform/slider — custom track/thumb CSS for Tailwind
• [ ] Summernote — uses Bootstrap styles; scope overrides in app.css
• [ ] ApexCharts — update useThemeColors() composable to read new CSS variable names
• [ ] Billboard.js — same as ApexCharts
• [ ] Notyf — update src/composables/notyf.ts color variable references

Summary

Checklist

• [ ] Batch 1 complete — Auth + simple pages
• [ ] Batch 2 complete — List/CRUD pages
• [ ] Batch 3 complete — Client detail pages
• [ ] Batch 4 complete — Complex pages
• [ ] Third-party library CSS adjustments done
• [ ] ALL 22 pages render correctly
• [ ] Light and dark mode work on every page
• [ ] All forms submit correctly
• [ ] All modals/dialogs open and close
• [ ] All tables render with data
• [ ] Charts display with correct theme colors
• [ ] Date pickers function
• [ ] WYSIWYG editor loads and works
• [ ] Mobile responsive view works on all pages
• [ ] pnpm build succeeds
• [ ] pnpm test:tsc passes
• [ ] pnpm test:unit passes
• [ ] pnpm test:visual passes (all baselines updated)