Multi-Tenant SaaS Task Management Dashboard

Frontend for the Laravel multi-tenant backend. The app focuses on auth state, tenant context, RBAC-aware UI, and API integration.

Setup

1. Install dependencies: npm install
2. Configure API base URL in .env:

   VITE_API_BASE_URL=http://localhost/api/v1
   

3. Run the app: npm run dev

App Structure

• src/api/: centralized API client + endpoint wrappers
• src/state/: auth, tenant, projects, and tasks contexts
• src/components/: reusable UI building blocks
• src/pages/: route-level screens
• src/types/: type-safe API models and enums

State Management Approach

React Context providers store:

• Auth token + user (AuthProvider)
• Active organization and role (OrgProvider)
• Projects (ProjectProvider)
• Tasks (TaskProvider)

State is kept in memory and persisted in localStorage for token + active org so the session survives reloads.

API Integration Strategy

• axios client in src/api/client.ts
• Request interceptor injects:
  • Authorization: Bearer <token>
  • X-Organization-ID for tenant-scoped endpoints
• Response interceptor triggers a session-expired event on 401 to log users out cleanly.

Role-Aware UI Rules

Permission checks are centralized in src/permissions.ts.

• Owners / Managers: create/edit projects, assign tasks
• Members: update tasks assigned to them only

UI hides or disables unauthorized actions without hardcoding permissions in individual components.

Screenshots / Demo

Add screenshots under docs/screenshots/ and link them here.

Notes

This frontend follows backend standards:

• Tenant is required via X-Organization-ID.
• Auth token uses Authorization: Bearer ....
• Error responses follow { message, errors, code }.