[EPIC] Frontend Migration: Vite + shadcn/ui + Tailwind CSS

[MohsinHashmi-DataInn]

Epic Overview

Comprehensive migration of SimpleAccounts-UAE frontend from Create React App with mixed UI libraries to Vite + shadcn/ui + Tailwind CSS.

Motivation

• Create React App is in maintenance mode
• Mixed UI libraries (CoreUI, Reactstrap, MUI) cause inconsistency
• Bundle size bloat from multiple UI libraries
• Moment.js adds unnecessary weight
• Modern tooling offers better DX and performance

Related Discussion

• Discussion RFC: Frontend Library Migration Plan - Modernizing the Stack #122: Frontend Library Migration Plan

---

Dependency Graph

#157 (Vite) ─────────┬────────────────────────────────────────────┐
                     │                                            │
                     ├─→ #158 (Tailwind) ─→ #159 (shadcn/ui)     │
                     │                           │                │
                     │                           ├─→ #163 (RHF)   │
                     │                           │                │
                     │                           ├─→ #164 (Components)
                     │                           │                │
                     │                           └─→ #165 (TanStack Table)
                     │                                            │
                     ├─→ #161 (React Router v6)                   │
                     │                                            │
                     └─→ #162 (Redux Toolkit)                     │
                                                                  │
Independent (can run anytime):                                    │
  #160 (Day.js - Moment replacement)                              │
                                                                  │
After component setup:                                            │
  #166 (Layout) ─→ #167 (Auth) ─→ #168 (Dashboard)               │
                                                                  │
Module migrations (after #166):                                   │
  #169 (Customer Invoice) ─→ #172 (Supplier Invoice)             │
  #170 (Contact)                                                  │
  #171 (Product)                                                  │
  #173 (Expense)                                                  │
  #174 (Payroll)                                                  │
  #175 (Reports)                                                  │
  #176 (Procurement)                                              │
  #177 (Settings)                                                 │
  #178 (Other financials)                                         │
                                                                  │
Final cleanup:                                                    │
  #179 (Remove legacy) ─→ #180 (Test config) ─→ #181 (Tests)     │
                                            ↓                     │
                                         #182 (Validation) ← FINISH

---

Phase 1: Foundation (Start Here)

• [TASK] Migrate from Create React App to Vite #157 - Migrate from Create React App to Vite ← START
• [TASK] Setup Tailwind CSS configuration #158 - Setup Tailwind CSS configuration
• [TASK] Setup shadcn/ui with Base UI primitives #159 - Setup shadcn/ui with Base UI primitives
• [TASK] Migrate Moment.js to Day.js #160 - Migrate Moment.js to Day.js (independent)

Phase 2: Core Infrastructure

• [TASK] Migrate React Router v5 to v6 #161 - Migrate React Router v5 to v6
• [TASK] Migrate Redux to Redux Toolkit #162 - Migrate Redux to Redux Toolkit
• [TASK] Setup React Hook Form with Zod validation #163 - Setup React Hook Form with Zod

Phase 3: Component Library

• [TASK] Add core shadcn/ui components #164 - Add core shadcn/ui components
• [TASK] Setup TanStack Table with shadcn/ui styling #165 - Setup TanStack Table with shadcn styling
• [TASK] Migrate layout components (Header, Sidebar, Footer) #166 - Migrate layout components (Header, Sidebar, Footer)

Phase 4: Screen Migrations

• [TASK] Migrate authentication screens (Login, Register, Reset Password) #167 - Migrate authentication screens
• [TASK] Migrate Dashboard screen #168 - Migrate Dashboard screen
• [TASK] Migrate Customer Invoice module screens #169 - Migrate Customer Invoice module
• [TASK] Migrate Contact management screens #170 - Migrate Contact management
• [TASK] Migrate Product management screens #171 - Migrate Product management
• [TASK] Migrate Supplier Invoice module screens #172 - Migrate Supplier Invoice module
• [TASK] Migrate Expense module screens #173 - Migrate Expense module
• [TASK] Migrate Payroll module screens #174 - Migrate Payroll module
• [TASK] Migrate Financial Reports module screens #175 - Migrate Financial Reports module
• [TASK] Migrate Procurement module screens (RFQ, PO, GRN, Quotation) #176 - Migrate Procurement module
• [TASK] Migrate Settings and Configuration screens #177 - Migrate Settings screens
• [TASK] Migrate remaining financial modules (Payment, Receipt, Journal, Credit/Debit Notes) #178 - Migrate remaining financial modules

Phase 5: Cleanup & Validation

• [TASK] Remove legacy UI dependencies (Bootstrap, CoreUI, Reactstrap, MUI v4) #179 - Remove legacy UI dependencies
• [TASK] Update test configuration for Vite #180 - Update test configuration for Vite
• [TASK] Update component tests for shadcn/ui #181 - Update component tests
• [TASK] Final validation and performance benchmarking #182 - Final validation and benchmarking ← FINISH

---

Success Criteria

• Application builds with Vite
• All screens using shadcn/ui components
• No Bootstrap/CoreUI/Reactstrap dependencies
• Bundle size reduced by 30%+
• All tests passing (70% coverage)
• Performance metrics maintained or improved

Quick Reference: What Can Run in Parallel

After completing	Can start in parallel
#157 (Vite)	#158, #160, #161, #162
#159 (shadcn)	#163, #164, #165
#166 (Layout)	#167, #168, #169-#178
All migrations	#179

Current Stack → Target Stack

Component	Current	Target
Build	CRA 5.0.1	Vite 5.x
UI	CoreUI/Reactstrap/MUI	shadcn/ui + Base UI
Styling	Bootstrap + SASS	Tailwind CSS
Forms	Formik 1.5.1	React Hook Form + Zod
Date	Moment.js	Day.js
Router	React Router 5	React Router 6
State	Redux + Thunk	Redux Toolkit
Tables	react-bootstrap-table	TanStack Table

---

Epic created: December 2025
Total issues: 26
Total files affected: 1,234