project-management-dashboard

name	project-management-dashboard
description	Full-stack dashboard with RBAC, user management, and project management. Built with React + TypeScript + SCSS, consuming a mock REST API.
version	0.1.0
author	Developer
tags	["react","typescript","scss","rbac","dashboard"]
status	in-progress
created	"2026-04-22T00:00:00.000Z"
updated	"2026-04-22T00:00:00.000Z"

Project Management Dashboard – Development Status

🎯 Project Overview

A full‑stack dashboard application with role‑based access control (RBAC), user management, and project management, consuming a mock REST API (https://l3-interview-be.onrender.com).
Built with React + TypeScript + SCSS and custom UI components (no external UI library).

---

✅ Completed Features (as of now)

1. Project Setup & Configuration

• Vite + React + TypeScript
• SCSS with CSS Modules
• Path alias @/ configured (Vite + TypeScript)
• Environment variables (.env) for API base URL
• Folder structure: src/ ├── api/ → axios instance with interceptors ├── styles/ → global SCSS, variables, mixins ├── components/ → Button, Input, Badge (custom), ProtectedRoute ├── context/ → AuthContext (auth state, token storage) ├── pages/ │ ├── Login/ → login form (react‑hook‑form + zod) │ └── users/ → UsersList (pagination, filter, CRUD) ├── App.tsx → routes (login, dashboard, users) └── main.tsx → BrowserRouter + global styles

2. Authentication & Authorization

• Login page (/login) with email/password, validation (react‑hook‑form + zod)
• API call to POST /auth/login – receives { access_token, user }
• Token stored in localStorage (key: token)
• AuthContext provides user, token, login(), logout(), loading
• On refresh: token is read from storage, /users/me is called to restore user session
• ProtectedRoute component – redirects to /login if not authenticated
• Logout function clears token and user (callable from anywhere)

3. User Management (CRUD + RBAC)

• Users list page (/users) – accessible only to Admin and Super Admin
• Pagination (page, limit=10) using GET /users?page=...
• Role filter using GET /users/role/:role
• Table displays: name, email, role (badge), status (badge), action buttons
• Create user – form (name, email, password, role) → POST /users
• Edit user – pre‑filled form → PATCH /users/:id
• Toggle status – PATCH /users/:id/toggle-status
• Delete user – DELETE /users/:id (Super Admin only)
• Role‑based UI:
• Super Admin: all buttons (Edit, Toggle Status, Delete)
• Admin: Edit + Toggle Status (no Delete)
• Regular User: cannot access /users (redirect or 403)

4. Custom UI Components

• Button – variants (primary, secondary, danger), loading state
• Input – label, error message, forwardRef for react‑hook‑form
• Badge – variants (default, success, warning, danger)
• All components use SCSS modules for scoped styling

5. API Integration & Error Handling

• Axios instance with base URL and token interceptor
• Response interceptor: 401 → clear token → redirect to /login
• Loading states during API calls
• Basic error display (toast/alert – to be improved)

6. Styling (SCSS)

• Central variables (colors, spacing, fonts, breakpoints, radius)
• Mixins (flex-center, flex-between, card)
• Global reset and base styles
• Component‑specific .module.scss files

---

🚧 Current Status & Known Issues

Working

• Login succeeds with [e-mail] / password123
• Token is stored, user is fetched via /users/me
• Users list loads, pagination works, role filter works
• Create, edit, toggle status, delete (Super Admin) work
• Role‑based buttons show/hide correctly

Not yet implemented / in progress

• Dashboard statistics page (placeholder only)
• Project management (list, details, CRUD, team members)
• Profile page (/profile) – currently not built
• Logout button – exists in context but not in UI
• Toast notifications – currently using alert() for errors
• Advanced filtering & search (debounced search, multi‑filter) – partially done for users
• Responsive design – basic, not fully tested

Known bugs / issues

• Login button sometimes does not trigger – needs debugging (form submission may be blocked by validation or event handler)
• SCSS deprecation warnings (@import replaced with @use) – resolved
• File paths for UsersList.module.scss caused errors – resolved by moving to correct folder
• Alias @/ works for TS/JS but not for SCSS (relative paths used)

---

📦 Technology Stack

Category	Technology
Build tool	Vite
Framework	React 18
Language	TypeScript
Styling	SCSS (CSS Modules)
Routing	React Router DOM v6
HTTP client	Axios
Forms & validation	React Hook Form + Zod
State management	React Context (AuthContext)

---

🔜 Next Steps (planned)

1. Fix login button issue (if still present) – ensure handleSubmit is wired correctly.
2. Add logout button in a Navbar component.
3. Build Dashboard page – summary cards, project statistics (from /projects/statistics).
4. Implement Project Management:

• Projects list with pagination, status/priority filters
• Create/Edit project forms
• Project details page with team members (add/remove members)

5. Add toast notifications (e.g., sonner or custom) for success/error feedback.
6. Profile page – display /users/me and assigned projects.
7. Improve error handling – user‑friendly messages instead of alert().
8. Responsive design – mobile/tablet layout.

---

📝 Notes for Future Development

• All API calls are made through the Axios instance in src/api/axios.ts – it automatically adds the token.
• Role checks should be done using currentUser.role from useAuth().
• The API returns access_token – it is stored as token in localStorage.
• SCSS variables are available in any .module.scss via @use '../../styles/variables' as *; (adjust relative path depth).
• The @/ alias is available for TypeScript/JavaScript imports only.

---

🧪 Test Credentials

Role	Email	Password
Super Admin	[e-mail]	password123
Admin	[e-mail]	password123
User	[e-mail]	password123

---

Last updated: 2026‑04‑22
Status: Authentication & User Management – complete. Project Management – next.