FlowOff - Frontend

A modern, robust, and feature-rich Leave Management System built with React, TypeScript, and Tailwind CSS. This application provides a seamless experience for managing employee leaves, policies, and organizational structures with multi-tenant support.

---

Project Architecture

The project follows a Feature-Based Modular Architecture, ensuring scalability and maintainability.

Directory Structure

• src/features/: Contains independent modules (e.g., leaves, approvals, employees). Each feature contains its own components, hooks, and services.
• src/lib/api/: Core API communication layer (BaseRequestProvider).
• src/hooks/: Custom hooks, including the powerful useQuery for data fetching.
• src/contexts/: Global contexts like AuthContext and LoaderContext.
• src/routes/: Centralized route definitions and navigation logic.
• src/store/: Redux Toolkit slices for global UI state management.
• src/components/ui/: Reusable primitive UI components (Radix UI + Tailwind).

---

Libraries & Tools

Library	Feature / Purpose
React 19	Core UI library for building the interface.
Vite	Fast build tool and development server.
Tailwind CSS 4	Utility-first CSS framework for modern styling.
Radix UI	Unstyled, accessible UI primitives (Modals, Dropdowns, etc.).
React Router 7	Client-side routing with subdomain support.
Redux Toolkit	State management for global UI and user profile.
React Hook Form	Performant form handling and validation.
Zod	Schema-based validation for forms and API responses.
Recharts	Interactive charts for dashboard analytics.
Lucide React	Beautiful and consistent icon set.
Sonner	Modern toast notifications for user feedback.
Date-fns	Lightweight library for date manipulation.

---

Authentication & Authorization

How Auth Works

The system uses Cookie-based Authentication (credentials: 'include').

1. Login Flow: Users provide credentials. The server returns an exchangeCode. This code is then exchanged for a secure session cookie via the /exchange endpoint.
2. Profile Management: AuthContext calls authService.getMe() on initialization to fetch the user profile and permissions.
3. Session Persistence: Cookies handle the session automatically. If a 401 Unauthorized error occurs, BaseRequestProvider attempts an automatic token refresh.

Permission System

• Role-Based Access Control (RBAC): Users are assigned roles (e.g., Admin, Manager, Employee).
• Granular Permissions: Permissions are defined per module (e.g., EMPLOYEE_MGMT) and action (VIEW, CREATE, UPDATE, DELETE, APPROVE, REJECT).
• Guards: PermissionGuard and AuthProtectedRoute components are used in AppRoutes.tsx to restrict access to specific pages and UI elements.

---

API Structure & Handling

1. BaseRequestProvider (src/lib/api/BaseRequestProvider.ts)

This is the core utility for all HTTP requests.

• Multi-Tenancy: Automatically extracts the subdomain from the URL and adds the X-Tenant-Subdomain header to every request.
• Automatic Refresh: Intercepts 401 errors and attempts to refresh the session token before retrying the original request.
• Feedback: Built-in support for success/error toast notifications via request options.
• Methods: Supports get, post, put, patch, and delete.

2. useQuery Hook (src/hooks/useQuery.ts)

A custom hook for efficient data fetching and caching.

• Caching: Uses a global Map to cache responses.
• TTL (Time To Live): Cache entries expire after a configurable duration (default: 5 minutes).
• Global Loader: Automatically triggers the global loading bar during requests.
• Invalidation: invalidateQuery utility allows manual cache clearing after mutations (e.g., refetching the list after deleting an item).

---

Routes & Navigation

Routes are organized in AppRoutes.tsx and support dynamic subdomains (e.g., company.lms.com/dashboard).

Route Path	Module	Description
/login	Auth	Secure login page.
/register	Onboarding	Company registration and setup.
/:subdomain/dashboard	Dashboard	Overview of stats, leave balances, and pending tasks.
/:subdomain/leaves	My Leaves	Personal leave history and application form.
/:subdomain/approvals	Approvals	Management of pending leave requests for managers.
/:subdomain/employees	Employees	Directory and management of staff members.
/:subdomain/organization	Org	Management of departments, roles, and company settings.
/:subdomain/policy	Policy	Configuration of leave policies and rules.

---

Development Scripts

• yarn dev: Starts the Vite development server.
• yarn build: Compiles the TypeScript code and builds the production bundle.
• yarn lint: Runs ESLint to check for code quality issues.
• yarn preview: Locally previews the production build.

---

Simple Things to Know

• Subdomains: The application uses the first part of the URL path as the tenant identifier (e.g., /microsoft/dashboard -> tenant is microsoft).
• Responsive: Built with a mobile-first approach using Tailwind's responsive utilities.