# TODO - Stock Management System (SMS) UI Redesign (Tailwind only)

## Step 1 — Shared layout/components (core theming)
- [ ] Update `frontend/src/components/Sidebar.jsx` (collapsible, desktop fixed, icons, active states, smooth transitions)
- [ ] Update `frontend/src/components/Navbar.jsx` (sticky topbar, logo/name/current user/logout, responsive)
- [ ] Update `frontend/src/layouts/AppLayout.jsx` (layout alignment with fixed sidebar, consistent spacing)
- [ ] Update `frontend/src/components/common/TableShell.jsx` (sticky headers, better search styling, row hover, responsive scrolling, empty/loading states)
- [ ] Update `frontend/src/components/common/Modal.jsx` (Tailwind-only enter/leave transitions, polished close button)


## Step 2 — Dashboard page
- [ ] Modernize `frontend/src/pages/DashboardPage.jsx` (stats cards, hover polish, inventory summary section, recent table polish)

## Step 3 — Auth pages
- [ ] Modernize `frontend/src/pages/LoginPage.jsx`
- [ ] Modernize `frontend/src/pages/RegisterPage.jsx`

## Step 4 — CRUD pages
- [ ] Modernize `frontend/src/pages/ProductsPage.jsx` (form fields, buttons, cards)
- [ ] Modernize `frontend/src/pages/WarehousesPage.jsx`
- [ ] Modernize `frontend/src/pages/TransactionsPage.jsx`

## Step 5 — Reports page
- [ ] Modernize `frontend/src/pages/ReportsPage.jsx` (report cards + metrics layout)

## Step 6 — Consistency & quality check
- [ ] Ensure consistent typography, spacing, colors across all pages
- [ ] Verify responsiveness at mobile/tablet/desktop
- [ ] Verify no React/Tailwind errors
- [ ] Run `npm run build` (or available lint/build) to confirm compilation

