laxmanhalaki 0f624a43b1 added time line and tsk breakdown files

2025-10-23 19:39:15 +05:30

182 KiB

Raw Permalink Blame History

RE Workflow Management System - Task Breakdown

Sprint Planning & Task Distribution (Frontend & Backend)

Version: 1.1
Date: October 23, 2025
Project: RE Workflow Management System (Non-Templatized)
Authentication: Standard Login Flow (SSO deferred)
Current Status: Frontend UI from Figma implemented, functionality integration in progress

Project Overview
SSO Authentication Approach 🔐
Frontend Work Reality Check ⚠️ READ THIS FIRST
Sprint Structure
Backend Tasks
Frontend Tasks
Task Dependencies
Timeline & Milestones

📖 For Detailed Sprint Explanations: See separate file RE_Workflow_Detailed_Sprint_Guide.md

Project Overview

Technology Stack

Backend: Node.js 22 LTS + TypeScript 5.7 + Express.js + PostgreSQL 16
Frontend: React 19 + TypeScript (TSX) + Material-UI 6.3 + Redux Toolkit 2.5
Authentication: Standard Email/Password Login (JWT-based)

Authentication Approach

🔄 SSO Login (RE SSO Bridge): Primary authentication method (awaiting final confirmation)
- No Login/Signup Screens: SSO handles authentication externally
- Figma Note: No login/signup screens in Figma (not needed for SSO)
- User Flow:
  1. User clicks "Login" → Redirects to RE SSO Bridge
  2. User authenticates with RE credentials (handled by SSO)
  3. SSO redirects back to app with token
  4. App validates token and creates session
- Frontend Work: Minimal (just SSO callback handler)
- No Registration Flow: Users are provisioned in Active Directory, auto-synced to app
⚠️ Fallback Plan (if SSO delayed): Standard email/password login (temporary)
- Only if SSO integration is delayed or unavailable
- Can be built in 3-4 days as temporary solution
- Will be replaced by SSO once available

Current Project Status (As of October 23, 2025)

Frontend Status 🔄

Figma UI Extraction: 80% complete (includes mobile responsive)
- ⚠️ Important: This is just UI with dummy data, NO API integration yet
- When 100% extraction done: Still just static UI components
- All UI is mobile responsive (320px - 1920px)
Dependency Packages: ✅ All resolved and installed
Work Note Feature: UI complete + partial functionality (document selection, emoji support working)
Current Status:
- ✅ UI Components: 80% extracted
- ❌ API Integration: 0% (not started)
- ❌ Redux Integration: 0% (not started)
- ❌ Form Validations: 0% (not started)
- ❌ Business Logic: 0% (not started)

Reality Check:

Figma extraction ≠ Feature complete
UI extraction = Just visual components with dummy data
Still need: API integration, state management, validations, error handling, loading states

Actual Frontend Completion: ~20% (UI only, no functionality)

Backend Status 🔄

Repository Setup: 70% in progress
Database Schema: Ready to implement (0% done)
API Development: Not started (0% done)
Estimated Completion: Following planned timeline

Overall Project Completion: ~10% (mostly UI extraction)

🔐 SSO Authentication Approach

User Authentication Flow:

┌─────────────────────────────────────────────────────────────┐
│  User visits app → https://workflow.royalenfield.com        │
└────────────────────┬────────────────────────────────────────┘
                     │
                     ▼
┌─────────────────────────────────────────────────────────────┐
│  App detects no session → Redirects to RE SSO Bridge        │
│  https://sso.royalenfield.com/oauth/authorize?client_id=... │
└────────────────────┬────────────────────────────────────────┘
                     │
                     ▼
┌─────────────────────────────────────────────────────────────┐
│  User enters RE credentials (email + password)               │
│  SSO validates against Active Directory                      │
└────────────────────┬────────────────────────────────────────┘
                     │
                     ▼
┌─────────────────────────────────────────────────────────────┐
│  SSO redirects back to app with authorization code           │
│  https://workflow.royalenfield.com/auth/callback?code=XXX   │
└────────────────────┬────────────────────────────────────────┘
                     │
                     ▼
┌─────────────────────────────────────────────────────────────┐
│  App backend exchanges code for access token                 │
│  Gets user info from SSO (name, email, employee ID, dept)   │
└────────────────────┬────────────────────────────────────────┘
                     │
                     ▼
┌─────────────────────────────────────────────────────────────┐
│  App creates/updates user in local database                  │
│  Generates JWT token for app session                         │
│  Returns JWT to frontend                                     │
└────────────────────┬────────────────────────────────────────┘
                     │
                     ▼
┌─────────────────────────────────────────────────────────────┐
│  Frontend stores JWT and redirects to Dashboard              │
│  User is now logged in!                                      │
└─────────────────────────────────────────────────────────────┘

What This Means for Development:

Frontend (Minimal Work):

❌ No login page (SSO handles it)
❌ No signup page (users come from Active Directory)
❌ No password reset page (SSO handles it)
✅ Just need SSO callback page (/auth/callback)
✅ Protected route guards (redirect to SSO if not authenticated)
✅ Logout functionality (clear session + redirect to SSO logout)

Backend:

✅ SSO integration (Passport.js with OAuth2 strategy)
✅ User sync from Active Directory
✅ JWT token generation for app sessions
✅ Session management
✅ User profile sync and updates

Sprint 1 Focus:

Configure SSO OAuth2 integration
Handle SSO callback
Sync users from AD to local database
Generate JWT for app sessions
Implement protected routes

Time Saved:

No need to build login/signup/password reset screens
No password hashing/validation
No email verification
Estimated time saved: 3-4 days frontend, 2-3 days backend

⚠️ Frontend Work Reality Check

🎨 Understanding "Figma UI Extraction" vs "Feature Complete"

This section is CRITICAL to understand before reviewing tasks and timelines.

What Figma Extraction Gives You:

✅ Visual Components (80% Complete):

login-page/
├── login-form.tsx          ← Has HTML structure
│   ├── <input email>       ← Looks like email input
│   ├── <input password>    ← Looks like password input
│   └── <button>Login</button>  ← Looks like button
└── login-page.css          ← Has all styling

PROBLEM: Form doesn't actually do anything!
- Email input accepts any text (even "abc123")
- Password input has no strength check
- Login button has no onClick handler
- No API call on submit
- No error handling
- No loading state
- No validation messages
- Just pretty, non-functional HTML

Example: My Requests Page from Figma

// What Figma gives you (80% done):
const MyRequests = () => {
  const dummyData = [
    { id: 1, title: "Approval for office", status: "Pending" },
    { id: 2, title: "Budget approval", status: "Approved" }
  ];
  
  return (
    <div className="requests-page">
      {dummyData.map(req => (
        <RequestCard data={req} />  {/* Pretty card with dummy data */}
      ))}
    </div>
  );
};

// What you ACTUALLY need (the other 84%):
const MyRequests = () => {
  const dispatch = useAppDispatch();  // ← Need Redux
  const { workflows, loading, error } = useAppSelector(state => state.workflow);  // ← Need Redux
  const [filters, setFilters] = useState({});  // ← Need state management
  
  useEffect(() => {
    // ← Need API integration
    dispatch(fetchMyWorkflows(filters));
  }, [filters]);
  
  if (loading) return <LoadingSkeleton />;  // ← Need loading state
  if (error) return <ErrorState message={error} />;  // ← Need error handling
  if (!workflows.length) return <EmptyState />;  // ← Need empty state
  
  return (
    <div className="requests-page">
      <SearchBar onSearch={handleSearch} />  {/* ← Need search logic */}
      <FilterPanel filters={filters} onChange={setFilters} />  {/* ← Need filter logic */}
      {workflows.map(req => (
        <RequestCard 
          data={req} 
          onClick={() => navigate(`/workflows/${req.id}`)}  {/* ← Need navigation */}
        />
      ))}
      <Pagination 
        page={page} 
        total={totalPages} 
        onChange={handlePageChange}  {/* ← Need pagination */}
      />
    </div>
  );
};

What You Still Need to Build (84% of Frontend Work):

1. Redux State Management (20% of total work = 7 days)

Create Redux store configuration
Create 8 Redux slices (auth, workflow, approval, notification, etc.)
Define initial states
Create reducers for each action
Create async thunks for API calls
Setup Redux persist
Configure Redux DevTools
Without this: Components can't share data, no global state

2. API Integration (30% of total work = 12 days)

Configure Axios instance
Create API service files (9 files)
Setup request/response interceptors
Handle JWT token injection
Handle token refresh
Connect every page to its API:
- Login → POST /api/v1/auth/login
- Register → POST /api/v1/auth/register
- Create Workflow → POST /api/v1/workflows
- Approve → PATCH /api/v1/workflows/:id/approve
- (And 50+ more API calls)
Handle API errors
Handle network failures
Without this: App is just a pretty shell with fake data

3. Form Validations (15% of total work = 5 days)

Email format validation
Password strength validation
Required field validation
Max/min length validation
Number validation (TAT hours)
File type validation (documents)
File size validation (10MB max)
Custom validators (employee ID format, etc.)
Error message display
Real-time validation as user types
Without this: Users can submit invalid data, app crashes

4. Business Logic (15% of total work = 5 days)

TAT calculation (working days vs calendar days)
Request number generation (display)
Date formatting and calculations
File size formatting (bytes to MB)
User search and @mention logic
Approval level sequencing
Status badge color logic
Priority level handling
Without this: App has no "brain"

5. Error Handling (10% of total work = 3 days)

API error handling (400, 401, 403, 404, 500)
Network error handling (offline, timeout)
Form validation errors
Display error messages (toast notifications)
Error boundaries (catch React crashes)
Retry logic for failed requests
User-friendly error messages
Without this: App crashes and users are confused

6. Loading States (10% of total work = 3 days)

Loading spinners for API calls
Skeleton loaders for data fetching
Progress bars for file uploads
Disable buttons during loading
Overlay loaders for modals
Page transition loaders
Without this: Users don't know app is working

7. Testing (10% of total work = 5 days)

Component unit tests
Redux slice tests
Integration tests
E2E tests
Without this: Bugs in production

📊 Frontend Effort Distribution Chart

Total Frontend Work = 100%
├─ Visual UI (Figma Extraction): 20% ── [████████████████████] 80% DONE
├─ Redux State Management:      20% ── [░░░░░░░░░░░░░░░░░░░░]  0% DONE
├─ API Integration:              30% ── [░░░░░░░░░░░░░░░░░░░░]  0% DONE
├─ Validations & Logic:          20% ── [░░░░░░░░░░░░░░░░░░░░]  0% DONE
└─ Testing & Polish:             10% ── [░░░░░░░░░░░░░░░░░░░░]  0% DONE

Current Completion: 16% (0.80 × 0.20 = 0.16)
Remaining Work: 84%

What Figma Gives You (20% - Already Done):

Login page layout ✅
Email input field (looks pretty) ✅
Password input field (looks pretty) ✅
Login button (styled) ✅
Dummy text and placeholder ✅
Time saved: ~2 hours

What You Still Need to Build (80% - Todo):

1. Redux Integration (2 hours):

Create authSlice actions
Create login async thunk
Handle loading/success/error states
Update Redux store on login

2. API Integration (1 hour):

Create auth.service.ts
Implement login API call
Handle API response
Extract JWT token

3. Form Validation (1.5 hours):

Validate email format
Check required fields
Show validation errors
Disable submit if invalid

4. Business Logic (1 hour):

Handle form submit
Store JWT in localStorage
Redirect to dashboard on success
Clear form on error

5. Error Handling (1 hour):

Handle wrong credentials (401)
Handle network errors
Show error toast
Display field-level errors

6. Loading State (0.5 hours):

Show spinner on button
Disable form during login
Show loading overlay

7. Testing (1 hour):

Test valid login
Test invalid credentials
Test validation

Total Time for Login Page:

Figma UI: 2 hours ✅ (Done)
Functionality: 8 hours ❌ (Todo)
Login page is only 20% done!

This pattern applies to EVERY page in the app!

💡 Key Takeaway for Frontend Team

"Having the UI" is like having a car body without:

Engine (Redux)
Transmission (API integration)
Steering (Navigation & routing)
Brakes (Error handling)
Fuel (Data from backend)
Dashboard instruments (Loading states)

It looks like a car, but you can't drive it!

Similarly:

Your app looks complete
But nothing actually works yet
You need to build all the "internal machinery"

Plan for 7-8 weeks of integration work, not 2-3 weeks!

📋 Realistic Frontend Task List (With Current Status)

Category	Total Tasks	Figma Done	Still Todo	Time Needed
UI Components	40 components	32 (80%)	8 (20%)	1-2 days
Redux Slices	8 slices	0 (0%)	8 (100%)	2-3 days
API Services	9 service files	0 (0%)	9 (100%)	1 day
Page Integration	15 pages	0 (0%)	15 (100%)	12 days
Form Validations	20 forms	0 (0%)	20 (100%)	4 days
Route Guards	12 routes	0 (0%)	12 (100%)	1 day
Error Handling	All pages	0 (0%)	All (100%)	3 days
Loading States	All pages	0 (0%)	All (100%)	3 days
Testing	40 tests	0 (0%)	40 (100%)	5 days
TOTAL		16%	84%	~35 days

Revised Sprint Structure (Week-Based Timeline)

🔄 Sprint 0: Project Setup & Infrastructure (PARTIALLY COMPLETE)

Week: 1
Backend Status: 🔄 70% In Progress
Frontend Status: 🔄 80% In Progress (UI extracted, NO functionality)
Goal: Development environment ready with basic architecture

Frontend Reality:

✅ UI Components extracted from Figma: 80%
✅ Mobile responsive: Done
✅ Packages installed: Done
❌ API integration: Not started
❌ Redux connected: Not started
❌ Forms functional: Not started

🔄 Sprint 1: SSO Authentication & User Management (CURRENT WEEK)

Week: 2-3
Backend: SSO integration, user sync, session management
Frontend: SSO callback handler, protected routes, user profile
Goal: Working SSO authentication system

Note: No login/signup screens needed (SSO handles authentication externally)

Sprint 2: Core Workflow Creation

Weeks: 3-4 (2 weeks)
Backend: Workflow APIs, approval hierarchy
Frontend: Connecting wizard UI to backend
Goal: Complete workflow creation flow

Sprint 3: Approval & Workflow Actions

Weeks: 5-6 (2 weeks)
Backend: Approval logic, TAT tracking, notifications
Frontend: Request management, approval/reject modals
Goal: Full approval workflow operational

Sprint 4: Documents & Work Notes

Week: 7
Backend: Document storage, work notes APIs
Frontend: ✅ Work notes UI complete, connect to backend
Goal: Collaboration features working

Sprint 5: Dashboard & Reporting

Week: 8
Backend: Dashboard APIs, AI integration
Frontend: Charts, statistics, filters
Goal: Analytics and dashboards complete

Sprint 6: Testing & Deployment

Weeks: 9-10 (2 weeks)
Backend: Testing, optimization, deployment
Frontend: Testing, performance optimization, deployment
Goal: Production-ready application

📖 Sprint Summaries

⚠️ For Detailed Code Examples, Step-by-Step Guides, and Implementation Details:
See separate document: RE_Workflow_Detailed_Sprint_Guide.md

This section provides brief summaries only. The detailed guide contains:

Complete code examples for each feature
Step-by-step implementation instructions
Validation logic and error handling
API integration patterns
Redux state management examples
100+ code snippets

🚀 Sprint 0: Project Setup & Infrastructure (Week 1)

Status: Frontend 🔄 80% Complete (UI Only) | Backend 🔄 70% Complete

What This Sprint Delivers:

This sprint establishes the foundation for the entire project. It's about setting up the development environment, tools, and basic architecture.

⚠️ IMPORTANT: Figma UI Extraction Reality

What "80% UI Extracted" Actually Means:

✅ Visual components created (buttons, inputs, cards, modals)
✅ Layout structure in place (header, sidebar, content areas)
✅ Mobile responsive design (320px to 1920px)
✅ Styling complete (colors, fonts, spacing)
✅ Dummy data displayed (hardcoded text, placeholder images)

What is NOT Included in "UI Extraction":

❌ API integration (no backend calls)
❌ Redux state management (no global state)
❌ Form validations (fields don't validate input)
❌ Error handling (no error messages)
❌ Loading states (no spinners/skeletons)
❌ Business logic (no calculations, no workflows)
❌ Data persistence (nothing saves to database)
❌ Authentication (login form visible but doesn't work)
❌ Navigation guards (routes not protected)
❌ Dynamic data (everything is static/hardcoded)

Real Effort Distribution:

Figma UI Extraction: 20% of total frontend work
API Integration: 30% of total frontend work
State Management: 20% of total frontend work
Validations & Logic: 20% of total frontend work
Testing & Polish: 10% of total frontend work

Translation:

80% UI extracted = 16% of total frontend work done (0.80 × 0.20)
Still need: 84% of actual functionality to be built

Backend Deliverables:

1. Repository & Environment Setup (BE-001)

Create GitHub/GitLab repository with proper structure
Initialize Node.js 22 LTS project with TypeScript 5.7
Setup complete folder structure:
- src/ for source code
- src/controllers/, src/services/, src/models/
- src/middlewares/, src/routes/, src/utils/
- tests/ for unit and integration tests
- database/ for schema and migrations
Configure tsconfig.json with strict TypeScript settings
Setup .env.example with all required environment variables
Configure .gitignore, .eslintrc, .prettierrc
Install all dependencies (Express, Sequelize, JWT, bcrypt, etc.)

2. Database Setup & Schema (BE-002) - CRITICAL

Install and configure PostgreSQL 16
Create database re_workflow_db
Implement complete database schema with 15+ tables:
- users - User accounts and profiles
- workflow_requests - Main workflow data
- approval_levels - Approval hierarchy
- participants - Spectators and other participants
- documents - Document metadata
- work_notes - Chat/collaboration messages
- activities - Audit trail and activity log
- notifications - User notifications
- tat_tracking - TAT monitoring
- conclusion_remarks - AI-generated conclusions
- And more...
Create database triggers for auto-generation of request numbers
Create database views for reporting (active requests, notifications)
Add indexes for performance optimization
Insert initial system settings

3. Core Backend Configuration (BE-003)

Setup Express.js application with TypeScript
Configure essential middleware:
- helmet - Security headers
- cors - Cross-origin resource sharing
- express.json() - JSON body parsing
- morgan - HTTP request logging
Setup Winston logger with file rotation (error.log, combined.log)
Create centralized error handling middleware
Setup health check endpoint (/health)
Configure graceful shutdown handlers

4. Sequelize ORM Setup (BE-004)

Configure Sequelize connection to PostgreSQL
Create TypeScript models for all database tables:
- User model with associations
- WorkflowRequest model with relationships
- ApprovalLevel, Participant, Document models
- Work notes, activities, notifications models
Define all model associations (one-to-many, many-to-many)
Test database connectivity
Setup model synchronization for development

Frontend Deliverables:

1. Current Status of Frontend Tasks (FE-001 to FE-007)

What's Actually Done (80%):

✅ Repository with React 19 + Vite 6 setup
✅ TypeScript 5.7 configuration
✅ Material-UI 6.3 theme configuration
✅ All dependencies installed and resolved
✅ UI components extracted from Figma (80%):
- Buttons, inputs, dropdowns, modals, cards, tables
- Header, sidebar, footer layouts
- All pages visually complete
- Mobile responsive (320px - 1920px)
- Dummy data displayed everywhere

What's NOT Done Yet (0%):

❌ Redux Toolkit 2.5 store: Need to create all slices
- authSlice (user, token, login state)
- workflowSlice (requests, current workflow)
- approvalSlice (approval levels, status)
- notificationSlice (notifications, unread count)
- documentSlice, workNoteSlice, participantSlice, uiSlice
❌ Axios API service layer: Need to configure
- Create Axios instance with base URL
- Setup request interceptors (add JWT token)
- Setup response interceptors (error handling)
- Handle token refresh logic
- Handle 401 unauthorized redirects
❌ React Router DOM 7.1: Need to implement
- Route protection (PrivateRoute/PublicRoute)
- Auth guards (redirect if not logged in)
- Route-based code splitting
❌ Form Validations: None implemented
- No field validation (email format, required fields)
- No error messages shown
- Forms accept any input
❌ API Integration: Zero integration
- Forms don't submit data
- Lists show dummy data
- No backend calls made
- No loading states
- No error handling

Remaining Work for Sprint 0:

Complete last 20% of UI extraction (1-2 days)
Setup Redux store with all slices (2-3 days)
Configure Axios service layer (1 day)
Implement route guards (1 day)
Basic form validations (2 days)

Estimated Time to Complete Sprint 0: 1 week more

What You Can Use After Sprint 0 (Actually Completes):

✅ Running backend server with database connection
✅ Frontend UI with all visual components
✅ Redux store configured and working
✅ API service layer ready to make calls
✅ Protected routes working
✅ Forms with basic validation
❌ Still no API integration (that's Sprint 1 onwards)

🔐 Sprint 1: SSO Authentication & User Management (Week 2-3)

Status: ⏳ Awaiting SSO Details | Focus: SSO integration (no login/signup screens)

What This Sprint Delivers:

SSO-based authentication with Royal Enfield SSO Bridge. Users authenticate via company SSO (no login/signup screens needed).

Key Implementation Points:

Backend (BE-101, BE-102: 2 days):

Configure SSO Bridge OAuth2 integration
Handle SSO callback and token exchange
Auto-sync users from Active Directory to local database
Generate JWT tokens for app sessions
User search API (for @tagging in workflows)
User profile update API (phone/picture only - other fields from AD)

Frontend (FE-101, FE-102, FE-103: 2.5 days):

SSO callback handler page (receives token from SSO)
Protected route guards (redirect to SSO if not authenticated)
"Login with SSO" button (redirects to SSO Bridge)
Logout functionality (clears session + SSO logout)
User profile display in header (from Active Directory data)
Limited profile editing (phone number and profile picture only)

What You Can Do After Sprint 1:

✅ Users can login via SSO
✅ Users auto-synced from Active Directory
✅ Protected routes working (redirect to SSO if not logged in)
✅ User profile displayed in header
✅ Logout functionality
✅ JWT session management

⚠️ Important: No login/signup/password reset screens needed! SSO handles all authentication.

📖 For Detailed Implementation: See RE_Workflow_Detailed_Sprint_Guide.md

📝 Sprint 2: Core Workflow Creation (Weeks 3-4)

Status: ⏳ Upcoming | Focus: 6-step workflow creation wizard

What This Sprint Delivers:

Complete workflow creation wizard: Basic Info → Approval Hierarchy → Participants → Documents → Review → Submit

Key Features:

Step 1: Template selection (Custom Request)
Step 2: Request title, rich text description, priority (Standard/Express)
Step 3: Dynamic approval levels (up to 10), @mention user search, TAT calculation
Step 4: Add spectators with @mention
Step 5: Document upload (drag-drop, 10MB max), Google Docs/Sheets links
Step 6: Review summary, save draft or submit

Backend APIs (BE-201 to BE-204: 1 week):

Create/update/delete workflow
Add approval levels
Add participants
Upload documents
Submit workflow
List and filter workflows

Frontend Integration (FE-201 to FE-208: 1.5 weeks):

Connect wizard steps to Redux
Real-time TAT calculation
User search for approvers/spectators
File upload with progress
Multi-step API submission flow
Form validations

Most Complex: Approval workflow builder (dynamic levels, TAT calculation, user search)

📖 For Detailed Code Examples: See RE_Workflow_Detailed_Sprint_Guide.md - Sprint 2 section

✅ Sprint 3: Approval & Workflow Actions (Weeks 5-6)

Status: ⏳ Upcoming | Focus: Approve/reject requests, TAT tracking, notifications

What This Sprint Delivers:

Request management pages (My Requests, Open Requests, Closed Requests)
Request detail page with tabs (Overview, Workflow, Documents, Activity)
Approve/reject modals with mandatory comments
TAT monitoring cron job (runs every 30 minutes)
Real-time notifications (bell icon with unread count)
Work notes integration with @mentions

Backend APIs (BE-301 to BE-303: 1.5 weeks):

Approve/reject workflow endpoints
TAT calculation service (working days vs calendar days)
TAT monitoring cron job
Notification system (8 notification types)
Activity logging for all actions

Frontend Integration (FE-301 to FE-309: 2 weeks):

Request listing pages with search/filter/pagination
Request detail page with 4 tabs
TAT progress bars (color-coded: green/yellow/red)
Approval timeline visualization
Notification bell with dropdown
Approve/reject modals with validation

Most Complex: TAT calculation logic (working days exclude weekends)

📖 For Detailed Code Examples: See RE_Workflow_Detailed_Sprint_Guide.md - Sprint 3 section

2. Approval Hierarchy Management (BE-202, FE-204)

Backend APIs:

POST /api/v1/workflows/:id/approvals - Add approval level
- Accept level number, approver user ID, TAT
- Validate max 10 levels
- Ensure level numbers are sequential (1, 2, 3...)
- Calculate TAT dates based on priority
GET /api/v1/workflows/:id/approvals - Get approval hierarchy
- Return all levels with approver details
- Show current level status
GET /api/v1/workflows/:id/approvals/current - Get active level
- Return currently active approval level
- Show who needs to approve now

Frontend Approval Workflow Builder (FE-204):

This is the most complex screen in the wizard!

Dynamic Level Creation:

Start with Level 1 (minimum 1 level required)
Add Level button to create additional levels
Maximum 10 approval levels allowed
Each level can be removed (except if only 1 level)

For Each Approval Level:

Level Number: Auto-generated (Level 1, Level 2, etc.)
Level Name/Title: (Optional)
- Text input for descriptive name
- Example: "Department Head Approval", "Finance Review", "CEO Final Approval"
Approver Selection:
- @mention search input (like Slack/Teams)
- Type "@" or start typing name
- Dropdown appears showing matching users
- Shows user details:
  - Full name
  - Email address
  - Department
  - Profile picture
- Select user from dropdown
- Selected user appears as tag/chip
- Can clear and select different user
- Required field (must select an approver)
TAT (Turnaround Time):
- Number input for TAT value
- Dropdown to select unit (Hours or Days)
- Options: 1-720 hours OR 1-30 days
- Required field
- Example: "48 hours" or "2 days"
Add/Remove Level Actions:
- "Add Level" button (if less than 10 levels)
- "Remove Level" button (if more than 1 level)
- Confirm before removing level

Real-Time TAT Calculation:

As user adds levels and TAT values:
- Automatically sum all TAT values
- Show total TAT prominently at top
- Example: "Total TAT: 96 hours (4 days)"
- Update in real-time as user modifies levels

Approval Flow Summary Panel:

Read-only visualization showing:
- Complete approval hierarchy
- All levels in order (1 → 2 → 3...)
- Approver name for each level
- TAT for each level
- Total TAT at bottom
Updates automatically as user adds/modifies levels

TAT Summary Widget:

Visual breakdown:
- Total hours and days
- Expected completion date (estimated)
- Working days vs calendar days indicator
Color-coded based on urgency

Validation:

At least 1 approval level required
Each level must have an approver selected
Each level must have valid TAT (> 0)
No duplicate approvers allowed (same person can't be at multiple levels)

WEEK 4: Participants, Documents & Submission

3. Participant Management (BE-203, FE-205)

Backend APIs:

POST /api/v1/workflows/:id/participants - Add spectator
- Accept user ID and participant type
- Validate user exists
- Set permissions (can view, can comment)
GET /api/v1/workflows/:id/participants - Get all participants
- Return initiator, approvers, spectators
DELETE /api/v1/workflows/:id/participants/:id - Remove spectator
- Only spectators can be removed (not approvers)

Frontend Participants & Access (FE-205):

Add Spectators Section:

What are Spectators?
- View-only participants (like CC in email)
- Can see workflow progress
- Can add comments in work notes
- Cannot approve or reject
- Receive notifications about workflow
@mention Search (same as approver selection):
- Type "@" or start typing name
- Search users by name/email
- Select multiple spectators
- Show selected spectators as chips/tags
Spectator List:
- Display all added spectators
- Show user name, email, department
- Remove button for each spectator
Permissions Display:
- Clear message: "Spectators can view and comment but cannot approve"
- Visual icon showing permissions

4. Document Upload (BE-201, FE-206)

Backend APIs:

POST /api/v1/workflows/:id/documents - Upload document
- Accept multipart/form-data
- Validate file type (PDF, Word, Excel, PPT, images)
- Validate file size (max 10MB per file)
- Upload to cloud storage (GCP or local for dev)
- Store metadata in database
- Return document ID and URL
GET /api/v1/workflows/:id/documents - Get all documents
- Return list of documents with metadata

Frontend Documents & Attachments (FE-206):

File Upload Component:

Drag-and-Drop Zone:
- Large drop area with icon
- "Drag files here or click to browse"
- Highlight area when files dragged over
Browse Files Button:
- Opens file picker dialog
- Can select multiple files at once
Supported File Types:
- PDF documents
- Word (DOC, DOCX)
- Excel (XLS, XLSX)
- PowerPoint (PPT, PPTX)
- Images (JPG, PNG, GIF)
- Show supported formats below upload area
File Size Limit:
- Maximum 10MB per file
- Show error if file too large
- Suggest compressing large files

Uploaded Files List:

Display each file as a card/row showing:
- File icon (based on file type)
- File name
- File size (KB/MB)
- Upload progress bar (while uploading)
- Remove button (X icon)
File Actions:
- Preview icon (for PDF and images)
- Download icon
- Delete icon

Google Docs/Sheets Integration:

Google Docs Link:
- Text input for Google Docs URL
- Validate URL format
- Show link icon when valid URL entered
Google Sheets Link:
- Text input for Google Sheets URL
- Validate URL format
- Show link icon when valid URL entered
Display added links with:
- Document/Sheet icon
- Link title (extracted from URL or user-provided)
- Open link button
- Remove button

5. Review & Submit (BE-201, FE-207, FE-208)

Frontend Review & Submit (FE-207):

Comprehensive Summary Display:

Section 1: Request Overview

Request Type: Custom Request
Priority: Standard / Express (with badge)
Request Title: (user-entered title)

Section 2: Basic Information

Detailed Description (formatted with HTML)
Priority Level with explanation
Edit button → goes back to Step 2

Section 3: Approval Workflow

Visual hierarchy showing:
- All approval levels in order
- Approver name and email for each level
- TAT for each level
- Total TAT calculation
Edit button → goes back to Step 3

Section 4: Participants & Access

List of all spectators with names
Participant count
Edit button → goes back to Step 4

Section 5: Documents & Attachments

List of uploaded files (name, size, type)
List of Google Docs/Sheets links
Document count
Edit button → goes back to Step 5

Action Buttons:

Save as Draft:

Saves workflow without submitting
User can edit later
Stays in "Draft" status
Redirects to "My Requests"

Submit Request:

Final submission (cannot be edited after)
Triggers approval workflow
Changes status from "Draft" to "Pending"
Sends notification to first approver
Starts TAT tracking
Redirects to request detail page

Backend Submission Logic (BE-201, FE-208):

API Integration Flow:

POST /api/v1/workflows - Create draft workflow
POST /api/v1/workflows/:id/documents (multiple) - Upload documents
POST /api/v1/workflows/:id/approvals (multiple) - Create approval levels
POST /api/v1/workflows/:id/participants (multiple) - Add spectators
PATCH /api/v1/workflows/:id/submit - Submit workflow

Submission Actions:

Update workflow status: DRAFT → PENDING
Set submission_date to current timestamp
Calculate and set tat_start_date and tat_end_date
Update first approval level status to IN_PROGRESS
Create activity log entry: "Request submitted"
Send notifications:
- To first approver: "New workflow pending your approval"
- To all spectators: "You've been added to a workflow request"
Return complete workflow data

6. Workflow Listing & Filtering (BE-204)

Backend APIs:

GET /api/v1/workflows - Get all workflows with filters
- Query parameters: status, priority, page, limit, sortBy, sortOrder
GET /api/v1/workflows/my-requests - User's created workflows
- Return workflows where user is initiator
GET /api/v1/workflows/open - Open/pending workflows
- Return workflows in PENDING or IN_PROGRESS status
- Where user is approver or spectator
GET /api/v1/workflows/closed - Completed workflows
- Return workflows in APPROVED, REJECTED, or CLOSED status
GET /api/v1/workflows/assigned-to-me - Workflows pending user's action
- Return workflows where user is current level approver

Filtering & Search Features:

Filter by status (Draft, Pending, Approved, Rejected, Closed)
Filter by priority (Standard, Express)
Filter by date range (submission date)
Search by title or description (full-text search)
Sort by date, priority, status
Pagination (20 requests per page)

What You Can Do After Sprint 2:

✅ Create custom workflow requests
✅ Define multi-level approval hierarchy (up to 10 levels)
✅ Set TAT for each approval level
✅ Add spectators for transparency
✅ Upload supporting documents
✅ Link Google Docs/Sheets
✅ Save workflows as draft
✅ Submit workflows for approval
✅ View all created workflows (My Requests)
✅ Search and filter workflows

Technical Complexity:

Frontend: Dynamic form with 6 steps, wizard navigation, real-time validation
Backend: Complex data relationships, file upload, TAT calculation logic
Integration: Multi-step API calls, error handling at each step

✅ Sprint 3: Approval & Workflow Actions (Weeks 5-6)

Status: ⏳ Upcoming | Focus: Enable approvers to act on workflows, track TAT, send notifications

What This Sprint Delivers:

Complete approval workflow with ability to approve/reject requests, TAT monitoring with alerts, real-time notifications, and comprehensive request management pages.

Detailed Functionality Breakdown:

WEEK 5: Approval Actions & TAT Tracking

1. Workflow Approval Process (BE-301)

Backend Approval Logic:

PATCH /api/v1/workflows/:id/approvals/:levelId/approve - Approve Request

Pre-Approval Validations:

Verify user is the assigned approver for this level
Verify workflow is in PENDING or IN_PROGRESS status
Verify current level matches the level being approved
Verify level is not already approved
Verify comments field is provided (mandatory)

Approval Actions:

Update approval level:
- Set status to APPROVED
- Set action_date to current timestamp
- Set level_end_time to current timestamp
- Store approver comments
Stop TAT for current level:
- Calculate elapsed time for this level
- Update tat_tracking table
- Mark level as completed within/beyond TAT
Move to next level OR close if final:
- If NOT final approver:
  - Increment workflow current_level (e.g., 1 → 2)
  - Update workflow status to IN_PROGRESS
  - Update next level status to IN_PROGRESS
  - Set level_start_time for next level
  - Start TAT tracking for next level
  - Send notification to next approver
- If final approver:
  - Update workflow status to APPROVED
  - Set closure_date to current timestamp
  - Trigger AI conclusion generation
  - Send notification to initiator: "Your request has been approved"
  - Send notification to all spectators
Create activity log:
- Activity type: APPROVAL_ACTION
- Description: "Level X approved by [Approver Name]"
- Store comments in metadata
- Timestamp the action

PATCH /api/v1/workflows/:id/approvals/:levelId/reject - Reject Request

Pre-Rejection Validations:

Same as approval validations
Comments/rejection reason is mandatory

Rejection Actions:

Update approval level:
- Set status to REJECTED
- Set action_date to current timestamp
- Store rejection comments (mandatory)
Stop all TAT tracking:
- Mark current level as breached/stopped
- Cancel pending levels
Close workflow:
- Update workflow status to REJECTED
- Set closure_date to current timestamp
- Mark as closed
Send notifications:
- To initiator: "Your request has been rejected by [Approver Name]"
- Include rejection reason in notification
- To all spectators: notification of rejection
Create activity log:
- Activity type: REJECTION_ACTION
- Description: "Request rejected by [Approver Name] at Level X"
- Store rejection reason in metadata

Frontend Approval Actions (FE-307):

Approve Request Modal:

Trigger: Click "Approve Request" button in request detail
Modal Content:
- Request ID and Title display
- Current approval level info
- "Approval Confirmation" heading
- Comments & Remarks field:
  - Multi-line text area
  - Placeholder: "Add your approval comments..."
  - Mandatory field (cannot submit without comments)
  - Character limit: 500 characters
  - Character counter showing remaining chars
  - Validation: "Comments are required"
- Contextual message:
  - "Your approval will move this request to the next level" OR
  - "As final approver, your approval will close this request"
Action Buttons:
- "Approve Request" button (primary/green)
  - Disabled until comments entered
  - Shows loading spinner during API call
- "Cancel" button (secondary)
  - Closes modal without action

Reject Request Modal:

Trigger: Click "Reject Request" button in request detail
Modal Content:
- Request ID and Title display
- Current approval level info
- "Rejection Confirmation" heading (red/warning color)
- Rejection Reason field:
  - Multi-line text area
  - Placeholder: "Please provide detailed reason for rejection..."
  - Mandatory field (cannot submit without reason)
  - Character limit: 500 characters
  - Character counter
  - Validation: "Rejection reason is required"
- Warning message:
  - "Rejecting will close this request immediately"
  - "This action cannot be undone"
- Rejection Guidelines:
  - "Please provide constructive feedback"
  - "Be specific about what needs to be changed"
Action Buttons:
- "Reject Request" button (danger/red)
  - Disabled until reason entered
  - Shows loading spinner
  - Confirmation prompt: "Are you sure?"
- "Cancel" button
  - Closes modal without action

After Action Taken:

Close modal automatically
Show success notification:
- "Request approved successfully" OR
- "Request rejected"
Refresh request detail page to show updated status
Scroll to activity timeline to show new activity
Update TAT progress bar
Update approval timeline visual

2. TAT Tracking & Monitoring (BE-302)

Backend TAT Service:

TAT Calculation Logic:

For Standard Priority (Working Days):

Calculate elapsed time excluding weekends
Exclude holidays (if holiday list configured)
Example: 48 hours TAT starting Friday 3 PM
- Friday 3 PM - 5 PM = 2 hours
- Monday 9 AM - 5 PM = 8 hours
- Tuesday 9 AM - 5 PM = 8 hours
- Wednesday 9 AM - 5 PM = 8 hours
- Thursday 9 AM - 5 PM = 8 hours
- Friday 9 AM - 3 PM = 6 hours
- Total = 40 hours (exclude weekend)

For Express Priority (Calendar Days):

Calculate elapsed time including weekends
Include all days (7 days/week, 24 hours/day)
Example: 48 hours TAT starting Friday 3 PM
- Deadline: Sunday 3 PM (48 hours later)

TAT Status Determination:

ON_TRACK (Green):
- TAT usage < 50%
- Example: 10 hours used out of 48 hours (20%)
APPROACHING (Yellow/Warning):
- TAT usage between 50% and 80%
- Example: 36 hours used out of 48 hours (75%)
- Trigger reminder notification
BREACHED (Red/Critical):
- TAT usage >= 100%
- Example: 50 hours used out of 48 hours (104%)
- Trigger breach alert notification

TAT Monitoring Cron Job:

Schedule: Runs every 30 minutes
Process:
1. Get all active workflows (PENDING, IN_PROGRESS)
2. For each active workflow:
  - Get current approval level
  - Calculate elapsed time since level_start_time
  - Calculate percentage TAT used
  - Determine TAT status
  - Update tat_tracking table
3. Check for threshold crossings:
  - If TAT usage crosses 50%: Create alert (optional)
  - If TAT usage crosses 80%: Send reminder notification
  - If TAT usage crosses 100%: Send breach notification
4. Send notifications to approvers and initiators
5. Log TAT status changes in activity timeline

TAT APIs:

GET /api/v1/workflows/:id/tat - Get TAT status
- Return current level TAT info
- Elapsed time, remaining time, percentage used
- TAT status (ON_TRACK, APPROACHING, BREACHED)
- Expected completion date
GET /api/v1/tat/breached - Get breached requests
- Return all workflows with breached TAT
- For admin dashboard and monitoring
GET /api/v1/tat/approaching - Get approaching deadlines
- Return workflows with TAT usage > 80%
- For proactive monitoring

Frontend TAT Display (FE-303, FE-304):

TAT Progress Bar Component:

Visual Progress Bar:
- Horizontal bar showing TAT progress
- Fill color based on status:
  - Green: 0-50% (ON_TRACK)
  - Yellow: 50-80% (APPROACHING)
  - Orange: 80-99% (HIGH RISK)
  - Red: 100%+ (BREACHED)
- Animated fill effect
- Percentage label inside or above bar
TAT Status Text:
- Display current status with icon
- "On Track" (green checkmark icon)
- "Approaching Deadline" (yellow warning icon)
- "TAT Breached!" (red exclamation icon)
Time Information:
- Elapsed time: "24 hours elapsed"
- Remaining time: "24 hours remaining" OR "8 hours overdue"
- Total TAT: "48 hours total"
- Expected completion: "Expected by Nov 15, 3:00 PM"
Per-Level TAT Display (Workflow Tab):
- For each approval level, show:
  - Level TAT allocation (e.g., "48 hours")
  - Actual time taken
  - Status indicator (completed within/beyond TAT)
  - Progress bar for active level
  - Checkmark for completed levels

WEEK 6: Notifications & Request Management

3. Notification System (BE-303)

Backend Notification Service:

Notification Types & Triggers:

1. Workflow Assignment Notifications:

When: Workflow submitted, moves to new level
To: Assigned approver
Title: "New Approval Request Assigned"
Message: "You have a new workflow request (REQ-2025-00001) pending your approval from [Initiator Name]"
Action URL: Link to request detail page
Priority: NORMAL

2. Approval/Rejection Notifications:

When: Request approved or rejected
To: Workflow initiator
Title: "Workflow Request [Approved/Rejected]"
Message: "Your request (REQ-2025-00001) has been [approved/rejected] by [Approver Name]"
Action URL: Link to request detail page
Priority: HIGH

3. TAT Warning Notifications (80% threshold):

When: TAT usage reaches 80%
To: Current approver + initiator
Title: "TAT Warning: Action Required"
Message: "Request (REQ-2025-00001) has used 80% of TAT. Please review urgently."
Action URL: Link to request detail page
Priority: HIGH

4. TAT Breach Notifications (100%+):

When: TAT exceeded
To: Current approver + initiator + spectators
Title: "TAT BREACHED!"
Message: "Request (REQ-2025-00001) has exceeded TAT deadline"
Action URL: Link to request detail page
Priority: URGENT

5. Work Note Mention Notifications:

When: User @mentioned in work note
To: Mentioned user
Title: "[User Name] mentioned you"
Message: "[User Name] mentioned you in a work note: '[Message preview...]'"
Action URL: Link to work notes section
Priority: NORMAL

6. Document Upload Notifications:

When: New document uploaded
To: All participants (initiator, approvers, spectators)
Title: "New Document Added"
Message: "[User Name] uploaded a document: [filename]"
Action URL: Link to documents tab
Priority: LOW

7. Spectator Added Notifications:

When: User added as spectator
To: Added spectator
Title: "You've been added to a workflow"
Message: "[Initiator Name] added you as spectator to request (REQ-2025-00001)"
Action URL: Link to request detail page
Priority: NORMAL

8. Request Closure Notifications:

When: Workflow closed (approved or rejected)
To: All participants (initiator, approvers, spectators)
Title: "Workflow Request Closed"
Message: "Request (REQ-2025-00001) has been closed"
Action URL: Link to request detail page
Priority: NORMAL

Notification APIs:

GET /api/v1/notifications - Get user notifications
- Query params: page, limit, is_read filter
- Return paginated notifications
- Sort by created_at DESC (newest first)
GET /api/v1/notifications/unread - Get unread notifications
- Return only unread notifications
- Include unread count
PATCH /api/v1/notifications/:id/read - Mark as read
- Update is_read to true
- Set read_at timestamp
PATCH /api/v1/notifications/mark-all-read - Mark all as read
- Update all user's unread notifications
DELETE /api/v1/notifications/:id - Delete notification
- Soft delete or hard delete

Frontend Notification System (FE-401):

Notification Bell Icon (Header):

Bell icon in top-right corner
Unread count badge:
- Red circle with number
- Shows count of unread notifications
- Updates in real-time
- Pulsing animation for new notifications
Click Behavior:
- Opens dropdown panel below icon
- Shows recent notifications
- Marks clicked notifications as read

Notification Dropdown Panel:

Header:
- "Notifications" title
- "Mark All as Read" button
- Close button (X)
Notification List (Recent 10):
- Each notification shows:
  - Type icon (color-coded)
  - Title (bold)
  - Message text (truncated)
  - Timestamp (relative: "2 hours ago")
  - Unread indicator (blue dot)
  - Read notifications are grayed out
Click Notification:
- Mark as read automatically
- Navigate to action URL (request detail page)
- Close dropdown
Footer:
- "View All Notifications" link
- Opens full notifications page
Empty State:
- Shows when no notifications
- Icon + "No notifications"

Notification Polling:

Auto-refresh every 30 seconds
Fetch new notifications from API
Update unread count in header
Show toast notification for high-priority alerts
Play sound (optional) for urgent notifications

Toast Notifications (High Priority):

For urgent notifications:
- Small popup in top-right corner
- Auto-dismiss after 5 seconds
- Click to go to related request
- Multiple toasts stack vertically

4. Request Management Pages (FE-301, FE-302, FE-303)

My Requests Page (FE-301):

Page Layout:

Tab Navigation at Top:
- Total (show all requests)
- In Progress (pending + in_progress status)
- Approved (approved status)
- Rejected (rejected status)
- Draft (draft status)
- Each tab shows count badge
Search & Filter Bar:
- Search input (search by title or request number)
- Priority filter dropdown (All, Standard, Express)
- Date range filter (submission date)
- Sort dropdown (Date: Newest, Date: Oldest, Priority)
- "Clear Filters" button
Request Cards Grid:
- Display requests as cards (3 per row on desktop)
- Each card shows:
  - Request Number (REQ-2025-00001) - top-left
  - Title (bold, large) - truncate if too long
  - Priority Badge - Express (red) / Standard (blue)
  - Status Badge - Color-coded:
    - Draft: Gray
    - Pending: Yellow
    - In Progress: Blue
    - Approved: Green
    - Rejected: Red
    - Closed: Dark Gray
  - Current Approval Level - "Level 2 of 5"
  - Current Approver - Name and designation
  - Submission Date - "Submitted on Nov 10, 2025"
  - Estimated Completion - "Expected by Nov 15"
  - TAT Progress Bar (for active requests)
  - Quick Actions:
    - View Details button
    - Edit button (only for drafts)
    - Delete button (only for drafts)
Pagination:
- Show 20 requests per page
- Page numbers at bottom
- Previous/Next buttons
- "Go to page" input

Click on Card:

Navigate to Request Detail page
Pass request ID in URL

Open Requests Page (FE-302):

Similar to My Requests but shows:
- Requests where user is approver (pending action)
- Requests where user is spectator
- Requests in PENDING or IN_PROGRESS status
Highlight requests needing user's action
Same layout as My Requests

Closed Requests Page (FE-302):

Shows requests with status:
- APPROVED
- REJECTED
- CLOSED
Additional Info:
- Closure date
- Final approver name
- Conclusion remark preview (first 100 chars)
Same layout as My Requests

5. Request Detail Page (FE-303 to FE-306)

Request Detail Overview Tab (FE-303):

Page Layout:

Top Section:

Request Header:
- Request Number (large, bold)
- Status Badge (prominent)
- Priority Badge
- Created Date | Submitted Date
TAT Progress Section:
- Large TAT progress bar (full width)
- Status indicator (On Track / Approaching / Breached)
- Time information (elapsed, remaining, total)
- Expected completion date
Tab Navigation:
- Overview (active by default)
- Workflow
- Documents
- Activity
- Each tab shows relevant counts

Left Content Area (Main):

Request Information Card:

Title: Request title (editable if draft)
Description:
- Full description with HTML formatting
- Expand/collapse if very long
- Tables, lists, links preserved
Initiator Information:
- Profile picture
- Name and designation
- Department
- Email address
- Phone number
- "Contact" button
Basic Details:
- Request Type: Custom Request
- Priority Level with explanation
- Template Type (if applicable)
- Submission Date
- Last Updated Date

Right Sidebar:

Spectators Panel:

Title: "Spectators" with count
List of spectators:
- Profile picture (small)
- Name
- Department
- Can scroll if many spectators
Add Spectator button (if user has permission)

Quick Actions Panel (shown only to approvers of current level):

Action Buttons:
- "Add Work Note" (primary)
- "Add Approver" (secondary)
- "Add Spectator" (secondary)
- "Approve Request" (success/green, large)
- "Reject Request" (danger/red, large)
Buttons enabled/disabled based on:
- User role (approver, initiator, spectator)
- Current workflow status
- User's turn to approve

Workflow Tab (FE-304):

Approval Timeline Visualization:

Vertical Timeline (Top to Bottom):

For Each Approval Level:

Level Card:
- Level Number & Name - "Level 1: Department Head Approval"
- Approver Info:
  - Profile picture
  - Name and designation
  - Department
  - Email address
- TAT Allocation:
  - Allocated TAT: "48 hours"
  - TAT days: "2 days" (if applicable)
- Status Indicator:
  - PENDING: Gray circle with clock icon
  - IN_PROGRESS: Blue circle with spinner icon
  - APPROVED: Green circle with checkmark icon
  - REJECTED: Red circle with X icon
  - SKIPPED: Yellow circle with forward icon
- Time Tracking:
  - Level start time: "Started on Nov 12, 10:00 AM"
  - Level end time: "Completed on Nov 13, 2:00 PM"
  - Actual time taken: "28 hours"
  - TAT status for level:
    - "Completed within TAT" (green badge)
    - "Exceeded TAT by 5 hours" (red badge)
- TAT Progress Bar (for active level):
  - Visual bar showing % used
  - Color-coded (green/yellow/red)
  - Remaining time displayed
- Approver Comments:
  - Display comments if level is approved/rejected
  - Formatted text with proper line breaks
  - Timestamp: "Commented on Nov 13, 2:00 PM"
- Action Date:
  - Display date/time when approved/rejected
  - Relative time: "2 days ago"

Visual Connectors:

Vertical line connecting levels
Shows flow from Level 1 → 2 → 3...
Current active level highlighted

Level Status Summary (Top of Page):

Progress Indicator:
- "Level 2 of 5 in progress"
- Progress bar showing overall approval progress
- Example: "40% complete (2 of 5 levels)"

Approval Flow Insights:

Average time per level
Fastest level completion
Slowest level completion
Total approval time taken

Documents Tab (FE-305):

Document List View:

Filter/View Options:

Filter by file type (All, PDF, Word, Excel, Images, etc.)
Sort by: Name, Date, Size, Uploader
Grid view / List view toggle

Document Cards/List Items:

For Each Document:

Document Card:
- File Type Icon (large, color-coded)
  - PDF: Red icon
  - Word: Blue icon
  - Excel: Green icon
  - PowerPoint: Orange icon
  - Images: Purple icon
- File Name (bold)
- File Size (e.g., "2.5 MB")
- File Type (e.g., "PDF Document")
- Upload Info:
  - Uploaded by: Name
  - Upload date/time
  - Relative time: "3 days ago"
- Action Buttons:
  - Preview button (eye icon)
    - Enabled for PDF and images only
    - Opens preview modal
  - Download button (download icon)
    - Downloads file to user's device
  - Delete button (trash icon)
    - Only shown to initiator or admin
    - Confirmation before delete
- Version Info (if applicable):
  - Version number: "v2"
  - "View history" link

Preview Modal (for PDF/Images):

PDF Preview:
- Embedded PDF viewer
- Page navigation (Previous/Next)
- Zoom in/out buttons
- Full-screen option
- Download button
- Close button
Image Preview:
- Lightbox viewer
- Full-size image display
- Zoom controls
- Previous/Next for multiple images
- Download button
- Close button

Google Docs/Sheets Section:

Separate section below uploaded files
Title: "Linked Documents"
For Each Link:
- Google Docs/Sheets icon
- Document title
- Link URL
- "Open in new tab" button
- Added by: User name
- Added on: Date/time

Empty State:

Shows when no documents uploaded
Icon + message: "No documents uploaded yet"
"Upload Document" button

Activity Tab (FE-306):

Activity Timeline View:

Timeline Display (Reverse Chronological):

Latest activities at top
Scroll to see older activities

For Each Activity:

Activity Item:

Event Icon (left side):
- Color-coded by activity type
- Icons:
  - 📝 Request created (green)
  - ✅ Approved (green checkmark)
  - ❌ Rejected (red X)
  - 📎 Document uploaded (blue paperclip)
  - 🗑️ Document deleted (gray trash)
  - 💬 Work note added (blue chat bubble)
  - 👤 Approver added (green person+)
  - 👥 Spectator added (blue person+)
  - ⚠️ TAT warning (yellow warning)
  - 🚨 TAT breached (red alert)
  - 📊 Status changed (blue)
  - 🔒 Request closed (gray lock)
Activity Description:
- Primary text (bold): Main action
  - Example: "Request submitted for approval"
  - Example: "Approved by John Doe at Level 2"
  - Example: "Document uploaded: filename.pdf"
- Secondary text: Additional details
  - Example: "Status changed from PENDING to IN_PROGRESS"
User Information:
- Profile picture (small, if user action)
- User name and designation
- "System" for automated activities
Timestamp:
- Relative time: "2 hours ago", "3 days ago"
- Hover to see exact date/time
Metadata (if applicable):
- For status changes: Show old → new status
- For documents: Show file name and size
- For approvals: Show comments preview
- Expandable section for full details

Activity Type Grouping:

Group activities by date
Date headers: "Today", "Yesterday", "Nov 12, 2025"

Activity Filter (Optional):

Filter by activity type
Dropdown: All, Approvals, Documents, Work Notes, Status Changes

Real-Time Updates:

Auto-refresh when new activity occurs
Smooth animation for new activities
Highlight new activities with background color

6. Work Notes / Chat Component (FE-308)

✅ ALREADY COMPLETE! (As mentioned by user)

The work notes feature is already functional with:

Document selection capability
Emoji support
@mentions
File attachments
Real-time chat interface

What's Needed:

Connect to backend APIs (BE-402)
Ensure notifications trigger on @mentions

7. Add Approver/Spectator Modals (FE-309)

Add Approver Modal:

Trigger: Click "Add Approver" button
Modal Content:
- Title: "Add Approver to Workflow"
- Explanation: "Add an additional approver at the current level"
- User Search Input:
  - @mention autocomplete
  - Search by name or email
  - Dropdown showing matching users
- Selected User Display:
  - Show user card with name, email, department
  - Confirm selection
- Action Buttons:
  - "Add" button (primary)
  - "Cancel" button
After Adding:
- Close modal
- Show success notification
- Refresh request detail
- User appears in workflow tab

Add Spectator Modal:

Trigger: Click "Add Spectator" button
Modal Content:
- Title: "Add Spectator to Workflow"
- Explanation: "Spectators can view and comment but cannot approve"
- User Search Input:
  - Same as Add Approver
- Multiple Selection:
  - Can add multiple spectators at once
  - Show selected users as chips
- Action Buttons:
  - "Add" button (primary)
  - "Cancel" button
After Adding:
- Close modal
- Show success notification
- User(s) appear in spectators panel
- Notifications sent to added users

What You Can Do After Sprint 3:

✅ Approve workflow requests
✅ Reject workflow requests with reasons
✅ Track TAT for each approval level
✅ Receive automated TAT warnings and breach alerts
✅ View comprehensive approval timeline
✅ See real-time notifications
✅ Receive @mention notifications
✅ View all request details in tabs (overview, workflow, documents, activity)
✅ Add additional approvers dynamically
✅ Add spectators during workflow
✅ Monitor TAT with color-coded progress bars
✅ View complete activity history
✅ Full request management dashboard

Technical Complexity:

Backend: Complex approval state machine, TAT calculations, cron jobs
Frontend: Real-time updates, polling for notifications, complex UI states
Integration: Multi-user scenarios, concurrent approvals, race conditions

📁 Sprint 4: Documents & Work Notes (Week 7)

Status: ⏳ Upcoming | Focus: Document management and collaboration

What This Sprint Delivers:

Complete document upload/download system, work notes API integration, and activity logging.

Frontend Advantage:

✅ Work Notes UI: Already complete with all functionality!
✅ Document Upload UI: Already complete from Figma!
⏱️ Only need: Backend API integration (2 days instead of 1 week!)

Detailed Functionality Breakdown:

1. Document Management System (BE-401)

Backend Document Storage:

File Upload Handling:

Use Multer middleware for multipart/form-data
Accept multiple file uploads simultaneously
Maximum 10MB per file
Supported types: PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, JPG, PNG, GIF

Cloud Storage Integration:

For Development: Local file system storage
For Production: GCP Cloud Storage
- Upload files to GCP bucket
- Generate signed URLs for secure access
- Set expiration on URLs (24 hours)
- Store file metadata in database

Document APIs:

POST /api/v1/workflows/:id/documents
- Upload document
- Validate file type and size
- Generate unique filename
- Upload to storage
- Create document record in database
- Return document metadata
GET /api/v1/workflows/:id/documents
- Get all documents for workflow
- Return metadata (name, size, type, uploader, date)
- Include download/preview URLs
GET /api/v1/documents/:documentId
- Get specific document details
- Return metadata
GET /api/v1/documents/:documentId/download
- Generate download URL
- Return signed URL for direct download
GET /api/v1/documents/:documentId/preview
- Generate preview URL (for PDF/images)
- Return signed URL for preview
DELETE /api/v1/documents/:documentId
- Soft delete document
- Mark as deleted in database
- Keep file in storage (for audit)
- Only initiator or admin can delete

Frontend Integration:

Connect upload component to POST API
Show upload progress (0-100%)
Handle upload errors (file too large, invalid type)
Display uploaded files from GET API
Implement preview for PDF/images
Implement download for all files

2. Work Notes & Chat System (BE-402)

Backend Work Notes APIs:

Work Note Structure:

{
  "note_id": "uuid",
  "request_id": "uuid",
  "user_id": "uuid",
  "message": "This is a work note with @mentions",
  "mentioned_users": ["user_id1", "user_id2"],
  "has_attachment": true,
  "is_priority": false,
  "reactions": {
    "👍": ["user_id1", "user_id3"],
    "❤️": ["user_id2"]
  },
  "created_at": "2025-11-12T10:00:00Z",
  "updated_at": "2025-11-12T10:05:00Z"
}

Work Note APIs:

GET /api/v1/workflows/:id/work-notes
- Get all work notes for workflow
- Return in chronological order
- Include user details (name, picture)
- Include attachments
- Include reactions
POST /api/v1/workflows/:id/work-notes
- Create new work note
- Parse @mentions from message
- Extract mentioned user IDs
- Store message and mentions
- Create notifications for mentioned users
- Return created work note
PUT /api/v1/work-notes/:noteId
- Update work note (only by creator)
- Allow editing within 10 minutes of creation
- Update message content
DELETE /api/v1/work-notes/:noteId
- Delete work note (only by creator)
- Soft delete
POST /api/v1/work-notes/:noteId/reactions
- Add emoji reaction to note
- Support multiple emojis per note
- Store user who reacted
- Return updated reactions
POST /api/v1/work-notes/:noteId/attachments
- Upload attachment with work note
- Handle file upload
- Link to work note
- Return attachment metadata

@Mention Detection:

Parse message text for @mentions
Match pattern: @username or @"User Name"
Look up users in database
Extract user IDs
Store in mentioned_users array

Mention Notifications:

When work note created with @mentions:
- Create notification for each mentioned user
- Notification type: WORK_NOTE_MENTION
- Include message preview
- Link to work notes section

Frontend Integration (Already Complete!):

Connect chat component to GET API for loading messages
Connect to POST API for sending messages
Connect to reactions API for emoji reactions
Connect to attachments API for file uploads
Implement @mention autocomplete with user search
Auto-refresh messages every 10 seconds
Show typing indicators (optional)

3. Activity Log System (BE-403)

Backend Activity Tracking:

Automated Activity Logging:

Log activities automatically through database triggers
Log activities from service layer
Capture all important events

Activity Types:

REQUEST_CREATED - Workflow created as draft
REQUEST_SUBMITTED - Workflow submitted for approval
APPROVAL_ACTION - Request approved at a level
REJECTION_ACTION - Request rejected
APPROVER_ADDED - New approver added
SPECTATOR_ADDED - New spectator added
DOCUMENT_UPLOADED - Document uploaded
DOCUMENT_DELETED - Document deleted
WORK_NOTE_ADDED - Work note/comment added
TAT_WARNING - TAT approaching deadline
TAT_BREACH - TAT exceeded
STATUS_CHANGED - Workflow status changed
REQUEST_CLOSED - Workflow closed

Activity APIs:

GET /api/v1/workflows/:id/activities
- Get activity timeline
- Return in reverse chronological order
- Include user info for user actions
- Include metadata (old/new values for changes)
GET /api/v1/workflows/:id/activities/:type
- Filter activities by type
- Example: Get only approval actions

Activity Display:

Generate human-readable descriptions
Examples:
- "Request created by John Doe"
- "Approved by Jane Smith at Level 2"
- "Document uploaded: proposal.pdf"
- "TAT warning: Request approaching deadline"
- "Status changed from PENDING to IN_PROGRESS"

What You Can Do After Sprint 4:

✅ Upload documents (multiple files at once)
✅ Preview PDF and image files
✅ Download any file
✅ Delete documents (with permission)
✅ Add work notes with @mentions
✅ React to messages with emojis
✅ Attach files to work notes
✅ Receive notifications for @mentions
✅ View complete activity timeline
✅ Filter activities by type
✅ Real-time collaboration through chat

📊 Sprint 5: Dashboard & Reporting (Week 8)

Status: ⏳ Upcoming | Focus: Analytics, AI conclusions, workflow closure

What This Sprint Delivers:

Dashboard with statistics and charts, AI-powered conclusion generation, workflow closure functionality, search/filter components, and final polish.

Detailed Functionality Breakdown:

1. Dashboard Statistics (BE-501, FE-402)

Backend Dashboard APIs:

GET /api/v1/dashboard/stats: Returns comprehensive statistics for current user:

{
  "total_requests": 45,
  "pending_approvals": 8,
  "approved_requests": 32,
  "rejected_requests": 5,
  "draft_requests": 3,
  "tat_breached": 2,
  "avg_approval_time_hours": 36.5,
  "requests_by_priority": {
    "STANDARD": 40,
    "EXPRESS": 5
  },
  "requests_by_status": {
    "DRAFT": 3,
    "PENDING": 5,
    "IN_PROGRESS": 3,
    "APPROVED": 32,
    "REJECTED": 5,
    "CLOSED": 37
  },
  "approval_trend_last_30_days": [
    {"date": "2025-10-15", "count": 2},
    {"date": "2025-10-16", "count": 3},
    ...
  ]
}

GET /api/v1/dashboard/recent: Returns recent activities (last 10):

{
  "recent_activities": [
    {
      "activity_type": "APPROVAL_ACTION",
      "request_id": "uuid",
      "request_number": "REQ-2025-00045",
      "description": "Approved by John Doe",
      "timestamp": "2025-11-12T10:00:00Z"
    },
    ...
  ]
}

GET /api/v1/dashboard/pending-actions: Returns requests needing user's action:

{
  "pending_actions": [
    {
      "request_id": "uuid",
      "request_number": "REQ-2025-00046",
      "title": "Approval for new office",
      "priority": "EXPRESS",
      "level": 2,
      "tat_status": "APPROACHING",
      "days_pending": 2
    },
    ...
  ]
}

Frontend Dashboard Page:

Layout:

Top Row - Key Metrics Cards (4 columns):

Total Requests Card:
- Large number: "45"
- Label: "Total Requests"
- Icon: 📊
- Subtitle: "All time"
Pending Approvals Card:
- Large number: "8"
- Label: "Pending Approvals"
- Icon: ⏳
- Subtitle: "Awaiting action"
- Click to filter
Approved Requests Card:
- Large number: "32"
- Label: "Approved"
- Icon: ✅
- Subtitle: "Successfully completed"
TAT Breached Card:
- Large number: "2"
- Label: "TAT Breached"
- Icon: 🚨
- Subtitle: "Needs attention"
- Red color if > 0

Second Row - Charts (2 columns):

Requests by Status (Pie Chart):
- Using Recharts library
- Segments for each status:
  - Draft (gray)
  - Pending (yellow)
  - In Progress (blue)
  - Approved (green)
  - Rejected (red)
  - Closed (dark gray)
- Show percentages
- Legend below chart
- Interactive (click segment to filter)
Requests by Priority (Bar Chart):
- Using Recharts library
- Two bars: Standard vs Express
- Different colors
- Show counts
- Y-axis: Count
- X-axis: Priority type
- Interactive

Third Row - Trend & Actions (2 columns):

Approval Trend (Line Chart):
- Using Recharts library
- Last 30 days trend
- X-axis: Dates
- Y-axis: Number of approvals
- Line color: Blue
- Show data points
- Hover to see exact values
- Date range selector (7 days, 30 days, 90 days)
Pending Actions Widget:
- List of requests needing user's action
- Each item shows:
  - Request number
  - Title (truncated)
  - Priority badge
  - TAT status indicator
  - Days pending
  - "Review" button
- Scroll if more than 5 items
- Click to go to request detail

Fourth Row - Recent Activities:

Recent Activities Widget:
- Table or list of last 10 activities
- Columns:
  - Activity type icon
  - Description
  - Request number (clickable)
  - Timestamp (relative)
- "View All" button to go to activity page
- Auto-refresh every 30 seconds

Dashboard Features:

Date Range Filter (Top Right):
- Dropdown: Last 7 days, 30 days, 90 days, All time
- Affects all stats and charts
Refresh Button:
- Manual refresh of data
- Shows loading state
Export Button:
- Export dashboard data as PDF/Excel
- Include all charts and stats

2. AI Conclusion Generation (BE-502, FE-403)

Backend AI Integration:

AI Service Setup:

Integrate with OpenAI API (GPT-4) or Google Gemini
Configure API key and model settings
Set max tokens for response (500 tokens)

Conclusion Generation Logic:

When to Generate:

After final approver approves request
Before workflow returns to initiator for closure

Input Data for AI:

Workflow title and description
All approval level comments
Work notes (relevant messages)
Decision summary (approved/rejected at each level)
TAT information
Documents summary

Prompt Template:

Generate a concise conclusion for this workflow request:

Title: [Request Title]
Description: [Request Description]

Approval Journey:
- Level 1: Approved by [Name]. Comment: [Comment]
- Level 2: Approved by [Name]. Comment: [Comment]
...

Key Discussion Points from Work Notes:
- [Note 1]
- [Note 2]
...

Generate a professional conclusion summary (max 300 words) covering:
1. What was requested
2. Key discussion points
3. Final decision
4. Next steps (if any)

AI Response Processing:

Call AI API with prompt
Get generated conclusion
Clean up and format response
Store as ai_generated_remark in database
Set is_edited to false initially

Conclusion APIs:

POST /api/v1/workflows/:id/conclusion/generate:

Generate AI conclusion
Compile input data
Call AI API
Store result
Return generated conclusion

PUT /api/v1/workflows/:id/conclusion:

Update conclusion (initiator only)
Allow editing AI-generated text
Set is_edited to true
Store as final_remark

GET /api/v1/workflows/:id/conclusion:

Get conclusion for workflow
Return AI-generated and final (if edited)

Frontend Conclusion UI:

Conclusion Section (After Final Approval):

For Initiator (Creator):

Display AI-Generated Conclusion:
- Show in read-only card initially
- Formatted text with proper paragraphs
- Label: "AI-Generated Conclusion"
Edit Button:
- Opens edit modal
- Modal shows:
  - Title: "Edit Conclusion"
  - Textarea with AI-generated text pre-filled
  - Character count (max 1000)
  - Rich text editor (bold, italic, lists)
  - "Save" button
  - "Cancel" button
- After saving:
  - Update display
  - Show "Edited by [User]" badge
  - Close modal
Finalize Button:
- Visible only to initiator
- Confirms final conclusion
- Enables workflow closure

For Other Users (Approvers, Spectators):

Read-Only Display:
- Show final conclusion
- Cannot edit
- Show "Finalized by [Initiator]" info

Conclusion Display Locations:

Request detail page (after approval)
My Requests (approved requests)
Closed Requests
Email notifications (summary)

3. Workflow Closure (BE-503, FE-404)

Backend Closure Logic:

PATCH /api/v1/workflows/:id/close:

Pre-Closure Validations:

Verify workflow is fully approved (all levels approved)
Verify conclusion remark exists
Verify user is initiator (creator)
Verify workflow not already closed

Closure Actions:

Update workflow:
- Set status to CLOSED
- Set closure_date to current timestamp
- Mark as final/immutable
Stop all TAT tracking:
- Mark TAT records as complete
- Calculate total time taken
Archive workflow data:
- Create snapshot of final state
- Preserve for audit
Send closure notifications:
- To all participants (approvers, spectators)
- Notification: "Workflow [REQ-ID] has been closed"
- Include conclusion summary
Create final activity log:
- Activity type: REQUEST_CLOSED
- Description: "Request closed by [Initiator Name]"
- Include closure date

Frontend Closure UI:

Close Request Button (Request Detail Page):

Visibility:

Only shown to initiator (creator)
Only after final approval
Only if conclusion exists
Not shown if already closed

Button Placement:

Prominent button in top-right
Label: "Close Request"
Primary/success color
Icon: Checkmark or lock

Click Behavior:

Opens confirmation modal

Close Request Modal:

Title: "Close Workflow Request"
Content:
- Request summary:
  - Request number
  - Title
  - Final status: APPROVED
  - Total approval time
- Conclusion display:
  - Show final conclusion
  - Read-only
- Warning message:
  - "Closing this request is final"
  - "This action cannot be undone"
  - "All participants will be notified"
Action Buttons:
- "Confirm Close" button (primary/green)
  - Shows loading spinner during API call
- "Cancel" button (secondary)
  - Closes modal without action

After Closure:

Close modal
Show success notification: "Request closed successfully"
Update page to show closed status
Change button to "Closed" (disabled)
Display closure date
Navigate to Closed Requests OR stay on page
All editing disabled

4. Search & Filter Components (FE-501)

Global Search Bar:

Location: Top of request list pages
Features:
- Text input with search icon
- Placeholder: "Search by title or request number..."
- Debounce search (300ms delay)
- Show search results as you type
- Clear button (X icon)
- Search on Enter key

Filter Panel:

Location: Sidebar or top bar
Filters Available:

1. Status Filter:
- Checkboxes for each status:
  - ☐ Draft
  - ☐ Pending
  - ☐ In Progress
  - ☐ Approved
  - ☐ Rejected
  - ☐ Closed
- Select multiple
- Show count for each status
2. Priority Filter:
- Radio buttons or checkboxes:
  - ☐ Standard
  - ☐ Express
- Select one or both
3. Date Range Filter:
- Date picker component
- "From" date input
- "To" date input
- Preset options:
  - Today
  - Last 7 days
  - Last 30 days
  - Last 90 days
  - Custom range
4. Department Filter:
- Dropdown select
- List of all departments
- Filter requests by initiator's department
5. Initiator Filter:
- User search input
- @mention style autocomplete
- Filter by who created the request

Filter Actions:

Apply Filters button:
- Apply selected filters
- Update request list
- Show loading state
Clear Filters button:
- Reset all filters
- Reload full list

Filter State Management:

URL Query Parameters:
- Save filters in URL
- Example: ?status=PENDING&priority=EXPRESS&from=2025-11-01
- Enable sharing filtered views
- Browser back/forward works
Active Filter Display:
- Show active filters as chips/tags
- Example: "Status: Pending" (X to remove)
- "2 filters active" counter
- Quick remove individual filters

5. Responsive Design & Polish (FE-502)

Mobile Responsiveness:

Breakpoints:

Mobile: 320px - 767px
Tablet: 768px - 1023px
Desktop: 1024px+

Mobile Optimizations:

Sidebar: Collapsible hamburger menu
Request Cards: Full width, stacked vertically
Tables: Convert to cards
Modals: Full-screen on mobile
Forms: Single column layout
Buttons: Larger touch targets (44px minimum)
Navigation: Bottom tab bar (optional)

Tablet Optimizations:

Sidebar: Collapsible or always visible
Request Cards: 2 per row
Tables: Scrollable horizontally
Forms: Two column layout

Desktop:

Sidebar: Always visible
Request Cards: 3 per row
Tables: Full table view
Forms: Optimized multi-column

6. Loading States & Error Handling (FE-503)

Loading Skeletons:

Request List Skeleton:
- Show placeholder cards
- Animated shimmer effect
- Same layout as actual cards
Request Detail Skeleton:
- Placeholder for all sections
- Shimmer animation
Dashboard Skeleton:
- Placeholder cards for metrics
- Placeholder charts

Error States:

Network Error:
- Show error message
- "Retry" button
- "Go Back" button
Empty State:
- Relevant icon
- Message: "No requests found"
- "Create New Request" button
Error Boundary:
- Catch React errors
- Show friendly error page
- "Report Issue" button

7. Accessibility (FE-504)

ARIA Labels:

Add labels to all interactive elements
Buttons have clear labels
Form inputs have associated labels

Keyboard Navigation:

All actions accessible via keyboard
Tab order logical
Enter/Space to activate buttons
Esc to close modals

Screen Reader Support:

Semantic HTML tags
Alt text for images
Proper heading hierarchy (H1, H2, H3)

Color Contrast:

Meet WCAG AA standards
Text contrast ratio >= 4.5:1
Large text >= 3:1

What You Can Do After Sprint 5:

✅ View comprehensive dashboard with statistics
✅ See visual charts and graphs
✅ Generate AI-powered conclusions
✅ Edit AI conclusions before finalizing
✅ Close approved workflows
✅ Search requests by title/number
✅ Filter requests by multiple criteria
✅ Use on any device (responsive)
✅ Better loading and error states
✅ Accessible for all users

🧪 Sprint 6: Testing & Deployment (Weeks 9-10)

Status: ⏳ Upcoming | Focus: Quality assurance and production deployment

Week 9: Testing & Quality Assurance

1. Backend Unit Testing (BE-601):

Service Tests:

Auth service: Login, register, token refresh
Workflow service: CRUD operations, TAT calculations
Approval service: Approve, reject, level transitions
TAT service: Calculate elapsed time, status determination
Notification service: Create, send, mark read
Document service: Upload, download, delete

Controller Tests:

API endpoint tests
Request validation
Response format
Error handling

Utility Tests:

Date calculations
TAT business logic
Email templates
File validators

Test Coverage:

Target: >80% code coverage
Use Jest with ts-jest
Mock external dependencies (database, storage, AI API)

2. Backend Integration Testing (BE-602):

Complete Workflow Tests:

User registration → login → token
Create workflow → submit → approve → close
Multi-level approval flow (all 10 levels)
Rejection flow
TAT tracking and alerts
Document upload → preview → download

API Testing:

Use Supertest for HTTP testing
Test all API endpoints
Test authentication middleware
Test authorization rules
Test error responses
Test pagination and filtering

3. Frontend Unit Testing (FE-601):

Component Tests:

Login component
Registration component
Workflow wizard steps
Request cards
Approval modals
Work notes chat
Notification bell

Redux Tests:

Slice reducers
Async thunks
Selectors

Utility Tests:

Date formatting
Validation functions
API service helpers

Test Coverage:

Target: >70% code coverage
Use Vitest + React Testing Library
Mock API calls

4. Frontend Integration Testing (FE-602):

User Flow Tests:

Complete registration → login flow
Create workflow → submit → view flow
Approve/reject workflow flow
Add work note flow
Upload document flow

Navigation Tests:

Route transitions
Protected routes
Redirect logic

5. API Documentation (BE-603):

Swagger/OpenAPI Setup:

Document all endpoints
Request schemas with examples
Response schemas
Authentication requirements
Error responses
Example requests/responses

Postman Collection:

Create collection for all APIs
Organize by feature
Add example requests
Add pre-request scripts (auth token)
Share with team

Week 10: Optimization & Deployment

6. Performance Optimization (BE-604, FE-603):

Backend:

Database query optimization
Add indexes for frequent queries
Optimize N+1 queries with eager loading
Add response caching (Redis optional)
Database connection pooling
Compress API responses (gzip)
Rate limiting per user

Frontend:

Code splitting with React.lazy
Lazy load images
Bundle size optimization
Tree shaking
Memoize components (React.memo)
Optimize Redux selectors
Add service worker (optional)

7. Deployment Setup (BE-605, FE-604):

Backend Deployment:

Create production Dockerfile
Setup docker-compose for DB + Backend
Configure environment variables
Setup PM2 for process management
Database migration scripts
Setup CI/CD pipeline (GitHub Actions)
Deploy to GCP Cloud Run or VM
Configure logging and monitoring

Frontend Deployment:

Create production Dockerfile with Nginx
Production build configuration
Environment variables for prod
Setup CI/CD pipeline
Deploy to GCP Cloud Run or Storage
Configure CDN
Setup SSL/HTTPS

8. Final Testing & QA:

End-to-end testing
User acceptance testing (UAT)
Load testing
Security testing
Browser compatibility testing
Mobile device testing

9. Go-Live Checklist:

Database backup strategy
Monitoring setup (logs, errors, performance)
Error tracking (Sentry optional)
Documentation complete
User training materials
Support plan

What You Achieve After Sprint 6:

✅ Fully tested application (>80% coverage)
✅ Complete API documentation
✅ Optimized performance
✅ Production deployment
✅ CI/CD pipelines configured
✅ Monitoring and logging in place
✅ Ready for production users!

🎯 Summary: Why Each Sprint Matters

Sprint 0: Foundation - Without proper setup, everything else fails
Sprint 1: Authentication - Users need to login before anything else
Sprint 2: Workflow Creation - Core feature, creates the workflows
Sprint 3: Approvals - Makes workflows actually work, users can act
Sprint 4: Collaboration - Documents and work notes enable teamwork
Sprint 5: Analytics - Dashboard gives insights, AI adds intelligence
Sprint 6: Quality - Testing ensures reliability, deployment makes it live

Each sprint builds on the previous one. You cannot skip or reorder them!

Backend Tasks

SPRINT 0: Backend Setup & Infrastructure

TASK-BE-001: Repository & Environment Setup

Priority: Critical | Estimated Time: 0.5 days | Status: 🔄 In Progress

Create re-workflow-backend repository
Initialize Node.js 22 project with TypeScript 5.7
Setup folder structure as per architecture document
Configure tsconfig.json with strict mode
Create .env.example and environment configuration
Setup .gitignore for Node.js projects
Initialize package.json with all dependencies

Dependencies: None
Deliverable: Repository with basic structure

TASK-BE-002: Database Setup & Schema

Priority: Critical | Estimated Time: 1 day | Status: ⏳ Pending

Install PostgreSQL 16 locally/Docker
Create database re_workflow_db
Implement complete database schema from architecture doc
Create all tables with indexes and constraints
Setup database triggers (request_number generation, timestamps)
Create database views (vw_active_requests, vw_user_notifications)
Insert initial system settings
Document database connection configuration

Dependencies: None
Deliverable: Complete PostgreSQL database with schema

TASK-BE-003: Core Backend Configuration

Priority: Critical | Estimated Time: 0.5 days | Status: ⏳ Pending

Setup Express.js application (src/app.ts)
Configure middleware (helmet, cors, body-parser)
Setup Winston logger with file rotation
Create error handling middleware
Configure Morgan for HTTP logging
Setup health check endpoint (/health)
Create src/server.ts with graceful shutdown
Test server startup and connection

Dependencies: TASK-BE-001
Deliverable: Running Express server with logging

TASK-BE-004: Sequelize ORM Setup

Priority: Critical | Estimated Time: 1 day | Status: ⏳ Pending

Configure Sequelize connection (src/config/database.ts)
Create all Sequelize models matching database schema
- User model
- WorkflowRequest model
- ApprovalLevel model
- Participant model
- Document model
- WorkNote model
- Activity model
- Notification model
- TATTracking model
- ConclusionRemark model
Define model associations (relationships)
Test database connectivity
Create model index file (src/models/index.ts)

Dependencies: TASK-BE-002
Deliverable: Complete ORM layer with type definitions

SPRINT 1: SSO Authentication & User Management

TASK-BE-101: SSO Integration (Awaiting Confirmation)

Priority: Critical | Estimated Time: 1.5 days | Status: ⏳ Awaiting SSO Details

Configure SSO Bridge integration (src/config/sso.ts)
Implement SSO callback handler (src/services/auth.service.ts)
User auto-sync from Active Directory
JWT token generation for app sessions
Authentication middleware (src/middlewares/auth.middleware.ts)
Auth APIs:
- GET /api/v1/auth/login - Redirect to SSO
- GET /api/v1/auth/callback - Handle SSO callback
- POST /api/v1/auth/logout - Logout
- GET /api/v1/auth/me - Get current user

Dependencies: TASK-BE-004
Deliverable: SSO integration (no login/signup screens needed)

TASK-BE-102: User Profile Management

Priority: Medium | Estimated Time: 0.5 days

Create user controller (src/controllers/user.controller.ts)
- GET /api/v1/users - Get all active users (for @tagging)
- GET /api/v1/users/search?q= - Search users by name/email
- GET /api/v1/users/:id - Get user details
- PUT /api/v1/users/:id - Update user profile (phone, picture only)
Create user service (src/services/user.service.ts)
Create user routes (src/routes/user.routes.ts)

Dependencies: TASK-BE-101
Deliverable: User search and profile APIs

Note: User data synced from Active Directory (read-only except phone/picture)

SPRINT 2: Core Workflow Creation

TASK-BE-201: Workflow Request Creation APIs

Priority: Critical | Estimated Time: 10 hours

Create workflow service (src/services/workflow.service.ts)
- Create draft workflow
- Update draft workflow
- Submit workflow for approval
- Auto-generate request number (REQ-YYYY-00001)
- Calculate total TAT from all levels
- Set TAT start/end dates based on priority
Create workflow controller (src/controllers/workflow.controller.ts)
- POST /api/v1/workflows - Create new workflow
- PUT /api/v1/workflows/:id - Update draft
- GET /api/v1/workflows/:id - Get workflow details
- DELETE /api/v1/workflows/:id - Delete draft
- PATCH /api/v1/workflows/:id/submit - Submit for approval
Implement TAT calculation utility
- Calculate working days vs calendar days
- Handle priority (STANDARD vs EXPRESS)
Create workflow validation schemas (Zod)
Test workflow creation flow end-to-end

Dependencies: TASK-BE-103
Deliverable: Workflow creation APIs with TAT calculation

TASK-BE-202: Approval Hierarchy Management

Priority: Critical | Estimated Time: 8 hours

Create approval service (src/services/approval.service.ts)
- Create approval levels (up to 10 levels)
- Add approver to specific level
- Update approval level TAT
- Get approval hierarchy for request
- Get current approval level
- Move to next approval level
Create approval controller (src/controllers/approval.controller.ts)
- GET /api/v1/workflows/:id/approvals - Get hierarchy
- POST /api/v1/workflows/:id/approvals - Add approval level
- GET /api/v1/workflows/:id/approvals/current - Current level
Validate max 10 approval levels
Ensure unique level numbers per request

Dependencies: TASK-BE-201
Deliverable: Approval hierarchy management

TASK-BE-203: Participant Management

Priority: High | Estimated Time: 4 hours

Create participant service (src/services/participant.service.ts)
- Add spectator to request
- Remove spectator
- Get all participants
- Check participant permissions
Create participant controller (src/controllers/participant.controller.ts)
- GET /api/v1/workflows/:id/participants - Get all
- POST /api/v1/workflows/:id/participants - Add spectator
- DELETE /api/v1/workflows/:id/participants/:participantId - Remove
- GET /api/v1/workflows/:id/spectators - Get spectators only
Log participant additions in activity

Dependencies: TASK-BE-201
Deliverable: Participant management APIs

TASK-BE-204: Workflow List & Filtering APIs

Priority: High | Estimated Time: 6 hours

Implement workflow listing with filters
- GET /api/v1/workflows - Get all workflows (with filters)
- GET /api/v1/workflows/my-requests - User's requests
- GET /api/v1/workflows/open - Open/pending requests
- GET /api/v1/workflows/closed - Closed requests
- GET /api/v1/workflows/assigned-to-me - Assigned requests
Implement pagination (page, limit, sortBy, sortOrder)
Implement filters (status, priority, date range)
Implement search (by title, description, request_number)
Add full-text search using PostgreSQL

Dependencies: TASK-BE-201
Deliverable: Workflow listing with search/filter

SPRINT 3: Approval Actions & Notifications

TASK-BE-301: Approval/Rejection Actions

Priority: Critical | Estimated Time: 10 hours

Implement approval action workflow
- PATCH /api/v1/workflows/:id/approvals/:levelId/approve
- PATCH /api/v1/workflows/:id/approvals/:levelId/reject
Approval logic:
- Validate approver is current level approver
- Validate mandatory comments field
- Update approval level status to APPROVED
- Move workflow to next level OR close if final approver
- Update workflow status (IN_PROGRESS, APPROVED)
- Stop TAT for current level
- Start TAT for next level
- Log activity
Rejection logic:
- Validate approver authorization
- Mandatory rejection comments
- Mark workflow as REJECTED and CLOSED
- Stop TAT tracking
- Send notification to initiator
- Log activity
Create activity logging service

Dependencies: TASK-BE-202
Deliverable: Working approval/rejection flow

TASK-BE-302: TAT Tracking & Monitoring

Priority: Critical | Estimated Time: 8 hours

Create TAT service (src/services/tat.service.ts)
- Calculate elapsed time for current level
- Calculate remaining time
- Calculate percentage TAT used
- Determine TAT status (ON_TRACK, APPROACHING, BREACHED)
- Update TAT tracking table
Implement TAT monitoring cron job (src/jobs/tatMonitor.job.ts)
- Run every 30 minutes
- Check all active requests
- Identify approaching deadlines (80% threshold)
- Identify breached TATs (100%+)
- Update tat_tracking table
- Trigger reminder notifications
Create TAT APIs
- GET /api/v1/workflows/:id/tat - Get TAT status
- GET /api/v1/tat/breached - Get breached requests
- GET /api/v1/tat/approaching - Get approaching deadlines

Dependencies: TASK-BE-301
Deliverable: TAT tracking system with cron

TASK-BE-303: Notification System

Priority: High | Estimated Time: 8 hours

Create notification service (src/services/notification.service.ts)
- Create notification
- Send notification to user(s)
- Mark notification as read
- Mark all as read
- Delete notification
- Get user notifications
- Get unread count
Notification triggers:
- New workflow assignment
- Workflow approval/rejection
- TAT warning (80% threshold)
- TAT breach (100%+)
- Work note mention (@user)
- Document upload
- Spectator added
Create notification controller
- GET /api/v1/notifications - Get user notifications
- GET /api/v1/notifications/unread - Unread only
- PATCH /api/v1/notifications/:id/read - Mark as read
- PATCH /api/v1/notifications/mark-all-read - Mark all
- DELETE /api/v1/notifications/:id - Delete
Add notification priority levels

Dependencies: TASK-BE-301
Deliverable: Complete notification system

SPRINT 4: Documents & Work Notes

TASK-BE-401: Document Management System

Priority: Critical | Estimated Time: 10 hours

Setup file upload with Multer
Configure GCP Cloud Storage (or local storage for dev)
Create storage service (src/services/storage.service.ts)
- Upload file to cloud storage
- Generate signed URL for file access
- Delete file from storage
- Validate file type and size
Create document service (src/services/document.service.ts)
- Upload document
- Get document metadata
- Get document download URL
- Delete document
- Get all documents for request
Create document controller
- POST /api/v1/workflows/:id/documents - Upload
- GET /api/v1/workflows/:id/documents - Get all
- GET /api/v1/documents/:documentId - Get details
- GET /api/v1/documents/:documentId/download - Download URL
- DELETE /api/v1/documents/:documentId - Delete
- GET /api/v1/documents/:documentId/preview - Preview URL
File validation (max 10MB, allowed types)
Support Google Docs/Sheets links

Dependencies: TASK-BE-301
Deliverable: Document upload/download APIs

TASK-BE-402: Work Notes & Chat System

Priority: High | Estimated Time: 8 hours

Create work note service (src/services/workNote.service.ts)
- Create work note
- Update work note
- Delete work note
- Add reaction to note
- Add attachment to note
- Get all notes for request
- Parse @mentions from message
Create work note controller
- GET /api/v1/workflows/:id/work-notes - Get all notes
- POST /api/v1/workflows/:id/work-notes - Add note
- PUT /api/v1/work-notes/:noteId - Update note
- DELETE /api/v1/work-notes/:noteId - Delete note
- POST /api/v1/work-notes/:noteId/reactions - Add reaction
- POST /api/v1/work-notes/:noteId/attachments - Add attachment
Implement @mention detection
Send notifications to mentioned users
Support file attachments in notes
Log work note activities

Dependencies: TASK-BE-303
Deliverable: Work notes/chat APIs

TASK-BE-403: Activity Log System

Priority: Medium | Estimated Time: 4 hours

Create activity service (src/services/activity.service.ts)
- Log activity automatically
- Get activity timeline
- Filter activities by type
Activity tracking for:
- Request created
- Request submitted
- Approval/rejection
- Approver/spectator added
- Document uploaded/deleted
- Work note added
- TAT warning/breach
- Status changes
Create activity APIs
- GET /api/v1/workflows/:id/activities - Get timeline
- GET /api/v1/workflows/:id/activities/:type - Filter by type
Display user-friendly activity descriptions

Dependencies: TASK-BE-301
Deliverable: Activity logging system

SPRINT 5: Dashboard & Reporting

TASK-BE-501: Dashboard Statistics APIs

Priority: High | Estimated Time: 6 hours

Create dashboard service (src/services/dashboard.service.ts)
Implement dashboard statistics
- Total requests by user
- Pending approvals count
- Approved/rejected count
- TAT breach count
- Requests by priority
- Requests by status
- Average approval time
Create dashboard APIs
- GET /api/v1/dashboard/stats - Get statistics
- GET /api/v1/dashboard/recent - Recent activities
- GET /api/v1/dashboard/pending-actions - Pending count
Add date range filters
Cache dashboard data for performance

Dependencies: TASK-BE-301
Deliverable: Dashboard APIs with statistics

TASK-BE-502: AI Conclusion Generation

Priority: Medium | Estimated Time: 6 hours

Setup AI service integration (OpenAI/Gemini)
Create AI service (src/services/ai.service.ts)
- Generate conclusion from workflow data
- Summarize work notes
- Extract key decision points
- Generate conclusion remark
Create conclusion APIs
- POST /api/v1/workflows/:id/conclusion/generate - Generate
- PUT /api/v1/workflows/:id/conclusion - Update
- GET /api/v1/workflows/:id/conclusion - Get
Allow initiator to edit AI-generated conclusion
Store both AI-generated and final remarks

Dependencies: TASK-BE-402
Deliverable: AI-powered conclusion generation

TASK-BE-503: Workflow Closure

Priority: High | Estimated Time: 4 hours

Implement workflow closure endpoint
- PATCH /api/v1/workflows/:id/close - Close workflow
Closure logic:
- Only initiator can close after final approval
- Require conclusion remark (AI or manual)
- Update workflow status to CLOSED
- Set closure_date
- Send closure notifications to all participants
- Archive workflow data
- Log closure activity
Validate closure permissions

Dependencies: TASK-BE-502
Deliverable: Workflow closure functionality

SPRINT 6: Testing & Optimization

TASK-BE-601: Unit Testing

Priority: High | Estimated Time: 10 hours

Setup Jest + ts-jest configuration
Write unit tests for services:
- Auth service tests (login, register, token)
- Workflow service tests (CRUD, submit)
- Approval service tests (approve, reject)
- TAT service tests (calculation, tracking)
- Notification service tests
- Document service tests
- Work note service tests
Achieve >80% code coverage
Test edge cases and error scenarios
Mock external dependencies

Dependencies: All Sprint 1-5 tasks
Deliverable: Comprehensive test suite

TASK-BE-602: Integration Testing

Priority: High | Estimated Time: 8 hours

Setup Supertest for API testing
Test complete workflows:
- User registration → login → create workflow
- Workflow creation → submission → approval
- Multi-level approval flow
- Rejection workflow
- TAT tracking and notifications
- Document upload and retrieval
Test error handling and validation
Test authorization and permissions
Test pagination and filtering

Dependencies: TASK-BE-601
Deliverable: Integration test suite

TASK-BE-603: API Documentation

Priority: Medium | Estimated Time: 4 hours

Setup Swagger/OpenAPI documentation
Document all API endpoints with:
- Request/response schemas
- Query parameters
- Request body structure
- Response codes
- Authentication requirements
- Example requests/responses
Host documentation at /api-docs
Create Postman collection

Dependencies: All API tasks
Deliverable: Complete API documentation

TASK-BE-604: Performance Optimization

Priority: Medium | Estimated Time: 6 hours

Add database query optimization
Implement response caching (Redis optional)
Add database connection pooling
Optimize N+1 queries with eager loading
Add pagination to all list endpoints
Implement rate limiting per user
Add request/response compression
Performance testing and profiling

Dependencies: TASK-BE-602
Deliverable: Optimized backend performance

TASK-BE-605: Deployment Setup

Priority: High | Estimated Time: 6 hours

Create Dockerfile for backend
Create docker-compose.yml (backend + PostgreSQL)
Setup environment variables for production
Configure PM2 for process management
Setup database migration scripts
Create deployment scripts
Configure GCP Cloud Run (or VM)
Setup CI/CD pipeline (GitHub Actions)
Configure logging and monitoring

Dependencies: TASK-BE-604
Deliverable: Deployment-ready backend

Frontend Tasks

SPRINT 0: Frontend Setup & Infrastructure

TASK-FE-001: Repository & Environment Setup

Priority: Critical | Estimated Time: 4 hours

Create re-workflow-frontend repository
Initialize React 19 project with Vite 6
Setup TypeScript 5.7 configuration
Setup folder structure as per architecture
Configure tsconfig.json with strict mode
Create .env.example for environment variables
Setup .gitignore for React projects
Initialize package.json with dependencies

Dependencies: None
Deliverable: Repository with React + TypeScript

TASK-FE-002: UI Framework & Styling Setup

Priority: Critical | Estimated Time: 4 hours

Install Material-UI 6.3 (MUI)
Install @emotion for styling
Configure MUI theme (src/assets/styles/theme.ts)
- Primary/secondary colors
- Typography settings
- Breakpoints for responsive design
Create global CSS variables
Setup CSS reset and normalize
Configure responsive layout breakpoints

Dependencies: TASK-FE-001
Deliverable: UI framework configured

TASK-FE-003: Redux Store & State Management

Priority: Critical | Estimated Time: 4 hours

Install Redux Toolkit 2.5 and React-Redux
Create Redux store (src/redux/store.ts)
Create typed hooks (src/redux/hooks.ts)
Create initial slices:
- authSlice (user, token, isAuthenticated)
- uiSlice (loading, errors, notifications)
- workflowSlice (workflows, currentWorkflow)
- approvalSlice (approvals, currentLevel)
- notificationSlice (notifications, unreadCount)
- documentSlice (documents)
- workNoteSlice (notes)
- participantSlice (participants, spectators)
Configure Redux DevTools
Setup persist for auth state (localStorage)

Dependencies: TASK-FE-001
Deliverable: Redux store configured

TASK-FE-004: API Service Layer Setup

Priority: Critical | Estimated Time: 4 hours

Create Axios instance (src/services/api.ts)
Configure base URL from environment
Setup request interceptors (add JWT token)
Setup response interceptors (error handling)
Handle token refresh logic
Handle 401 unauthorized (redirect to login)
Create service files:
- auth.service.ts
- workflow.service.ts
- approval.service.ts
- document.service.ts
- notification.service.ts
- workNote.service.ts
- participant.service.ts
- dashboard.service.ts
- user.service.ts

Dependencies: TASK-FE-003
Deliverable: API service layer with interceptors

Priority: High | Estimated Time: 3 hours

Install React Router DOM 7.1
Create routing configuration (src/routes/AppRoutes.tsx)
Define all routes:
- /login - Login page
- /register - Registration page
- /forgot-password - Password reset request
- /reset-password/:token - Reset password
- /dashboard - Dashboard (protected)
- /workflows/create - Create request (protected)
- /workflows/my-requests - My requests (protected)
- /workflows/open - Open requests (protected)
- /workflows/closed - Closed requests (protected)
- /workflows/:id - Request detail (protected)
- /unauthorized - 403 page
- /not-found - 404 page
Create PrivateRoute component (auth check)
Create PublicRoute component (redirect if authenticated)

Dependencies: TASK-FE-003
Deliverable: Complete routing structure

TASK-FE-006: Common Components Library

Priority: High | Estimated Time: 8 hours

Create reusable components:
- Button component (primary, secondary, danger variants)
- Input component (text, email, password, textarea)
- Dropdown/Select component
- Modal component (reusable dialog)
- Card component
- Table component with sorting
- Tabs component
- Pagination component
- Loader/Spinner component
- Notification/Toast component (react-toastify)
- ErrorBoundary component
Create component tests for each
Add TypeScript interfaces for props

Dependencies: TASK-FE-002
Deliverable: Reusable component library

TASK-FE-007: Layout Components

Priority: High | Estimated Time: 6 hours

Create Header component
- Logo and app name
- User profile dropdown
- Notification bell icon with count
- Logout button
Create Sidebar/Navigation component
- Dashboard link
- My Requests link
- Open Requests link
- Closed Requests link
- Raise New Request button
- Active route highlighting
Create Footer component
Create PageLayout component (header + sidebar + content)
Make layout responsive (mobile, tablet, desktop)

Dependencies: TASK-FE-006
Deliverable: Complete layout structure

SPRINT 1: SSO Authentication & User Management

TASK-FE-101: SSO Callback Handler & Protected Routes

Priority: Critical | Estimated Time: 1 day | Status: ⏳ Pending

Create SSO Callback page (src/pages/Auth/SSOCallback.tsx)
- Handle OAuth2 callback from SSO
- Extract authorization code from URL params
- Call backend callback API (GET /api/v1/auth/callback?code=XXX)
- Receive JWT token from backend
- Store JWT in Redux + localStorage
- Redirect to dashboard on success
- Handle SSO errors (access denied, invalid code)
- Show loading spinner during authentication
Update route configuration (src/routes/AppRoutes.tsx)
- Add /auth/callback route (public)
- Add SSO redirect for unauthenticated users
Create PrivateRoute component
- Check if user authenticated (JWT exists)
- Redirect to SSO login if not authenticated
- Allow access if authenticated
Create PublicRoute component (optional)
- Redirect to dashboard if already authenticated
Test SSO flow end-to-end

Dependencies: TASK-FE-004, TASK-FE-005
Deliverable: Working SSO authentication flow

Note: No login/signup/password reset pages needed (SSO handles everything)

Priority: High | Estimated Time: 0.5 days | Status: ⏳ Pending

Create "Login with SSO" button on landing page
- Redirects to GET /api/v1/auth/login
- Backend redirects to SSO Bridge
- Simple button, no form needed
Implement logout functionality (Header component)
- Create logout Redux action
- Clear user state from Redux
- Clear JWT from localStorage
- Call POST /api/v1/auth/logout
- Redirect to SSO logout URL
- Show "Logged out successfully" message
Add logout button in user profile dropdown

Dependencies: TASK-FE-101
Deliverable: Login/logout functionality

TASK-FE-103: User Profile & Header

Priority: Medium | Estimated Time: 1 day | Status: ⏳ Pending

Fetch current user from SSO (GET /api/v1/auth/me)
- Get user details (name, email, employee ID, department, phone)
- Display in Redux state
- Show in header dropdown
Create user profile dropdown in header
- User avatar/profile picture
- Display name and email
- Department name
- Employee ID
- Logout button
Create Edit Profile modal (limited fields)
- Update phone number (only editable field)
- Update profile picture
- Connect to PUT /api/v1/users/:id
- Other fields (name, email, employee ID) are read-only (from AD)
User profile page (optional)
- View complete profile
- See department, designation
- View workflow statistics

Dependencies: TASK-FE-007, TASK-FE-101
Deliverable: User profile display and limited editing

Note: Most user info comes from Active Directory (read-only), only phone/picture editable

SPRINT 2: Core Workflow Creation

TASK-FE-201: Create Request - Wizard Structure

Priority: Critical | Estimated Time: 6 hours

Create CreateRequest page (src/pages/CreateRequest/CreateRequest.tsx)
Implement 6-step wizard with stepper:
1. Template Selection
2. Basic Information
3. Approval Workflow
4. Participants & Access
5. Documents & Attachments
6. Review & Submit
Create WizardStepper component
- Progress indicator (1/6, 2/6, etc.)
- Active step highlighting
- Clickable steps (if previous steps complete)
Add Next/Previous navigation buttons
Save draft functionality (auto-save)
Store wizard state in Redux

Dependencies: TASK-FE-007
Deliverable: Wizard navigation structure

TASK-FE-202: Step 1 - Template Selection

Priority: High | Estimated Time: 3 hours

Create Template Selection step
Show two options:
- Custom Request (Non-Templatized) - Enabled
- Template Request - Disabled (future scope)
Visual card-based selection
Require selection before proceeding
Save selection to Redux state
Add helpful description for each option

Dependencies: TASK-FE-201
Deliverable: Template selection step

TASK-FE-203: Step 2 - Basic Information

Priority: Critical | Estimated Time: 6 hours

Create Basic Information step
Form fields:
- Request Title (max 500 chars, required)
- Detailed Description (rich text editor, required)
  - Support bold, italic, underline
  - Support tables, lists
  - Support links
- Priority Level (radio buttons, required)
  - Standard (working days)
  - Express (calendar days)
Form validation (all fields required)
Rich text editor integration (Quill/Draft.js/TinyMCE)
Save to Redux state
Character count indicators

Dependencies: TASK-FE-201
Deliverable: Basic information form

TASK-FE-204: Step 3 - Approval Workflow

Priority: Critical | Estimated Time: 10 hours

Create Approval Workflow step
Dynamic approval level creation (max 10 levels)
For each level:
- Level name/title input
- Approver selection with @mention/search
- TAT input (hours or days dropdown)
- Add/Remove level buttons
User search/tagging component
- Search users by name/email
- Display user dropdown with profile pic
- Select user as approver
Real-time TAT calculation
- Sum all level TATs
- Display total TAT prominently
Approval Flow Summary (read-only view)
- Show all levels in hierarchy
- Show approvers and TAT for each
TAT Summary widget
Validation (at least 1 approver, valid TAT)
Save approval hierarchy to Redux

Dependencies: TASK-FE-203
Deliverable: Approval workflow builder

TASK-FE-205: Step 4 - Participants & Access

Priority: High | Estimated Time: 4 hours

Create Participants step
Add Spectators section
- @mention/search component (reuse from Step 3)
- Add multiple spectators
- Display added spectators with remove option
Display participant permissions
- Spectators can view and comment
- Spectators cannot approve
Save participants to Redux state
Validation (optional spectators)

Dependencies: TASK-FE-204
Deliverable: Participant management step

TASK-FE-206: Step 5 - Documents & Attachments

Priority: High | Estimated Time: 6 hours

Create Documents step
File upload component (react-dropzone)
- Drag-and-drop area
- Browse files button
- Multiple file upload
- File type validation (PDF, Word, Excel, PPT, images)
- File size validation (max 10MB per file)
Display uploaded files list
- File name, size, type
- Preview icon for PDF/images
- Remove file option
Google Docs/Sheets link section
- Input for Google Docs URL
- Input for Google Sheets URL
- Validate Google URLs
Upload progress indicators
Save file metadata to Redux (actual upload on submit)

Dependencies: TASK-FE-205
Deliverable: Document upload step

TASK-FE-207: Step 6 - Review & Submit

Priority: Critical | Estimated Time: 6 hours

Create Review & Submit step
Display comprehensive summary:
- Request Overview
  - Request type, priority, title
- Basic Information
  - Description (formatted)
  - Priority level
- Approval Workflow
  - All levels with approvers and TAT
  - Total TAT calculation
- Participants
  - List of spectators
- Documents
  - List of attached files
  - Google Docs/Sheets links
Add Edit buttons for each section (go back to step)
Two action buttons:
- Save as Draft (POST /api/v1/workflows with is_draft=true)
- Submit Request (POST /api/v1/workflows + PATCH /submit)
Loading state during submission
Success notification and redirect to request detail
Error handling and display

Dependencies: TASK-FE-206
Deliverable: Review & submit workflow

TASK-FE-208: Workflow Creation API Integration

Priority: Critical | Estimated Time: 6 hours

Connect wizard to backend APIs
Implement workflow creation flow:
1. POST /api/v1/workflows (create draft)
2. Upload documents (POST /api/v1/workflows/:id/documents)
3. Add approval levels (POST /api/v1/workflows/:id/approvals)
4. Add spectators (POST /api/v1/workflows/:id/participants)
5. Submit workflow (PATCH /api/v1/workflows/:id/submit)
Handle API errors at each step
Show loading states
Implement retry logic
Clear wizard state after successful submission

Dependencies: TASK-FE-207
Deliverable: Fully integrated workflow creation

SPRINT 3: Request Management & Approval Actions

TASK-FE-301: My Requests Page

Priority: Critical | Estimated Time: 8 hours

Create My Requests page (src/pages/MyRequests/MyRequests.tsx)
Fetch user's workflows (GET /api/v1/workflows/my-requests)
Display category tabs:
- Total
- In Progress
- Approved
- Rejected
- Draft
Request card component displaying:
- Request number (REQ-YYYY-00001)
- Title
- Priority badge (EXPRESS/STANDARD)
- Status badge (color-coded)
- Current approval level
- Submission date
- Estimated completion date
Implement search functionality
Implement filters (status, priority, date range)
Implement sorting (date, priority, status)
Implement pagination
Click to navigate to request detail

Dependencies: TASK-FE-007
Deliverable: My Requests listing page

TASK-FE-302: Open & Closed Requests Pages

Priority: High | Estimated Time: 6 hours

Create Open Requests page
- Fetch GET /api/v1/workflows/open
- Show requests assigned to user or involving user
- Same card layout as My Requests
- Filters and search
Create Closed Requests page
- Fetch GET /api/v1/workflows/closed
- Show completed workflows
- Display conclusion remarks
- Filters and search
Reuse request card component from TASK-FE-301
Add loading states
Handle empty states (no requests)

Dependencies: TASK-FE-301
Deliverable: Open and Closed request pages

TASK-FE-303: Request Detail Page - Overview Tab

Priority: Critical | Estimated Time: 8 hours

Create Request Detail page (src/pages/RequestDetail/RequestDetail.tsx)
Fetch workflow details (GET /api/v1/workflows/:id)
Display request information:
- Request number
- Title
- Description (formatted HTML)
- Initiator name, department, contact
- Priority badge
- Status badge
- Created date
- Submission date
TAT Progress Bar component
- Visual progress bar (elapsed/total)
- Color-coded (green: on track, yellow: approaching, red: breached)
- Display remaining time
- Show TAT status text
Tab navigation:
- Overview (default)
- Workflow
- Documents
- Activity
Spectators list sidebar
Quick Actions sidebar (for approvers):
- Add Work Note
- Add Approver
- Add Spectator
- Approve Request
- Reject Request

Dependencies: TASK-FE-301
Deliverable: Request detail overview

TASK-FE-304: Request Detail - Workflow Tab

Priority: Critical | Estimated Time: 6 hours

Create Workflow Tab component
Fetch approval hierarchy (GET /api/v1/workflows/:id/approvals)
Display approval levels in vertical timeline:
- Level number and name
- Approver name and designation
- TAT allocation (hours/days)
- Status indicator (Pending, In Progress, Approved, Rejected, Completed)
- Action date/timestamp
- Approver comments
Highlight current active level
Show TAT tracking for each level:
- Elapsed time
- Remaining time
- TAT status (on track, approaching, breached)
- Color-coded progress bars
Display completion checkmarks for approved levels
Show rejection reason if rejected

Dependencies: TASK-FE-303
Deliverable: Workflow timeline view

TASK-FE-305: Request Detail - Documents Tab

Priority: High | Estimated Time: 5 hours

Create Documents Tab component
Fetch documents (GET /api/v1/workflows/:id/documents)
Display documents in list/grid view:
- File name
- File type icon
- File size
- Uploader name
- Upload timestamp
- Preview button (PDF/images only)
- Download button
Implement PDF preview modal (inline viewer)
Implement image preview modal (lightbox)
Download document (GET /api/v1/documents/:id/download)
Display Google Docs/Sheets links separately
Show empty state if no documents

Dependencies: TASK-FE-303
Deliverable: Documents tab with preview

TASK-FE-306: Request Detail - Activity Tab

Priority: Medium | Estimated Time: 4 hours

Create Activity Tab component
Fetch activities (GET /api/v1/workflows/:id/activities)
Display activity timeline (reverse chronological):
- Event icon (color-coded by type)
- Event description
- User name (if user action)
- Timestamp (relative time: "2 hours ago")
- Metadata (if applicable)
Activity types:
- Request created
- Request submitted
- Approver added
- Spectator added
- Document uploaded
- Document deleted
- Work note added
- Approval/rejection
- TAT warning
- TAT breach
- Status change
Filter by activity type (optional)
Auto-refresh on page load

Dependencies: TASK-FE-303
Deliverable: Activity timeline view

Priority: Critical | Estimated Time: 6 hours

Create Approve Request modal component
- Display request ID and title
- Mandatory comments field (max 500 chars)
- Character counter
- "Approve Request" button
- "Cancel" button
Create Reject Request modal component
- Display request ID and title
- Mandatory rejection reason (max 500 chars)
- Character counter
- "Reject Request" button (red/danger)
- "Cancel" button
Form validation (comments required)
Connect to APIs:
- PATCH /api/v1/workflows/:id/approvals/:levelId/approve
- PATCH /api/v1/workflows/:id/approvals/:levelId/reject
Show loading state during submission
Success notification
Refresh request detail after action
Handle errors (not authorized, already actioned, etc.)

Dependencies: TASK-FE-303
Deliverable: Approval/rejection modals

TASK-FE-308: Add Work Note / Chat Component

Priority: High | Estimated Time: 8 hours

Create Work Notes component (chat interface)
Fetch work notes (GET /api/v1/workflows/:id/work-notes)
Display messages in chronological order:
- User avatar
- User name and role badge
- Message text (support line breaks)
- Timestamp (relative time)
- Reactions (emoji reactions)
- Attachments (if any)
Message composer at bottom:
- Text input (textarea, auto-expand)
- @mention autocomplete dropdown
- Attach file button
- Send button
- Character counter (max 2000 chars)
Implement @mention detection and autocomplete
Send message (POST /api/v1/workflows/:id/work-notes)
Upload attachments with messages
Implement reactions (POST /api/v1/work-notes/:id/reactions)
Scroll to bottom on new message
Auto-refresh messages (polling or websocket)

Dependencies: TASK-FE-303
Deliverable: Work notes chat interface

Priority: Medium | Estimated Time: 4 hours

Create "Add Approver" modal
- User search/autocomplete with @mention
- Dropdown showing matching users
- Display user name, email, department
- "Add" and "Cancel" buttons
- Connect to POST /api/v1/workflows/:id/approvals
Create "Add Spectator" modal
- Same UI as Add Approver
- Connect to POST /api/v1/workflows/:id/participants
Show success notification
Refresh request detail after adding
Handle errors (user already added)

Dependencies: TASK-FE-303
Deliverable: Add participant modals

SPRINT 4: Notifications & Dashboard

TASK-FE-401: Notification System

Priority: High | Estimated Time: 6 hours

Create NotificationBell component in header
Display unread notification count badge
Fetch notifications (GET /api/v1/notifications)
Create notification dropdown panel:
- List of recent notifications (max 10)
- Notification item with:
  - Type icon
  - Title
  - Message
  - Timestamp (relative)
  - Read/unread indicator
- "View All" link
- "Mark All as Read" button
Click notification to:
- Mark as read (PATCH /api/v1/notifications/:id/read)
- Navigate to related request
Create full Notifications page (optional)
Implement polling for new notifications (every 30 sec)
Show toast notifications for high-priority alerts
Handle notification types:
- Approval assignment
- TAT warning
- TAT breach
- Work note mention
- Approval/rejection
- Request closure

Dependencies: TASK-FE-007
Deliverable: Notification system

TASK-FE-402: Dashboard Page

Priority: Medium | Estimated Time: 8 hours

Create Dashboard page (src/pages/Dashboard/Dashboard.tsx)
Fetch dashboard statistics (GET /api/v1/dashboard/stats)
Display key metrics cards:
- Total Requests
- Pending Approvals
- Approved Requests
- Rejected Requests
- TAT Breached
- Avg. Approval Time
Create Recent Activities widget
- Fetch GET /api/v1/dashboard/recent
- Display last 10 activities
Create Pending Actions widget
- Fetch GET /api/v1/dashboard/pending-actions
- Show requests requiring user's action
Create charts (using Recharts):
- Requests by Status (pie chart)
- Requests by Priority (bar chart)
- Approval Trend (line chart over time)
Add date range filter
Make dashboard responsive

Dependencies: TASK-FE-401
Deliverable: Dashboard with statistics

TASK-FE-403: Conclusion Remark UI

Priority: Medium | Estimated Time: 4 hours

Create Conclusion section in Request Detail
Show after final approval
Display AI-generated conclusion
For Initiator only:
- "Edit Conclusion" button
- Edit modal with textarea
- "Save" and "Cancel" buttons
- Connect to PUT /api/v1/workflows/:id/conclusion
For other users: Read-only view
Display conclusion in:
- Request detail page
- My Requests (approved)
- Open Requests
- Closed Requests
Show placeholder if no conclusion exists

Dependencies: TASK-FE-303
Deliverable: Conclusion remark UI

TASK-FE-404: Workflow Closure UI

Priority: High | Estimated Time: 3 hours

Add "Close Request" button in request detail
- Only visible to initiator
- Only after final approval
- Requires conclusion remark
Create Close Request confirmation modal
- Display summary
- Show final conclusion
- "Confirm Close" button
- "Cancel" button
Connect to PATCH /api/v1/workflows/:id/close
Show success notification
Redirect to Closed Requests or stay on page
Update request status to CLOSED
Display closure date

Dependencies: TASK-FE-403
Deliverable: Workflow closure functionality

SPRINT 5: Polish & User Experience

TASK-FE-501: Search & Filter Components

Priority: High | Estimated Time: 6 hours

Create SearchBar component (reusable)
Create FilterPanel component
- Status filter (checkboxes)
- Priority filter (checkboxes)
- Date range filter (date pickers)
- Department filter (dropdown)
- Initiator filter (user search)
Implement search logic (debounce 300ms)
Implement filter application
Add "Clear Filters" button
Show active filter count
Persist filters in URL query params
Apply to:
- My Requests
- Open Requests
- Closed Requests

Dependencies: TASK-FE-301, TASK-FE-302
Deliverable: Search and filter functionality

TASK-FE-502: Responsive Design & Mobile

Priority: High | Estimated Time: 8 hours

Make all pages responsive
Test on breakpoints:
- Mobile (320px - 767px)
- Tablet (768px - 1023px)
- Desktop (1024px+)
Adjust layouts:
- Collapsible sidebar on mobile
- Hamburger menu
- Stack cards vertically on mobile
- Adjust table to cards on mobile
- Responsive modals
Test touch interactions
Optimize images and assets
Test on real devices

Dependencies: All frontend tasks
Deliverable: Fully responsive UI

TASK-FE-503: Loading States & Error Handling

Priority: High | Estimated Time: 4 hours

Add loading skeletons for all data fetching
- Request list skeleton
- Request detail skeleton
- Dashboard skeleton
Create ErrorState component (empty state)
Create EmptyState component (no data)
Add error boundaries around major sections
Implement retry logic for failed requests
Show user-friendly error messages
Add toast notifications for actions
Handle network errors gracefully

Dependencies: All data-fetching tasks
Deliverable: Better UX with loading/error states

Priority: Medium | Estimated Time: 4 hours

Add ARIA labels to interactive elements
Ensure keyboard navigation works
Add focus indicators
Test with screen readers
Ensure proper heading hierarchy
Add alt text to images
Ensure color contrast meets WCAG AA
Add skip navigation links
Test tab order

Dependencies: All component tasks
Deliverable: Accessible application

SPRINT 6: Testing & Deployment

TASK-FE-601: Unit Testing

Priority: High | Estimated Time: 10 hours

Setup Vitest testing framework
Setup React Testing Library
Write component tests:
- Login component test
- Registration component test
- Workflow wizard tests
- Request card test
- Approval modal test
- Work notes test
- Notification test
Write Redux slice tests
Write utility function tests
Achieve >70% code coverage
Mock API calls

Dependencies: All component tasks
Deliverable: Component test suite

TASK-FE-602: Integration Testing

Priority: High | Estimated Time: 6 hours

Test complete user flows:
- User registration → login flow
- Create workflow → submit flow
- Approve/reject workflow flow
- Add work note flow
- Upload document flow
Test navigation between pages
Test Redux state updates
Test API integration with mock server
Test error scenarios

Dependencies: TASK-FE-601
Deliverable: Integration test suite

TASK-FE-603: Performance Optimization

Priority: Medium | Estimated Time: 4 hours

Implement code splitting with React.lazy
Optimize bundle size (tree shaking)
Lazy load images
Implement virtualization for long lists
Memoize expensive components (React.memo)
Optimize Redux selectors (reselect)
Add service worker for offline support (optional)
Compress assets
Analyze bundle with Vite build analyzer

Dependencies: All frontend tasks
Deliverable: Optimized frontend performance

TASK-FE-604: Deployment Setup

Priority: High | Estimated Time: 4 hours

Create Dockerfile for frontend
Create nginx configuration
Setup environment variables for production
Configure production build (npm run build)
Setup CI/CD pipeline (GitHub Actions)
Configure GCP Cloud Run or Storage
Setup CDN for static assets
Configure HTTPS
Test production build locally

Dependencies: TASK-FE-603
Deliverable: Deployment-ready frontend

Task Dependencies

Critical Path (Must be completed in order)

BACKEND CRITICAL PATH:
TASK-BE-001 → TASK-BE-002 → TASK-BE-003 → TASK-BE-004 
    ↓
TASK-BE-101 → TASK-BE-102 → TASK-BE-103
    ↓
TASK-BE-201 → TASK-BE-202 → TASK-BE-301 → TASK-BE-302
    ↓
TASK-BE-401 → TASK-BE-402

FRONTEND CRITICAL PATH:
TASK-FE-001 → TASK-FE-002 → TASK-FE-003 → TASK-FE-004
    ↓
TASK-FE-101 → TASK-FE-102
    ↓
TASK-FE-201 → TASK-FE-202 → ... → TASK-FE-207 → TASK-FE-208
    ↓
TASK-FE-301 → TASK-FE-303 → TASK-FE-307

Parallel Tasks (Can be done simultaneously)

Sprint 0:

TASK-BE-001 and TASK-FE-001 (both teams can setup repos)
TASK-BE-002 (DB) and TASK-FE-002 (UI framework)

Sprint 1:

TASK-BE-103 (User APIs) and TASK-FE-103 (Password reset)

Sprint 3:

TASK-FE-304, TASK-FE-305, TASK-FE-306 (all tabs can be done in parallel)

Sprint 5:

TASK-FE-501, TASK-FE-502, TASK-FE-503, TASK-FE-504 (all polish tasks)

Revised Timeline & Milestones (Week-Based with Current Status)

Updated Week-by-Week Breakdown

Week	Sprint	Backend Tasks	Backend Time	Frontend Tasks	Frontend Time	Status	Milestone
Week 1	Sprint 0	BE-001 to BE-004	3 days	FE-001, FE-002, FE-006, FE-007 (UI)	0 days (Figma)	🔄 Both In Progress	UI extraction ongoing
Week 2	Sprint 0+1	BE-004 (Complete) BE-101 Start	2 days	FE-003, FE-004, FE-005 FE-101 Start	4 days	🔄 Current Week	Foundation + Auth Start
Week 3	Sprint 1+2	BE-101 to BE-103 BE-201 Start	4 days	FE-101 to FE-104 FE-201 to FE-203	4 days	⏳ Upcoming	Auth Complete + Workflow Start
Week 4	Sprint 2	BE-201, BE-202	4 days	FE-204 to FE-207	4 days	⏳ Upcoming	Workflow wizard functional
Week 5	Sprint 2+3	BE-203, BE-204 BE-301 Start	4 days	FE-208, FE-301, FE-302	4 days	⏳ Upcoming	Workflow + Approvals Start
Week 6	Sprint 3	BE-301, BE-302	4 days	FE-303 to FE-306	4 days	⏳ Upcoming	Approval flow working
Week 7	Sprint 3+4	BE-303, BE-401	4 days	FE-307 to FE-309, FE-401	4 days	⏳ Upcoming	Approvals + Docs Start
Week 8	Sprint 4+5	BE-402, BE-403, BE-501	4 days	FE-402 to FE-404, FE-501	4 days	⏳ Upcoming	Docs + Dashboard
Week 9	Sprint 5+6	BE-502, BE-503, BE-601	4 days	FE-502 to FE-504, FE-601	4 days	⏳ Upcoming	Testing starts
Week 10	Sprint 6	BE-602 to BE-605	4 days	FE-602 to FE-604	4 days	⏳ Upcoming	Testing + Deployment

Revised Timeline:

Frontend: 7-8 weeks (due to API integration work)
Backend: 8 weeks (as planned)
Overall: ~10 weeks total

Task Estimation Summary (Week-Based)

Backend Tasks (Time Estimates in Days/Weeks)

Sprint	Task ID	Task Name	Estimated Time	Status
Sprint 0	BE-001	Repository Setup	0.5 days	🔄 In Progress
	BE-002	Database Schema	1 day	⏳ Pending
	BE-003	Backend Configuration	0.5 days	⏳ Pending
	BE-004	Sequelize ORM Setup	1 day	⏳ Pending
	Sprint 0 Total		3 days
Sprint 1	BE-101	Authentication System	2 days	⏳ Pending
	BE-102	User Management APIs	1 day	⏳ Pending
	BE-103	User Profile	1 day	⏳ Pending
	Sprint 1 Total		4 days
Sprint 2	BE-201	Workflow Creation APIs	2 days	⏳ Pending
	BE-202	Approval Hierarchy	1.5 days	⏳ Pending
	BE-203	Participant Management	1 day	⏳ Pending
	BE-204	Workflow Listing/Filtering	1.5 days	⏳ Pending
	Sprint 2 Total		2 weeks (8 days)
Sprint 3	BE-301	Approval/Rejection Actions	2 days	⏳ Pending
	BE-302	TAT Tracking & Monitoring	2 days	⏳ Pending
	BE-303	Notification System	2 days	⏳ Pending
	Sprint 3 Total		1.5 weeks (6 days)
Sprint 4	BE-401	Document Management	2 days	⏳ Pending
	BE-402	Work Notes & Chat	2 days	⏳ Pending
	BE-403	Activity Log System	1 day	⏳ Pending
	Sprint 4 Total		1 week (5 days)
Sprint 5	BE-501	Dashboard Statistics	1.5 days	⏳ Pending
	BE-502	AI Conclusion Generation	1.5 days	⏳ Pending
	BE-503	Workflow Closure	1 day	⏳ Pending
	Sprint 5 Total		4 days
Sprint 6	BE-601	Unit Testing	2 days	⏳ Pending
	BE-602	Integration Testing	2 days	⏳ Pending
	BE-603	API Documentation	1 day	⏳ Pending
	BE-604	Performance Optimization	1.5 days	⏳ Pending
	BE-605	Deployment Setup	1.5 days	⏳ Pending
	Sprint 6 Total		2 weeks (8 days)
TOTAL BACKEND		25 Tasks	~8 weeks (42 days)

Frontend Tasks (Time Estimates in Days/Weeks)

Sprint	Task ID	Task Name	Estimated Time	Status
Sprint 0	FE-001	Repository Setup	0 days	✅ Complete
	FE-002	UI Framework	0 days	✅ Complete
	FE-003	Redux Store Setup	2 days	❌ NOT STARTED
	FE-004	API Service Layer	1 day	❌ NOT STARTED
	FE-005	Route Guards	1 day	❌ NOT STARTED
	FE-006	Components (Figma UI)	0 days (80% done)	🔄 In Progress
	FE-007	Layout (Figma UI)	0 days (80% done)	🔄 In Progress
	Sprint 0 Actual		1 week (4 days)	16% Done
Sprint 1	FE-101	SSO Callback & Routes	1 day	⏳ Waiting for BE-101
	FE-102	Login/Logout Buttons	0.5 days	⏳ Pending
	FE-103	User Profile Header	1 day	⏳ Pending
	Sprint 1 Total		2.5 days	SSO: No login/signup screens
Sprint 2	FE-201	Wizard Structure + Redux	1 day	🔄 UI Done, Need Redux
	FE-202	Template Selection	0.5 days	🔄 UI Done, Need Logic
	FE-203	Basic Info + Validation	1 day	🔄 UI Done, Need Validation
	FE-204	Approval Workflow + Logic	2 days	🔄 UI Done, Need TAT Logic
	FE-205	Participants + API	1 day	🔄 UI Done, Need API
	FE-206	Documents Upload + API	1 day	🔄 UI Done, Need Upload Logic
	FE-207	Review & Submit + API	1 day	🔄 UI Done, Need API
	FE-208	Full API Integration	2 days	❌ NOT STARTED
	Sprint 2 Revised		2 weeks (9 days)	UI: 80%, Logic: 0%
Sprint 3	FE-301	My Requests + API	1.5 days	🔄 UI Done, Need API
	FE-302	Open/Closed + API	1 day	🔄 UI Done, Need API
	FE-303	Request Detail + API	2 days	🔄 UI Done, Need API
	FE-304	Workflow Tab + API	1 day	🔄 UI Done, Need API
	FE-305	Documents Tab + API	1 day	🔄 UI Done, Need API
	FE-306	Activity Tab + API	1 day	🔄 UI Done, Need API
	FE-307	Approve/Reject + API	1.5 days	🔄 UI Done, Need API
	FE-308	Work Notes + Backend	1 day	🔄 UI + Partial Logic Done
	FE-309	Add Approver/Spectator	1 day	🔄 UI Done, Need API
	Sprint 3 Revised		2 weeks (10 days)	UI: 80%, API: 0%
Sprint 4	FE-401	Notification + Polling	1.5 days	🔄 UI Done, Need API
	FE-402	Dashboard + Charts	2 days	🔄 UI Done, Need API
	FE-403	Conclusion + AI	1 day	🔄 UI Done, Need API
	FE-404	Workflow Closure	1 day	🔄 UI Done, Need API
	Sprint 4 Revised		1 week (5 days)	UI: 80%, API: 0%
Sprint 5	FE-501	Search & Filter	1 day	⏳ Pending
	FE-502	Responsive Design	1 day	⏳ Pending
	FE-503	Loading/Error States	0.5 days	⏳ Pending
	FE-504	Accessibility (A11y)	0.5 days	⏳ Pending
	Sprint 5 Total		3 days
Sprint 6	FE-601	Unit Testing	2 days	⏳ Pending
	FE-602	Integration Testing	1 day	⏳ Pending
	FE-603	Performance Optimization	1 day	⏳ Pending
	FE-604	Deployment Setup	1 day	⏳ Pending
	Sprint 6 Total		1 week (5 days)
TOTAL FRONTEND		40 Tasks	~7 weeks (35 days)	16% Complete (UI Only)

⚠️ REVISED FRONTEND EFFORT BREAKDOWN

Figma UI Extraction vs Actual Development:

Work Category	Figma Extracted	Still Required	Total Time
Visual UI Components	80% Done	20% remaining	1-2 days
Redux Store Setup	0%	100% needed	2-3 days
API Service Layer	0%	100% needed	1 day
Route Guards & Auth	0%	100% needed	1 day
Form Validations	0%	100% needed	3-4 days
API Integration (All Pages)	0%	100% needed	10-12 days
State Management Logic	0%	100% needed	5-6 days
Error Handling	0%	100% needed	2-3 days
Loading States	0%	100% needed	2-3 days
Testing	0%	100% needed	5 days
TOTAL	16%	84%	~35 days

Key Insight:

Figma gave us the "look and feel" (16% of work)
We still need to build the "brain and connections" (84% of work)

Task Summary

Backend Tasks Summary

Sprint 0: 4 tasks (Setup & Infrastructure)
Sprint 1: 3 tasks (Authentication)
Sprint 2: 4 tasks (Workflow Creation)
Sprint 3: 3 tasks (Approvals & Notifications)
Sprint 4: 3 tasks (Documents & Work Notes)
Sprint 5: 3 tasks (Dashboard & AI)
Sprint 6: 5 tasks (Testing & Deployment)

Total Backend Tasks: 25 tasks

Frontend Tasks Summary

Sprint 0: 7 tasks (Setup & Components)
Sprint 1: 4 tasks (Authentication)
Sprint 2: 8 tasks (Workflow Wizard)
Sprint 3: 9 tasks (Request Management)
Sprint 4: 4 tasks (Notifications & Dashboard)
Sprint 5: 4 tasks (Polish & UX)
Sprint 6: 4 tasks (Testing & Deployment)

Total Frontend Tasks: 40 tasks

Notes for Development Team

Backend Team Notes

Standard Login First: Implement email/password authentication before SSO integration
Database First: Complete database schema before starting API development
Testing: Write tests alongside development, not at the end
Documentation: Document all APIs in Swagger as you build them
TAT Logic: TAT calculation is critical - test thoroughly
Notifications: Build notification system early as many features depend on it

Frontend Team Notes

Component Library First: Build reusable components before pages
Redux Structure: Plan Redux structure carefully to avoid refactoring
API Service Layer: Keep all API calls in service files, not in components
Responsive from Start: Build responsive layouts from the beginning
Accessibility: Consider keyboard navigation and screen readers
Loading States: Always show loading indicators for async operations

Key Integration Points

Authentication: Backend must provide JWT tokens, frontend must store and send them
File Upload: Backend accepts multipart/form-data, frontend uses FormData
TAT Display: Backend sends TAT in hours, frontend converts to days/hours for display
Real-time Updates: Use polling (every 30 sec) for notifications and work notes
Error Handling: Backend returns consistent error format, frontend displays user-friendly messages

Risk Management

High Risk Areas

TAT Calculation Logic: Complex business rules for working days vs calendar days
Multi-level Approvals: Ensure workflow progression logic is bulletproof
File Upload: Large files, network issues, storage quotas
Real-time Notifications: Polling vs WebSockets decision
AI Integration: Third-party API dependency for conclusion generation

Mitigation Strategies

TAT: Write comprehensive unit tests, create test scenarios document
Approvals: State machine diagram, thorough testing of all paths
Files: Implement chunked upload, progress indicators, retry logic
Notifications: Start with polling, plan for WebSocket upgrade
AI: Mock AI responses for development, have fallback to manual conclusion

Definition of Done (DoD)

For Backend Tasks

Code written and follows TypeScript best practices
API endpoint tested with Postman/Insomnia
Unit tests written and passing (>80% coverage)
API documented in Swagger
Error handling implemented
Logging added for debugging
Code reviewed and merged to develop branch

For Frontend Tasks

Component/page implemented and styled
Responsive design tested (mobile, tablet, desktop)
Connected to backend API (if applicable)
Loading and error states handled
Component tests written (if reusable)
Accessibility considerations addressed
Code reviewed and merged to develop branch

Getting Started

For Backend Developers

Clone re-workflow-backend repository
Install Node.js 22 LTS and PostgreSQL 16
Run npm install to install dependencies
Create .env file from .env.example
Setup database with schema SQL file
Start development: npm run dev
Pick tasks from Sprint 0 and start building!

For Frontend Developers

Clone re-workflow-frontend repository
Install Node.js 22 LTS
Run npm install to install dependencies
Create .env file from .env.example
Configure API base URL to backend
Start development: npm run dev
Pick tasks from Sprint 0 and start building!

Communication & Coordination

Daily Standup Questions

What did you complete yesterday?
What will you work on today?
Any blockers or dependencies?
Any integration points with other tasks?

Weekly Sync

Review sprint progress
Demo completed features
Discuss upcoming integration points
Adjust timeline if needed

Tools

Project Management: Jira / Linear / Trello
Communication: Slack / Microsoft Teams
Code Review: GitHub Pull Requests
API Testing: Postman (shared collection)
Documentation: Confluence / Notion

📊 Visual Timeline & Current Progress

Project Progress Overview

PROJECT START ─────────────────────────────────── PROJECT END
                  ↓ YOU ARE HERE (Week 2)

Week 1: ████████░░░░  80% 🔄 Frontend Sprint 0 - UI Only (No Functionality)
Week 1: ███████░░░░░  70% 🔄 Backend Sprint 0 In Progress

Week 2: ██░░░░░░░░░░  15% 🔄 Sprint 1 - Authentication (CURRENT)
Week 3: ░░░░░░░░░░░░   0% ⏳ Sprint 2 Part 1 - Workflow Creation
Week 4: ░░░░░░░░░░░░   0% ⏳ Sprint 2 Part 2 - Workflow Creation
Week 5: ░░░░░░░░░░░░   0% ⏳ Sprint 3 Part 1 - Approvals
Week 6: ░░░░░░░░░░░░   0% ⏳ Sprint 3 Part 2 - Approvals
Week 7: ░░░░░░░░░░░░   0% ⏳ Sprint 4 - Documents & Work Notes
Week 8: ░░░░░░░░░░░░   0% ⏳ Sprint 5 - Dashboard & AI
Week 9: ░░░░░░░░░░░░   0% ⏳ Sprint 6 Part 1 - Testing
Week 10: ░░░░░░░░░░░░  0% ⏳ Sprint 6 Part 2 - Deployment

OVERALL PROGRESS: ██░░░░░░░░░░░░░░░░░░  10% Complete (Mostly UI)

⚠️ WARNING: 80% UI ≠ 80% Complete
   - UI extraction is only 20% of total work
   - 80% UI done = 16% of frontend complete
   - Still need: Redux, API integration, validations, business logic

Sprint-by-Sprint Detailed Timeline

🔄 IN PROGRESS: Sprint 0 (Week 1-2) - Frontend

Status: 80% UI EXTRACTED (Visuals Only)

What's Actually Complete:

✅ FE-001: Repository & Environment Setup (100%)
✅ FE-002: UI Framework & Styling (Material-UI configured) (100%)
🔄 FE-003: Redux Store & State Management (0% - NOT STARTED)
🔄 FE-004: API Service Layer (0% - NOT STARTED)
🔄 FE-005: Routing & Navigation Guards (0% - NOT STARTED)
✅ FE-006: Common Components Library - UI Only (80% - Dummy Data)
✅ FE-007: Layout Components - UI Only (80% - Dummy Data)

Achievement:

✅ Visual UI extracted from Figma (80% complete)
✅ Mobile responsive design included
✅ All packages installed and dependencies resolved
❌ But: No Redux, no API calls, no validations, no business logic

Remaining Sprint 0 Work (1 week):

Complete 20% UI extraction (1-2 days)
Setup Redux store and all slices (2-3 days)
Configure Axios service layer (1 day)
Implement route guards (1 day)
Add basic form validations (1-2 days)

Revised Sprint 0 Completion: End of Week 2

🔄 IN PROGRESS: Sprint 0 (Week 1) - Backend

Status: 70% COMPLETE
Completed Tasks:

✅ BE-001: Repository & Environment Setup (70% done)

Remaining Tasks (0.5 weeks):

⏳ BE-001: Complete repository setup (30% remaining)
⏳ BE-002: Database Setup & Schema (1 day)
⏳ BE-003: Backend Configuration (0.5 days)
⏳ BE-004: Sequelize ORM Setup (1 day)

Target Completion: End of Week 1

🔄 CURRENT: Sprint 1 (Week 2) - Authentication

Status: ACTIVE THIS WEEK
Start Date: Week 2 Day 1
Target Completion: Week 2 End

Backend Tasks (4 days):

⏳ BE-101: User Authentication System (2 days)
- JWT configuration
- Register, login, password reset APIs
- Authentication middleware
⏳ BE-102: User Management APIs (1 day)
⏳ BE-103: User Profile Management (1 day)

Frontend Tasks (2 days):

🔄 FE-101: Login Page (0.5 days) - IN PROGRESS
⏳ FE-102: Registration Page (0.5 days)
⏳ FE-103: Forgot/Reset Password (0.5 days)
⏳ FE-104: User Profile & Header (0.5 days)

Milestone: Fully working authentication with login, registration, and user profile.

⏳ UPCOMING: Sprint 2 (Weeks 3-4) - Workflow Creation

Duration: 2 weeks
Frontend Advantage: Wizard UI already complete from Figma!

Week 3 Tasks:

Backend: BE-201 (Workflow APIs), BE-202 (Approval Hierarchy)
Frontend: Connect wizard steps to backend APIs (FE-203, FE-204)

Week 4 Tasks:

Backend: BE-203 (Participants), BE-204 (Filtering)
Frontend: Complete wizard integration (FE-205 to FE-208)

Milestone: Complete workflow creation wizard functional end-to-end.

⏳ UPCOMING: Sprint 3 (Weeks 5-6) - Approvals & Actions

Duration: 2 weeks
Frontend Advantage: Request pages & modals already built!

Week 5 Tasks:

Backend: BE-301 (Approval Actions), BE-302 (TAT Tracking)
Frontend: Connect request listing pages to APIs (FE-301 to FE-303)

Week 6 Tasks:

Backend: BE-303 (Notifications)
Frontend: Connect tabs and modals (FE-304 to FE-309)

Special Note: FE-308 (Work Notes) is ALREADY COMPLETE with full functionality! ✅

Milestone: Full approval workflow operational with notifications.

⏳ UPCOMING: Sprint 4 (Week 7) - Documents & Collaboration

Duration: 1 week
Frontend Advantage: UI already complete, only need API integration!

Backend Tasks (4 days):

BE-401: Document Management (2 days)
BE-402: Work Notes APIs (2 days) - Frontend already has UI!
BE-403: Activity Log System (1 day)

Frontend Tasks (2 days):

Connect document upload/preview to APIs
Connect work notes chat to backend
Wire up activity timeline

Milestone: Documents and collaboration features working.

⏳ UPCOMING: Sprint 5 (Week 8) - Dashboard & Polish

Duration: 1 week

Backend Tasks:

BE-501: Dashboard Statistics (1.5 days)
BE-502: AI Conclusion Generation (1.5 days)
BE-503: Workflow Closure (1 day)

Frontend Tasks:

FE-501: Search & Filter Components (1 day)
FE-502: Responsive Design Polish (1 day)
FE-503: Loading & Error States (0.5 days)
FE-504: Accessibility Improvements (0.5 days)

Milestone: Complete feature set with analytics.

⏳ UPCOMING: Sprint 6 (Weeks 9-10) - Testing & Deployment

Duration: 2 weeks

Week 9 - Testing:

Unit tests (backend & frontend)
Integration tests
API documentation
Bug fixes

Week 10 - Deployment:

Performance optimization
Production deployment setup
CI/CD pipeline
Final QA and go-live

Milestone: Production deployment! 🚀

🎯 Critical Path & Priorities

THIS WEEK (Week 2) - Must Complete:

Backend Priority:
- ✅ Complete BE-001 (finish repo setup)
- 🔥 BE-002: Database schema MUST be done (blocks everything)
- 🔥 BE-101: Authentication APIs (blocks frontend integration)
Frontend Priority:
- 🔄 FE-101: Complete login page integration
- FE-102 to FE-104: Wire up remaining auth pages

NEXT WEEK (Week 3) - Prepare Now:

Review workflow creation requirements
Ensure backend workflow APIs design is ready
Frontend wizard UI is ready (already done ✅), just need backend connection

📈 Velocity & Progress Tracking (REALISTIC)

Completed Work:

Frontend UI: 80% complete (visual components only, NO functionality)
- Translation: 16% of total frontend work (UI is ~20% of effort)
- Still need: Redux, API integration, validations, state management
Frontend Functionality: 5% complete (work notes partial)
Backend: 10% complete (repo setup in progress)
Overall Project: 10% complete (mostly static UI)

⚠️ Reality Check - What "80% UI" Means:

Completed:

Visual components (buttons, inputs, cards, modals)
Layout and styling
Mobile responsive design
Dummy data display

NOT Completed (This is 84% of remaining work):

Redux state management (0%)
API integration (0%)
Form validations (0%)
Error handling (0%)
Loading states (0%)
Business logic (0%)
Authentication (0%)
Route guards (0%)

Estimated Remaining:

Backend: ~8 weeks (42 days remaining)
Frontend: ~7-8 weeks (35 days remaining)
- Redux setup: 3 days
- API integration: 12 days
- Validations: 4 days
- State management: 6 days
- Error/Loading states: 5 days
- Testing: 5 days
Overall: ~10 weeks to production

Time Actually Saved:

Frontend UI Extraction: Saved ~1 week (not 2-3 weeks as initially thought)
- Figma generated HTML/CSS/basic JSX
- Still need all functionality (API, Redux, logic)
Work Notes Feature: UI done, partial functionality (emoji, doc selection)
- Still need: Backend API integration, @mentions, notifications
- Saved: ~2-3 days

🚨 Risks & Mitigation

Current Risks:

Backend Setup Delay: If BE-002 (database) takes longer, it blocks everything
- Mitigation: Prioritize database schema completion this week
API Integration Complexity: Frontend-backend integration may reveal issues
- Mitigation: Early API testing, clear documentation, Postman collections
TAT Calculation Logic: Complex business rules for working days
- Mitigation: Dedicated unit tests, test scenarios document

Advantages We Have:

✅ Frontend UI 80% extracted from Figma (saves ~1 week)
✅ Mobile responsive design included (saves testing time)
✅ Work notes UI + partial functionality (saves 2-3 days)
✅ Clear requirements from documentation
✅ Modern tech stack (TypeScript, React 19, Node.js 22)
✅ No need to design UI (Figma already provided)

Challenges We Face:

❌ False sense of completion: UI looks done but needs 84% more work
❌ Integration complexity: Each page needs API + Redux + validation
❌ Backend dependency: Frontend blocked until APIs are ready
❌ TAT logic complexity: Working days calculation is non-trivial
⚠️ SSO uncertainty: May need to refactor auth later

📅 Key Dates & Milestones

Date	Week	Milestone	Status
Oct 16-20	Week 1	Figma UI Extraction Started	🔄 80% Complete (Visual Only)
Oct 21-25	Week 2	Sprint 0 Complete (Foundation)	🔄 IN PROGRESS
Oct 28 - Nov 1	Week 3	Authentication Working	⏳ Target
Nov 4-8	Week 4	Workflow Creation Started	⏳ Upcoming
Nov 11-15	Week 5	Workflow Creation Complete	⏳ Upcoming
Nov 18-22	Week 6	Approvals 50%	⏳ Upcoming
Nov 25-29	Week 7	Approvals Complete	⏳ Upcoming
Dec 2-6	Week 8	Documents & Work Notes	⏳ Upcoming
Dec 9-13	Week 9	Dashboard & AI	⏳ Upcoming
Dec 16-20	Week 10	Testing Phase	⏳ Upcoming
Dec 23-27	Week 11	PRODUCTION LAUNCH 🚀	⏳ Revised Target

Timeline Adjustment: +1 week due to realistic frontend effort assessment

💡 Recommendations for Success

For Backend Team:

This Week: Focus 100% on database schema (BE-002) - this is critical path
Next Week: Authentication APIs must be solid for frontend integration
Use Swagger: Document APIs as you build them
Test Early: Use Postman collections for quick testing
Communication: Sync with frontend daily on API contracts

For Frontend Team:

🔥 THIS WEEK (CRITICAL): Complete Sprint 0 foundation
- Finish last 20% UI extraction (1-2 days)
- Setup Redux store with ALL slices (2-3 days) ← MUST DO
- Configure Axios service layer (1 day) ← MUST DO
- Implement route guards (1 day)
- Without these, you CANNOT integrate with backend!
Understand the Reality:
- Having UI ≠ Having functionality
- Every page needs:
  - Redux actions/reducers connected
  - API service calls implemented
  - Form validation logic
  - Error handling
  - Loading states
  - Success/failure notifications
- Example: Login page needs ~1 day AFTER backend API is ready
Don't Underestimate Integration:
- Each form needs validation (1-2 hours)
- Each API call needs error handling (1 hour)
- Each list needs loading skeleton (1 hour)
- Each action needs success/error toast (30 min)
- Total: API integration ≈ 30-40% of total frontend work
Prepare for Sprint 1:
- Review auth API contracts from backend team
- Plan Redux auth flow (login → store token → redirect)
- Understand JWT storage strategy
- Plan form validation rules
Work Smart:
- Create reusable hooks (useApi, useForm, useNotification)
- Create reusable validation functions
- Create reusable error handling
- Don't repeat code across pages

For Both Teams:

Daily Standup: Quick 15-min sync every morning
- What did you complete?
- What are you working on today?
- Any blockers?
- Any dependencies on other team?
Integration Points: Test API integration early and often
- Backend: Provide Postman collection with example requests
- Frontend: Test API calls as soon as endpoints are ready
- Don't wait until sprint end to integrate!
Code Review: Review each other's code for consistency
- All PRs need 1 approval before merge
- Check for TypeScript errors
- Check for security issues
- Check for code duplication
Git Workflow: Use feature branches, PR reviews mandatory
- Branch naming: feature/TASK-BE-001-repo-setup
- Commit messages: Follow conventional commits
- Squash commits before merge
Realistic Expectations:
- ✅ You have good UI foundation (16% done)
- ❌ You're not 60% done (common misconception)
- 💪 You have 84% of challenging work ahead
- 🎯 Focus on quality, not speed
- 📅 10-11 weeks is realistic, don't rush

Document Prepared By: .NET Expert Team
Last Updated: October 23, 2025
Status: ✅ Updated with REALISTIC Progress Assessment
Total Estimated Duration: 10-11 weeks (Target: End Dec 2025 / Early Jan 2026)
Current Progress: 10% Complete (Week 2 of 11)
Frontend Reality: 80% UI ≠ 80% Complete (Actually 16% complete)

Quick Reference

Backend Ports

Development: http://localhost:5000
API Docs: http://localhost:5000/api-docs
Health Check: http://localhost:5000/health

Frontend Ports

Development: http://localhost:3000

Databases

PostgreSQL: localhost:5432
Database Name: re_workflow_db

Key Environment Variables

Backend:

NODE_ENV=development
PORT=5000
DB_HOST=localhost
JWT_SECRET=your_secret_key

Frontend:

REACT_APP_API_BASE_URL=http://localhost:5000/api/v1

🎯 FRONTEND DEVELOPER GUIDE: What to Build Each Week

⚠️ REALITY CHECK BEFORE YOU START:

"We have 80% UI from Figma" does NOT mean "We're 80% done"

What it ACTUALLY means:

You have pretty buttons, inputs, and layouts (20% of total work)
You still need to build the "brain" (80% of total work):
- Redux state management
- API integration
- Form validations
- Error handling
- Loading states
- Business logic
- Testing

Current True Completion: 16% (not 80%)

📅 Week-by-Week Frontend Build Plan

WEEK 2 (THIS WEEK - CRITICAL FOUNDATION)

🔥 Priority 1: Complete UI Extraction (1-2 days)

Finish remaining 20% components
Fix any styling bugs
Ensure mobile responsive works on all breakpoints
Deliverable: 100% UI extraction

🔥 Priority 2: Redux Store Setup (2-3 days) ← CANNOT SKIP Create these files:

src/redux/store.ts - Configure Redux store
src/redux/hooks.ts - Typed useDispatch and useSelector
src/redux/slices/authSlice.ts - User auth state
src/redux/slices/workflowSlice.ts - Workflows state
src/redux/slices/approvalSlice.ts - Approvals state
src/redux/slices/notificationSlice.ts - Notifications state
src/redux/slices/documentSlice.ts - Documents state
src/redux/slices/workNoteSlice.ts - Work notes state
src/redux/slices/participantSlice.ts - Participants state
src/redux/slices/uiSlice.ts - UI state (modals, loading)

🔥 Priority 3: Axios Service Layer (1 day) ← CANNOT SKIP Create these files:

src/services/api.ts - Axios instance with interceptors
src/services/auth.service.ts - Auth API calls
src/services/workflow.service.ts - Workflow API calls
src/services/approval.service.ts - Approval API calls
src/services/document.service.ts - Document API calls
src/services/notification.service.ts - Notification API calls
src/services/workNote.service.ts - Work note API calls
src/services/participant.service.ts - Participant API calls
src/services/dashboard.service.ts - Dashboard API calls
src/services/user.service.ts - User API calls

Priority 4: Route Guards (1 day)

Create PrivateRoute component
Create PublicRoute component
Protect all authenticated routes

End of Week 2: Foundation complete, ready for integration

WEEK 3: Authentication Pages Integration

Prerequisite: Backend auth APIs must be ready (BE-101, BE-102)

Login Page (1 day):

Connect form to Redux loginUser action
Add email validation (regex)
Add password validation (required)
Handle form submit
Call auth API via Redux thunk
Store JWT token in localStorage + Redux
Handle errors (401, network errors)
Show loading state on button
Redirect to dashboard on success
Add "Remember Me" functionality
Deliverable: Working login

Registration Page (0.5 days):

Connect form to Redux registerUser action
Validate all fields (name, email, password, employee ID)
Password strength indicator
Confirm password match
Call register API
Show success message
Redirect to login
Deliverable: Working registration

Password Reset (0.5 days):

Forgot password page with email input
Reset password page with new password
Connect to backend APIs
Deliverable: Working password reset

User Profile (0.5 days):

Fetch current user from API
Display in header dropdown
Edit profile modal
Update profile API integration
Deliverable: Working profile management

End of Week 3: Users can login, register, reset password, edit profile

WEEKS 4-5: Workflow Creation Wizard (2 weeks)

Week 4: Steps 1-3 (Core Workflow)

Template Selection (0.5 days):

Connect selection to Redux
Save choice in workflow state
Enable/disable based on selection

Basic Information (1 day):

Connect form to Redux
Validate title (required, max 500 chars)
Validate description (required, max 5000 chars)
Integrate rich text editor
Validate priority selection
Save to Redux workflow state
Complex: Rich text editor integration

Approval Workflow Builder (2-3 days) ← MOST COMPLEX:

Dynamic level creation (add/remove)
User search for @mention
- Call user search API as user types
- Display dropdown with results
- Handle selection
Validate each level:
- Level name (optional)
- Approver (required)
- TAT value (required, > 0)
Real-time TAT calculation:
- Sum all level TATs
- Calculate total hours/days
- Display prominently
Approval flow summary (live preview)
Save all levels to Redux
Validate max 10 levels
Validate unique approvers
Challenge: Complex form with dynamic fields + real-time calculation

Week 5: Steps 4-6 (Finalization)

Participants & Access (1 day):

User search for spectators
Add multiple spectators
Display as chips
Save to Redux
Deliverable: Spectator management

Documents Upload (1 day):

Implement drag-drop (react-dropzone)
Validate file type
Validate file size (10MB)
Show upload progress
Multiple file upload
Google Docs/Sheets links
Save metadata to Redux
Challenge: File upload with progress tracking

Review & Submit (1 day):

Display complete summary from Redux
Edit buttons (navigate back)
Save as Draft:
- Call POST /api/v1/workflows (is_draft=true)
- Save workflow ID
- Navigate to My Requests
Submit Request:
- Upload all documents (multiple API calls)
- Create workflow (POST /api/v1/workflows)
- Add approval levels (multiple POST calls)
- Add spectators (multiple POST calls)
- Submit workflow (PATCH /api/v1/workflows/:id/submit)
- Handle errors at each step
- Show progress indicator
- Navigate to request detail on success
Challenge: Multi-step API orchestration

API Integration & Testing (2 days):

Connect all wizard steps to backend
Handle errors
Test complete flow end-to-end
Fix bugs
Deliverable: Working workflow creation

End of Week 5: Users can create workflows with approvals, spectators, documents

WEEKS 6-7: Request Management & Approval Actions (2 weeks)

Week 6: Request Listing Pages (1 week)

My Requests Page (1.5 days):

Fetch workflows via Redux (GET /api/v1/workflows/my-requests)
Display loading skeleton while fetching
Handle empty state (no requests)
Handle error state
Implement tabs (Total, In Progress, Approved, Rejected, Draft)
Filter requests by tab
Implement search (debounced)
Implement filters (status, priority, date range)
Implement sorting
Implement pagination
Connect click to navigate to detail
Deliverable: Functional request listing

Open & Closed Requests (1 day):

Similar to My Requests
Different API endpoints
Show conclusion remarks for closed requests
Deliverable: All listing pages working

Request Detail Overview (1.5 days):

Fetch workflow details (GET /api/v1/workflows/:id)
Display all information
Fetch and display TAT status
Calculate TAT progress percentage
Color-code progress bar
Display spectators
Show quick actions (based on user role)
Deliverable: Request detail page

Week 7: Tabs & Actions (1 week)

Workflow Tab (1 day):

Fetch approval hierarchy
Display approval timeline
Show status for each level
Display TAT for each level
Show approver comments
Deliverable: Approval timeline view

Documents Tab (1 day):

Fetch documents
Display document list
Implement PDF preview modal
Implement image preview modal
Implement download
Deliverable: Document viewing

Activity Tab (1 day):

Fetch activities
Display timeline
Group by date
Filter by type
Deliverable: Activity timeline

Approve/Reject Modals (1.5 days):

Create modal components
Validate mandatory comments
Call approve/reject APIs
Handle success/errors
Refresh page after action
Deliverable: Approval actions working

Add Approver/Spectator (0.5 days):

User search
Call add APIs
Refresh page
Deliverable: Add participants working

End of Week 7: Complete request management + approval actions

WEEK 8: Documents, Work Notes & Dashboard

Document Upload Integration (1 day):

Connect upload to API
Show upload progress (0-100%)
Handle upload errors
Deliverable: Document upload working

Work Notes API Integration (1 day):

Connect chat to backend API
Fetch messages
Send messages
Add reactions
Parse @mentions
Deliverable: Work notes fully functional

Dashboard (2 days):

Fetch statistics API
Display metric cards
Integrate charts with real data
Fetch recent activities
Fetch pending actions
Deliverable: Working dashboard

End of Week 8: Documents, collaboration, dashboard complete

WEEK 9: Notifications, Filters & Polish

Notification System (1 day):

Fetch notifications from API
Display in bell dropdown
Mark as read
Implement polling (every 30 sec)
Toast for high-priority
Deliverable: Notifications working

Search & Filters (1 day):

Implement search across pages
Implement filter panels
URL query params
Deliverable: Search/filter working

Conclusion & Closure (1 day):

Connect to AI conclusion API
Edit functionality
Close workflow API
Deliverable: Workflow closure working

Responsive & Polish (1 day):

Fix mobile issues
Add loading skeletons everywhere
Add error boundaries
Accessibility improvements

End of Week 9: All features functional

WEEK 10: Testing & Deployment

Testing (3 days):

Write unit tests for components
Write Redux slice tests
Integration tests
Fix bugs found during testing

Deployment (2 days):

Production build
Docker setup
CI/CD pipeline
Deploy to GCP

End of Week 10: Production ready! 🚀

📊 FINAL REALITY CHECK FOR STAKEHOLDERS

Common Misconceptions vs Reality:

Misconception	Reality	Impact
"80% UI = 80% done"	"80% UI = 16% done"	+6 weeks timeline
"Just connect APIs"	"Build Redux, API layer, validations, logic"	+4 weeks effort
"Work notes complete"	"Work notes UI done, need backend integration"	+1 week
"6 weeks total"	"10-11 weeks realistic"	+4-5 weeks
"Launch Dec 15"	"Launch Dec 27 / Early Jan"	+2 weeks

Honest Timeline Assessment:

Optimistic (if everything goes perfect): 9 weeks
Realistic (with normal challenges): 10-11 weeks
Pessimistic (if issues arise): 12-13 weeks

Recommended Target: Early January 2026 (11-12 weeks)

💡 FINAL RECOMMENDATIONS

For Project Manager:

Set realistic expectations with stakeholders
Communicate: "UI looks done but needs integration work"
Timeline: Plan for 10-11 weeks, not 6-8 weeks
Buffer: Add 1-2 weeks buffer for unforeseen issues
Milestones: Weekly demos to show actual progress

For Frontend Team Lead:

This week: Complete Sprint 0 foundation (Redux + API layer)
Don't rush: Build it right, don't cut corners
Reusability: Create hooks and utilities to avoid duplication
Testing: Test as you build, not at the end
Communication: Daily sync with backend on API contracts

For Backend Team Lead:

This week: Database schema is CRITICAL - blocks everything
Documentation: Document APIs in Swagger as you build
Postman: Share collection with frontend team
Testing: Use Postman to test before frontend integration
Communication: Notify frontend when APIs are ready

Success Criteria:

Week 2: ✅ Foundation complete (Redux, API layer, DB)
Week 3: ✅ Authentication working end-to-end
Week 5: ✅ Can create and submit workflows
Week 7: ✅ Can approve/reject workflows
Week 9: ✅ All features functional
Week 11: ✅ Production deployment

🎉 YOU'VE GOT THIS! Focus on building quality software, one sprint at a time. Good luck! 🚀

🎯 EXECUTIVE SUMMARY: Where We Stand (REALISTIC ASSESSMENT)

What's Actually Complete ✅

Frontend UI: 80% extracted via Figma (visual components ONLY)
- ⚠️ This is just HTML/CSS/JSX with dummy data
- No functionality, no API calls, no state management
Frontend Packages: All dependencies installed and resolved
Work Notes Feature: UI complete + basic functionality (emoji, doc selection)
- Still needs: Backend API integration, @mentions, real data
Backend Repository: 70% setup complete
Mobile Responsive: All UI is responsive (320px - 1920px)

What's NOT Complete ❌ (Common Misconception)

Redux Store: 0% - Not even created yet
API Service Layer: 0% - Not configured
Form Validations: 0% - All forms accept any input
API Integration: 0% - Nothing connects to backend
Business Logic: 0% - No TAT calculations, no workflows
Authentication: 0% - Login UI exists but doesn't work
Route Guards: 0% - All routes are publicly accessible
Error Handling: 0% - No error messages
Loading States: 0% - No spinners or skeletons

What's In Progress 🔄

Backend Setup: Completing repository (30% remaining)
Frontend UI Extraction: Completing last 20% of Figma extraction
Work Notes: Adding remaining functionality

What's Critical This Week 🔥

Complete Frontend Sprint 0 (This Week):
- ✅ Finish UI extraction (20% remaining) - 1-2 days
- 🔥 Setup Redux store with all slices - 2-3 days (CRITICAL)
- 🔥 Configure Axios service layer - 1 day (CRITICAL)
- 🔥 Implement route guards - 1 day
- Total: 4-5 days of work
Complete Backend Sprint 0 (This Week):
- 🔥 BE-002: Database schema MUST be done - 1 day (BLOCKS EVERYTHING)
- BE-003: Backend configuration - 0.5 days
- BE-004: Sequelize ORM setup - 1 day
Start Sprint 1 (Next Week):
- Backend: Auth APIs (BE-101)
- Frontend: Connect login/register pages

Time to Production 🚀

Estimated: 9 more weeks (10 weeks total)
Target Launch: End of December 2025 / Early January 2026
Current Progress: 10% complete (realistic)
Confidence Level: Medium (more work than initially thought)

Reality Check 📊

Initial Assumption: "Figma UI = 60% complete"
Reality: "Figma UI = 16% complete"

Why the Gap?

Figma only gives you visual components (20% of work)
Still need to build:
- Redux state management (20% of work)
- API integration (30% of work)
- Validations & logic (20% of work)
- Testing & polish (10% of work)

Calculation:

80% of 20% = 16% total frontend work complete
84% of frontend work still remaining

Key Success Factors 💪

✅ Frontend UI base ready (saves ~1 week)
✅ Mobile responsive from start (saves testing time)
✅ Clear requirements and documentation
✅ Modern, proven tech stack
❌ Still need significant integration work
⏳ Backend and frontend must sync closely

Immediate Next Steps (This Week & Next)

WEEK 2 (Current Week) - Complete Sprint 0

Backend Priority (2.5 days):

🔥 BE-002: Setup PostgreSQL database (1 day) ← CRITICAL - BLOCKS EVERYTHING
- Install PostgreSQL 16
- Create database
- Run schema SQL file (from documentation)
- Create all 15+ tables with indexes
- Setup triggers and views
- Verify database connection
BE-003: Backend configuration (0.5 days)
- Complete Express.js setup
- Configure all middleware
- Setup Winston logger
- Create error handlers
- Test health check endpoint
BE-004: Sequelize ORM setup (1 day)
- Configure Sequelize connection
- Create all TypeScript models
- Define model associations
- Test database queries

Frontend Priority (4 days):

🔥 Complete UI extraction - 20% remaining (1-2 days)
- Finish any incomplete pages
- Fix any styling issues
- Ensure all dummy data displays correctly
🔥 FE-003: Setup Redux Store (2-3 days) ← CRITICAL
- Create src/redux/store.ts
- Create typed hooks (src/redux/hooks.ts)
- Create all Redux slices:
  - authSlice (user, token, isAuthenticated)
  - workflowSlice (workflows, currentWorkflow, drafts)
  - approvalSlice (approvals, currentLevel)
  - notificationSlice (notifications, unreadCount)
  - documentSlice (documents, uploadProgress)
  - workNoteSlice (notes, mentions)
  - participantSlice (participants, spectators)
  - uiSlice (loading, errors, modals)
- Test Redux DevTools
- Setup Redux persist for auth
🔥 FE-004: Configure Axios Service Layer (1 day) ← CRITICAL
- Create src/services/api.ts (Axios instance)
- Configure base URL from .env
- Setup request interceptor (add JWT token to headers)
- Setup response interceptor (handle errors)
- Handle token refresh logic (on 401)
- Create all service files:
  - auth.service.ts
  - workflow.service.ts
  - approval.service.ts
  - document.service.ts
  - notification.service.ts
  - workNote.service.ts
  - participant.service.ts
  - dashboard.service.ts
  - user.service.ts
FE-005: Implement Route Guards (1 day)
- Create PrivateRoute component
- Create PublicRoute component
- Protect all authenticated routes
- Redirect to login if not authenticated
- Redirect to dashboard if already logged in (for login page)

End of Week 2 Target:

✅ Backend: Database ready, ORM working, server running
✅ Frontend: UI 100%, Redux configured, API layer ready, routes protected
✅ Both ready for Sprint 1 (Authentication integration)

WEEK 3 - Sprint 1: Authentication Integration

Backend (4 days):

BE-101: Build authentication APIs (2 days)
- Register, login, logout, token refresh
- Password hashing with bcrypt
- JWT token generation
- Auth middleware
BE-102: User management APIs (1 day)
BE-103: User profile APIs (1 day)

Frontend (2.5 days - waiting for backend):

FE-101: Connect login page to backend (1 day)
- Call POST /api/v1/auth/login
- Store JWT in Redux + localStorage
- Handle errors
- Redirect on success
FE-102: Connect registration page (0.5 days)
FE-103: Connect password reset (0.5 days)
FE-104: Connect user profile (0.5 days)

End of Week 3 Target:

✅ Users can register, login, logout
✅ JWT authentication working
✅ Protected routes functional
✅ User profile management working

📞 Support & Communication

Team Collaboration

Daily Standup: 10:00 AM (15 minutes)
Weekly Demo: Friday 3:00 PM
Integration Sync: As needed (Slack/Teams)

Questions or Blockers?

Backend Lead: Escalate database or API design questions immediately
Frontend Lead: Escalate UI/UX or integration questions
Both Teams: Communicate early and often!

Success Metrics

Sprint Velocity: Track completed vs planned tasks weekly
Code Quality: Maintain >80% test coverage
Integration Success: All APIs tested before frontend integration
Deployment Readiness: All features tested end-to-end

🎉 CONGRATULATIONS! You're off to a great start with 60% of frontend UI already complete! Let's build something amazing! 🚀

Good luck with the development! 💪

182 KiB Raw Permalink Blame History Unescape Escape

RE Workflow Management System - Task Breakdown

Sprint Planning & Task Distribution (Frontend & Backend)

Table of Contents

Project Overview

Technology Stack

Authentication Approach

Current Project Status (As of October 23, 2025)

Frontend Status 🔄

Backend Status 🔄

🔐 SSO Authentication Approach

How SSO Login Works (No Login/Signup Screens Needed)

User Authentication Flow:

What This Means for Development:

⚠️ Frontend Work Reality Check

🎨 Understanding "Figma UI Extraction" vs "Feature Complete"

What Figma Extraction Gives You:

What You Still Need to Build (84% of Frontend Work):

📊 Frontend Effort Distribution Chart

🎯 Typical Frontend Task Breakdown (Example: Login Page)

💡 Key Takeaway for Frontend Team

📋 Realistic Frontend Task List (With Current Status)

Revised Sprint Structure (Week-Based Timeline)

🔄 Sprint 0: Project Setup & Infrastructure (PARTIALLY COMPLETE)

🔄 Sprint 1: SSO Authentication & User Management (CURRENT WEEK)

Sprint 2: Core Workflow Creation

Sprint 3: Approval & Workflow Actions

Sprint 4: Documents & Work Notes

Sprint 5: Dashboard & Reporting

Sprint 6: Testing & Deployment

📖 Sprint Summaries

🚀 Sprint 0: Project Setup & Infrastructure (Week 1)

What This Sprint Delivers:

⚠️ IMPORTANT: Figma UI Extraction Reality

Backend Deliverables:

Frontend Deliverables:

What You Can Use After Sprint 0 (Actually Completes):

🔐 Sprint 1: SSO Authentication & User Management (Week 2-3)

What This Sprint Delivers:

Key Implementation Points:

📝 Sprint 2: Core Workflow Creation (Weeks 3-4)

What This Sprint Delivers:

Key Features:

✅ Sprint 3: Approval & Workflow Actions (Weeks 5-6)

What This Sprint Delivers:

What You Can Do After Sprint 2:

Technical Complexity:

✅ Sprint 3: Approval & Workflow Actions (Weeks 5-6)

What This Sprint Delivers:

Detailed Functionality Breakdown:

What You Can Do After Sprint 3:

Technical Complexity:

📁 Sprint 4: Documents & Work Notes (Week 7)

What This Sprint Delivers:

Frontend Advantage:

Detailed Functionality Breakdown:

What You Can Do After Sprint 4:

📊 Sprint 5: Dashboard & Reporting (Week 8)

What This Sprint Delivers:

Detailed Functionality Breakdown:

What You Can Do After Sprint 5:

🧪 Sprint 6: Testing & Deployment (Weeks 9-10)

Week 9: Testing & Quality Assurance

Week 10: Optimization & Deployment

What You Achieve After Sprint 6:

🎯 Summary: Why Each Sprint Matters

Backend Tasks

SPRINT 0: Backend Setup & Infrastructure

TASK-BE-001: Repository & Environment Setup

TASK-BE-002: Database Setup & Schema

TASK-BE-003: Core Backend Configuration

TASK-BE-004: Sequelize ORM Setup

SPRINT 1: SSO Authentication & User Management

TASK-BE-101: SSO Integration (Awaiting Confirmation)

TASK-BE-102: User Profile Management

SPRINT 2: Core Workflow Creation

TASK-BE-201: Workflow Request Creation APIs

TASK-BE-202: Approval Hierarchy Management

TASK-BE-203: Participant Management

TASK-BE-204: Workflow List & Filtering APIs

182 KiB

Raw Permalink Blame History