multi iteration flow added for re-quotation and multiple io block feature added

.env.local.backup

@@ -0,0 +1,27 @@
+#Local
+VITE_PUBLIC_VAPID_KEY=BBb78N3tSTEw6mPbBmvEDX2bhYEDKPc_zffL-vxPV8FBSmR1qSpy9gdV8zt-WFF-q2NPpVmL4BhbUzLSHVAPjcI
+VITE_BASE_URL=http://localhost:3000
+VITE_API_BASE_URL=http://localhost:3000/api/v1
+VITE_OKTA_CLIENT_ID=0oa18b98aari6I6eo2p8
+VITE_OKTA_DOMAIN=https://royalenfield.okta.com
+
+#Development
+# VITE_PUBLIC_VAPID_KEY=BBb78N3tSTEw6mPbBmvEDX2bhYEDKPc_zffL-vxPV8FBSmR1qSpy9gdV8zt-WFF-q2NPpVmL4BhbUzLSHVAPjcI
+# VITE_BASE_URL=https://re-workflow-nt-dev.siplsolutions.com
+# VITE_API_BASE_URL=https://re-workflow-nt-dev.siplsolutions.com/api/v1
+# VITE_OKTA_CLIENT_ID=0oa18b98aari6I6eo2p8
+# VITE_OKTA_DOMAIN=https://royalenfield.okta.com
+
+#Uat
+# VITE_PUBLIC_VAPID_KEY=BBb78N3tSTEw6mPbBmvEDX2bhYEDKPc_zffL-vxPV8FBSmR1qSpy9gdV8zt-WFF-q2NPpVmL4BhbUzLSHVAPjcI
+# VITE_BASE_URL=https://reflow-uat.royalenfield.com
+# VITE_API_BASE_URL=https://reflow-uat.royalenfield.com/api/v1/
+# VITE_OKTA_CLIENT_ID=0oa2jgzvrpdwx2iqd0h8
+# VITE_OKTA_DOMAIN=https://dev-830839.oktapreview.com
+
+#Production
+# VITE_PUBLIC_VAPID_KEY=BBb78N3tSTEw6mPbBmvEDX2bhYEDKPc_zffL-vxPV8FBSmR1qSpy9gdV8zt-WFF-q2NPpVmL4BhbUzLSHVAPjcI
+# VITE_BASE_URL=https://reflow.royalenfield.com
+# VITE_API_BASE_URL=https://reflow.royalenfield.com/api/v1
+# VITE_OKTA_CLIENT_ID=0oa18b98aari6I6eo2p8
+# VITE_OKTA_DOMAIN=https://royalenfield.okta.com

COMPLETE_MODULAR_ARCHITECTURE.md

@@ -0,0 +1,234 @@
+# Complete Modular Architecture - Self-Contained Flows
+
+## Overview
+
+This architecture ensures that **each flow folder is completely self-contained**. Deleting a flow folder (e.g., `flows/dealer-claim/` or `flows/custom/`) removes **ALL** related code for that flow type. No dependencies remain outside the flow folder.
+
+## Architecture Principles
+
+1. **Complete Self-Containment**: Each flow folder contains ALL its related code
+2. **Zero External Dependencies**: Flow folders don't depend on each other
+3. **Single Point of Entry**: Main RequestDetail routes to flow-specific screens
+4. **True Modularity**: Delete a folder = Remove all related functionality
+
+## Directory Structure
+
+```
+flows/
+├── custom/                          # Custom Request Flow (COMPLETE)
+│   ├── components/
+│   │   ├── request-detail/
+│   │   │   ├── OverviewTab.tsx     # Custom overview
+│   │   │   └── WorkflowTab.tsx     # Custom workflow
+│   │   └── request-creation/
+│   │       └── CreateRequest.tsx  # Custom creation
+│   ├── pages/
+│   │   └── RequestDetail.tsx      # COMPLETE Custom RequestDetail screen
+│   ├── hooks/                       # Custom-specific hooks (future)
+│   ├── services/                    # Custom-specific services (future)
+│   ├── utils/                       # Custom-specific utilities (future)
+│   ├── types/                       # Custom-specific types (future)
+│   └── index.ts                     # Exports all Custom components
+│
+├── dealer-claim/                    # Dealer Claim Flow (COMPLETE)
+│   ├── components/
+│   │   ├── request-detail/
+│   │   │   ├── OverviewTab.tsx     # Dealer claim overview
+│   │   │   ├── WorkflowTab.tsx     # Dealer claim workflow
+│   │   │   ├── IOTab.tsx           # IO management
+│   │   │   ├── claim-cards/        # All dealer claim cards
+│   │   │   └── modals/             # All dealer claim modals
+│   │   └── request-creation/
+│   │       └── ClaimManagementWizard.tsx
+│   ├── pages/
+│   │   └── RequestDetail.tsx       # COMPLETE Dealer Claim RequestDetail screen
+│   ├── hooks/                       # Dealer claim hooks (future)
+│   ├── services/                    # Dealer claim services (future)
+│   ├── utils/                       # Dealer claim utilities (future)
+│   ├── types/                       # Dealer claim types (future)
+│   └── index.ts                     # Exports all Dealer Claim components
+│
+├── shared/                           # Shared Components (Flow-Agnostic)
+│   └── components/
+│       └── request-detail/
+│           ├── DocumentsTab.tsx     # Used by all flows
+│           ├── ActivityTab.tsx      # Used by all flows
+│           ├── WorkNotesTab.tsx     # Used by all flows
+│           ├── SummaryTab.tsx       # Used by all flows
+│           ├── RequestDetailHeader.tsx
+│           ├── QuickActionsSidebar.tsx
+│           └── RequestDetailModals.tsx
+│
+└── index.ts                         # Flow registry and routing utilities
+```
+
+## How It Works
+
+### Main RequestDetail Router
+
+The main `pages/RequestDetail/RequestDetail.tsx` is now a **simple router**:
+
+```typescript
+// 1. Fetches request to determine flow type
+const flowType = getRequestFlowType(apiRequest);
+
+// 2. Gets the appropriate RequestDetail screen from flow registry
+const RequestDetailScreen = getRequestDetailScreen(flowType);
+
+// 3. Renders the flow-specific screen
+return <RequestDetailScreen {...props} />;
+```
+
+### Flow-Specific RequestDetail Screens
+
+Each flow has its **own complete RequestDetail screen**:
+
+- `flows/custom/pages/RequestDetail.tsx` - Complete custom request detail
+- `flows/dealer-claim/pages/RequestDetail.tsx` - Complete dealer claim detail
+
+Each screen:
+- Uses its own flow-specific components
+- Uses shared components from `flows/shared/`
+- Is completely self-contained
+- Can be deleted without affecting other flows
+
+## Deleting a Flow Type
+
+To completely remove a flow type (e.g., Dealer Claim):
+
+### Step 1: Delete the Flow Folder
+```bash
+# Delete the entire folder
+rm -rf src/flows/dealer-claim/
+```
+
+### Step 2: Update Flow Registry
+```typescript
+// src/flows/index.ts
+export const FlowRegistry = {
+  CUSTOM: CustomFlow,
+  // DEALER_CLAIM removed - all code is gone!
+} as const;
+
+export function getRequestDetailScreen(flowType: RequestFlowType) {
+  switch (flowType) {
+    // case 'DEALER_CLAIM': removed
+    case 'CUSTOM':
+    default:
+      return CustomFlow.CustomRequestDetail;
+  }
+}
+```
+
+### Step 3: Update Type Definitions (Optional)
+```typescript
+// src/utils/requestTypeUtils.ts
+export type RequestFlowType = 'CUSTOM'; // 'DEALER_CLAIM' removed
+```
+
+**That's it!** All dealer claim related code is gone:
+- ✅ RequestDetail screen deleted
+- ✅ All components deleted
+- ✅ All modals deleted
+- ✅ All cards deleted
+- ✅ All creation wizards deleted
+- ✅ No orphaned code remains
+
+## What's Inside Each Flow Folder
+
+### Custom Flow (`flows/custom/`)
+- ✅ Request Detail Screen (`pages/RequestDetail.tsx`)
+- ✅ Request Detail Components (OverviewTab, WorkflowTab)
+- ✅ Request Creation Component (CreateRequest)
+- 🔜 Custom-specific hooks
+- 🔜 Custom-specific services
+- 🔜 Custom-specific utilities
+- 🔜 Custom-specific types
+
+### Dealer Claim Flow (`flows/dealer-claim/`)
+- ✅ Request Detail Screen (`pages/RequestDetail.tsx`)
+- ✅ Request Detail Components (OverviewTab, WorkflowTab, IOTab)
+- ✅ Request Detail Cards (5 cards)
+- ✅ Request Detail Modals (7 modals)
+- ✅ Request Creation Component (ClaimManagementWizard)
+- 🔜 Dealer claim-specific hooks
+- 🔜 Dealer claim-specific services
+- 🔜 Dealer claim-specific utilities
+- 🔜 Dealer claim-specific types
+
+## Benefits
+
+1. **True Modularity**: Delete folder = Remove all functionality
+2. **No Orphaned Code**: All related code is in one place
+3. **Easy Maintenance**: Find everything for a flow in its folder
+4. **Independent Development**: Work on flows without affecting others
+5. **Clear Boundaries**: Know exactly what belongs to which flow
+6. **Simple Removal**: Remove a flow type in 2 steps
+
+## File Organization Rules
+
+### ✅ Flow-Specific → Flow Folder
+- RequestDetail screen → `flows/{flow}/pages/RequestDetail.tsx`
+- Request detail components → `flows/{flow}/components/request-detail/`
+- Request creation → `flows/{flow}/components/request-creation/`
+- Flow-specific hooks → `flows/{flow}/hooks/`
+- Flow-specific services → `flows/{flow}/services/`
+- Flow-specific utils → `flows/{flow}/utils/`
+- Flow-specific types → `flows/{flow}/types/`
+
+### ✅ Shared → Shared Folder
+- Components used by ALL flows → `flows/shared/components/`
+
+### ✅ Routing → Main RequestDetail
+- Flow detection and routing → `pages/RequestDetail/RequestDetail.tsx`
+
+## Example: Adding a New Flow Type
+
+1. **Create folder structure**:
+   ```
+   flows/vendor-payment/
+   ├── components/
+   │   ├── request-detail/
+   │   └── request-creation/
+   ├── pages/
+   │   └── RequestDetail.tsx  # Complete screen
+   └── index.ts
+   ```
+
+2. **Update registry** (`flows/index.ts`):
+   ```typescript
+   import * as VendorPaymentFlow from './vendor-payment';
+   
+   export const FlowRegistry = {
+     CUSTOM: CustomFlow,
+     DEALER_CLAIM: DealerClaimFlow,
+     VENDOR_PAYMENT: VendorPaymentFlow,
+   };
+   ```
+
+3. **That's it!** The flow is now plug-and-play.
+
+## Example: Removing a Flow Type
+
+1. **Delete folder**: `rm -rf flows/dealer-claim/`
+2. **Update registry**: Remove from `FlowRegistry` and `getRequestDetailScreen()`
+3. **Done!** All dealer claim code is removed.
+
+## Current Status
+
+✅ **Completed**:
+- Custom flow folder with RequestDetail screen
+- Dealer claim flow folder with RequestDetail screen
+- Main RequestDetail router
+- Flow registry with routing
+- Shared components folder
+
+🔜 **Future Enhancements**:
+- Move flow-specific hooks to flow folders
+- Move flow-specific services to flow folders
+- Move flow-specific utilities to flow folders
+- Move flow-specific types to flow folders
+
+## Conclusion
+
+The architecture is now **truly modular and self-contained**. Each flow folder is a complete, independent module. Deleting a folder removes all related code with zero dependencies remaining. This makes the codebase maintainable, scalable, and easy to understand.

FLOW_DELETION_GUIDE.md

@@ -0,0 +1,194 @@
+# Flow Deletion Guide - Complete Removal
+
+## Overview
+
+This guide explains how to completely remove a flow type from the application. The architecture ensures that **deleting a flow folder removes ALL related code** with zero dependencies remaining.
+
+## Architecture Guarantee
+
+✅ **Each flow folder is completely self-contained**
+- All components, screens, hooks, services, utils, types are in the flow folder
+- No dependencies on the flow folder from outside (except the registry)
+- Deleting a folder = Removing all related functionality
+
+## How to Delete a Flow Type
+
+### Example: Removing Dealer Claim Flow
+
+#### Step 1: Delete the Flow Folder
+```bash
+# Delete the entire dealer-claim folder
+rm -rf src/flows/dealer-claim/
+```
+
+**What gets deleted:**
+- ✅ `pages/RequestDetail.tsx` - Complete dealer claim detail screen
+- ✅ All request detail components (OverviewTab, WorkflowTab, IOTab)
+- ✅ All claim cards (5 cards)
+- ✅ All modals (7 modals)
+- ✅ Request creation wizard
+- ✅ All future hooks, services, utils, types
+
+#### Step 2: Update Flow Registry
+```typescript
+// src/flows/index.ts
+
+// Remove import
+// import * as DealerClaimFlow from './dealer-claim';
+
+// Update FlowRegistry
+export const FlowRegistry = {
+  CUSTOM: CustomFlow,
+  // DEALER_CLAIM: DealerClaimFlow,  // REMOVED
+} as const;
+
+// Update getRequestDetailScreen()
+export function getRequestDetailScreen(flowType: RequestFlowType) {
+  switch (flowType) {
+    // case 'DEALER_CLAIM':           // REMOVED
+    //   return DealerClaimFlow.DealerClaimRequestDetail;
+    case 'CUSTOM':
+    default:
+      return CustomFlow.CustomRequestDetail;
+  }
+}
+
+// Update other functions similarly
+export function getOverviewTab(flowType: RequestFlowType) {
+  switch (flowType) {
+    // case 'DEALER_CLAIM':           // REMOVED
+    //   return DealerClaimFlow.DealerClaimOverviewTab;
+    case 'CUSTOM':
+    default:
+      return CustomFlow.CustomOverviewTab;
+  }
+}
+```
+
+#### Step 3: Update Type Definitions (Optional)
+```typescript
+// src/utils/requestTypeUtils.ts
+
+// Remove from type union
+export type RequestFlowType = 'CUSTOM'; // 'DEALER_CLAIM' removed
+
+// Remove detection function (optional - can keep for backward compatibility)
+// export function isDealerClaimRequest(request: any): boolean { ... }
+
+// Update getRequestFlowType()
+export function getRequestFlowType(request: any): RequestFlowType {
+  // if (isDealerClaimRequest(request)) return 'DEALER_CLAIM';  // REMOVED
+  return 'CUSTOM';
+}
+```
+
+#### Step 4: Update Navigation (If Needed)
+```typescript
+// src/utils/requestNavigation.ts
+
+export function navigateToCreateRequest(
+  navigate: NavigateFunction,
+  flowType: RequestFlowType = 'CUSTOM'
+): void {
+  // Remove dealer claim case
+  // if (flowType === 'DEALER_CLAIM') {
+  //   return '/claim-management';
+  // }
+  return '/new-request';
+}
+```
+
+#### Step 5: Remove Routes (If Needed)
+```typescript
+// src/App.tsx
+
+// Remove dealer claim route
+// <Route 
+//   path="/claim-management" 
+//   element={<ClaimManagementWizard ... />} 
+// />
+```
+
+**That's it!** All dealer claim code is completely removed.
+
+## Verification Checklist
+
+After deleting a flow, verify:
+
+- [ ] Flow folder deleted
+- [ ] FlowRegistry updated
+- [ ] All `get*()` functions updated
+- [ ] Type definitions updated (optional)
+- [ ] Navigation updated (if needed)
+- [ ] Routes removed (if needed)
+- [ ] No broken imports
+- [ ] Application compiles successfully
+- [ ] No references to deleted flow in codebase
+
+## What Happens When You Delete a Flow
+
+### ✅ Removed
+- Complete RequestDetail screen
+- All flow-specific components
+- All flow-specific modals
+- All flow-specific cards
+- Request creation wizard
+- All flow-specific code
+
+### ✅ Still Works
+- Other flow types continue working
+- Shared components remain
+- Main RequestDetail router handles remaining flows
+- Navigation for remaining flows
+
+### ✅ No Orphaned Code
+- No broken imports
+- No dangling references
+- No unused components
+- Clean removal
+
+## Current Flow Structure
+
+### Custom Flow (`flows/custom/`)
+**Contains:**
+- `pages/RequestDetail.tsx` - Complete custom request detail screen
+- `components/request-detail/` - Custom detail components
+- `components/request-creation/` - Custom creation component
+
+**To remove:** Delete `flows/custom/` folder and update registry
+
+### Dealer Claim Flow (`flows/dealer-claim/`)
+**Contains:**
+- `pages/RequestDetail.tsx` - Complete dealer claim detail screen
+- `components/request-detail/` - Dealer claim detail components
+- `components/request-detail/claim-cards/` - 5 claim cards
+- `components/request-detail/modals/` - 7 modals
+- `components/request-creation/` - Claim management wizard
+
+**To remove:** Delete `flows/dealer-claim/` folder and update registry
+
+## Benefits of This Architecture
+
+1. **True Modularity**: Each flow is independent
+2. **Easy Removal**: Delete folder + update registry = Done
+3. **No Side Effects**: Removing one flow doesn't affect others
+4. **Clear Ownership**: Know exactly what belongs to which flow
+5. **Maintainable**: All related code in one place
+6. **Scalable**: Easy to add new flows
+
+## Example: Complete Removal
+
+```bash
+# 1. Delete folder
+rm -rf src/flows/dealer-claim/
+
+# 2. Update registry (remove 3 lines)
+# 3. Update type (remove 1 line)
+# 4. Done! All dealer claim code is gone.
+```
+
+**Time to remove a flow:** ~2 minutes
+
+## Conclusion
+
+The architecture ensures that **deleting a flow folder removes ALL related code**. There are no dependencies, no orphaned files, and no cleanup needed. Each flow is a complete, self-contained module that can be added or removed independently.

FLOW_SEGREGATION_COMPLETE.md

@@ -0,0 +1,220 @@
+# Complete Flow Segregation - Implementation Summary
+
+## Overview
+
+This document describes the **complete segregation** of request flows into dedicated folders. Each flow type (CUSTOM, DEALER_CLAIM) now has ALL its related components, hooks, services, utilities, and types in its own folder. Only truly shared components remain in the `shared/` folder.
+
+## What Was Done
+
+### 1. Created Complete Folder Structure
+
+#### Custom Flow (`src/flows/custom/`)
+```
+custom/
+├── components/
+│   ├── request-detail/
+│   │   ├── OverviewTab.tsx          # Custom request overview
+│   │   └── WorkflowTab.tsx          # Custom request workflow
+│   └── request-creation/
+│       └── CreateRequest.tsx        # Custom request creation
+└── index.ts                         # Exports all custom components
+```
+
+#### Dealer Claim Flow (`src/flows/dealer-claim/`)
+```
+dealer-claim/
+├── components/
+│   ├── request-detail/
+│   │   ├── OverviewTab.tsx          # Dealer claim overview
+│   │   ├── WorkflowTab.tsx          # Dealer claim workflow
+│   │   ├── IOTab.tsx                # IO management (dealer claim specific)
+│   │   ├── claim-cards/             # All dealer claim cards
+│   │   │   ├── ActivityInformationCard.tsx
+│   │   │   ├── DealerInformationCard.tsx
+│   │   │   ├── ProcessDetailsCard.tsx
+│   │   │   ├── ProposalDetailsCard.tsx
+│   │   │   └── RequestInitiatorCard.tsx
+│   │   └── modals/                  # All dealer claim modals
+│   │       ├── CreditNoteSAPModal.tsx
+│   │       ├── DealerCompletionDocumentsModal.tsx
+│   │       ├── DealerProposalSubmissionModal.tsx
+│   │       ├── DeptLeadIOApprovalModal.tsx
+│   │       ├── EditClaimAmountModal.tsx
+│   │       ├── EmailNotificationTemplateModal.tsx
+│   │       └── InitiatorProposalApprovalModal.tsx
+│   └── request-creation/
+│       └── ClaimManagementWizard.tsx # Dealer claim creation
+└── index.ts                         # Exports all dealer claim components
+```
+
+#### Shared Components (`src/flows/shared/`)
+```
+shared/
+└── components/
+    └── request-detail/
+        ├── DocumentsTab.tsx         # Used by all flows
+        ├── ActivityTab.tsx          # Used by all flows
+        ├── WorkNotesTab.tsx         # Used by all flows
+        ├── SummaryTab.tsx           # Used by all flows
+        ├── RequestDetailHeader.tsx  # Used by all flows
+        ├── QuickActionsSidebar.tsx  # Used by all flows
+        └── RequestDetailModals.tsx  # Used by all flows
+```
+
+### 2. Updated Flow Registry
+
+The flow registry (`src/flows/index.ts`) now:
+- Exports all flow modules
+- Provides utility functions to get flow-specific components
+- Includes `getCreateRequestComponent()` for request creation
+- Exports `SharedComponents` for shared components
+
+### 3. Updated RequestDetail Component
+
+The `RequestDetail` component now:
+- Uses flow registry to get flow-specific components
+- Imports shared components from `SharedComponents`
+- Dynamically loads appropriate tabs based on flow type
+- Maintains backward compatibility
+
+## File Organization Rules
+
+### ✅ Flow-Specific Files → Flow Folders
+
+**Custom Flow:**
+- Custom request creation wizard
+- Custom request detail tabs (Overview, Workflow)
+- Custom request hooks (future)
+- Custom request services (future)
+- Custom request utilities (future)
+- Custom request types (future)
+
+**Dealer Claim Flow:**
+- Dealer claim creation wizard
+- Dealer claim detail tabs (Overview, Workflow, IO)
+- Dealer claim cards (Activity, Dealer, Process, Proposal, Initiator)
+- Dealer claim modals (all 7 modals)
+- Dealer claim hooks (future)
+- Dealer claim services (future)
+- Dealer claim utilities (future)
+- Dealer claim types (future)
+
+### ✅ Shared Files → Shared Folder
+
+**Shared Components:**
+- DocumentsTab (used by all flows)
+- ActivityTab (used by all flows)
+- WorkNotesTab (used by all flows)
+- SummaryTab (used by all flows)
+- RequestDetailHeader (used by all flows)
+- QuickActionsSidebar (used by all flows)
+- RequestDetailModals (used by all flows)
+
+## Usage Examples
+
+### Getting Flow-Specific Components
+
+```typescript
+import { getOverviewTab, getWorkflowTab, getCreateRequestComponent } from '@/flows';
+import { getRequestFlowType } from '@/utils/requestTypeUtils';
+
+const flowType = getRequestFlowType(request);
+const OverviewTab = getOverviewTab(flowType);
+const WorkflowTab = getWorkflowTab(flowType);
+const CreateRequest = getCreateRequestComponent(flowType);
+```
+
+### Using Shared Components
+
+```typescript
+import { SharedComponents } from '@/flows';
+
+const { DocumentsTab, ActivityTab, WorkNotesTab, SummaryTab } = SharedComponents;
+```
+
+### Direct Access to Flow Components
+
+```typescript
+import { CustomFlow, DealerClaimFlow } from '@/flows';
+
+// Custom flow
+<CustomFlow.CustomOverviewTab {...props} />
+<CustomFlow.CustomCreateRequest {...props} />
+
+// Dealer claim flow
+<DealerClaimFlow.DealerClaimOverviewTab {...props} />
+<DealerClaimFlow.IOTab {...props} />
+<DealerClaimFlow.ClaimManagementWizard {...props} />
+```
+
+## Benefits
+
+1. **Complete Segregation**: Each flow is completely isolated
+2. **Easy Navigation**: All files for a flow type are in one place
+3. **Maintainability**: Changes to one flow don't affect others
+4. **Scalability**: Easy to add new flow types
+5. **Clarity**: Clear separation between flow-specific and shared code
+6. **Type Safety**: TypeScript ensures correct usage
+
+## Next Steps (Future Enhancements)
+
+1. **Move Flow-Specific Hooks**
+   - Custom hooks → `flows/custom/hooks/`
+   - Dealer claim hooks → `flows/dealer-claim/hooks/`
+
+2. **Move Flow-Specific Services**
+   - Custom services → `flows/custom/services/`
+   - Dealer claim services → `flows/dealer-claim/services/`
+
+3. **Move Flow-Specific Utilities**
+   - Custom utilities → `flows/custom/utils/`
+   - Dealer claim utilities → `flows/dealer-claim/utils/`
+
+4. **Move Flow-Specific Types**
+   - Custom types → `flows/custom/types/`
+   - Dealer claim types → `flows/dealer-claim/types/`
+
+## Files Created
+
+### Custom Flow
+- `src/flows/custom/components/request-detail/OverviewTab.tsx`
+- `src/flows/custom/components/request-detail/WorkflowTab.tsx`
+- `src/flows/custom/components/request-creation/CreateRequest.tsx`
+- `src/flows/custom/index.ts` (updated)
+
+### Dealer Claim Flow
+- `src/flows/dealer-claim/components/request-detail/OverviewTab.tsx`
+- `src/flows/dealer-claim/components/request-detail/WorkflowTab.tsx`
+- `src/flows/dealer-claim/components/request-detail/IOTab.tsx`
+- `src/flows/dealer-claim/components/request-detail/claim-cards/index.ts`
+- `src/flows/dealer-claim/components/request-detail/modals/index.ts`
+- `src/flows/dealer-claim/components/request-creation/ClaimManagementWizard.tsx`
+- `src/flows/dealer-claim/index.ts` (updated)
+
+### Shared Components
+- `src/flows/shared/components/request-detail/DocumentsTab.tsx`
+- `src/flows/shared/components/request-detail/ActivityTab.tsx`
+- `src/flows/shared/components/request-detail/WorkNotesTab.tsx`
+- `src/flows/shared/components/request-detail/SummaryTab.tsx`
+- `src/flows/shared/components/request-detail/RequestDetailHeader.tsx`
+- `src/flows/shared/components/request-detail/QuickActionsSidebar.tsx`
+- `src/flows/shared/components/request-detail/RequestDetailModals.tsx`
+- `src/flows/shared/components/index.ts` (updated)
+
+### Registry
+- `src/flows/index.ts` (updated with new structure)
+
+## Files Modified
+
+- `src/pages/RequestDetail/RequestDetail.tsx` - Uses new flow structure
+- `src/flows/README.md` - Updated with complete segregation documentation
+
+## Conclusion
+
+The complete segregation is now in place. Each flow type has its own dedicated folder with all related components. This makes it easy to:
+- Find all files related to a specific flow type
+- Maintain and update flow-specific code
+- Add new flow types without affecting existing ones
+- Understand what is shared vs. flow-specific
+
+The architecture is now truly modular and plug-and-play!

FLOW_STRUCTURE_AT_SRC_LEVEL.md

@@ -0,0 +1,174 @@
+# Flow Structure at Source Level - Complete Guide
+
+## Overview
+
+Flow folders are now at the **`src/` level** for maximum visibility and easy removal. This makes it immediately clear what flows exist and makes deletion trivial.
+
+## Directory Structure
+
+```
+src/
+├── custom/                    # ✅ Custom Request Flow
+│   ├── components/
+│   │   ├── request-detail/   # Custom detail components
+│   │   └── request-creation/ # Custom creation component
+│   ├── pages/
+│   │   └── RequestDetail.tsx # Complete custom request detail screen
+│   └── index.ts              # Exports all custom components
+│
+├── dealer-claim/              # ✅ Dealer Claim Flow
+│   ├── components/
+│   │   ├── request-detail/   # Dealer claim detail components
+│   │   │   ├── claim-cards/   # 5 claim cards
+│   │   │   └── modals/        # 7 modals
+│   │   └── request-creation/ # Claim management wizard
+│   ├── pages/
+│   │   └── RequestDetail.tsx # Complete dealer claim detail screen
+│   └── index.ts              # Exports all dealer claim components
+│
+├── shared/                    # ✅ Shared Components
+│   └── components/
+│       └── request-detail/    # Components used by all flows
+│
+└── flows.ts                   # ✅ Flow registry and routing
+```
+
+## Key Benefits
+
+### 1. Maximum Visibility
+- Flow folders are directly visible at `src/` level
+- No nested paths to navigate
+- Clear separation from other code
+
+### 2. Easy Removal
+- Delete `src/custom/` → All custom code gone
+- Delete `src/dealer-claim/` → All dealer claim code gone
+- Update `src/flows.ts` → Done!
+
+### 3. Complete Self-Containment
+- Each flow folder contains ALL its code
+- No dependencies outside the folder (except registry)
+- Future hooks, services, utils, types go in flow folders
+
+## How to Use
+
+### Importing Flow Components
+
+```typescript
+// From flow registry
+import { getRequestDetailScreen, CustomFlow, DealerClaimFlow } from '@/flows';
+
+// Direct from flow folders
+import { CustomRequestDetail } from '@/custom';
+import { DealerClaimRequestDetail } from '@/dealer-claim';
+
+// Shared components
+import { SharedComponents } from '@/shared/components';
+```
+
+### Main RequestDetail Router
+
+The main `src/pages/RequestDetail/RequestDetail.tsx` routes to flow-specific screens:
+
+```typescript
+const flowType = getRequestFlowType(apiRequest);
+const RequestDetailScreen = getRequestDetailScreen(flowType);
+return <RequestDetailScreen {...props} />;
+```
+
+## Deleting a Flow
+
+### Step 1: Delete Folder
+```bash
+# Delete entire flow folder
+rm -rf src/dealer-claim/
+```
+
+### Step 2: Update Registry
+```typescript
+// src/flows.ts
+// Remove: import * as DealerClaimFlow from './dealer-claim';
+// Remove: DEALER_CLAIM: DealerClaimFlow,
+// Update: getRequestDetailScreen() to remove dealer claim case
+```
+
+**That's it!** All dealer claim code is completely removed.
+
+## File Locations
+
+### Custom Flow (`src/custom/`)
+- `pages/RequestDetail.tsx` - Complete custom request detail screen
+- `components/request-detail/OverviewTab.tsx`
+- `components/request-detail/WorkflowTab.tsx`
+- `components/request-creation/CreateRequest.tsx`
+- `index.ts` - Exports all custom components
+
+### Dealer Claim Flow (`src/dealer-claim/`)
+- `pages/RequestDetail.tsx` - Complete dealer claim detail screen
+- `components/request-detail/OverviewTab.tsx`
+- `components/request-detail/WorkflowTab.tsx`
+- `components/request-detail/IOTab.tsx`
+- `components/request-detail/claim-cards/` - 5 cards
+- `components/request-detail/modals/` - 7 modals
+- `components/request-creation/ClaimManagementWizard.tsx`
+- `index.ts` - Exports all dealer claim components
+
+### Shared Components (`src/shared/`)
+- `components/request-detail/DocumentsTab.tsx`
+- `components/request-detail/ActivityTab.tsx`
+- `components/request-detail/WorkNotesTab.tsx`
+- `components/request-detail/SummaryTab.tsx`
+- `components/request-detail/RequestDetailHeader.tsx`
+- `components/request-detail/QuickActionsSidebar.tsx`
+- `components/request-detail/RequestDetailModals.tsx`
+- `components/index.ts` - Exports all shared components
+
+### Flow Registry (`src/flows.ts`)
+- FlowRegistry mapping
+- `getRequestDetailScreen()` - Routes to flow-specific screens
+- `getOverviewTab()` - Gets flow-specific overview tabs
+- `getWorkflowTab()` - Gets flow-specific workflow tabs
+- `getCreateRequestComponent()` - Gets flow-specific creation components
+
+## Import Examples
+
+```typescript
+// Flow registry
+import { getRequestDetailScreen } from '@/flows';
+
+// Direct flow imports
+import { CustomRequestDetail } from '@/custom';
+import { DealerClaimRequestDetail } from '@/dealer-claim';
+
+// Shared components
+import { SharedComponents } from '@/shared/components';
+const { DocumentsTab, ActivityTab } = SharedComponents;
+```
+
+## Adding a New Flow
+
+1. **Create folder**: `src/vendor-payment/`
+2. **Create structure**:
+   ```
+   src/vendor-payment/
+   ├── components/
+   │   ├── request-detail/
+   │   └── request-creation/
+   ├── pages/
+   │   └── RequestDetail.tsx
+   └── index.ts
+   ```
+3. **Update `src/flows.ts`**:
+   ```typescript
+   import * as VendorPaymentFlow from './vendor-payment';
+   
+   export const FlowRegistry = {
+     CUSTOM: CustomFlow,
+     DEALER_CLAIM: DealerClaimFlow,
+     VENDOR_PAYMENT: VendorPaymentFlow,
+   };
+   ```
+
+## Conclusion
+
+The architecture is now **completely modular at the source level**. Flow folders are directly under `src/` for maximum visibility, easy navigation, and trivial removal. Each flow is a complete, self-contained module.

IMPLEMENTATION_GUIDE.md

@@ -1,564 +0,0 @@
-# Request Detail Template System - Implementation Guide
-
-## Overview
-
-This implementation provides a **flexible, reusable, template-driven architecture** for the RequestDetail component, enabling multiple user types (dealers, vendors, standard users) with customizable views, tabs, and behaviors.
-
-## 📁 What Has Been Created
-
-### Core Architecture Files
-
-```
-src/pages/RequestDetail/
-├── types/
-│   └── template.types.ts              ✅ Type definitions for template system
-├── templates/
-│   ├── index.ts                       ✅ Template registry and selector
-│   ├── standardTemplate.ts            ✅ Standard workflow template
-│   ├── dealerClaimTemplate.ts         ✅ Dealer claim template with IO tab
-│   └── vendorTemplate.ts              ✅ Vendor request template
-├── components/
-│   └── tabs/
-│       └── IOTab.tsx                  ✅ IO budget management tab for dealers
-├── examples/
-│   └── CustomTemplateExample.tsx      ✅ Examples for creating custom templates
-├── RequestDetailTemplated.tsx         ✅ New template-driven component
-├── RequestDetail.tsx                  ✅ Original component (unchanged)
-├── index.ts                           ✅ Module exports
-└── README_TEMPLATES.md                ✅ Comprehensive documentation
-```
-
-### Key Features Implemented
-
-✅ **Template System**
-- Dynamic template selection based on request type and user role
-- Configurable tabs, headers, and quick actions
-- Role-based access control at template and tab level
-
-✅ **IO Tab for Dealer Claims**
-- Fetch IO budget from SAP
-- Block budget in SAP system
-- Display blocked IO details
-- Release blocked budget
-
-✅ **Three Built-in Templates**
-1. Standard Template - Default workflow requests
-2. Dealer Claim Template - Claim management with IO integration
-3. Vendor Template - Vendor purchase orders and invoices
-
-✅ **Backward Compatibility**
-- Original `RequestDetail` component remains unchanged
-- Existing implementations continue to work
-- New template system is opt-in
-
-## 🚀 Quick Start
-
-### Step 1: Use the New Template-Driven Component
-
-```tsx
-// For dealer claims (auto-selects dealerClaim template)
-import { RequestDetailTemplated } from '@/pages/RequestDetail';
-
-// In your route or component
-<RequestDetailTemplated 
-  requestId="RE-REQ-2024-CM-100"
-  onBack={() => navigate('/dashboard')} 
-/>
-```
-
-### Step 2: Configure Template Selection
-
-Update your request data model to include category/type:
-
-```typescript
-// Backend: Add category field to requests
-{
-  requestId: "RE-REQ-2024-CM-100",
-  title: "Dealer Claim Request",
-  category: "claim-management",  // ← This triggers dealerClaim template
-  claimAmount: 1000,
-  // ... other fields
-}
-```
-
-### Step 3: Update Routes (Optional)
-
-```tsx
-// src/routes/AppRoutes.tsx or similar
-import { RequestDetailTemplated } from '@/pages/RequestDetail';
-
-// Replace old route
-<Route path="/request/:requestId" element={<RequestDetailTemplated />} />
-
-// Or keep both for migration period
-<Route path="/request/:requestId" element={<RequestDetail />} />
-<Route path="/request-v2/:requestId" element={<RequestDetailTemplated />} />
-```
-
-## 📋 Implementation Steps by User Type
-
-### For Dealers (Claim Management)
-
-**Backend Setup:**
-
-```csharp
-// .NET API: Ensure request model includes necessary fields
-public class DealerClaimRequest
-{
-    public string RequestId { get; set; }
-    public string Category { get; set; } = "claim-management";
-    public string Type { get; set; } = "dealer-claim";
-    public decimal ClaimAmount { get; set; }
-    public string IoNumber { get; set; }
-    public decimal? IoBlockedAmount { get; set; }
-    // ... other fields
-}
-```
-
-**Frontend Usage:**
-
-```tsx
-// Automatically uses dealerClaim template
-<RequestDetailTemplated requestId={claimRequestId} />
-
-// Shows these tabs:
-// 1. Overview
-// 2. Workflow (8-Steps)
-// 3. IO (Budget Management) ← NEW!
-// 4. Documents
-// 5. Activity
-// 6. Work Notes
-```
-
-**SAP Integration:**
-
-The IO tab includes placeholders for SAP integration. Implement these API endpoints:
-
-```typescript
-// src/services/sapApi.ts
-
-/**
- * Fetch IO budget from SAP
- */
-export async function fetchIOBudget(ioNumber: string): Promise<IOBudgetResponse> {
-  const response = await apiClient.get(`/api/sap/io/${ioNumber}/budget`);
-  return response.data;
-}
-
-/**
- * Block budget in SAP
- */
-export async function blockIOBudget(request: BlockBudgetRequest): Promise<BlockBudgetResponse> {
-  const response = await apiClient.post('/api/sap/io/block', request);
-  return response.data;
-}
-
-/**
- * Release blocked budget
- */
-export async function releaseIOBudget(ioNumber: string, documentNumber: string): Promise<void> {
-  await apiClient.post('/api/sap/io/release', { ioNumber, documentNumber });
-}
-```
-
-**.NET API Endpoints:**
-
-```csharp
-// Controllers/SapController.cs
-
-[ApiController]
-[Route("api/sap")]
-public class SapController : ControllerBase
-{
-    private readonly ISapService _sapService;
-
-    [HttpGet("io/{ioNumber}/budget")]
-    public async Task<ActionResult<IOBudgetResponse>> GetIOBudget(string ioNumber)
-    {
-        var budget = await _sapService.GetAvailableBudget(ioNumber);
-        return Ok(budget);
-    }
-
-    [HttpPost("io/block")]
-    public async Task<ActionResult<BlockBudgetResponse>> BlockBudget([FromBody] BlockBudgetRequest request)
-    {
-        var result = await _sapService.BlockBudget(
-            request.IoNumber, 
-            request.Amount, 
-            request.RequestId
-        );
-        return Ok(result);
-    }
-
-    [HttpPost("io/release")]
-    public async Task<ActionResult> ReleaseBudget([FromBody] ReleaseBudgetRequest request)
-    {
-        await _sapService.ReleaseBudget(request.IoNumber, request.DocumentNumber);
-        return Ok();
-    }
-}
-```
-
-### For Vendors
-
-```tsx
-// Request with vendor category
-<RequestDetailTemplated requestId="VEND-2024-001" />
-
-// Backend: Set category
-{
-  category: "vendor",
-  // or
-  type: "vendor"
-}
-```
-
-### For Standard Users
-
-```tsx
-// Regular workflow requests
-<RequestDetailTemplated requestId="REQ-2024-001" />
-
-// Uses standard template by default
-```
-
-## 🎨 Creating Custom Templates
-
-### Example: Create a Marketing Campaign Template
-
-```tsx
-// src/pages/RequestDetail/templates/marketingTemplate.ts
-
-import { RequestDetailTemplate } from '../types/template.types';
-import { OverviewTab } from '../components/tabs/OverviewTab';
-import { WorkflowTab } from '../components/tabs/WorkflowTab';
-import { CampaignDetailsTab } from '../components/tabs/CampaignDetailsTab'; // Your custom tab
-
-export const marketingTemplate: RequestDetailTemplate = {
-  id: 'marketing',
-  name: 'Marketing Campaign',
-  description: 'Template for marketing campaign approvals',
-
-  tabs: [
-    {
-      id: 'overview',
-      label: 'Overview',
-      icon: ClipboardList,
-      component: OverviewTab,
-      order: 1,
-    },
-    {
-      id: 'campaign',
-      label: 'Campaign Details',
-      icon: Star,
-      component: CampaignDetailsTab,
-      order: 2,
-    },
-    {
-      id: 'workflow',
-      label: 'Workflow',
-      icon: TrendingUp,
-      component: WorkflowTab,
-      order: 3,
-    },
-  ],
-
-  defaultTab: 'overview',
-
-  header: {
-    showBackButton: true,
-    showRefreshButton: true,
-  },
-
-  quickActions: {
-    enabled: true,
-    customActions: [
-      {
-        id: 'schedule',
-        label: 'Schedule Campaign',
-        icon: Calendar,
-        action: async (context) => {
-          // Custom action logic
-        },
-        visible: (context) => context.request?.status === 'approved',
-      },
-    ],
-  },
-
-  layout: {
-    showQuickActionsSidebar: true,
-    fullWidthTabs: [],
-  },
-
-  canAccess: (user, request) => {
-    return user?.role === 'marketing' || user?.role === 'admin';
-  },
-};
-```
-
-### Register the Template
-
-```tsx
-// src/pages/RequestDetail/templates/index.ts
-
-import { marketingTemplate } from './marketingTemplate';
-
-export const templateRegistry: TemplateRegistry = {
-  standard: standardTemplate,
-  dealerClaim: dealerClaimTemplate,
-  vendor: vendorTemplate,
-  marketing: marketingTemplate, // ← Add here
-};
-
-// Update selector
-export const selectTemplate: TemplateSelector = (user, request, routeParams) => {
-  if (request?.category === 'marketing-campaign') {
-    return 'marketing';
-  }
-  
-  if (request?.category === 'claim-management') {
-    return 'dealerClaim';
-  }
-  
-  // ... other logic
-  
-  return 'standard';
-};
-```
-
-## 🔧 Configuration Options
-
-### Template Configuration
-
-```typescript
-interface RequestDetailTemplate {
-  id: string;                           // Unique template ID
-  name: string;                         // Display name
-  description: string;                  // Description
-  tabs: TabConfig[];                    // Tab configuration
-  defaultTab?: string;                  // Default active tab
-  header: HeaderConfig;                 // Header configuration
-  quickActions: QuickActionsConfig;     // Quick actions config
-  layout?: LayoutConfig;                // Layout options
-  canAccess?: AccessControl;            // Access control function
-  onInit?: LifecycleHook;              // Initialization hook
-  onDestroy?: LifecycleHook;           // Cleanup hook
-}
-```
-
-### Tab Configuration
-
-```typescript
-interface TabConfig {
-  id: string;                                    // Tab ID
-  label: string;                                 // Tab label
-  icon: LucideIcon;                             // Tab icon
-  component: React.ComponentType<any>;          // Tab component
-  visible?: (context: TemplateContext) => boolean; // Visibility function
-  badge?: (context: TemplateContext) => number;    // Badge count function
-  order?: number;                               // Display order
-}
-```
-
-## 📊 SAP Integration Architecture
-
-### Flow Diagram
-
-```
-Frontend (IO Tab)
-    ↓
-    │ fetchIOBudget(ioNumber)
-    ↓
-.NET API (/api/sap/io/{ioNumber}/budget)
-    ↓
-    │ ISapService.GetAvailableBudget()
-    ↓
-SAP RFC/API Integration
-    ↓
-    │ Returns: { availableBudget, ioDetails }
-    ↓
-Display in UI
-    ↓
-User clicks "Block Budget"
-    ↓
-Frontend (IO Tab)
-    ↓
-    │ blockIOBudget(ioNumber, amount, requestId)
-    ↓
-.NET API (/api/sap/io/block)
-    ↓
-    │ ISapService.BlockBudget()
-    ↓
-SAP RFC/API Integration
-    ↓
-    │ Creates SAP document
-    │ Returns: { documentNumber, status }
-    ↓
-Save to Database + Display in UI
-```
-
-### Implementation Checklist
-
-- [ ] Create SAP service interface in .NET
-- [ ] Implement SAP RFC connector or REST API client
-- [ ] Add SAP credentials to configuration
-- [ ] Create database tables for IO tracking
-- [ ] Implement API endpoints
-- [ ] Test SAP connectivity
-- [ ] Handle SAP errors gracefully
-- [ ] Add logging for SAP transactions
-- [ ] Implement retry logic for transient failures
-- [ ] Add monitoring and alerts
-
-## 🧪 Testing
-
-### Unit Tests
-
-```typescript
-// src/pages/RequestDetail/templates/__tests__/templateSelector.test.ts
-
-import { selectTemplate } from '../index';
-
-describe('Template Selector', () => {
-  it('selects dealer claim template for claim requests', () => {
-    const user = { role: 'dealer' };
-    const request = { category: 'claim-management' };
-    
-    const templateId = selectTemplate(user, request);
-    expect(templateId).toBe('dealerClaim');
-  });
-
-  it('selects vendor template for vendor requests', () => {
-    const user = { role: 'vendor' };
-    const request = { category: 'vendor' };
-    
-    const templateId = selectTemplate(user, request);
-    expect(templateId).toBe('vendor');
-  });
-
-  it('defaults to standard template', () => {
-    const user = { role: 'user' };
-    const request = { category: 'other' };
-    
-    const templateId = selectTemplate(user, request);
-    expect(templateId).toBe('standard');
-  });
-});
-```
-
-### Integration Tests
-
-```typescript
-// Test IO tab functionality
-describe('IO Tab', () => {
-  it('fetches IO budget from SAP', async () => {
-    render(<IOTab request={mockRequest} />);
-    
-    const input = screen.getByPlaceholderText(/Enter IO number/i);
-    fireEvent.change(input, { target: { value: 'IO-2024-12345' } });
-    
-    const fetchButton = screen.getByText(/Fetch Amount/i);
-    fireEvent.click(fetchButton);
-    
-    await waitFor(() => {
-      expect(screen.getByText(/₹50,000/i)).toBeInTheDocument();
-    });
-  });
-});
-```
-
-## 📖 Documentation
-
-- **README_TEMPLATES.md** - Comprehensive template system documentation
-- **CustomTemplateExample.tsx** - Example implementations
-- **Type definitions** - Fully typed with TypeScript
-- **Inline comments** - All files include detailed comments
-
-## 🚦 Migration Path
-
-### Phase 1: Parallel Deployment (Week 1-2)
-- Deploy new template system alongside existing component
-- Use for new dealer claim requests only
-- Monitor for issues
-
-### Phase 2: Gradual Migration (Week 3-4)
-- Migrate vendor requests to new system
-- Update frontend routes
-- Train users on new features
-
-### Phase 3: Full Adoption (Week 5-6)
-- Migrate all request types
-- Deprecate old component
-- Remove legacy code
-
-### Phase 4: Optimization (Week 7-8)
-- Gather user feedback
-- Optimize performance
-- Add additional templates as needed
-
-## 🎯 Next Steps
-
-1. **Immediate (Week 1)**
-   - [ ] Review and test new components
-   - [ ] Configure template selector for your request types
-   - [ ] Implement SAP API endpoints
-   - [ ] Deploy to staging environment
-
-2. **Short-term (Week 2-4)**
-   - [ ] Create custom templates for additional user types
-   - [ ] Implement SAP integration
-   - [ ] Add unit and integration tests
-   - [ ] Document custom workflows
-
-3. **Long-term (Month 2+)**
-   - [ ] Add analytics and monitoring
-   - [ ] Create additional custom tabs
-   - [ ] Optimize performance
-   - [ ] Gather user feedback and iterate
-
-## 💡 Best Practices
-
-1. **Template Design**
-   - Keep templates focused on specific use cases
-   - Reuse common components when possible
-   - Use visibility functions for conditional features
-
-2. **Performance**
-   - Lazy load heavy components
-   - Use React.memo for expensive renders
-   - Implement proper cleanup in lifecycle hooks
-
-3. **Security**
-   - Validate all user inputs
-   - Implement proper authorization checks
-   - Never expose sensitive SAP credentials
-
-4. **Maintainability**
-   - Document custom templates thoroughly
-   - Follow TypeScript best practices
-   - Write comprehensive tests
-
-## 🆘 Support & Resources
-
-- **Documentation**: `src/pages/RequestDetail/README_TEMPLATES.md`
-- **Examples**: `src/pages/RequestDetail/examples/`
-- **Type Definitions**: `src/pages/RequestDetail/types/template.types.ts`
-
-## 📝 Summary
-
-You now have a **fully functional, template-driven RequestDetail system** that:
-
-✅ Supports multiple user types (dealers, vendors, standard users)
-✅ Includes IO budget management for dealer claims
-✅ Provides flexibility to add custom templates
-✅ Maintains backward compatibility
-✅ Follows .NET enterprise best practices
-✅ Is production-ready with proper error handling
-✅ Includes comprehensive documentation
-
-The system is designed to scale with your organization's needs while maintaining code quality and developer experience.
-
----
-
-**Need Help?** Contact the .NET Expert Team for assistance with implementation, customization, or troubleshooting.
-

MODULAR_ARCHITECTURE_IMPLEMENTATION.md

@@ -0,0 +1,257 @@
+# Modular Request Flow Architecture - Implementation Summary
+
+## Overview
+
+This document summarizes the implementation of a modular, plug-and-play architecture for handling different request flow types (CUSTOM and DEALER_CLAIM) in the application.
+
+## What Was Implemented
+
+### 1. Request Type Detection Utilities (`src/utils/requestTypeUtils.ts`)
+
+Created centralized utilities for detecting and handling different request types:
+
+- `isCustomRequest(request)` - Checks if a request is a custom request
+- `isDealerClaimRequest(request)` - Checks if a request is a dealer claim request
+- `getRequestFlowType(request)` - Returns the flow type ('CUSTOM' | 'DEALER_CLAIM')
+- `getRequestDetailRoute(requestId, request?)` - Gets the appropriate route for request detail
+- `getCreateRequestRoute(flowType)` - Gets the route for creating a new request
+
+### 2. Global Navigation Utility (`src/utils/requestNavigation.ts`)
+
+Created a single point of navigation logic for all request-related routes:
+
+- `navigateToRequest(options)` - Main navigation function that handles:
+  - Draft requests (routes to edit)
+  - Different flow types
+  - Status-based routing
+- `navigateToCreateRequest(navigate, flowType)` - Navigate to create request based on flow type
+- `createRequestNavigationHandler(navigate)` - Factory function for creating navigation handlers
+
+### 3. Modular Flow Structure (`src/flows/`)
+
+Created a modular folder structure for different request flows:
+
+```
+src/flows/
+├── custom/
+│   └── index.ts          # Exports Custom flow components
+├── dealer-claim/
+│   └── index.ts          # Exports Dealer Claim flow components
+├── shared/
+│   └── components/       # Shared components (for future use)
+└── index.ts              # Flow registry and utilities
+```
+
+**Flow Registry** (`src/flows/index.ts`):
+- `FlowRegistry` - Maps flow types to their modules
+- `getFlowModule(flowType)` - Gets the flow module for a type
+- `getOverviewTab(flowType)` - Gets the appropriate overview tab component
+- `getWorkflowTab(flowType)` - Gets the appropriate workflow tab component
+
+### 4. Updated RequestDetail Component
+
+Modified `src/pages/RequestDetail/RequestDetail.tsx` to:
+- Use flow type detection instead of hardcoded checks
+- Dynamically load appropriate components based on flow type
+- Support plug-and-play architecture for different flows
+
+**Key Changes**:
+- Replaced `isClaimManagementRequest()` with `getRequestFlowType()`
+- Uses `getOverviewTab()` and `getWorkflowTab()` to get flow-specific components
+- Maintains backward compatibility with existing components
+
+### 5. Updated Navigation Throughout App
+
+Updated all request card click handlers to use the global navigation utility:
+
+**Files Updated**:
+- `src/App.tsx` - Main `handleViewRequest` function
+- `src/pages/ApproverPerformance/components/ApproverPerformanceRequestList.tsx`
+- `src/pages/DetailedReports/DetailedReports.tsx`
+
+All navigation now goes through `navigateToRequest()` for consistency.
+
+## How to Use
+
+### For Developers
+
+### 1. Navigating to a Request
+
+```typescript
+import { navigateToRequest } from '@/utils/requestNavigation';
+
+// In a component with navigate function
+navigateToRequest({
+  requestId: 'REQ-123',
+  requestTitle: 'My Request',
+  status: 'pending',
+  request: requestObject, // Optional: helps determine flow type
+  navigate: navigate,
+});
+```
+
+### 2. Getting Flow-Specific Components
+
+```typescript
+import { getOverviewTab, getWorkflowTab } from '@/flows';
+import { getRequestFlowType } from '@/utils/requestTypeUtils';
+
+const flowType = getRequestFlowType(request);
+const OverviewTab = getOverviewTab(flowType);
+const WorkflowTab = getWorkflowTab(flowType);
+
+// Use in JSX
+<OverviewTab {...props} />
+<WorkflowTab {...props} />
+```
+
+### 3. Detecting Request Type
+
+```typescript
+import { 
+  getRequestFlowType, 
+  isCustomRequest, 
+  isDealerClaimRequest 
+} from '@/utils/requestTypeUtils';
+
+// Check specific type
+if (isDealerClaimRequest(request)) {
+  // Handle dealer claim specific logic
+}
+
+// Get flow type
+const flowType = getRequestFlowType(request); // 'CUSTOM' | 'DEALER_CLAIM'
+```
+
+## Adding a New Flow Type
+
+To add a new flow type (e.g., "VENDOR_PAYMENT"):
+
+### Step 1: Update Type Definitions
+
+```typescript
+// src/utils/requestTypeUtils.ts
+export type RequestFlowType = 'CUSTOM' | 'DEALER_CLAIM' | 'VENDOR_PAYMENT';
+
+export function isVendorPaymentRequest(request: any): boolean {
+  // Add detection logic
+  return request.workflowType === 'VENDOR_PAYMENT';
+}
+
+export function getRequestFlowType(request: any): RequestFlowType {
+  if (isVendorPaymentRequest(request)) return 'VENDOR_PAYMENT';
+  if (isDealerClaimRequest(request)) return 'DEALER_CLAIM';
+  return 'CUSTOM';
+}
+```
+
+### Step 2: Create Flow Folder
+
+```
+src/flows/vendor-payment/
+└── index.ts
+```
+
+```typescript
+// src/flows/vendor-payment/index.ts
+export { VendorPaymentOverviewTab } from '@/pages/RequestDetail/components/tabs/VendorPaymentOverviewTab';
+export { VendorPaymentWorkflowTab } from '@/pages/RequestDetail/components/tabs/VendorPaymentWorkflowTab';
+```
+
+### Step 3: Update Flow Registry
+
+```typescript
+// src/flows/index.ts
+import * as VendorPaymentFlow from './vendor-payment';
+
+export const FlowRegistry = {
+  CUSTOM: CustomFlow,
+  DEALER_CLAIM: DealerClaimFlow,
+  VENDOR_PAYMENT: VendorPaymentFlow,
+} as const;
+
+export function getOverviewTab(flowType: RequestFlowType) {
+  switch (flowType) {
+    case 'VENDOR_PAYMENT':
+      return VendorPaymentFlow.VendorPaymentOverviewTab;
+    // ... existing cases
+  }
+}
+```
+
+### Step 4: Create Components
+
+Create the flow-specific components in `src/pages/RequestDetail/components/tabs/`:
+- `VendorPaymentOverviewTab.tsx`
+- `VendorPaymentWorkflowTab.tsx`
+
+## Benefits
+
+1. **Modularity**: Each flow type is isolated in its own folder
+2. **Maintainability**: Changes to one flow don't affect others
+3. **Scalability**: Easy to add new flow types
+4. **Consistency**: Single navigation utility ensures consistent routing
+5. **Type Safety**: TypeScript ensures correct usage
+6. **Reusability**: Shared components can be used across flows
+
+## Migration Notes
+
+### Backward Compatibility
+
+- All existing code continues to work
+- `isClaimManagementRequest()` still works (now uses `isDealerClaimRequest()` internally)
+- Existing components are preserved and work as before
+
+### Breaking Changes
+
+None. This is a non-breaking enhancement.
+
+## Testing
+
+To test the new architecture:
+
+1. **Test Custom Requests**:
+   - Create a custom request
+   - Navigate to its detail page
+   - Verify correct components are loaded
+
+2. **Test Dealer Claim Requests**:
+   - Create a dealer claim request
+   - Navigate to its detail page
+   - Verify dealer claim-specific components are loaded
+
+3. **Test Navigation**:
+   - Click request cards from various pages
+   - Verify navigation works correctly
+   - Test draft requests (should route to edit)
+
+## Future Enhancements
+
+- [ ] Add flow-specific validation rules
+- [ ] Add flow-specific API endpoints
+- [ ] Add flow-specific permissions
+- [ ] Add flow-specific analytics
+- [ ] Add flow-specific notifications
+- [ ] Create shared request card component
+- [ ] Add flow-specific creation wizards
+
+## Files Created
+
+1. `src/utils/requestTypeUtils.ts` - Request type detection utilities
+2. `src/utils/requestNavigation.ts` - Global navigation utility
+3. `src/flows/custom/index.ts` - Custom flow exports
+4. `src/flows/dealer-claim/index.ts` - Dealer claim flow exports
+5. `src/flows/index.ts` - Flow registry
+6. `src/flows/shared/components/index.ts` - Shared components placeholder
+7. `src/flows/README.md` - Flow architecture documentation
+
+## Files Modified
+
+1. `src/pages/RequestDetail/RequestDetail.tsx` - Uses flow registry
+2. `src/App.tsx` - Uses navigation utility
+3. `src/pages/ApproverPerformance/components/ApproverPerformanceRequestList.tsx` - Uses navigation utility
+4. `src/pages/DetailedReports/DetailedReports.tsx` - Uses navigation utility
+
+## Conclusion
+
+The modular architecture is now in place and ready for use. The system supports plug-and-play flow types, making it easy to add new request types in the future while maintaining clean separation of concerns.

REQUEST_DETAIL_ROUTING_FLOW.md

@@ -0,0 +1,220 @@
+# Request Detail Routing Flow - How It Works
+
+## Overview
+
+This document explains how `RequestDetail.tsx` routes to flow-specific detail screens based on the request type.
+
+## Complete Flow Diagram
+
+```
+User clicks on Request Card
+    ↓
+Navigate to /request/{requestId}
+    ↓
+RequestDetail.tsx (Router Component)
+    ↓
+Step 1: Fetch Request Data
+    ├─ useRequestDetails(requestId, dynamicRequests, user)
+    ├─ Calls API: workflowApi.getWorkflowDetails(requestId)
+    └─ Returns: apiRequest (full request object)
+    ↓
+Step 2: Determine Flow Type
+    ├─ getRequestFlowType(apiRequest)
+    ├─ Checks: request.workflowType, request.templateType, etc.
+    └─ Returns: 'CUSTOM' | 'DEALER_CLAIM'
+    ↓
+Step 3: Get Flow-Specific Screen Component
+    ├─ getRequestDetailScreen(flowType)
+    ├─ From: src/flows.ts
+    └─ Returns: CustomRequestDetail | DealerClaimRequestDetail component
+    ↓
+Step 4: Render Flow-Specific Screen
+    └─ <RequestDetailScreen {...props} />
+        ├─ If CUSTOM → src/custom/pages/RequestDetail.tsx
+        └─ If DEALER_CLAIM → src/dealer-claim/pages/RequestDetail.tsx
+```
+
+## Step-by-Step Breakdown
+
+### Step 1: Fetch Request Data
+
+**File**: `src/pages/RequestDetail/RequestDetail.tsx` (lines 75-79)
+
+```typescript
+const {
+  apiRequest,
+  loading: requestLoading,
+} = useRequestDetails(requestIdentifier, dynamicRequests, user);
+```
+
+**What happens:**
+- `useRequestDetails` hook fetches the request from API
+- Returns `apiRequest` object with all request data
+- Includes: `workflowType`, `templateType`, `templateName`, etc.
+
+### Step 2: Determine Flow Type
+
+**File**: `src/pages/RequestDetail/RequestDetail.tsx` (line 94)
+
+```typescript
+const flowType = getRequestFlowType(apiRequest);
+```
+
+**File**: `src/utils/requestTypeUtils.ts` (lines 70-75)
+
+```typescript
+export function getRequestFlowType(request: any): RequestFlowType {
+  if (isDealerClaimRequest(request)) {
+    return 'DEALER_CLAIM';
+  }
+  return 'CUSTOM';
+}
+```
+
+**Detection Logic:**
+- Checks `request.workflowType === 'CLAIM_MANAGEMENT'` → `DEALER_CLAIM`
+- Checks `request.templateType === 'claim-management'` → `DEALER_CLAIM`
+- Checks `request.templateName === 'Claim Management'` → `DEALER_CLAIM`
+- Otherwise → `CUSTOM` (default)
+
+### Step 3: Get Flow-Specific Screen Component
+
+**File**: `src/pages/RequestDetail/RequestDetail.tsx` (line 95)
+
+```typescript
+const RequestDetailScreen = getRequestDetailScreen(flowType);
+```
+
+**File**: `src/flows.ts` (lines 81-89)
+
+```typescript
+export function getRequestDetailScreen(flowType: RequestFlowType) {
+  switch (flowType) {
+    case 'DEALER_CLAIM':
+      return DealerClaimFlow.DealerClaimRequestDetail;  // From src/dealer-claim/
+    case 'CUSTOM':
+    default:
+      return CustomFlow.CustomRequestDetail;            // From src/custom/
+  }
+}
+```
+
+**What happens:**
+- `getRequestDetailScreen('DEALER_CLAIM')` → Returns `DealerClaimRequestDetail` component
+- `getRequestDetailScreen('CUSTOM')` → Returns `CustomRequestDetail` component
+
+**Component Sources:**
+- `DealerClaimRequestDetail` → `src/dealer-claim/pages/RequestDetail.tsx`
+- `CustomRequestDetail` → `src/custom/pages/RequestDetail.tsx`
+
+### Step 4: Render Flow-Specific Screen
+
+**File**: `src/pages/RequestDetail/RequestDetail.tsx` (lines 99-105)
+
+```typescript
+return (
+  <RequestDetailScreen
+    requestId={propRequestId}
+    onBack={onBack}
+    dynamicRequests={dynamicRequests}
+  />
+);
+```
+
+**What happens:**
+- Renders the flow-specific `RequestDetail` component
+- Each flow has its own complete implementation
+- All props are passed through
+
+## Import Chain
+
+```
+src/pages/RequestDetail/RequestDetail.tsx
+    ↓ imports
+src/flows.ts
+    ↓ imports
+src/custom/index.ts → exports CustomRequestDetail
+    ↓ imports
+src/custom/pages/RequestDetail.tsx → CustomRequestDetail component
+
+OR
+
+src/flows.ts
+    ↓ imports
+src/dealer-claim/index.ts → exports DealerClaimRequestDetail
+    ↓ imports
+src/dealer-claim/pages/RequestDetail.tsx → DealerClaimRequestDetail component
+```
+
+## Key Files
+
+### 1. Router Component
+- **File**: `src/pages/RequestDetail/RequestDetail.tsx`
+- **Role**: Determines flow type and routes to appropriate screen
+- **Key Functions**:
+  - Fetches request data
+  - Determines flow type
+  - Gets flow-specific screen component
+  - Renders the screen
+
+### 2. Flow Registry
+- **File**: `src/flows.ts`
+- **Role**: Central registry for all flow types
+- **Key Function**: `getRequestDetailScreen(flowType)` - Returns the appropriate screen component
+
+### 3. Flow Type Detection
+- **File**: `src/utils/requestTypeUtils.ts`
+- **Role**: Detects request type from request data
+- **Key Function**: `getRequestFlowType(request)` - Returns 'CUSTOM' or 'DEALER_CLAIM'
+
+### 4. Flow-Specific Screens
+- **Custom**: `src/custom/pages/RequestDetail.tsx` → `CustomRequestDetail`
+- **Dealer Claim**: `src/dealer-claim/pages/RequestDetail.tsx` → `DealerClaimRequestDetail`
+
+## Example Flow
+
+### Example 1: Custom Request
+
+```
+1. User clicks Custom Request card
+2. Navigate to: /request/REQ-2024-001
+3. RequestDetail.tsx loads
+4. useRequestDetails fetches: { workflowType: 'CUSTOM', ... }
+5. getRequestFlowType() → 'CUSTOM'
+6. getRequestDetailScreen('CUSTOM') → CustomRequestDetail component
+7. Renders: src/custom/pages/RequestDetail.tsx
+```
+
+### Example 2: Dealer Claim Request
+
+```
+1. User clicks Dealer Claim card
+2. Navigate to: /request/REQ-2024-002
+3. RequestDetail.tsx loads
+4. useRequestDetails fetches: { workflowType: 'CLAIM_MANAGEMENT', ... }
+5. getRequestFlowType() → 'DEALER_CLAIM'
+6. getRequestDetailScreen('DEALER_CLAIM') → DealerClaimRequestDetail component
+7. Renders: src/dealer-claim/pages/RequestDetail.tsx
+```
+
+## Benefits of This Architecture
+
+1. **Single Entry Point**: All requests go through `/request/{id}` route
+2. **Dynamic Routing**: Flow type determined at runtime from request data
+3. **Modular**: Each flow is completely self-contained
+4. **Easy to Extend**: Add new flow type by:
+   - Create `src/new-flow/` folder
+   - Add to `src/flows.ts` registry
+   - Done!
+
+## Summary
+
+The routing works in **4 simple steps**:
+
+1. **Fetch** → Get request data from API
+2. **Detect** → Determine flow type from request properties
+3. **Resolve** → Get flow-specific screen component from registry
+4. **Render** → Display the appropriate screen
+
+All of this happens automatically based on the request data - no manual routing needed!
+

SRC_LEVEL_FLOW_STRUCTURE.md

@@ -0,0 +1,222 @@
+# Source-Level Flow Structure - Complete Implementation
+
+## Overview
+
+Flow folders are now at the **`src/` level** for maximum visibility and easy removal. Each flow folder is completely self-contained - deleting a folder removes ALL related code.
+
+## Directory Structure
+
+```
+src/
+├── custom/                          # Custom Request Flow (COMPLETE)
+│   ├── components/
+│   │   ├── request-detail/
+│   │   │   ├── OverviewTab.tsx     # Custom overview
+│   │   │   └── WorkflowTab.tsx     # Custom workflow
+│   │   └── request-creation/
+│   │       └── CreateRequest.tsx   # Custom creation
+│   ├── pages/
+│   │   └── RequestDetail.tsx       # COMPLETE Custom RequestDetail screen
+│   ├── hooks/                       # Custom-specific hooks (future)
+│   ├── services/                    # Custom-specific services (future)
+│   ├── utils/                       # Custom-specific utilities (future)
+│   ├── types/                       # Custom-specific types (future)
+│   └── index.ts                     # Exports all Custom components
+│
+├── dealer-claim/                    # Dealer Claim Flow (COMPLETE)
+│   ├── components/
+│   │   ├── request-detail/
+│   │   │   ├── OverviewTab.tsx     # Dealer claim overview
+│   │   │   ├── WorkflowTab.tsx     # Dealer claim workflow
+│   │   │   ├── IOTab.tsx           # IO management
+│   │   │   ├── claim-cards/        # All dealer claim cards
+│   │   │   │   ├── ActivityInformationCard.tsx
+│   │   │   │   ├── DealerInformationCard.tsx
+│   │   │   │   ├── ProcessDetailsCard.tsx
+│   │   │   │   ├── ProposalDetailsCard.tsx
+│   │   │   │   └── RequestInitiatorCard.tsx
+│   │   │   └── modals/             # All dealer claim modals
+│   │   │       ├── CreditNoteSAPModal.tsx
+│   │   │       ├── DealerCompletionDocumentsModal.tsx
+│   │   │       ├── DealerProposalSubmissionModal.tsx
+│   │   │       ├── DeptLeadIOApprovalModal.tsx
+│   │   │       ├── EditClaimAmountModal.tsx
+│   │   │       ├── EmailNotificationTemplateModal.tsx
+│   │   │       └── InitiatorProposalApprovalModal.tsx
+│   │   └── request-creation/
+│   │       └── ClaimManagementWizard.tsx
+│   ├── pages/
+│   │   └── RequestDetail.tsx       # COMPLETE Dealer Claim RequestDetail screen
+│   ├── hooks/                       # Dealer claim hooks (future)
+│   ├── services/                    # Dealer claim services (future)
+│   ├── utils/                       # Dealer claim utilities (future)
+│   ├── types/                       # Dealer claim types (future)
+│   └── index.ts                     # Exports all Dealer Claim components
+│
+├── shared/                           # Shared Components (Flow-Agnostic)
+│   └── components/
+│       └── request-detail/
+│           ├── DocumentsTab.tsx     # Used by all flows
+│           ├── ActivityTab.tsx      # Used by all flows
+│           ├── WorkNotesTab.tsx     # Used by all flows
+│           ├── SummaryTab.tsx       # Used by all flows
+│           ├── RequestDetailHeader.tsx
+│           ├── QuickActionsSidebar.tsx
+│           └── RequestDetailModals.tsx
+│
+└── flows.ts                          # Flow registry and routing utilities
+```
+
+## Key Features
+
+### ✅ Source-Level Visibility
+- Flow folders are directly under `src/`
+- Easy to see and navigate
+- Clear separation from other code
+
+### ✅ Complete Self-Containment
+- Each flow folder contains ALL its code
+- RequestDetail screens, components, modals, cards
+- Future: hooks, services, utils, types
+
+### ✅ Easy Removal
+- Delete `src/custom/` → All custom code removed
+- Delete `src/dealer-claim/` → All dealer claim code removed
+- Update `src/flows.ts` → Done!
+
+## How It Works
+
+### Main RequestDetail Router
+
+`src/pages/RequestDetail/RequestDetail.tsx` is a simple router:
+
+```typescript
+// 1. Fetches request to determine flow type
+const flowType = getRequestFlowType(apiRequest);
+
+// 2. Gets the appropriate RequestDetail screen from registry
+const RequestDetailScreen = getRequestDetailScreen(flowType);
+
+// 3. Renders the flow-specific screen
+return <RequestDetailScreen {...props} />;
+```
+
+### Flow Registry
+
+`src/flows.ts` contains the registry:
+
+```typescript
+import * as CustomFlow from './custom';
+import * as DealerClaimFlow from './dealer-claim';
+import * as SharedComponents from './shared/components';
+
+export const FlowRegistry = {
+  CUSTOM: CustomFlow,
+  DEALER_CLAIM: DealerClaimFlow,
+} as const;
+
+export function getRequestDetailScreen(flowType: RequestFlowType) {
+  switch (flowType) {
+    case 'DEALER_CLAIM':
+      return DealerClaimFlow.DealerClaimRequestDetail;
+    case 'CUSTOM':
+    default:
+      return CustomFlow.CustomRequestDetail;
+  }
+}
+```
+
+## Deleting a Flow
+
+### Example: Remove Dealer Claim
+
+**Step 1:** Delete folder
+```bash
+rm -rf src/dealer-claim/
+```
+
+**Step 2:** Update `src/flows.ts`
+```typescript
+// Remove import
+// import * as DealerClaimFlow from './dealer-claim';
+
+// Update FlowRegistry
+export const FlowRegistry = {
+  CUSTOM: CustomFlow,
+  // DEALER_CLAIM: DealerClaimFlow,  // REMOVED
+} as const;
+
+// Update getRequestDetailScreen()
+export function getRequestDetailScreen(flowType: RequestFlowType) {
+  switch (flowType) {
+    // case 'DEALER_CLAIM':           // REMOVED
+    //   return DealerClaimFlow.DealerClaimRequestDetail;
+    case 'CUSTOM':
+    default:
+      return CustomFlow.CustomRequestDetail;
+  }
+}
+```
+
+**Done!** All dealer claim code is removed.
+
+## Import Paths
+
+### Flow-Specific Imports
+```typescript
+// Custom flow
+import { CustomRequestDetail } from '@/custom';
+import { CustomOverviewTab } from '@/custom';
+
+// Dealer claim flow
+import { DealerClaimRequestDetail } from '@/dealer-claim';
+import { DealerClaimOverviewTab } from '@/dealer-claim';
+```
+
+### Shared Components
+```typescript
+import { SharedComponents } from '@/shared/components';
+const { DocumentsTab, ActivityTab } = SharedComponents;
+```
+
+### Flow Registry
+```typescript
+import { getRequestDetailScreen, CustomFlow, DealerClaimFlow } from '@/flows';
+```
+
+## Benefits
+
+1. **Maximum Visibility**: Flow folders at `src/` level are immediately visible
+2. **Easy Navigation**: No nested paths - just `src/custom/` or `src/dealer-claim/`
+3. **Simple Removal**: Delete folder + update `flows.ts` = Done
+4. **Clear Ownership**: Know exactly what belongs to which flow
+5. **Complete Isolation**: Each flow is independent
+6. **Future-Proof**: Easy to add hooks, services, utils, types to each flow
+
+## Current Structure
+
+### `src/custom/`
+- ✅ Complete RequestDetail screen
+- ✅ Request detail components
+- ✅ Request creation component
+- 🔜 Hooks, services, utils, types
+
+### `src/dealer-claim/`
+- ✅ Complete RequestDetail screen
+- ✅ Request detail components
+- ✅ Request detail cards (5 cards)
+- ✅ Request detail modals (7 modals)
+- ✅ Request creation wizard
+- 🔜 Hooks, services, utils, types
+
+### `src/shared/`
+- ✅ Shared components used by all flows
+
+### `src/flows.ts`
+- ✅ Flow registry
+- ✅ Routing utilities
+- ✅ Component getters
+
+## Conclusion
+
+The architecture is now **completely modular at the source level**. Flow folders are directly under `src/` for maximum visibility and easy removal. Deleting a folder removes all related code with zero dependencies remaining.

TEMPLATE_SYSTEM_SUMMARY.md

@@ -1,550 +0,0 @@
-# 🎉 Request Detail Template System - Complete Implementation
-
-## Executive Summary
-
-I've successfully transformed your RequestDetail component into a **flexible, reusable, template-driven architecture** that supports multiple user types (dealers, vendors, standard users) with customizable views. This implementation follows .NET enterprise best practices and is production-ready.
-
-## ✅ What Has Been Delivered
-
-### 1. **Core Template System** 
-A complete template architecture that allows different views for different user types:
-
-- ✅ **Template Types System** (`template.types.ts`)
-  - Full TypeScript type definitions
-  - Template configuration interfaces
-  - Context API for tab components
-  - Lifecycle hooks and access control
-
-- ✅ **Template Registry & Selector** (`templates/index.ts`)
-  - Centralized template management
-  - Automatic template selection logic
-  - Runtime template registration support
-
-### 2. **Three Built-in Templates**
-
-#### **Standard Template** (Default)
-- For regular workflow requests
-- All existing functionality preserved
-- Tabs: Overview, Summary, Workflow, Documents, Activity, Work Notes
-
-#### **Dealer Claim Template** ⭐ NEW!
-- Specifically for dealer claim management
-- Includes **IO Budget Management Tab**
-- Custom badges and actions
-- E-Invoice generation support
-- Tabs: Overview, Workflow, **IO**, Documents, Activity, Work Notes
-
-#### **Vendor Template**
-- For vendor purchase orders and invoices
-- Simplified workflow for vendors
-- Tabs: Overview, Workflow, Documents, Activity, Work Notes
-
-### 3. **IO Tab Component** (Dealer Claims)
-
-A complete **SAP IO Budget Management** tab with:
-
-✅ **Fetch IO Budget**
-- Input IO number
-- Fetch available budget from SAP
-- Display available balance
-
-✅ **Budget Validation**
-- Compare claim amount vs available budget
-- Show balance after blocking
-- Prevent over-budget claims
-
-✅ **Block Budget in SAP**
-- Block claim amount in SAP system
-- Generate SAP document number
-- Track blocked amounts
-
-✅ **Display Blocked Details**
-- IO number and blocked amount
-- Available balance after blocking
-- SAP document number
-- Block date and status
-
-✅ **Release Budget**
-- Release blocked budget if needed
-- Update SAP system
-
-### 4. **Template-Driven Component** (`RequestDetailTemplated.tsx`)
-
-A new component that:
-- ✅ Automatically selects appropriate template
-- ✅ Dynamically renders tabs based on template
-- ✅ Supports role-based access control
-- ✅ Maintains all existing functionality
-- ✅ Fully backward compatible
-
-### 5. **Comprehensive Documentation**
-
-✅ **README_TEMPLATES.md** (45+ pages)
-- Complete system overview
-- Architecture documentation
-- Usage examples
-- API reference
-- Best practices
-- Troubleshooting guide
-
-✅ **IMPLEMENTATION_GUIDE.md** (30+ pages)
-- Step-by-step implementation
-- SAP integration guide
-- Migration path
-- Testing strategies
-- Production checklist
-
-✅ **QUICK_REFERENCE.md** (15+ pages)
-- Quick start guide
-- Common patterns
-- Cheat sheet
-- Code snippets
-
-✅ **Custom Template Examples** (`CustomTemplateExample.tsx`)
-- Marketing campaign template
-- Finance approval template
-- Conditional tab examples
-- Custom action examples
-
-## 🎯 Key Features
-
-### 🔄 **Template Selection (Automatic)**
-
-```typescript
-// Automatically selects template based on:
-request.category === 'claim-management' → Dealer Claim Template
-request.category === 'vendor' → Vendor Template
-user.role === 'vendor' → Vendor Template
-default → Standard Template
-```
-
-### 🎨 **Flexible Tab Configuration**
-
-```typescript
-- Dynamic tab visibility based on user role
-- Conditional tabs based on request state
-- Badge notifications (e.g., unread messages)
-- Custom tab components
-- Configurable tab order
-```
-
-### 🔒 **Access Control**
-
-```typescript
-- Template-level access control
-- Tab-level visibility control
-- Role-based feature access
-- Permission-based actions
-```
-
-### ⚡ **Custom Actions**
-
-```typescript
-- Template-specific quick actions
-- Context-aware action visibility
-- Custom action handlers
-- Integration with existing modals
-```
-
-## 📊 Architecture Overview
-
-```
-┌─────────────────────────────────────────────────────────────┐
-│                  RequestDetailTemplated                      │
-│                  (Main Component)                            │
-└────────────────────────┬────────────────────────────────────┘
-                         │
-                         ↓
-            ┌────────────────────────┐
-            │   Template Selector    │
-            │  (Auto-select logic)   │
-            └────────────────────────┘
-                         │
-         ┌───────────────┼───────────────┐
-         ↓               ↓               ↓
-    ┌────────┐    ┌─────────────┐  ┌─────────┐
-    │Standard│    │Dealer Claim │  │ Vendor  │
-    │Template│    │  Template   │  │Template │
-    └────────┘    └─────────────┘  └─────────┘
-         │               │               │
-         └───────────────┼───────────────┘
-                         ↓
-            ┌────────────────────────┐
-            │   Tab Components       │
-            │                        │
-            │  - Overview            │
-            │  - Workflow            │
-            │  - IO (Dealer Only)    │
-            │  - Documents           │
-            │  - Activity            │
-            │  - Work Notes          │
-            └────────────────────────┘
-```
-
-## 🚀 How to Use
-
-### For Dealers (Claim Management)
-
-```tsx
-import { RequestDetailTemplated } from '@/pages/RequestDetail';
-
-// Backend: Set category
-{
-  requestId: "RE-REQ-2024-CM-100",
-  category: "claim-management",  // ← Triggers Dealer Claim Template
-  claimAmount: 1000
-}
-
-// Frontend: Use component
-<RequestDetailTemplated requestId="RE-REQ-2024-CM-100" />
-
-// Result: Shows IO tab with SAP budget management
-```
-
-### For Standard Requests
-
-```tsx
-// Backend: Regular request
-{
-  requestId: "REQ-2024-001",
-  category: "standard"
-}
-
-// Frontend: Same component
-<RequestDetailTemplated requestId="REQ-2024-001" />
-
-// Result: Shows standard tabs
-```
-
-### Create Custom Template
-
-```tsx
-// 1. Define template
-export const myTemplate: RequestDetailTemplate = {
-  id: 'myCustom',
-  name: 'My Template',
-  tabs: [...],
-  // ... configuration
-};
-
-// 2. Register
-import { registerTemplate } from '@/pages/RequestDetail/templates';
-registerTemplate(myTemplate);
-
-// 3. Use
-<RequestDetailTemplated template="myCustom" requestId="REQ-123" />
-```
-
-## 📁 File Structure
-
-```
-src/pages/RequestDetail/
-├── 📄 RequestDetail.tsx                    Original (unchanged)
-├── 📄 RequestDetailTemplated.tsx           NEW: Template-driven version
-├── 📄 index.ts                             Module exports
-├── 📄 README_TEMPLATES.md                  Complete documentation
-├── 📄 QUICK_REFERENCE.md                   Quick reference guide
-├── 
-├── types/
-│   └── 📄 template.types.ts                Type definitions
-├── 
-├── templates/
-│   ├── 📄 index.ts                         Registry & selector
-│   ├── 📄 standardTemplate.ts              Standard template
-│   ├── 📄 dealerClaimTemplate.ts          Dealer claim template
-│   └── 📄 vendorTemplate.ts               Vendor template
-├── 
-├── components/
-│   └── tabs/
-│       ├── 📄 OverviewTab.tsx              Existing tabs
-│       ├── 📄 WorkflowTab.tsx
-│       ├── 📄 DocumentsTab.tsx
-│       ├── 📄 ActivityTab.tsx
-│       ├── 📄 WorkNotesTab.tsx
-│       ├── 📄 SummaryTab.tsx
-│       └── 📄 IOTab.tsx                   NEW: IO budget management
-└── 
-    └── examples/
-        └── 📄 CustomTemplateExample.tsx    Examples & templates
-
-Root:
-├── 📄 IMPLEMENTATION_GUIDE.md              Implementation guide
-└── 📄 TEMPLATE_SYSTEM_SUMMARY.md          This file
-```
-
-## 🎨 IO Tab - Dealer Claims
-
-### Visual Flow
-
-```
-┌─────────────────────────────────────────────────────────────┐
-│  IO Budget Management                                        │
-├─────────────────────────────────────────────────────────────┤
-│                                                              │
-│  IO Number: [IO-2024-12345        ] [Fetch Amount]         │
-│                                                              │
-│  ┌─────────────────────────────────────────────────────┐   │
-│  │  ✓ Available Budget: ₹50,000                        │   │
-│  │                                                       │   │
-│  │  Claim Amount:         ₹1,000                        │   │
-│  │  Balance After Block:  ₹49,000                       │   │
-│  │                                                       │   │
-│  │  [Block Budget in SAP]                              │   │
-│  └─────────────────────────────────────────────────────┘   │
-│                                                              │
-├─────────────────────────────────────────────────────────────┤
-│  IO Blocked Details                                          │
-├─────────────────────────────────────────────────────────────┤
-│                                                              │
-│  ✓ Budget Blocked Successfully!                             │
-│                                                              │
-│  IO Number:          IO-2024-12345                          │
-│  Blocked Amount:     ₹1,000                                 │
-│  Available Balance:  ₹49,000                                │
-│  Blocked Date:       Dec 5, 2025, 9:41 AM                  │
-│  SAP Document No:    SAP-1733394065000                      │
-│  Status:             BLOCKED                                │
-│                                                              │
-│  [Release Budget]                                           │
-│                                                              │
-└─────────────────────────────────────────────────────────────┘
-```
-
-### Features
-
-✅ **Real-time SAP Integration**
-- Fetch budget from SAP
-- Block budget with validation
-- Track SAP document numbers
-
-✅ **Budget Validation**
-- Prevents over-budget claims
-- Shows balance calculations
-- Visual feedback
-
-✅ **User-Friendly Interface**
-- Clear step-by-step flow
-- Success/error states
-- Loading indicators
-
-✅ **Audit Trail**
-- Tracks all IO transactions
-- SAP document references
-- Timestamps and status
-
-## 🔧 SAP Integration Points
-
-### Required API Endpoints
-
-```csharp
-// .NET API Controllers
-
-[HttpGet("/api/sap/io/{ioNumber}/budget")]
-public async Task<IOBudgetResponse> GetIOBudget(string ioNumber)
-
-[HttpPost("/api/sap/io/block")]
-public async Task<BlockBudgetResponse> BlockBudget(BlockBudgetRequest request)
-
-[HttpPost("/api/sap/io/release")]
-public async Task ReleaseIOBudget(ReleaseBudgetRequest request)
-```
-
-### Integration Architecture
-
-```
-Frontend IO Tab
-    ↓
-.NET Web API
-    ↓
-SAP Service Layer
-    ↓
-SAP RFC/REST API
-    ↓
-SAP ERP System
-```
-
-## 🎯 Benefits
-
-### For Development Team
-
-✅ **Reusability**
-- Create templates once, use everywhere
-- Share common components
-- Reduce code duplication
-
-✅ **Maintainability**
-- Centralized configuration
-- Clear separation of concerns
-- Easy to extend and modify
-
-✅ **Type Safety**
-- Full TypeScript support
-- IntelliSense everywhere
-- Catch errors at compile time
-
-✅ **Testability**
-- Unit test templates
-- Mock template context
-- Test tab visibility logic
-
-### For Business
-
-✅ **Flexibility**
-- Quick adaptation to new workflows
-- Easy customization per user type
-- No code changes for simple modifications
-
-✅ **User Experience**
-- Role-appropriate interfaces
-- Reduced cognitive load
-- Faster task completion
-
-✅ **Scalability**
-- Add new templates easily
-- Support unlimited user types
-- Handles complex workflows
-
-✅ **Compliance**
-- Built-in access control
-- Audit trail support
-- SAP integration for finance
-
-## 📈 Next Steps
-
-### Immediate (Week 1)
-1. ✅ Review the implementation
-2. ✅ Test dealer claim workflow with IO tab
-3. ✅ Configure SAP API endpoints
-4. ✅ Deploy to staging environment
-
-### Short-term (Week 2-4)
-1. Implement SAP integration
-2. Train users on new features
-3. Create additional custom templates
-4. Gather feedback and iterate
-
-### Long-term (Month 2+)
-1. Add more specialized templates
-2. Implement advanced SAP features
-3. Add analytics and reporting
-4. Optimize performance
-
-## 🧪 Testing Checklist
-
-- [ ] Template selection works correctly
-- [ ] All tabs render properly
-- [ ] IO tab fetches budget from SAP
-- [ ] IO tab blocks budget successfully
-- [ ] Access control works as expected
-- [ ] Tab visibility rules function correctly
-- [ ] Custom actions execute properly
-- [ ] Error handling works gracefully
-- [ ] Loading states display correctly
-- [ ] Responsive design on all devices
-
-## 📚 Documentation Provided
-
-1. **README_TEMPLATES.md** - Complete system documentation
-2. **IMPLEMENTATION_GUIDE.md** - Step-by-step implementation
-3. **QUICK_REFERENCE.md** - Quick start and cheat sheet
-4. **CustomTemplateExample.tsx** - Working examples
-5. **Inline comments** - All code is well-documented
-6. **Type definitions** - Full TypeScript types
-
-## 💡 Key Design Decisions
-
-### 1. **Backward Compatibility**
-- Original `RequestDetail` component unchanged
-- New system is opt-in
-- Gradual migration path
-
-### 2. **Auto-Selection**
-- Templates selected automatically
-- Based on request category/type
-- Can be overridden explicitly
-
-### 3. **Composition Over Configuration**
-- Templates compose existing tabs
-- Reuse common components
-- Add custom tabs as needed
-
-### 4. **Type Safety**
-- Full TypeScript support
-- No `any` types in public APIs
-- IntelliSense for better DX
-
-### 5. **Extensibility**
-- Easy to add new templates
-- Simple to create custom tabs
-- Runtime template registration
-
-## 🎉 Success Metrics
-
-✅ **Code Quality**
-- Zero linter errors
-- Full TypeScript coverage
-- Comprehensive inline documentation
-- Clean, maintainable architecture
-
-✅ **Functionality**
-- All requirements met
-- Dealer IO tab fully functional
-- Multiple templates working
-- Backward compatible
-
-✅ **Documentation**
-- 90+ pages of documentation
-- Multiple examples
-- Step-by-step guides
-- Quick reference cards
-
-✅ **Flexibility**
-- Supports unlimited templates
-- Easy customization
-- Scalable architecture
-
-## 🚀 Ready for Production
-
-This implementation is **production-ready** with:
-
-- ✅ Error boundaries for graceful failures
-- ✅ Loading states for all async operations
-- ✅ Proper error handling and user feedback
-- ✅ Access control at multiple levels
-- ✅ Type safety throughout
-- ✅ Responsive design
-- ✅ Comprehensive documentation
-- ✅ Testing guidelines
-
-## 📞 Support
-
-All documentation is available in the `src/pages/RequestDetail/` directory:
-
-- Full documentation: `README_TEMPLATES.md`
-- Implementation guide: `IMPLEMENTATION_GUIDE.md` (root)
-- Quick reference: `QUICK_REFERENCE.md`
-- Examples: `examples/CustomTemplateExample.tsx`
-
----
-
-## 🎯 Conclusion
-
-You now have a **world-class, enterprise-grade, template-driven RequestDetail system** that:
-
-1. ✅ Solves your immediate need (dealer IO management)
-2. ✅ Provides long-term flexibility (multiple templates)
-3. ✅ Follows .NET best practices
-4. ✅ Is production-ready
-5. ✅ Is fully documented
-6. ✅ Is easy to extend
-
-The system is designed by a team of .NET experts with decades of experience, following enterprise architecture patterns and best practices. It will scale with your organization's needs while maintaining code quality and developer productivity.
-
-**You're ready to deploy!** 🚀
-
----
-
-**Created by**: .NET Professional Expert Team  
-**Date**: December 5, 2025  
-**Status**: ✅ Complete & Production-Ready
-

docs/FRONTEND_CLAIM_MANAGEMENT_UPDATES.md

@@ -0,0 +1,231 @@
+# Frontend Updates for Dealer Claim Management
+
+## Overview
+
+This document outlines the frontend changes needed to support the new backend structure with `workflowType` field for dealer claim management.
+
+## ✅ Completed
+
+1. **Created utility function** (`src/utils/claimRequestUtils.ts`)
+   - `isClaimManagementRequest()` - Checks if request is claim management (supports both old and new formats)
+   - `getWorkflowType()` - Gets workflow type from request
+   - `shouldUseClaimManagementUI()` - Determines if claim-specific UI should be used
+
+## 🔧 Required Updates
+
+### 1. Update RequestDetail Component
+
+**File**: `src/pages/RequestDetail/RequestDetail.tsx`
+
+**Changes Needed**:
+- Import `isClaimManagementRequest` from `@/utils/claimRequestUtils`
+- Conditionally render `ClaimManagementOverviewTab` instead of `OverviewTab` when it's a claim management request
+- Conditionally render `DealerClaimWorkflowTab` instead of `WorkflowTab` when it's a claim management request
+
+**Example**:
+```typescript
+import { isClaimManagementRequest } from '@/utils/claimRequestUtils';
+import { ClaimManagementOverviewTab } from './components/tabs/ClaimManagementOverviewTab';
+import { DealerClaimWorkflowTab } from './components/tabs/DealerClaimWorkflowTab';
+
+// In the component:
+const isClaimManagement = isClaimManagementRequest(apiRequest);
+
+<TabsContent value="overview">
+  {isClaimManagement ? (
+    <ClaimManagementOverviewTab
+      request={request}
+      apiRequest={apiRequest}
+      currentUserId={(user as any)?.userId}
+      isInitiator={isInitiator}
+    />
+  ) : (
+    <OverviewTab {...overviewProps} />
+  )}
+</TabsContent>
+
+<TabsContent value="workflow">
+  {isClaimManagement ? (
+    <DealerClaimWorkflowTab
+      request={request}
+      user={user}
+      isInitiator={isInitiator}
+      onRefresh={refreshDetails}
+    />
+  ) : (
+    <WorkflowTab {...workflowProps} />
+  )}
+</TabsContent>
+```
+
+### 2. Create Missing Utility Functions
+
+**File**: `src/pages/RequestDetail/utils/claimDataMapper.ts` (NEW FILE)
+
+**Functions Needed**:
+- `mapToClaimManagementRequest(apiRequest, userId)` - Maps backend API response to claim management structure
+- `determineUserRole(apiRequest, userId)` - Determines user's role (INITIATOR, DEALER, APPROVER, SPECTATOR)
+- Helper functions to extract claim-specific data from API response
+
+**Structure**:
+```typescript
+export interface ClaimManagementRequest {
+  activityInfo: {
+    activityName: string;
+    activityType: string;
+    activityDate: string;
+    location: string;
+    periodStart?: string;
+    periodEnd?: string;
+    estimatedBudget?: number;
+    closedExpensesBreakdown?: any[];
+  };
+  dealerInfo: {
+    dealerCode: string;
+    dealerName: string;
+    dealerEmail?: string;
+    dealerPhone?: string;
+    dealerAddress?: string;
+  };
+  proposalDetails?: {
+    costBreakup: any[];
+    totalEstimatedBudget: number;
+    timeline: string;
+    dealerComments?: string;
+  };
+  ioDetails?: {
+    ioNumber?: string;
+    availableBalance?: number;
+    blockedAmount?: number;
+    remainingBalance?: number;
+  };
+  dmsDetails?: {
+    dmsNumber?: string;
+    eInvoiceNumber?: string;
+    creditNoteNumber?: string;
+  };
+  claimAmount?: number;
+}
+
+export function mapToClaimManagementRequest(
+  apiRequest: any,
+  userId: string
+): ClaimManagementRequest | null {
+  // Extract data from apiRequest.claimDetails (from backend)
+  // Map to ClaimManagementRequest structure
+}
+
+export function determineUserRole(
+  apiRequest: any,
+  userId: string
+): 'INITIATOR' | 'DEALER' | 'APPROVER' | 'SPECTATOR' {
+  // Check if user is initiator
+  // Check if user is dealer (from participants or claimDetails)
+  // Check if user is approver (from approval levels)
+  // Check if user is spectator (from participants)
+}
+```
+
+### 3. Update ClaimManagementOverviewTab
+
+**File**: `src/pages/RequestDetail/components/tabs/ClaimManagementOverviewTab.tsx`
+
+**Changes Needed**:
+- Import the new utility functions from `claimDataMapper.ts`
+- Remove TODO comments
+- Ensure it properly handles both old and new API response formats
+
+### 4. Update API Service
+
+**File**: `src/services/workflowApi.ts`
+
+**Changes Needed**:
+- Add `workflowType` field to `CreateWorkflowFromFormPayload` interface
+- Include `workflowType: 'CLAIM_MANAGEMENT'` when creating claim management requests
+- Update response types to include `workflowType` field
+
+**Example**:
+```typescript
+export interface CreateWorkflowFromFormPayload {
+  templateId?: string | null;
+  templateType: 'CUSTOM' | 'TEMPLATE';
+  workflowType?: string;  // NEW: 'CLAIM_MANAGEMENT' | 'NON_TEMPLATIZED' | etc.
+  title: string;
+  // ... rest of fields
+}
+```
+
+### 5. Update ClaimManagementWizard
+
+**File**: `src/components/workflow/ClaimManagementWizard/ClaimManagementWizard.tsx`
+
+**Changes Needed**:
+- When submitting, include `workflowType: 'CLAIM_MANAGEMENT'` in the payload
+- Update to call the new backend API endpoint for creating claim requests
+
+### 6. Update Request List Components
+
+**Files**:
+- `src/pages/MyRequests/components/RequestCard.tsx`
+- `src/pages/Requests/components/RequestCard.tsx`
+- `src/pages/OpenRequests/components/RequestCard.tsx`
+
+**Changes Needed**:
+- Display template/workflow type badge based on `workflowType` field
+- Support both old (`templateType`) and new (`workflowType`) formats
+
+**Example**:
+```typescript
+const workflowType = request.workflowType || 
+  (request.templateType === 'claim-management' ? 'CLAIM_MANAGEMENT' : 'NON_TEMPLATIZED');
+
+{workflowType === 'CLAIM_MANAGEMENT' && (
+  <Badge variant="secondary">Claim Management</Badge>
+)}
+```
+
+### 7. Create API Service for Claim Management
+
+**File**: `src/services/dealerClaimApi.ts` (NEW FILE)
+
+**Endpoints Needed**:
+- `createClaimRequest(data)` - POST `/api/v1/dealer-claims`
+- `getClaimDetails(requestId)` - GET `/api/v1/dealer-claims/:requestId`
+- `submitProposal(requestId, data)` - POST `/api/v1/dealer-claims/:requestId/proposal`
+- `submitCompletion(requestId, data)` - POST `/api/v1/dealer-claims/:requestId/completion`
+- `updateIODetails(requestId, data)` - PUT `/api/v1/dealer-claims/:requestId/io`
+
+### 8. Update Type Definitions
+
+**File**: `src/types/index.ts`
+
+**Changes Needed**:
+- Add `workflowType?: string` to request interfaces
+- Update `ClaimFormData` interface to match backend structure
+
+## 📋 Implementation Order
+
+1. ✅ Create `claimRequestUtils.ts` (DONE)
+2. ⏳ Create `claimDataMapper.ts` with mapping functions
+3. ⏳ Update `RequestDetail.tsx` to conditionally render claim components
+4. ⏳ Update `workflowApi.ts` to include `workflowType`
+5. ⏳ Update `ClaimManagementWizard.tsx` to send `workflowType`
+6. ⏳ Create `dealerClaimApi.ts` for claim-specific endpoints
+7. ⏳ Update request card components to show workflow type
+8. ⏳ Test end-to-end flow
+
+## 🔄 Backward Compatibility
+
+The frontend should support both:
+- **Old Format**: `templateType: 'claim-management'`
+- **New Format**: `workflowType: 'CLAIM_MANAGEMENT'`
+
+The `isClaimManagementRequest()` utility function handles both formats automatically.
+
+## 📝 Notes
+
+- All existing claim management UI components are already created
+- The main work is connecting them to the new backend API structure
+- The `workflowType` field allows the system to support multiple template types in the future
+- All requests (claim management, non-templatized, future templates) will appear in "My Requests" and "Open Requests" automatically
+

index.html

@@ -1,61 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
   <meta charset="UTF-8" />
-    <!-- CSP: Allows blob URLs for file previews and cross-origin API calls during development -->
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self' blob:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self'; img-src 'self' data: https: blob:; connect-src 'self' blob: data: http://localhost:5000 http://localhost:3000 ws://localhost:5000 ws://localhost:3000 wss://localhost:5000 wss://localhost:3000; frame-src 'self' blob:; font-src 'self' https://fonts.gstatic.com data:; object-src 'none'; base-uri 'self'; form-action 'self';" />
   <link rel="icon" type="image/svg+xml" href="/royal_enfield_logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Royal Enfield Approval & Request Management Portal - Streamlined approval workflows for enterprise operations" />
+  <meta name="description"
+    content="Royal Enfield Approval & Request Management Portal - Streamlined approval workflows for enterprise operations" />
   <meta name="theme-color" content="#2d4a3e" />
   <title>Royal Enfield | Approval Portal</title>
 
-    <!-- Preload critical fonts and icons -->
+  <!-- Preload essential fonts and icons -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+</head>
 
-    <!-- Ensure proper icon rendering and layout -->
-    <style>
-      /* Ensure Lucide icons render properly */
-      svg {
-        display: inline-block;
-        vertical-align: middle;
-      }
-      
-      /* Fix for icon alignment in buttons */
-      button svg {
-        flex-shrink: 0;
-      }
-      
-      /* Ensure proper text rendering */
-      body {
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-rendering: optimizeLegibility;
-      }
-      
-      /* Fix for mobile viewport and sidebar */
-      @media (max-width: 768px) {
-        html {
-          overflow-x: hidden;
-        }
-      }
-      
-      /* Ensure proper sidebar toggle behavior */
-      .sidebar-toggle {
-        transition: all 0.3s ease-in-out;
-      }
-      
-      /* Fix for icon button hover states */
-      button:hover svg {
-        transform: scale(1.05);
-        transition: transform 0.2s ease;
-      }
-    </style>
-  </head>
-  <body>
+<body>
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+</body>
 
+</html>

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Disallow: /api/
+
+Sitemap: https://reflow.royalenfield.com/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://reflow.royalenfield.com</loc>
+    <lastmod>2024-03-20T12:00:00+00:00</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>

src/App.tsx

@@ -1,16 +1,16 @@
 import { useState, useEffect } from 'react';
-import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, useNavigate, Outlet } from 'react-router-dom';
 import { PageLayout } from '@/components/layout/PageLayout';
 import { Dashboard } from '@/pages/Dashboard';
 import { OpenRequests } from '@/pages/OpenRequests';
 import { ClosedRequests } from '@/pages/ClosedRequests';
 import { RequestDetail } from '@/pages/RequestDetail';
-import { RequestDetailTemplated } from '@/pages/RequestDetail/RequestDetailTemplated';
 import { SharedSummaries } from '@/pages/SharedSummaries/SharedSummaries';
 import { SharedSummaryDetail } from '@/pages/SharedSummaries/SharedSummaryDetail';
 import { WorkNotes } from '@/pages/WorkNotes';
 import { CreateRequest } from '@/pages/CreateRequest';
-import { ClaimManagementWizard } from '@/components/workflow/ClaimManagementWizard';
+import { ClaimManagementWizard } from '@/dealer-claim/components/request-creation/ClaimManagementWizard';
+import { DealerDashboard } from '@/dealer-claim/pages/Dashboard';
 import { MyRequests } from '@/pages/MyRequests';
 import { Requests } from '@/pages/Requests/Requests';
 import { UserAllRequests } from '@/pages/Requests/UserAllRequests';
@@ -18,23 +18,21 @@ import { useAuth, hasManagementAccess } from '@/contexts/AuthContext';
 import { ApproverPerformance } from '@/pages/ApproverPerformance/ApproverPerformance';
 import { Profile } from '@/pages/Profile';
 import { Settings } from '@/pages/Settings';
+import { SecuritySettings } from '@/pages/Settings/SecuritySettings';
 import { Notifications } from '@/pages/Notifications';
 import { DetailedReports } from '@/pages/DetailedReports';
-import { Admin } from '@/pages/Admin';
+
+import { AdminTemplatesList } from '@/pages/Admin/Templates/AdminTemplatesList';
+import { CreateTemplate } from '@/pages/Admin/Templates/CreateTemplate';
+import { CreateAdminRequest } from '@/pages/CreateAdminRequest/CreateAdminRequest';
 import { ApprovalActionModal } from '@/components/modals/ApprovalActionModal';
 import { Toaster } from '@/components/ui/sonner';
 import { toast } from 'sonner';
-import { CUSTOM_REQUEST_DATABASE } from '@/utils/customRequestDatabase';
-import { CLAIM_MANAGEMENT_DATABASE } from '@/utils/claimManagementDatabase';
 import { AuthCallback } from '@/pages/Auth/AuthCallback';
-import { mockApi } from '@/services/mockApi';
-
-// Combined Request Database for backward compatibility
-// This combines both custom and claim management requests
-export const REQUEST_DATABASE: any = {
-  ...CUSTOM_REQUEST_DATABASE,
-  ...CLAIM_MANAGEMENT_DATABASE
-};
+import { createClaimRequest } from '@/services/dealerClaimApi';
+import { ManagerSelectionModal } from '@/components/modals/ManagerSelectionModal';
+import { navigateToRequest } from '@/utils/requestNavigation';
+import { TokenManager } from '@/utils/tokenManager';
 
 interface AppProps {
   onLogout?: () => void;
@@ -56,14 +54,64 @@ function RequestsRoute({ onViewRequest }: { onViewRequest: (requestId: string) =
   }
 }
 
+// Component to conditionally render Dashboard or DealerDashboard based on user job title
+function DashboardRoute({ onNavigate, onNewRequest }: { onNavigate?: (page: string) => void; onNewRequest?: () => void }) {
+  const [isDealer, setIsDealer] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    try {
+      const userData = TokenManager.getUserData();
+      setIsDealer(userData?.jobTitle === 'Dealer');
+    } catch (error) {
+      console.error('[App] Error checking dealer status:', error);
+      setIsDealer(false);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="flex flex-col items-center gap-4">
+          <div className="w-8 h-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent" />
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Render dealer-specific dashboard if user is a dealer
+  if (isDealer) {
+    return <DealerDashboard onNavigate={onNavigate} onNewRequest={onNewRequest} />;
+  }
+
+  // Render regular dashboard for all other users
+  return <Dashboard onNavigate={onNavigate} onNewRequest={onNewRequest} />;
+}
+
 // Main Application Routes Component
 function AppRoutes({ onLogout }: AppProps) {
   const navigate = useNavigate();
-  const { user } = useAuth(); // Add user from useAuth hook
   const [approvalAction, setApprovalAction] = useState<'approve' | 'reject' | null>(null);
   const [dynamicRequests, setDynamicRequests] = useState<any[]>([]);
   const [selectedRequestId, setSelectedRequestId] = useState<string>('');
   const [selectedRequestTitle, setSelectedRequestTitle] = useState<string>('');
+  const [managerModalOpen, setManagerModalOpen] = useState(false);
+  const [managerModalData, setManagerModalData] = useState<{
+    errorType: 'NO_MANAGER_FOUND' | 'MULTIPLE_MANAGERS_FOUND';
+    managers?: Array<{
+      userId: string;
+      email: string;
+      displayName: string;
+      firstName?: string;
+      lastName?: string;
+      department?: string;
+    }>;
+    message?: string;
+    pendingClaimData?: any;
+  } | null>(null);
 
   // Retrieve dynamic requests from localStorage on mount
   useEffect(() => {
@@ -104,17 +152,18 @@ function AppRoutes({ onLogout }: AppProps) {
     }
   };
 
-  const handleViewRequest = async (requestId: string, requestTitle?: string, status?: string) => {
+  const handleViewRequest = (requestId: string, requestTitle?: string, status?: string, request?: any) => {
     setSelectedRequestId(requestId);
     setSelectedRequestTitle(requestTitle || 'Unknown Request');
 
-    // Check if request is a draft - if so, route to edit form instead of detail view
-    const isDraft = status?.toLowerCase() === 'draft' || status === 'DRAFT';
-    if (isDraft) {
-      navigate(`/edit-request/${requestId}`);
-    } else {
-      navigate(`/request/${requestId}`);
-    }
+    // Use global navigation utility for consistent routing
+    navigateToRequest({
+      requestId,
+      requestTitle,
+      status,
+      request,
+      navigate,
+    });
   };
 
   const handleBack = () => {
@@ -135,9 +184,16 @@ function AppRoutes({ onLogout }: AppProps) {
       return;
     }
 
-    // Regular custom request submission
+    // If requestData has backendId, it means it came from the API flow (CreateRequest component)
+    // The hook already shows the toast, so we just navigate
+    if (requestData.backendId) {
+      navigate('/my-requests');
+      return;
+    }
+
+    // Regular custom request submission (old flow without API)
     // Generate unique ID for the new custom request
-    const requestId = `RE-REQ-2024-${String(Object.keys(CUSTOM_REQUEST_DATABASE).length + dynamicRequests.length + 1).padStart(3, '0')}`;
+    const requestId = `RE-REQ-2024-${String(dynamicRequests.length + 1).padStart(3, '0')}`;
 
     // Create full custom request object
     const newCustomRequest = {
@@ -237,10 +293,6 @@ function AppRoutes({ onLogout }: AppProps) {
     setDynamicRequests([...dynamicRequests, newCustomRequest]);
 
     navigate('/my-requests');
-    toast.success('Request Submitted Successfully!', {
-      description: `Your request "${requestData.title}" (${requestId}) has been created and sent for approval.`,
-      duration: 1000,
-    });
   };
 
   const handleApprovalSubmit = (action: 'approve' | 'reject', _comment: string) => {
@@ -249,12 +301,12 @@ function AppRoutes({ onLogout }: AppProps) {
         if (action === 'approve') {
           toast.success('Request Approved', {
             description: 'The request has been approved and forwarded to the next step.',
-            duration: 1000,
+            duration: 5000,
           });
         } else {
           toast.error('Request Rejected', {
             description: 'The request has been rejected and returned to the initiator.',
-            duration: 1000,
+            duration: 5000,
           });
         }
 
@@ -268,262 +320,115 @@ function AppRoutes({ onLogout }: AppProps) {
     setApprovalAction(null);
   };
 
-  const handleClaimManagementSubmit = async (claimData: any) => {
-    // Generate unique ID
-    const year = new Date().getFullYear();
-    const requestsResponse = await mockApi.getAllRequests();
-    const requests = requestsResponse.success ? (requestsResponse.data || []) : [];
-    const existingIds = requests
-      .filter((r: any) => r.requestId?.includes(`${year}-CM`))
-      .map((r: any) => {
-        const match = r.requestId?.match(/-(\d+)$/);
-        return match ? parseInt(match[1]) : 0;
-      });
-    const nextNumber = existingIds.length > 0 ? Math.max(...existingIds) + 1 : 1;
-    const requestId = `RE-REQ-${year}-CM-${nextNumber.toString().padStart(3, '0')}`;
-    
-    const now = new Date().toISOString();
-    const dueDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString();
-    
-    // Create full request object matching DatabaseRequest interface
-    const newRequest = {
-      id: requestId,
-      requestId: requestId,
-      requestNumber: requestId,
-      title: `${claimData.activityName} - Claim Request`,
-      description: claimData.requestDescription,
-      category: 'claim-management',
-      subcategory: 'Claim Management',
-      type: 'dealer-claim',
-      status: 'pending',
-      priority: 'standard',
-      amount: claimData.estimatedBudget ? parseFloat(claimData.estimatedBudget.replace(/[₹,]/g, '')) || 0 : 0,
-      claimAmount: claimData.estimatedBudget ? parseFloat(claimData.estimatedBudget.replace(/[₹,]/g, '')) || 0 : 0,
-      slaProgress: 0,
-      slaRemaining: '7 days',
-      slaEndDate: dueDate,
-      currentStep: 1,
-      totalSteps: 8,
-      template: 'claim-management',
-      templateName: 'Claim Management',
-      initiator: {
-        userId: (user as any)?.userId || 'user-123',
-        name: (user as any)?.name || 'Current User',
-        email: (user as any)?.email || 'current.user@royalenfield.com',
-        role: (user as any)?.role || 'Regional Marketing Coordinator',
-        department: (user as any)?.department || 'Marketing',
-        phone: (user as any)?.phone || '+91 98765 43290',
-        avatar: (user as any)?.name?.split(' ').map((n: string) => n[0]).join('').toUpperCase() || 'CU'
-      },
-      department: (user as any)?.department || 'Marketing',
-      createdAt: now,
-      updatedAt: now,
-      dueDate: dueDate,
-      conclusionRemark: '',
-      claimDetails: {
+  const handleClaimManagementSubmit = async (claimData: any, _selectedManagerEmail?: string) => {
+    try {
+      // Prepare payload for API
+      const payload = {
         activityName: claimData.activityName,
         activityType: claimData.activityType,
-        activityDate: claimData.activityDate ? new Date(claimData.activityDate).toISOString() : now,
-        location: claimData.location,
         dealerCode: claimData.dealerCode,
         dealerName: claimData.dealerName,
-        dealerEmail: claimData.dealerEmail || 'N/A',
-        dealerPhone: claimData.dealerPhone || 'N/A',
-        dealerAddress: claimData.dealerAddress || 'N/A',
-        requestDescription: claimData.requestDescription,
-        estimatedBudget: claimData.estimatedBudget || 'TBD',
-        periodStart: claimData.periodStartDate ? new Date(claimData.periodStartDate).toISOString() : now,
-        periodEnd: claimData.periodEndDate ? new Date(claimData.periodEndDate).toISOString() : dueDate
-      },
-      // Also add dealerInfo for compatibility
-      dealerInfo: {
-        name: claimData.dealerName,
-        code: claimData.dealerCode,
-        email: claimData.dealerEmail || 'N/A',
-        phone: claimData.dealerPhone || 'N/A',
-        address: claimData.dealerAddress || 'N/A',
-      },
-      // Add activityInfo for compatibility
-      activityInfo: {
-        activityName: claimData.activityName,
-        activityType: claimData.activityType,
-        activityDate: claimData.activityDate ? new Date(claimData.activityDate).toISOString() : now,
+        dealerEmail: claimData.dealerEmail || undefined,
+        dealerPhone: claimData.dealerPhone || undefined,
+        dealerAddress: claimData.dealerAddress || undefined,
+        activityDate: claimData.activityDate ? new Date(claimData.activityDate).toISOString() : undefined,
         location: claimData.location,
-      },
-      tags: ['claim-management', 'new-request', claimData.activityType?.toLowerCase().replace(/\s+/g, '-')]
+        requestDescription: claimData.requestDescription,
+        periodStartDate: claimData.periodStartDate ? new Date(claimData.periodStartDate).toISOString() : undefined,
+        periodEndDate: claimData.periodEndDate ? new Date(claimData.periodEndDate).toISOString() : undefined,
+        estimatedBudget: claimData.estimatedBudget || undefined,
+        approvers: claimData.approvers || [], // Pass approvers array
       };
 
-    // Save to mock API
-    try {
-      console.log('[Claim Management] Creating request:', requestId);
-      const createResponse = await mockApi.createRequest(newRequest);
-      if (!createResponse.success) {
-        throw new Error(createResponse.error?.message || 'Failed to create request');
+      // Call API to create claim request
+      const response = await createClaimRequest(payload);
+
+      // Validate response - ensure request was actually created successfully
+      if (!response || !response.request) {
+        throw new Error('Invalid response from server: Request object not found');
       }
-      const savedRequest = createResponse.data;
-      console.log('[Claim Management] Request created successfully:', savedRequest.requestId);
 
-      // Create approval flow steps for dealer claim (8-step workflow)
-      const initiatorName = (user as any)?.name || 'Current User';
-      const approvalFlowSteps = [
-        { 
-          step: 1, 
-          approver: `${claimData.dealerName} (Dealer)`, 
-          role: 'Dealer - Proposal Submission', 
-          status: 'pending' as const, 
-          tatHours: 72, 
-          levelId: 'level-1',
-          description: 'Dealer submits the proposal for the activity with comments including proposal document with requested details, cost break-up, timeline for closure, and other requests'
-        },
-        { 
-          step: 2, 
-          approver: `${initiatorName} (Requestor)`, 
-          role: 'Requestor Evaluation & Confirmation', 
-          status: 'waiting' as const, 
-          tatHours: 48, 
-          levelId: 'level-2',
-          description: 'Requestor evaluates the request and confirms with comments. Decision point: Confirms? (YES → Continue to Dept Lead / NO → Request is cancelled)'
-        },
-        { 
-          step: 3, 
-          approver: 'Department Lead', 
-          role: 'Dept Lead Approval', 
-          status: 'waiting' as const, 
-          tatHours: 72, 
-          levelId: 'level-3',
-          description: 'Department Lead approval. Decision point: Approved? (YES → Budget is blocked in the respective IO for the activity / NO → More clarification required → Request is cancelled)'
-        },
-        { 
-          step: 4, 
-          approver: 'System Auto-Process', 
-          role: 'Activity Creation', 
-          status: 'waiting' as const, 
-          tatHours: 1, 
-          levelId: 'level-4',
-          description: 'Activity is created. Activity confirmation email is auto-triggered to dealer / requestor / Lead. IO confirmation to be made.'
-        },
-        { 
-          step: 5, 
-          approver: `${claimData.dealerName} (Dealer)`, 
-          role: 'Dealer - Completion Documents', 
-          status: 'waiting' as const, 
-          tatHours: 120, 
-          levelId: 'level-5',
-          description: 'Dealer submits the necessary documents upon completion of the activity including document attachments (Zip Folder) and brief description'
-        },
-        { 
-          step: 6, 
-          approver: `${initiatorName} (Requestor)`, 
-          role: 'Requestor - Claim Approval', 
-          status: 'waiting' as const, 
-          tatHours: 48, 
-          levelId: 'level-6',
-          description: 'Requestor approves the claim in full or can modify the amount. If more information is required, can request additional details from dealer.'
-        },
-        { 
-          step: 7, 
-          approver: 'System Auto-Process', 
-          role: 'E-Invoice Generation', 
-          status: 'waiting' as const, 
-          tatHours: 1, 
-          levelId: 'level-7',
-          description: 'E-invoice will be generated through DMS.'
-        },
-        { 
-          step: 8, 
-          approver: 'Finance Team', 
-          role: 'Credit Note from SAP', 
-          status: 'waiting' as const, 
-          tatHours: 48, 
-          levelId: 'level-8',
-          description: 'Got credit note from SAP. Review and send to dealer to complete the claim management process.'
-        },
-      ];
+      const createdRequest = response.request;
 
-      // Create approval flow steps
-      console.log('[Claim Management] Creating approval flows...');
-      for (const step of approvalFlowSteps) {
-        const flowResponse = await mockApi.createApprovalFlow(savedRequest.requestId, {
-          step: step.step,
-          levelId: step.levelId || `level-${step.step}`,
-          approver: step.approver,
-          role: step.role,
-          status: step.status,
-          tatHours: step.tatHours,
-          assignedAt: step.status === 'pending' ? now : undefined,
-          description: step.description,
+      // Validate that we have at least one identifier (requestNumber or requestId)
+      if (!createdRequest.requestNumber && !createdRequest.requestId) {
+        throw new Error('Invalid response from server: Request identifier not found');
+      }
+
+      // Close manager modal if open
+      setManagerModalOpen(false);
+      setManagerModalData(null);
+
+      // Only show success toast if request was actually created successfully
+      toast.success('Claim Request Submitted', {
+        description: 'Your claim management request has been created successfully.',
       });
-        if (!flowResponse.success) {
-          console.error(`[Claim Management] Failed to create approval flow step ${step.step}:`, flowResponse.error);
+
+      // Navigate to the created request detail page using requestNumber
+      if (createdRequest.requestNumber) {
+        navigate(`/request/${createdRequest.requestNumber}`);
+      } else if (createdRequest.requestId) {
+        // Fallback to requestId if requestNumber is not available
+        navigate(`/request/${createdRequest.requestId}`);
       } else {
-          console.log(`[Claim Management] Created approval flow Step ${step.step}:`, flowResponse.data);
+        // This should not happen due to validation above, but just in case
+        navigate('/my-requests');
       }
-      }
-      console.log('[Claim Management] All approval flows created');
-      
-      // Create initial activity
-      const activityResponse = await mockApi.createActivity(savedRequest.requestId, {
-        id: `act-${Date.now()}`,
-        type: 'created',
-        action: 'Request Created',
-        details: `Claim request for ${claimData.activityName} created`,
-        user: savedRequest.initiator.name,
-        message: 'Request created',
-      });
-      if (!activityResponse.success) {
-        console.error('[Claim Management] Failed to create initial activity:', activityResponse.error);
-      }
-      
-      // Add to dynamic requests for immediate UI update
-      setDynamicRequests(prev => [...prev, savedRequest]);
-      
-      // Also add to REQUEST_DATABASE for backward compatibility
-      (REQUEST_DATABASE as any)[requestId] = savedRequest;
-      
-      console.log('[Claim Management] Request fully created. Navigating to:', `/request/${requestId}`);
-      
-      // Show success message with more details
-      toast.success('Claim Request Submitted Successfully!', {
-        description: `Request ${requestId} has been created and is ready for dealer proposal submission.`,
-        duration: 5000,
-      });
-      
-      // Small delay to ensure toast is visible before navigation
-      await new Promise(resolve => setTimeout(resolve, 500));
-      
-      // Navigate to the demo request detail page
-      navigate(`/demo/request-detail/${requestId}`, { 
-        replace: false,
-        state: { 
-          fromWizard: true,
-          requestId: requestId 
-        }
-      });
     } catch (error: any) {
-      console.error('[Claim Management] Failed to create request:', error);
-      toast.error('Failed to Submit Request', {
-        description: error.message || 'An error occurred while creating the request. Please try again.',
-        duration: 2000,
+      console.error('[App] Error creating claim request:', error);
+
+      // Check for manager-related errors
+      const errorData = error?.response?.data;
+      const errorCode = errorData?.code || errorData?.error?.code;
+
+      if (errorCode === 'NO_MANAGER_FOUND') {
+        // Show modal for no manager found
+        setManagerModalData({
+          errorType: 'NO_MANAGER_FOUND',
+          message: errorData?.message || errorData?.error?.message || 'No reporting manager found. Please ensure your manager is correctly configured in the system.',
+          pendingClaimData: claimData,
         });
-      throw error; // Re-throw to allow component to handle it
+        setManagerModalOpen(true);
+        return;
       }
+
+      if (errorCode === 'MULTIPLE_MANAGERS_FOUND') {
+        // Show modal with manager list for selection
+        const managers = errorData?.managers || errorData?.error?.managers || [];
+        setManagerModalData({
+          errorType: 'MULTIPLE_MANAGERS_FOUND',
+          managers: managers,
+          message: errorData?.message || errorData?.error?.message || 'Multiple managers found. Please select one.',
+          pendingClaimData: claimData,
+        });
+        setManagerModalOpen(true);
+        return;
+      }
+
+      // Other errors - show toast
+      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to create claim request';
+      toast.error('Failed to Submit Claim Request', {
+        description: errorMessage,
+      });
+    }
+
   };
 
   return (
     <div className="min-h-screen h-screen flex flex-col overflow-hidden bg-background">
       <Routes>
-        {/* Auth Callback - Must be before other routes */}
+        {/* Auth Callback - Unified callback for both OKTA and Tanflow */}
         <Route
           path="/login/callback"
           element={<AuthCallback />}
         />
 
-        {/* Dashboard */}
+        {/* Dashboard - Conditionally renders DealerDashboard or regular Dashboard */}
         <Route
           path="/"
           element={
             <PageLayout currentPage="dashboard" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
-              <Dashboard onNavigate={handleNavigate} onNewRequest={handleNewRequest} />
+              <DashboardRoute onNavigate={handleNavigate} onNewRequest={handleNewRequest} />
             </PageLayout>
           }
         />
@@ -532,11 +437,34 @@ function AppRoutes({ onLogout }: AppProps) {
           path="/dashboard"
           element={
             <PageLayout currentPage="dashboard" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
-              <Dashboard onNavigate={handleNavigate} onNewRequest={handleNewRequest} />
+              <DashboardRoute onNavigate={handleNavigate} onNewRequest={handleNewRequest} />
             </PageLayout>
           }
         />
 
+        {/* Admin Routes Group with Shared Layout */}
+        <Route
+          element={
+            <PageLayout currentPage="admin-templates" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
+              <Outlet />
+            </PageLayout>
+          }
+        >
+          <Route path="/admin/create-template" element={<CreateTemplate />} />
+          <Route path="/admin/edit-template/:templateId" element={<CreateTemplate />} />
+          <Route path="/admin/templates" element={<AdminTemplatesList />} />
+        </Route>
+
+        {/* Create Request from Admin Template (Dedicated Flow) */}
+        <Route
+          path="/create-admin-request/:templateId"
+          element={
+            <CreateAdminRequest />
+          }
+        />
+
+
+
         {/* Open Requests */}
         <Route
           path="/open-requests"
@@ -621,18 +549,6 @@ function AppRoutes({ onLogout }: AppProps) {
           }
         />
 
-        {/* Demo Request Detail - Template System Preview */}
-        <Route 
-          path="/demo/request-detail/:requestId" 
-          element={
-            <RequestDetailTemplated 
-              requestId=""
-              onBack={handleBack}
-              dynamicRequests={dynamicRequests}
-            />
-          } 
-        />
-
         {/* Work Notes - Dedicated Full-Screen Page */}
         <Route
           path="/work-notes/:requestId"
@@ -694,6 +610,16 @@ function AppRoutes({ onLogout }: AppProps) {
           }
         />
 
+        {/* Security Settings */}
+        <Route
+          path="/settings/security"
+          element={
+            <PageLayout currentPage="settings" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
+              <SecuritySettings />
+            </PageLayout>
+          }
+        />
+
         {/* Notifications */}
         <Route
           path="/notifications"
@@ -714,15 +640,9 @@ function AppRoutes({ onLogout }: AppProps) {
           }
         />
 
-        {/* Admin Control Panel */}
-        <Route 
-          path="/admin" 
-          element={
-            <PageLayout currentPage="admin" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
-              <Admin />
-            </PageLayout>
-          } 
-        />
+
+
+
       </Routes>
 
       <Toaster
@@ -736,6 +656,27 @@ function AppRoutes({ onLogout }: AppProps) {
         }}
       />
 
+      {/* Manager Selection Modal */}
+      <ManagerSelectionModal
+        open={managerModalOpen}
+        onClose={() => {
+          setManagerModalOpen(false);
+          setManagerModalData(null);
+        }}
+        onSelect={async (managerEmail: string) => {
+          if (managerModalData?.pendingClaimData) {
+            // Retry creating claim request with selected manager
+            // The pendingClaimData contains all the form data from the wizard
+            // This preserves the entire submission state while waiting for manager selection
+            await handleClaimManagementSubmit(managerModalData.pendingClaimData, managerEmail);
+          }
+        }}
+        managers={managerModalData?.managers}
+        errorType={managerModalData?.errorType || 'NO_MANAGER_FOUND'}
+        message={managerModalData?.message}
+        isLoading={false} // Will be set to true during retry if needed
+      />
+
       {/* Approval Action Modal */}
       {approvalAction && (
         <ApprovalActionModal

src/assets/index.ts

@@ -8,6 +8,7 @@
 // Images
 export { default as ReLogo } from './images/Re_Logo.png';
 export { default as RoyalEnfieldLogo } from './images/royal_enfield_logo.png';
+export { default as LandingPageImage } from './images/landing_page_image.jpg';
 
 // Fonts
 // Add font exports here when fonts are added to the assets/fonts folder

src/components/admin/AIConfig/AIConfig.tsx

@@ -11,10 +11,6 @@ import { toast } from 'sonner';
 
 interface AIConfigData {
   aiEnabled: boolean;
-  aiProvider: 'claude' | 'openai' | 'gemini';
-  claudeApiKey: string;
-  openaiApiKey: string;
-  geminiApiKey: string;
   aiRemarkGeneration: boolean;
   maxRemarkChars: number;
 }
@@ -22,19 +18,10 @@ interface AIConfigData {
 export function AIConfig() {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
-  const [showApiKeys, setShowApiKeys] = useState<Record<string, boolean>>({
-    claude: false,
-    openai: false,
-    gemini: false
-  });
   const [config, setConfig] = useState<AIConfigData>({
     aiEnabled: true,
-    aiProvider: 'claude',
-    claudeApiKey: '',
-    openaiApiKey: '',
-    geminiApiKey: '',
     aiRemarkGeneration: true,
-    maxRemarkChars: 500
+    maxRemarkChars: 2000
   });
 
   useEffect(() => {
@@ -54,10 +41,6 @@ export function AIConfig() {
 
       setConfig({
         aiEnabled: configMap['AI_ENABLED'] === 'true',
-        aiProvider: (configMap['AI_PROVIDER'] || 'claude') as 'claude' | 'openai' | 'gemini',
-        claudeApiKey: configMap['CLAUDE_API_KEY'] || '',
-        openaiApiKey: configMap['OPENAI_API_KEY'] || '',
-        geminiApiKey: configMap['GEMINI_API_KEY'] || '',
         aiRemarkGeneration: configMap['AI_REMARK_GENERATION_ENABLED'] === 'true',
         maxRemarkChars: parseInt(configMap['AI_MAX_REMARK_LENGTH'] || '2000')
       });
@@ -76,10 +59,6 @@ export function AIConfig() {
       // Save all configurations
       await Promise.all([
         updateConfiguration('AI_ENABLED', config.aiEnabled.toString()),
-        updateConfiguration('AI_PROVIDER', config.aiProvider),
-        updateConfiguration('CLAUDE_API_KEY', config.claudeApiKey),
-        updateConfiguration('OPENAI_API_KEY', config.openaiApiKey),
-        updateConfiguration('GEMINI_API_KEY', config.geminiApiKey),
         updateConfiguration('AI_REMARK_GENERATION_ENABLED', config.aiRemarkGeneration.toString()),
         updateConfiguration('AI_MAX_REMARK_LENGTH', config.maxRemarkChars.toString())
       ]);
@@ -100,19 +79,6 @@ export function AIConfig() {
     setConfig(prev => ({ ...prev, ...updates }));
   };
 
-  const toggleApiKeyVisibility = (provider: 'claude' | 'openai' | 'gemini') => {
-    setShowApiKeys(prev => ({
-      ...prev,
-      [provider]: !prev[provider]
-    }));
-  };
-
-  const maskApiKey = (key: string): string => {
-    if (!key || key.length === 0) return '';
-    if (key.length <= 8) return '••••••••';
-    return key.substring(0, 4) + '••••••••' + key.substring(key.length - 4);
-  };
-
   if (loading) {
     return (
       <Card className="shadow-lg border-0 rounded-md">
@@ -134,7 +100,7 @@ export function AIConfig() {
           <div>
             <CardTitle className="text-lg font-semibold text-gray-900">AI Features Configuration</CardTitle>
             <CardDescription className="text-sm text-gray-600">
-              Configure AI provider, API keys, and enable/disable AI-powered features
+              Configure Vertex AI Gemini settings and enable/disable AI-powered features
             </CardDescription>
           </div>
         </div>
@@ -142,18 +108,7 @@ export function AIConfig() {
       <CardContent className="space-y-6">
         <AIProviderSettings
           aiEnabled={config.aiEnabled}
-          aiProvider={config.aiProvider}
-          claudeApiKey={config.claudeApiKey}
-          openaiApiKey={config.openaiApiKey}
-          geminiApiKey={config.geminiApiKey}
-          showApiKeys={showApiKeys}
           onAiEnabledChange={(enabled) => updateConfig({ aiEnabled: enabled })}
-          onProviderChange={(provider) => updateConfig({ aiProvider: provider })}
-          onClaudeApiKeyChange={(key) => updateConfig({ claudeApiKey: key })}
-          onOpenaiApiKeyChange={(key) => updateConfig({ openaiApiKey: key })}
-          onGeminiApiKeyChange={(key) => updateConfig({ geminiApiKey: key })}
-          onToggleApiKeyVisibility={toggleApiKeyVisibility}
-          maskApiKey={maskApiKey}
         />
 
         <Separator />

src/components/admin/AIConfig/AIProviderSettings.tsx

@@ -1,63 +1,25 @@
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
 import { Switch } from '@/components/ui/switch';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Brain, Eye, EyeOff, Key } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { Brain } from 'lucide-react';
 
 interface AIProviderSettingsProps {
   aiEnabled: boolean;
-  aiProvider: 'claude' | 'openai' | 'gemini';
-  claudeApiKey: string;
-  openaiApiKey: string;
-  geminiApiKey: string;
-  showApiKeys: Record<string, boolean>;
   onAiEnabledChange: (enabled: boolean) => void;
-  onProviderChange: (provider: 'claude' | 'openai' | 'gemini') => void;
-  onClaudeApiKeyChange: (key: string) => void;
-  onOpenaiApiKeyChange: (key: string) => void;
-  onGeminiApiKeyChange: (key: string) => void;
-  onToggleApiKeyVisibility: (provider: 'claude' | 'openai' | 'gemini') => void;
-  maskApiKey: (key: string) => string;
 }
 
-const PROVIDERS = [
-  { value: 'claude', label: 'Claude (Anthropic)', description: 'Advanced AI by Anthropic' },
-  { value: 'openai', label: 'OpenAI (GPT-4)', description: 'GPT-4 by OpenAI' },
-  { value: 'gemini', label: 'Gemini (Google)', description: 'Gemini by Google' }
-];
-
 export function AIProviderSettings({
   aiEnabled,
-  aiProvider,
-  claudeApiKey,
-  openaiApiKey,
-  geminiApiKey,
-  showApiKeys,
-  onAiEnabledChange,
-  onProviderChange,
-  onClaudeApiKeyChange,
-  onOpenaiApiKeyChange,
-  onGeminiApiKeyChange,
-  onToggleApiKeyVisibility,
-  maskApiKey
+  onAiEnabledChange
 }: AIProviderSettingsProps) {
   return (
     <Card className="border-0 shadow-sm">
       <CardHeader className="pb-3">
         <div className="flex items-center gap-2">
           <Brain className="w-5 h-5 text-re-green" />
-          <CardTitle className="text-base font-semibold">AI Provider & API Keys</CardTitle>
+          <CardTitle className="text-base font-semibold">Vertex AI Gemini Configuration</CardTitle>
         </div>
         <CardDescription className="text-sm">
-          Select your AI provider and configure API keys
+          Configure AI features. Model and region are configured via environment variables.
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
@@ -74,145 +36,7 @@ export function AIProviderSettings({
             onCheckedChange={onAiEnabledChange}
           />
         </div>
-
-        {aiEnabled && (
-          <>
-            {/* Provider Selection */}
-            <div className="space-y-2">
-              <Label htmlFor="ai-provider" className="text-sm font-medium">
-                AI Provider
-              </Label>
-              <Select value={aiProvider} onValueChange={(value: any) => onProviderChange(value)}>
-                <SelectTrigger 
-                  id="ai-provider"
-                  className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20"
-                >
-                  <SelectValue placeholder="Select AI provider" />
-                </SelectTrigger>
-                <SelectContent>
-                  {PROVIDERS.map((provider) => (
-                    <SelectItem key={provider.value} value={provider.value}>
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium">{provider.label}</span>
-                        <span className="text-xs text-muted-foreground">-</span>
-                        <span className="text-xs text-muted-foreground">{provider.description}</span>
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* API Keys for each provider */}
-            <div className="space-y-4 pt-2">
-              <Label className="text-sm font-medium flex items-center gap-2">
-                <Key className="w-4 h-4" />
-                API Keys
-              </Label>
-              
-              {/* Claude API Key */}
-              <div className="space-y-2">
-                <Label htmlFor="claude-key" className="text-xs text-muted-foreground">
-                  Claude API Key
-                </Label>
-                <div className="flex gap-2">
-                  <Input
-                    id="claude-key"
-                    type={showApiKeys.claude ? 'text' : 'password'}
-                    value={claudeApiKey}
-                    onChange={(e) => onClaudeApiKeyChange(e.target.value)}
-                    placeholder={showApiKeys.claude ? "sk-ant-..." : maskApiKey(claudeApiKey) || "sk-ant-..."}
-                    className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20 font-mono text-sm"
-                  />
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon"
-                    onClick={() => onToggleApiKeyVisibility('claude')}
-                    className="border-gray-200"
-                  >
-                    {showApiKeys.claude ? (
-                      <EyeOff className="w-4 h-4" />
-                    ) : (
-                      <Eye className="w-4 h-4" />
-                    )}
-                  </Button>
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  Get your API key from console.anthropic.com
-                </p>
-              </div>
-
-              {/* OpenAI API Key */}
-              <div className="space-y-2">
-                <Label htmlFor="openai-key" className="text-xs text-muted-foreground">
-                  OpenAI API Key
-                </Label>
-                <div className="flex gap-2">
-                  <Input
-                    id="openai-key"
-                    type={showApiKeys.openai ? 'text' : 'password'}
-                    value={openaiApiKey}
-                    onChange={(e) => onOpenaiApiKeyChange(e.target.value)}
-                    placeholder={showApiKeys.openai ? "sk-..." : maskApiKey(openaiApiKey) || "sk-..."}
-                    className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20 font-mono text-sm"
-                  />
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon"
-                    onClick={() => onToggleApiKeyVisibility('openai')}
-                    className="border-gray-200"
-                  >
-                    {showApiKeys.openai ? (
-                      <EyeOff className="w-4 h-4" />
-                    ) : (
-                      <Eye className="w-4 h-4" />
-                    )}
-                  </Button>
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  Get your API key from platform.openai.com
-                </p>
-              </div>
-
-              {/* Gemini API Key */}
-              <div className="space-y-2">
-                <Label htmlFor="gemini-key" className="text-xs text-muted-foreground">
-                  Gemini API Key
-                </Label>
-                <div className="flex gap-2">
-                  <Input
-                    id="gemini-key"
-                    type={showApiKeys.gemini ? 'text' : 'password'}
-                    value={geminiApiKey}
-                    onChange={(e) => onGeminiApiKeyChange(e.target.value)}
-                    placeholder={showApiKeys.gemini ? "AIza..." : maskApiKey(geminiApiKey) || "AIza..."}
-                    className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20 font-mono text-sm"
-                  />
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon"
-                    onClick={() => onToggleApiKeyVisibility('gemini')}
-                    className="border-gray-200"
-                  >
-                    {showApiKeys.gemini ? (
-                      <EyeOff className="w-4 h-4" />
-                    ) : (
-                      <Eye className="w-4 h-4" />
-                    )}
-                  </Button>
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  Get your API key from ai.google.dev
-                </p>
-              </div>
-            </div>
-          </>
-        )}
       </CardContent>
     </Card>
   );
 }
-

src/components/admin/ActivityTypeManager.tsx

@@ -0,0 +1,464 @@
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  FileText,
+  Plus,
+  Trash2,
+  Edit2,
+  Loader2,
+  AlertCircle,
+  CheckCircle,
+} from 'lucide-react';
+import {
+  getAllActivityTypes,
+  createActivityType,
+  updateActivityType,
+  deleteActivityType,
+  ActivityType
+} from '@/services/adminApi';
+import { toast } from 'sonner';
+
+export function ActivityTypeManager() {
+  const [activityTypes, setActivityTypes] = useState<ActivityType[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [editingActivityType, setEditingActivityType] = useState<ActivityType | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [formData, setFormData] = useState({
+    title: '',
+    itemCode: '',
+    taxationType: '',
+    sapRefNo: ''
+  });
+
+  useEffect(() => {
+    loadActivityTypes();
+  }, []);
+
+  const loadActivityTypes = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getAllActivityTypes(false); // Get all including inactive
+      setActivityTypes(data);
+    } catch (err: any) {
+      const errorMsg = err.response?.data?.error || 'Failed to load activity types';
+      setError(errorMsg);
+      toast.error(errorMsg);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAdd = () => {
+    setFormData({
+      title: '',
+      itemCode: '',
+      taxationType: '',
+      sapRefNo: ''
+    });
+    setEditingActivityType(null);
+    setShowAddDialog(true);
+  };
+
+  const handleEdit = (activityType: ActivityType) => {
+    setFormData({
+      title: activityType.title,
+      itemCode: activityType.itemCode || '',
+      taxationType: activityType.taxationType || '',
+      sapRefNo: activityType.sapRefNo || ''
+    });
+    setEditingActivityType(activityType);
+    setShowAddDialog(true);
+  };
+
+  const handleSave = async () => {
+    try {
+      setError(null);
+
+      if (!formData.title.trim() || !formData.taxationType.trim() || !formData.sapRefNo.trim()) {
+        setError('Title, Taxation Type, and Claim Document Type (SAP Ref) are required');
+        toast.error('Please fill in all mandatory fields');
+        return;
+      }
+
+      const payload: Partial<ActivityType> = {
+        title: formData.title.trim(),
+        itemCode: formData.itemCode.trim() || null,
+        taxationType: formData.taxationType.trim(),
+        sapRefNo: formData.sapRefNo.trim()
+      };
+
+      if (editingActivityType) {
+        // Update existing
+        await updateActivityType(editingActivityType.activityTypeId, payload);
+        setSuccessMessage('Activity type updated successfully');
+        toast.success('Activity type updated successfully');
+      } else {
+        // Create new
+        await createActivityType(payload);
+        setSuccessMessage('Activity type created successfully');
+        toast.success('Activity type created successfully');
+      }
+
+      await loadActivityTypes();
+      setShowAddDialog(false);
+      setTimeout(() => setSuccessMessage(null), 3000);
+    } catch (err: any) {
+      const errorMsg = err.response?.data?.error || 'Failed to save activity type';
+      setError(errorMsg);
+      toast.error(errorMsg);
+    }
+  };
+
+  const handleDelete = async (activityType: ActivityType) => {
+    if (!confirm(`Delete "${activityType.title}"? This will deactivate the activity type.`)) {
+      return;
+    }
+
+    try {
+      setError(null);
+      await deleteActivityType(activityType.activityTypeId);
+      setSuccessMessage('Activity type deleted successfully');
+      toast.success('Activity type deleted successfully');
+      await loadActivityTypes();
+      setTimeout(() => setSuccessMessage(null), 3000);
+    } catch (err: any) {
+      const errorMsg = err.response?.data?.error || 'Failed to delete activity type';
+      setError(errorMsg);
+      toast.error(errorMsg);
+    }
+  };
+
+  // Filter active and inactive activity types
+  const activeActivityTypes = activityTypes.filter(at => at.isActive !== false && at.isActive !== undefined);
+  const inactiveActivityTypes = activityTypes.filter(at => at.isActive === false);
+
+  return (
+    <div className="space-y-6">
+      {/* Success Message */}
+      {successMessage && (
+        <div className="p-4 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-300 rounded-md shadow-sm flex items-center gap-3 animate-in fade-in slide-in-from-top-2 duration-300">
+          <div className="p-1.5 bg-green-500 rounded-md">
+            <CheckCircle className="w-4 h-4 text-white shrink-0" />
+          </div>
+          <p className="text-sm font-medium text-green-900">{successMessage}</p>
+        </div>
+      )}
+
+      {/* Error Message */}
+      {error && (
+        <div className="p-4 bg-gradient-to-r from-red-50 to-rose-50 border border-red-300 rounded-md shadow-sm flex items-center gap-3 animate-in fade-in slide-in-from-top-2 duration-300">
+          <div className="p-1.5 bg-red-500 rounded-md">
+            <AlertCircle className="w-4 h-4 text-white shrink-0" />
+          </div>
+          <p className="text-sm font-medium text-red-900">{error}</p>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => setError(null)}
+            className="ml-auto hover:bg-red-100"
+          >
+            Dismiss
+          </Button>
+        </div>
+      )}
+
+      {/* Header */}
+      <Card className="shadow-lg border-0 rounded-md">
+        <CardHeader className="border-b border-slate-100 py-4 sm:py-5">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
+            <div className="flex items-center gap-3">
+              <div className="p-2.5 bg-gradient-to-br from-slate-600 to-slate-700 rounded-md shadow-md">
+                <FileText className="w-5 h-5 text-white" />
+              </div>
+              <div>
+                <CardTitle className="text-lg sm:text-xl font-semibold text-slate-900">Activity Types</CardTitle>
+                <CardDescription className="text-sm">
+                  Manage dealer claim activity types
+                </CardDescription>
+              </div>
+            </div>
+            <Button
+              onClick={handleAdd}
+              className="gap-2 bg-re-green hover:bg-re-green/90 text-white shadow-sm"
+            >
+              <Plus className="w-4 h-4" />
+              <span className="hidden xs:inline">Add Activity Type</span>
+              <span className="xs:hidden">Add</span>
+            </Button>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Activity Types List */}
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
+        </div>
+      ) : activeActivityTypes.length === 0 ? (
+        <Card className="shadow-lg border-0 rounded-md">
+          <CardContent className="p-12 text-center">
+            <div className="p-4 bg-slate-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
+              <FileText className="w-10 h-10 text-slate-400" />
+            </div>
+            <p className="text-slate-700 font-medium text-lg">No activity types found</p>
+            <p className="text-sm text-slate-500 mt-2 mb-6">Add activity types for dealer claim management</p>
+            <Button
+              onClick={handleAdd}
+              variant="outline"
+              className="gap-2 border-slate-300 hover:bg-slate-50 hover:border-slate-400 shadow-sm"
+            >
+              <Plus className="w-4 h-4" />
+              Add First Activity Type
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-4 sm:space-y-6">
+          {/* Active Activity Types */}
+          <Card className="shadow-lg border-0 rounded-md">
+            <CardHeader className="pb-3 sm:pb-4 border-b border-slate-100">
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle className="text-base sm:text-lg font-semibold text-slate-900">Active Activity Types</CardTitle>
+                  <CardDescription className="text-xs sm:text-sm">
+                    {activeActivityTypes.length} active type{activeActivityTypes.length !== 1 ? 's' : ''}
+                  </CardDescription>
+                </div>
+                <div className="p-2 bg-green-50 rounded-md">
+                  <CheckCircle className="w-4 h-4 text-green-600" />
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-3 pt-4">
+              {activeActivityTypes.map(activityType => (
+                <div
+                  key={activityType.activityTypeId}
+                  className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4 p-3 sm:p-4 bg-slate-50 border border-slate-200 rounded-md hover:bg-slate-100 hover:border-slate-300 transition-all shadow-sm"
+                >
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-2 flex-wrap">
+                      <p className="font-semibold text-slate-900 text-sm sm:text-base">{activityType.title}</p>
+                      <Badge variant="outline" className="bg-gradient-to-r from-green-50 to-emerald-50 text-green-800 border-green-300 text-[10px] sm:text-xs font-medium shadow-sm">
+                        Active
+                      </Badge>
+                    </div>
+                    <div className="flex flex-wrap gap-3 text-xs sm:text-sm text-slate-600">
+                      {activityType.itemCode && (
+                        <span className="font-medium">Item Code: <span className="text-slate-900">{activityType.itemCode}</span></span>
+                      )}
+                      {activityType.taxationType && (
+                        <span className="font-medium">Taxation: <span className="text-slate-900">{activityType.taxationType}</span></span>
+                      )}
+                      {activityType.sapRefNo && (
+                        <span className="font-medium">SAP Ref: <span className="text-slate-900">{activityType.sapRefNo}</span></span>
+                      )}
+                      {!activityType.itemCode && !activityType.taxationType && !activityType.sapRefNo && (
+                        <span className="text-slate-500 italic">No additional details</span>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 sm:gap-2 self-end sm:self-auto">
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleEdit(activityType)}
+                      className="gap-1.5 hover:bg-blue-50 border border-transparent hover:border-blue-200 text-xs sm:text-sm"
+                    >
+                      <Edit2 className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                      <span className="hidden xs:inline">Edit</span>
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleDelete(activityType)}
+                      className="gap-1.5 text-red-600 hover:text-red-700 hover:bg-red-50 border border-transparent hover:border-red-200 text-xs sm:text-sm"
+                    >
+                      <Trash2 className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                      <span className="hidden xs:inline">Delete</span>
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          {/* Inactive Activity Types */}
+          {inactiveActivityTypes.length > 0 && (
+            <Card className="shadow-lg border-0 rounded-md border-amber-200">
+              <CardHeader className="pb-3 sm:pb-4 border-b border-slate-100">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <CardTitle className="text-base sm:text-lg font-semibold text-slate-900">Inactive Activity Types</CardTitle>
+                    <CardDescription className="text-xs sm:text-sm">
+                      {inactiveActivityTypes.length} inactive type{inactiveActivityTypes.length !== 1 ? 's' : ''}
+                    </CardDescription>
+                  </div>
+                  <div className="p-2 bg-amber-50 rounded-md">
+                    <AlertCircle className="w-4 h-4 text-amber-600" />
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-3 pt-4">
+                {inactiveActivityTypes.map(activityType => (
+                  <div
+                    key={activityType.activityTypeId}
+                    className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4 p-3 sm:p-4 bg-amber-50/50 border border-amber-200 rounded-md hover:bg-amber-50 hover:border-amber-300 transition-all shadow-sm"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-2 flex-wrap">
+                        <p className="font-semibold text-slate-700 text-sm sm:text-base line-through">{activityType.title}</p>
+                        <Badge variant="outline" className="bg-gradient-to-r from-amber-50 to-orange-50 text-amber-800 border-amber-300 text-[10px] sm:text-xs font-medium shadow-sm">
+                          Inactive
+                        </Badge>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 sm:gap-2 self-end sm:self-auto">
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => handleEdit(activityType)}
+                        className="gap-1.5 hover:bg-blue-50 border border-transparent hover:border-blue-200 text-xs sm:text-sm"
+                      >
+                        <Edit2 className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                        <span className="hidden xs:inline">Edit</span>
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      )}
+
+      {/* Add/Edit Dialog */}
+      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
+        <DialogContent className="sm:max-w-[550px] max-h-[90vh] rounded-lg flex flex-col p-0">
+          <DialogHeader className="pb-4 border-b border-slate-100 px-6 pt-6 flex-shrink-0">
+            <div className="flex items-center gap-3">
+              <div className="p-2.5 bg-gradient-to-br from-slate-600 to-slate-700 rounded-lg shadow-md">
+                <FileText className="w-5 h-5 text-white" />
+              </div>
+              <div className="flex-1">
+                <DialogTitle className="text-xl font-semibold text-slate-900">
+                  {editingActivityType ? 'Edit Activity Type' : 'Add New Activity Type'}
+                </DialogTitle>
+                <DialogDescription className="text-sm text-slate-600 mt-1">
+                  {editingActivityType ? 'Update activity type information' : 'Add a new activity type for dealer claim management'}
+                </DialogDescription>
+              </div>
+            </div>
+          </DialogHeader>
+
+          <div className="space-y-5 py-6 px-6 overflow-y-auto flex-1 min-h-0">
+            {/* Title Field */}
+            <div className="space-y-2">
+              <Label htmlFor="title" className="text-sm font-semibold text-slate-900 flex items-center gap-1">
+                Title <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="title"
+                placeholder="e.g., Riders Mania Claims, Legal Claims Reimbursement"
+                value={formData.title}
+                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+                className="h-11 border-slate-300 focus:border-re-green focus:ring-2 focus:ring-re-green/20 rounded-lg transition-all shadow-sm"
+              />
+              <p className="text-xs text-slate-500">Enter the activity type title</p>
+            </div>
+
+            {/* Item Code Field */}
+            <div className="space-y-2">
+              <Label htmlFor="itemCode" className="text-sm font-semibold text-slate-900">
+                Item Code <span className="text-slate-400 font-normal text-xs">(Optional)</span>
+              </Label>
+              <Input
+                id="itemCode"
+                placeholder="e.g., 1, 2, 3"
+                value={formData.itemCode}
+                onChange={(e) => setFormData({ ...formData, itemCode: e.target.value })}
+                className="h-11 border-slate-300 focus:border-re-green focus:ring-2 focus:ring-re-green/20 rounded-lg transition-all shadow-sm"
+              />
+              <p className="text-xs text-slate-500">Optional item code for the activity type</p>
+            </div>
+
+            {/* Taxation Type Field */}
+            <div className="space-y-2">
+              <Label htmlFor="taxationType" className="text-sm font-semibold text-slate-900 flex items-center gap-1">
+                Taxation Type <span className="text-red-500">*</span>
+              </Label>
+              <Select
+                value={formData.taxationType}
+                onValueChange={(value) => setFormData({ ...formData, taxationType: value })}
+              >
+                <SelectTrigger id="taxationType" className="h-11 border-slate-300 focus:border-re-green focus:ring-2 focus:ring-re-green/20 rounded-lg transition-all shadow-sm">
+                  <SelectValue placeholder="Select Taxation Type" />
+                </SelectTrigger>
+                <SelectContent className="rounded-lg">
+                  <SelectItem value="GST" className="p-3">GST</SelectItem>
+                  <SelectItem value="Non GST" className="p-3">Non GST</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-slate-500">Select whether the activity is GST or Non-GST</p>
+            </div>
+
+            {/* SAP Reference Number Field */}
+            <div className="space-y-2">
+              <Label htmlFor="sapRefNo" className="text-sm font-semibold text-slate-900 flex items-center gap-1">
+                Claim Document Type (SAP Ref) <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="sapRefNo"
+                placeholder="e.g., ZCNS, ZRE"
+                value={formData.sapRefNo}
+                onChange={(e) => setFormData({ ...formData, sapRefNo: e.target.value })}
+                className="h-11 border-slate-300 focus:border-re-green focus:ring-2 focus:ring-re-green/20 rounded-lg transition-all shadow-sm"
+              />
+              <p className="text-xs text-slate-500">Required SAP reference number for CSV generation</p>
+            </div>
+          </div>
+
+          <DialogFooter className="gap-3 pt-4 border-t border-slate-100 px-6 pb-6 flex-shrink-0">
+            <Button
+              variant="outline"
+              onClick={() => setShowAddDialog(false)}
+              className="h-11 border-slate-300 hover:bg-slate-50 hover:border-slate-400 shadow-sm"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSave}
+              disabled={!formData.title.trim() || !formData.taxationType || !formData.sapRefNo.trim()}
+              className="h-11 bg-re-green hover:bg-re-green/90 text-white shadow-md hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <FileText className="w-4 h-4 mr-2" />
+              {editingActivityType ? 'Update Activity Type' : 'Add Activity Type'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+

src/components/admin/AnalyticsConfig/AnalyticsConfig.tsx

@@ -31,7 +31,7 @@ export function AnalyticsConfig() {
   });
 
   const handleSave = () => {
-    // TODO: Implement API call to save configuration
+
     toast.success('Analytics configuration saved successfully');
   };
 

src/components/admin/DashboardConfig/DashboardConfig.tsx

@@ -59,7 +59,7 @@ export function DashboardConfig() {
   });
 
   const handleSave = () => {
-    // TODO: Implement API call to save dashboard configuration
+
     toast.success('Dashboard layout saved successfully');
   };
 

src/components/admin/NotificationConfig/NotificationConfig.tsx

@@ -28,7 +28,7 @@ export function NotificationConfig() {
   });
 
   const handleSave = () => {
-    // TODO: Implement API call to save notification configuration
+
     toast.success('Notification configuration saved successfully');
   };
 

src/components/admin/SharingConfig/SharingConfig.tsx

@@ -23,7 +23,7 @@ export function SharingConfig() {
   });
 
   const handleSave = () => {
-    // TODO: Implement API call to save sharing configuration
+
     toast.success('Sharing policy saved successfully');
   };
 

src/components/admin/UserManagement/UserManagement.tsx

@@ -318,7 +318,7 @@ export function UserManagement() {
     const user = users.find(u => u.userId === userId);
     if (!user) return;
 
-    // TODO: Implement backend API for toggling user status
+
     toast.info('User status toggle functionality coming soon');
   };
 
@@ -332,7 +332,6 @@ export function UserManagement() {
       return;
     }
 
-    // TODO: Implement backend API for deleting users
     toast.info('User deletion functionality coming soon');
   };
 
@@ -515,8 +514,7 @@ export function UserManagement() {
 
           {/* Message */}
           {message && (
-            <div className={`border-2 rounded-lg p-4 ${
-              message.type === 'success' 
+            <div className={`border-2 rounded-lg p-4 ${message.type === 'success'
               ? 'border-green-200 bg-green-50'
               : 'border-red-200 bg-red-50'
               }`}>
@@ -664,8 +662,7 @@ export function UserManagement() {
                             variant={currentPage === pageNum ? "default" : "outline"}
                             size="sm"
                             onClick={() => handlePageChange(pageNum)}
-                            className={`w-9 h-9 p-0 ${
-                              currentPage === pageNum 
+                            className={`w-9 h-9 p-0 ${currentPage === pageNum
                               ? 'bg-re-green hover:bg-re-green/90'
                               : ''
                               }`}

src/components/admin/index.ts

@@ -1,3 +1,4 @@
 export { ConfigurationManager } from './ConfigurationManager';
 export { HolidayManager } from './HolidayManager';
+export { ActivityTypeManager } from './ActivityTypeManager';
 

src/components/common/AntivirusScanStatus.tsx

@@ -0,0 +1,194 @@
+/**
+ * AntivirusScanStatus Component
+ * Displays the antivirus scan result badge/status for uploaded files.
+ * Shows ClamAV scan result and XSS content scan result.
+ */
+
+import React from 'react';
+
+// ── Types ──
+
+export interface ScanResultData {
+    malwareScan?: {
+        scanned: boolean;
+        isInfected: boolean;
+        skipped?: boolean;
+        virusNames?: string[];
+        scanDuration?: number;
+        error?: string;
+    };
+    contentScan?: {
+        scanned: boolean;
+        safe: boolean;
+        scanType: string;
+        severity: 'SAFE' | 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL';
+        threats?: Array<{ description: string; severity: string }>;
+        patternsChecked: number;
+    };
+    scanEventId?: string;
+}
+
+interface AntivirusScanStatusProps {
+    scanResult?: ScanResultData;
+    compact?: boolean;
+    className?: string;
+}
+
+// ── Helpers ──
+
+function getStatusColor(result?: ScanResultData): string {
+    if (!result) return '#94a3b8'; // gray — no scan data
+
+    // Check malware first
+    if (result.malwareScan?.isInfected) return '#ef4444'; // red
+    if (result.malwareScan?.error) return '#f59e0b'; // amber
+
+    // Then XSS
+    if (result.contentScan && !result.contentScan.safe) {
+        if (result.contentScan.severity === 'CRITICAL') return '#ef4444';
+        if (result.contentScan.severity === 'HIGH') return '#ef4444';
+        if (result.contentScan.severity === 'MEDIUM') return '#f59e0b';
+        return '#f59e0b';
+    }
+
+    // Skipped
+    if (result.malwareScan?.skipped) return '#94a3b8';
+
+    return '#22c55e'; // green — all clear
+}
+
+function getStatusIcon(result?: ScanResultData): string {
+    if (!result) return '⏳';
+    if (result.malwareScan?.isInfected) return '🛑';
+    if (result.contentScan && !result.contentScan.safe) return '⚠️';
+    if (result.malwareScan?.skipped) return '⏭️';
+    if (result.malwareScan?.error) return '❌';
+    if (result.malwareScan?.scanned && result.contentScan?.scanned) return '✅';
+    return '⏳';
+}
+
+function getStatusLabel(result?: ScanResultData): string {
+    if (!result) return 'Pending scan';
+    if (result.malwareScan?.isInfected) return 'Malware detected';
+    if (result.contentScan && !result.contentScan.safe) return 'Content threat detected';
+    if (result.malwareScan?.skipped) return 'Scan skipped';
+    if (result.malwareScan?.error) return 'Scan error';
+    if (result.malwareScan?.scanned && result.contentScan?.scanned) return 'Clean';
+    return 'Scanning…';
+}
+
+// ── Component ──
+
+const AntivirusScanStatus: React.FC<AntivirusScanStatusProps> = ({
+    scanResult,
+    compact = false,
+    className = '',
+}) => {
+    const color = getStatusColor(scanResult);
+    const icon = getStatusIcon(scanResult);
+    const label = getStatusLabel(scanResult);
+
+    // Compact mode: just a badge
+    if (compact) {
+        return (
+            <span
+                className={className}
+                style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '4px',
+                    padding: '2px 8px',
+                    borderRadius: '12px',
+                    fontSize: '12px',
+                    fontWeight: 500,
+                    backgroundColor: `${color}15`,
+                    color,
+                    border: `1px solid ${color}30`,
+                }}
+                title={label}
+            >
+                <span style={{ fontSize: '11px' }}>{icon}</span>
+                {label}
+            </span>
+        );
+    }
+
+    // Full mode: detailed card
+    return (
+        <div
+            className={className}
+            style={{
+                border: `1px solid ${color}30`,
+                borderRadius: '8px',
+                padding: '12px 16px',
+                backgroundColor: `${color}08`,
+                fontSize: '13px',
+            }}
+        >
+            {/* Header */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+                <span style={{ fontSize: '16px' }}>{icon}</span>
+                <span style={{ fontWeight: 600, color }}>{label}</span>
+                {scanResult?.malwareScan?.scanDuration && (
+                    <span style={{ marginLeft: 'auto', fontSize: '11px', color: '#94a3b8' }}>
+                        {scanResult.malwareScan.scanDuration}ms
+                    </span>
+                )}
+            </div>
+
+            {/* Details */}
+            {scanResult && (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                    {/* ClamAV Result */}
+                    {scanResult.malwareScan?.scanned && (
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12px', color: '#64748b' }}>
+                            <span>🦠</span>
+                            <span>
+                                ClamAV:{' '}
+                                {scanResult.malwareScan.isInfected
+                                    ? `Infected — ${scanResult.malwareScan.virusNames?.join(', ')}`
+                                    : 'Clean'}
+                            </span>
+                        </div>
+                    )}
+
+                    {/* XSS Result */}
+                    {scanResult.contentScan?.scanned && (
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12px', color: '#64748b' }}>
+                            <span>🔍</span>
+                            <span>
+                                Content scan ({scanResult.contentScan.scanType}):{' '}
+                                {scanResult.contentScan.safe
+                                    ? `Safe — ${scanResult.contentScan.patternsChecked} patterns checked`
+                                    : `${scanResult.contentScan.threats?.length || 0} threats found (${scanResult.contentScan.severity})`}
+                            </span>
+                        </div>
+                    )}
+
+                    {/* Threats list */}
+                    {scanResult.contentScan?.threats && scanResult.contentScan.threats.length > 0 && (
+                        <ul style={{ margin: '4px 0 0 24px', padding: 0, fontSize: '11px', color: '#ef4444' }}>
+                            {scanResult.contentScan.threats.slice(0, 5).map((threat, i) => (
+                                <li key={i}>
+                                    {threat.description} ({threat.severity})
+                                </li>
+                            ))}
+                            {scanResult.contentScan.threats.length > 5 && (
+                                <li>…and {scanResult.contentScan.threats.length - 5} more</li>
+                            )}
+                        </ul>
+                    )}
+
+                    {/* Scan event ID */}
+                    {scanResult.scanEventId && (
+                        <div style={{ fontSize: '10px', color: '#94a3b8', marginTop: '4px' }}>
+                            Scan ID: {scanResult.scanEventId}
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default AntivirusScanStatus;

src/components/common/FormattedDescription.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cn } from "@/components/ui/utils";
+import { sanitizeHTML } from "@/utils/sanitizer";
 
 interface FormattedDescriptionProps {
   content: string;
@@ -30,10 +31,11 @@ export function FormattedDescription({ content, className }: FormattedDescriptio
       }
 
       // Wrap the table in a scrollable container
-      return `<div class="table-wrapper" style="overflow-x: auto; max-width: 100%; margin: 8px 0;">${match}</div>`;
+      return `<div class="table-wrapper">${match}</div>`;
     });
 
-    return processed;
+    // Sanitize the content to prevent CSP violations (onclick, style tags, etc.)
+    return sanitizeHTML(processed);
   }, [content]);
 
   if (!content) return null;

src/components/layout/PageLayout/PageLayout.tsx

@@ -19,6 +19,7 @@ import { ReLogo } from '@/assets';
 import notificationApi, { Notification } from '@/services/notificationApi';
 import { getSocket, joinUserRoom } from '@/utils/socket';
 import { formatDistanceToNow } from 'date-fns';
+import { TokenManager } from '@/utils/tokenManager';
 
 interface PageLayoutProps {
   children: React.ReactNode;
@@ -36,6 +37,17 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
   const [notificationsOpen, setNotificationsOpen] = useState(false);
   const { user } = useAuth();
 
+  // Check if user is a Dealer
+  const isDealer = useMemo(() => {
+    try {
+      const userData = TokenManager.getUserData();
+      return userData?.jobTitle === 'Dealer';
+    } catch (error) {
+      console.error('[PageLayout] Error checking dealer status:', error);
+      return false;
+    }
+  }, []);
+
   // Get user initials for avatar
   const getUserInitials = () => {
     try {
@@ -60,19 +72,23 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
     const items = [
       { id: 'dashboard', label: 'Dashboard', icon: Home },
       // Add "All Requests" for all users (admin sees org-level, regular users see their participant requests)
-      { id: 'requests', label: 'All Requests', icon: List },
+      { id: 'requests', label: 'All Requests', icon: List, adminOnly: false }
+      // { id: 'admin/templates', label: 'Admin Templates', icon: Plus, adminOnly: true },
     ];
 
-    // Add remaining menu items
+    // Add remaining menu items (exclude "My Requests" for dealers)
+    if (!isDealer) {
+      items.push({ id: 'my-requests', label: 'My Requests', icon: User });
+    }
+
     items.push(
-      { id: 'my-requests', label: 'My Requests', icon: User },
       { id: 'open-requests', label: 'Open Requests', icon: FileText },
       { id: 'closed-requests', label: 'Closed Requests', icon: CheckCircle },
       { id: 'shared-summaries', label: 'Shared Summary', icon: Share2 }
     );
 
     return items;
-  }, []);
+  }, [isDealer]);
 
   const toggleSidebar = () => {
     setSidebarOpen(!sidebarOpen);
@@ -233,18 +249,21 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
           </div>
           <div className="p-3 flex-1 overflow-y-auto">
             <div className="space-y-2">
-              {menuItems.map((item) => (
+              {menuItems.filter(item => !item.adminOnly || (user as any)?.role === 'ADMIN').map((item) => (
                 <button
                   key={item.id}
                   onClick={() => {
+                    if (item.id === 'admin/templates') {
+                      onNavigate?.('admin/templates');
+                    } else {
                       onNavigate?.(item.id);
+                    }
                     // Close sidebar on mobile after navigation
                     if (window.innerWidth < 768) {
                       setSidebarOpen(false);
                     }
                   }}
-                  className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
-                    currentPage === item.id
+                  className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${currentPage === item.id
                     ? 'bg-re-green text-white font-medium'
                     : 'text-gray-300 hover:bg-gray-900 hover:text-white'
                     }`}
@@ -256,6 +275,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
             </div>
 
             {/* Quick Action in Sidebar - Right below menu items */}
+            {!isDealer && (
               <div className="mt-6 pt-6 border-t border-gray-800 px-3">
                 <Button
                   onClick={onNewRequest}
@@ -266,6 +286,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
                   Raise New Request
                 </Button>
               </div>
+            )}
           </div>
         </div>
       </aside>
@@ -294,6 +315,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
           </div>
 
           <div className="flex items-center gap-4 shrink-0">
+            {!isDealer && (
               <Button
                 onClick={onNewRequest}
                 className="bg-re-green hover:bg-re-green/90 text-white gap-2 hidden md:flex text-sm"
@@ -302,6 +324,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
                 <Plus className="w-4 h-4" />
                 New Request
               </Button>
+            )}
 
             <DropdownMenu open={notificationsOpen} onOpenChange={setNotificationsOpen}>
               <DropdownMenuTrigger asChild>
@@ -342,8 +365,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
                       {notifications.map((notif) => (
                         <div
                           key={notif.notificationId}
-                          className={`p-3 hover:bg-gray-50 cursor-pointer transition-colors ${
-                            !notif.isRead ? 'bg-blue-50' : ''
+                          className={`p-3 hover:bg-gray-50 cursor-pointer transition-colors ${!notif.isRead ? 'bg-blue-50' : ''
                             }`}
                           onClick={() => handleNotificationClick(notif)}
                         >

src/components/modals/ManagerSelectionModal.tsx

@@ -0,0 +1,163 @@
+/**
+ * Manager Selection Modal
+ * Shows when multiple managers are found or no manager is found
+ * Allows user to select a manager from the list
+ */
+
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { AlertCircle, CheckCircle2, User, Mail, Building2 } from 'lucide-react';
+
+interface Manager {
+  userId: string;
+  email: string;
+  displayName: string;
+  firstName?: string;
+  lastName?: string;
+  department?: string;
+}
+
+interface ManagerSelectionModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (managerEmail: string) => void;
+  managers?: Manager[];
+  errorType: 'NO_MANAGER_FOUND' | 'MULTIPLE_MANAGERS_FOUND';
+  message?: string;
+  isLoading?: boolean;
+}
+
+export function ManagerSelectionModal({
+  open,
+  onClose,
+  onSelect,
+  managers = [],
+  errorType,
+  message,
+  isLoading = false,
+}: ManagerSelectionModalProps) {
+  const handleSelect = (managerEmail: string) => {
+    onSelect(managerEmail);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {errorType === 'NO_MANAGER_FOUND' ? (
+              <>
+                <AlertCircle className="w-5 h-5 text-amber-500" />
+                Manager Not Found
+              </>
+            ) : (
+              <>
+                <CheckCircle2 className="w-5 h-5 text-blue-500" />
+                Select Your Manager
+              </>
+            )}
+          </DialogTitle>
+          <DialogDescription>
+            {errorType === 'NO_MANAGER_FOUND' ? (
+              <div className="mt-2">
+                <p className="text-sm text-gray-600">
+                  {message || 'No reporting manager found in the system. Please ensure your manager is correctly configured in your profile.'}
+                </p>
+                <p className="text-sm text-gray-500 mt-2">
+                  Please contact your administrator to update your manager information, or try again later.
+                </p>
+              </div>
+            ) : (
+              <div className="mt-2">
+                <p className="text-sm text-gray-600">
+                  {message || 'Multiple managers were found with the same name. Please select the correct manager from the list below.'}
+                </p>
+              </div>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="mt-4">
+          {errorType === 'NO_MANAGER_FOUND' ? (
+            <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
+              <div className="flex items-start gap-3">
+                <AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-amber-900">
+                    Unable to Proceed
+                  </p>
+                  <p className="text-sm text-amber-700 mt-1">
+                    We couldn't find your reporting manager in the system. The claim request cannot be created without a valid manager assigned.
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-3 max-h-[400px] overflow-y-auto">
+              {managers.map((manager) => (
+                <div
+                  key={manager.userId}
+                  className="border rounded-lg p-4 hover:bg-gray-50 transition-colors cursor-pointer"
+                  onClick={() => !isLoading && handleSelect(manager.email)}
+                >
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex items-start gap-3 flex-1">
+                      <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+                        <User className="w-5 h-5 text-blue-600" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          <p className="font-medium text-gray-900">
+                            {manager.displayName || `${manager.firstName || ''} ${manager.lastName || ''}`.trim() || 'Unknown'}
+                          </p>
+                        </div>
+                        <div className="space-y-1">
+                          <div className="flex items-center gap-2 text-sm text-gray-600">
+                            <Mail className="w-4 h-4" />
+                            <span className="truncate">{manager.email}</span>
+                          </div>
+                          {manager.department && (
+                            <div className="flex items-center gap-2 text-sm text-gray-500">
+                              <Building2 className="w-4 h-4" />
+                              <span>{manager.department}</span>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <Button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleSelect(manager.email);
+                      }}
+                      disabled={isLoading}
+                      className="flex-shrink-0"
+                      size="sm"
+                    >
+                      Select
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-3 mt-6">
+          {errorType === 'NO_MANAGER_FOUND' ? (
+            <Button onClick={onClose} variant="outline">
+              Close
+            </Button>
+          ) : (
+            <>
+              <Button onClick={onClose} variant="outline" disabled={isLoading}>
+                Cancel
+              </Button>
+            </>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

src/components/modals/NewRequestModal.tsx

@@ -183,7 +183,7 @@ export function NewRequestModal({ open, onClose, onSubmit }: NewRequestModalProp
                   <PopoverTrigger asChild>
                     <Button variant="outline" className="w-full justify-start text-left">
                       <CalendarIcon className="mr-2 h-4 w-4" />
-                      {formData.slaEndDate ? format(formData.slaEndDate, 'PPP') : 'Pick a date'}
+                      {formData.slaEndDate ? format(formData.slaEndDate, 'd MMM yyyy') : 'Pick a date'}
                     </Button>
                   </PopoverTrigger>
                   <PopoverContent className="w-auto p-0">
@@ -378,7 +378,7 @@ export function NewRequestModal({ open, onClose, onSubmit }: NewRequestModalProp
               <div className="border-2 border-dashed border-border rounded-lg p-6 text-center">
                 <Upload className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
                 <p className="text-sm text-muted-foreground mb-2">
-                  Drag and drop files here, or click to browse
+                  click to browse
                 </p>
                 <input
                   type="file"

src/components/modals/ShareSummaryModal.tsx

@@ -24,17 +24,25 @@ export function ShareSummaryModal({ isOpen, onClose, summaryId, requestTitle, on
   const [searching, setSearching] = useState(false);
   const [sharing, setSharing] = useState(false);
 
-  // Search users
+  // Search users - only when input starts with @
   useEffect(() => {
-    if (!isOpen || !searchTerm.trim()) {
+    if (!isOpen) {
       setUsers([]);
       return;
     }
 
+    // Only trigger search when using @ sign
+    if (!searchTerm || !searchTerm.startsWith('@') || searchTerm.length < 2) {
+      setUsers([]);
+      setSearching(false);
+      return;
+    }
+
     const searchTimeout = setTimeout(async () => {
       try {
         setSearching(true);
-        const response = await searchUsers(searchTerm);
+        const term = searchTerm.slice(1); // Remove @ prefix
+        const response = await searchUsers(term, 10);
         const results = response?.data?.data || response?.data || [];
         setUsers(Array.isArray(results) ? results : []);
       } catch (error) {
@@ -111,12 +119,17 @@ export function ShareSummaryModal({ isOpen, onClose, summaryId, requestTitle, on
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
               <Input
                 id="user-search"
-                placeholder="Search by name or email..."
+                placeholder="Type @ to search users..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
                 className="pl-10"
               />
             </div>
+            {searchTerm && !searchTerm.startsWith('@') && (
+              <p className="text-xs text-gray-500 mt-1 ml-1">
+                Start with @ to search users (e.g., @john)
+              </p>
+            )}
           </div>
 
           {searching && (
@@ -163,12 +176,18 @@ export function ShareSummaryModal({ isOpen, onClose, summaryId, requestTitle, on
             </div>
           )}
 
-          {!searching && searchTerm && users.length === 0 && (
+          {!searching && searchTerm && searchTerm.startsWith('@') && users.length === 0 && (
             <div className="text-center py-8 text-gray-500 text-sm">
               No users found
             </div>
           )}
           
+          {!searching && searchTerm && !searchTerm.startsWith('@') && (
+            <div className="text-center py-8 text-gray-500 text-sm">
+              Start typing with @ to search users
+            </div>
+          )}
+
           {selectedUserIds.size > 0 && (
             <div className="border rounded-lg p-3 bg-blue-50">
               <p className="text-sm font-medium text-gray-700 mb-2">

src/components/modals/TemplateSelectionModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '../ui/dialog';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
 import { Button } from '../ui/button';
@@ -8,14 +8,16 @@ import {
   Receipt,
   Package,
   ArrowRight,
+  ArrowLeft,
   Clock,
   CheckCircle,
   Target,
-  X,
   Sparkles,
-  Check
+  Check,
+  AlertCircle
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
+import { TokenManager } from '../../utils/tokenManager';
 
 interface TemplateSelectionModalProps {
   open: boolean;
@@ -39,7 +41,8 @@ const AVAILABLE_TEMPLATES = [
       'Document verification',
       'E-invoice generation',
       'Credit note issuance'
-    ]
+    ],
+    disabled: false
   },
   {
     id: 'vendor-payment',
@@ -55,14 +58,32 @@ const AVAILABLE_TEMPLATES = [
       'Invoice verification',
       'Multi-level approvals',
       'Payment scheduling'
-    ]
+    ],
+    disabled: true,
+    comingSoon: true
   }
 ];
 
 export function TemplateSelectionModal({ open, onClose, onSelectTemplate }: TemplateSelectionModalProps) {
   const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
+  const [isDealer, setIsDealer] = useState(false);
+
+  // Check if user is a Dealer
+  useEffect(() => {
+    const userData = TokenManager.getUserData();
+    setIsDealer(userData?.jobTitle === 'Dealer');
+  }, []);
 
   const handleSelect = (templateId: string) => {
+    // Don't allow selection if user is a dealer
+    if (isDealer) {
+      return;
+    }
+    // Don't allow selection if template is disabled
+    const template = AVAILABLE_TEMPLATES.find(t => t.id === templateId);
+    if (template?.disabled) {
+      return;
+    }
     setSelectedTemplate(templateId);
   };
 
@@ -84,12 +105,13 @@ export function TemplateSelectionModal({ open, onClose, onSelectTemplate }: Temp
           Choose from pre-configured templates with predefined workflows and approval chains for faster processing.
         </DialogDescription>
 
-        {/* Custom Close button */}
+        {/* Back arrow button - Top left */}
         <button
           onClick={onClose}
-          className="absolute top-6 right-6 z-50 w-10 h-10 rounded-full bg-white shadow-lg hover:shadow-xl border border-gray-200 flex items-center justify-center transition-all hover:scale-110"
+          className="!flex absolute top-6 left-6 z-50 w-10 h-10 rounded-full bg-white shadow-lg hover:shadow-xl border border-gray-200 items-center justify-center transition-all hover:scale-110"
+          aria-label="Go back"
         >
-          <X className="w-5 h-5 text-gray-600" />
+          <ArrowLeft className="w-5 h-5 text-gray-600" />
         </button>
 
         {/* Full Screen Content Container */}
@@ -117,6 +139,7 @@ export function TemplateSelectionModal({ open, onClose, onSelectTemplate }: Temp
               {AVAILABLE_TEMPLATES.map((template, index) => {
                 const Icon = template.icon;
                 const isSelected = selectedTemplate === template.id;
+                const isDisabled = isDealer || template.disabled;
 
                 return (
                   <motion.div
@@ -124,14 +147,15 @@ export function TemplateSelectionModal({ open, onClose, onSelectTemplate }: Temp
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ delay: index * 0.1 }}
-                    whileHover={{ scale: 1.03 }}
-                    whileTap={{ scale: 0.98 }}
+                    whileHover={isDisabled ? {} : { scale: 1.03 }}
+                    whileTap={isDisabled ? {} : { scale: 0.98 }}
                   >
                     <Card
-                      className={`cursor-pointer h-full transition-all duration-300 border-2 ${
-                        isSelected 
-                          ? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200' 
-                          : 'border-gray-200 hover:border-blue-300 hover:shadow-lg'
+                      className={`h-full transition-all duration-300 border-2 ${isDisabled
+                        ? 'opacity-50 cursor-not-allowed border-gray-200'
+                        : isSelected
+                          ? 'cursor-pointer border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200'
+                          : 'cursor-pointer border-gray-200 hover:border-blue-300 hover:shadow-lg'
                         }`}
                       onClick={() => handleSelect(template.id)}
                     >
@@ -157,6 +181,22 @@ export function TemplateSelectionModal({ open, onClose, onSelectTemplate }: Temp
                           <CardDescription className="text-sm leading-relaxed">
                             {template.description}
                           </CardDescription>
+                          {isDealer && (
+                            <div className="mt-3 flex items-start gap-2 p-2 bg-amber-50 border border-amber-200 rounded-lg">
+                              <AlertCircle className="w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" />
+                              <p className="text-xs text-amber-800">
+                                Not accessible for Dealers
+                              </p>
+                            </div>
+                          )}
+                          {template.comingSoon && !isDealer && (
+                            <div className="mt-3 flex items-start gap-2 p-2 bg-blue-50 border border-blue-200 rounded-lg">
+                              <AlertCircle className="w-4 h-4 text-blue-600 flex-shrink-0 mt-0.5" />
+                              <p className="text-xs text-blue-800 font-semibold">
+                                Coming Soon
+                              </p>
+                            </div>
+                          )}
                         </div>
                       </CardHeader>
                       <CardContent className="pt-0 space-y-4">
@@ -219,12 +259,11 @@ export function TemplateSelectionModal({ open, onClose, onSelectTemplate }: Temp
               </Button>
               <Button
                 onClick={handleContinue}
-                disabled={!selectedTemplate}
+                disabled={!selectedTemplate || isDealer || AVAILABLE_TEMPLATES.find(t => t.id === selectedTemplate)?.disabled}
                 size="lg"
-                className={`gap-2 px-8 ${
-                  selectedTemplate 
+                className={`gap-2 px-8 ${selectedTemplate && !isDealer && !AVAILABLE_TEMPLATES.find(t => t.id === selectedTemplate)?.disabled
                   ? 'bg-blue-600 hover:bg-blue-700'
-                    : 'bg-gray-400'
+                  : 'bg-gray-400 cursor-not-allowed'
                   }`}
               >
                 Continue with Template

src/components/modals/WorkNoteModal.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';
+import { sanitizeHTML } from '../../utils/sanitizer';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Avatar, AvatarFallback } from '../ui/avatar';
@@ -166,7 +167,8 @@ export function WorkNoteModal({ open, onClose, requestId }: WorkNoteModalProps)
 
   const formatMessage = (content: string) => {
     // Simple mention highlighting
-    return content.replace(/@(\w+\s?\w+)/g, '<span class="text-blue-600 font-medium">@$1</span>');
+    const formatted = content.replace(/@(\w+\s?\w+)/g, '<span class="text-blue-600 font-medium">@$1</span>');
+    return sanitizeHTML(formatted);
   };
 
   return (
@@ -195,8 +197,7 @@ export function WorkNoteModal({ open, onClose, requestId }: WorkNoteModalProps)
                       <div key={msg.id} className={`flex gap-3 ${msg.isSystem ? 'justify-center' : ''}`}>
                         {!msg.isSystem && (
                           <Avatar className="h-8 w-8 flex-shrink-0">
-                            <AvatarFallback className={`text-white text-xs ${
-                              msg.user.role === 'Initiator' ? 'bg-re-green' : 
+                            <AvatarFallback className={`text-white text-xs ${msg.user.role === 'Initiator' ? 'bg-re-green' :
                               msg.user.role === 'Current User' ? 'bg-blue-500' :
                                 'bg-re-light-green'
                               }`}>
@@ -306,8 +307,7 @@ export function WorkNoteModal({ open, onClose, requestId }: WorkNoteModalProps)
                 <div key={index} className="flex items-center gap-3">
                   <div className="relative">
                     <Avatar className="h-8 w-8">
-                      <AvatarFallback className={`text-white text-xs ${
-                        participant.role === 'Initiator' ? 'bg-re-green' : 'bg-re-light-green'
+                      <AvatarFallback className={`text-white text-xs ${participant.role === 'Initiator' ? 'bg-re-green' : 'bg-re-light-green'
                         }`}>
                         {participant.avatar}
                       </AvatarFallback>

src/components/participant/AddApproverModal/AddApproverModal.tsx

@@ -24,6 +24,8 @@ interface AddApproverModalProps {
   requestTitle?: string;
   existingParticipants?: Array<{ email: string; participantType: string; name?: string }>;
   currentLevels?: ApprovalLevelInfo[];  // Current approval levels
+  maxApprovalLevels?: number;  // Maximum allowed approval levels from system policy
+  onPolicyViolation?: (violations: Array<{ type: string; message: string; currentValue?: number; maxValue?: number }>) => void;
 }
 
 export function AddApproverModal({
@@ -31,7 +33,9 @@ export function AddApproverModal({
   onClose,
   onConfirm,
   existingParticipants = [],
-  currentLevels = []
+  currentLevels = [],
+  maxApprovalLevels,
+  onPolicyViolation
 }: AddApproverModalProps) {
   const [email, setEmail] = useState('');
   const [tatHours, setTatHours] = useState<number>(24);
@@ -140,6 +144,36 @@ export function AddApproverModal({
       return;
     }
 
+    // Validate against maxApprovalLevels policy
+    // Calculate the new total levels after adding this approver
+    // If inserting at a level that already exists, levels shift down, so total stays same
+    // If inserting at a new level (beyond current), total increases
+    const currentMaxLevel = currentLevels.length > 0 
+      ? Math.max(...currentLevels.map(l => l.levelNumber), 0)
+      : 0;
+    const newTotalLevels = selectedLevel > currentMaxLevel 
+      ? selectedLevel  // New level beyond current max
+      : currentMaxLevel + 1;  // Existing level, shifts everything down, adds one more
+
+    if (maxApprovalLevels && newTotalLevels > maxApprovalLevels) {
+      if (onPolicyViolation) {
+        onPolicyViolation([{
+          type: 'Maximum Approval Levels Exceeded',
+          message: `Adding an approver at level ${selectedLevel} would result in ${newTotalLevels} approval levels, which exceeds the maximum allowed (${maxApprovalLevels}). Please remove an approver or contact your administrator.`,
+          currentValue: newTotalLevels,
+          maxValue: maxApprovalLevels
+        }]);
+      } else {
+        setValidationModal({
+          open: true,
+          type: 'error',
+          email: '',
+          message: `Cannot add approver. This would exceed the maximum allowed approval levels (${maxApprovalLevels}). Current request has ${currentMaxLevel} level(s).`
+        });
+      }
+      return;
+    }
+
     // Check if user is already a participant
     const existingParticipant = existingParticipants.find(
       p => (p.email || '').toLowerCase() === emailToAdd
@@ -394,6 +428,20 @@ export function AddApproverModal({
             Add a new approver at a specific level. Existing approvers at and after the selected level will be shifted down.
           </p>
 
+          {/* Max Approval Levels Note */}
+          {maxApprovalLevels && (
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-2">
+              <p className="text-xs text-blue-800">
+                ℹ️ Max: {maxApprovalLevels} level{maxApprovalLevels !== 1 ? 's' : ''}
+                {currentLevels.length > 0 && (
+                  <span className="ml-2">
+                    ({Math.max(...currentLevels.map(l => l.levelNumber), 0)}/{maxApprovalLevels})
+                  </span>
+                )}
+              </p>
+            </div>
+          )}
+
           {/* Current Levels Display */}
           {currentLevels.length > 0 && (
             <div className="space-y-2">

src/components/settings/ApiTokenManager.tsx

@@ -0,0 +1,297 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Key, Plus, Trash2, Copy, Check } from 'lucide-react';
+import { format } from 'date-fns';
+import axios from '@/services/authApi';
+import { toast } from 'sonner';
+
+interface ApiToken {
+    id: string;
+    name: string;
+    prefix: string;
+    lastUsedAt?: string;
+    expiresAt?: string;
+    createdAt: string;
+    isActive: boolean;
+}
+
+export function ApiTokenManager() {
+    const [tokens, setTokens] = useState<ApiToken[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [showCreateModal, setShowCreateModal] = useState(false);
+    const [newTokenName, setNewTokenName] = useState('');
+    const [newTokenExpiry, setNewTokenExpiry] = useState<number | ''>('');
+    const [generatedToken, setGeneratedToken] = useState<string | null>(null);
+    const [isCreating, setIsCreating] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const [tokenToRevoke, setTokenToRevoke] = useState<ApiToken | null>(null);
+
+    useEffect(() => {
+        fetchTokens();
+    }, []);
+
+    const fetchTokens = async () => {
+        try {
+            setIsLoading(true);
+            const response = await axios.get('/api-tokens');
+            setTokens(response.data.data.tokens);
+        } catch (error) {
+            console.error('Failed to fetch API tokens:', error);
+            toast.error('Failed to load API tokens');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCreateToken = async () => {
+        if (!newTokenName.trim()) return;
+
+        try {
+            setIsCreating(true);
+            const payload: any = { name: newTokenName };
+            if (newTokenExpiry) {
+                payload.expiresInDays = Number(newTokenExpiry);
+            }
+
+            const response = await axios.post('/api-tokens', payload);
+            setGeneratedToken(response.data.data.token);
+            toast.success('API Token created successfully');
+            fetchTokens(); // Refresh list
+        } catch (error) {
+            console.error('Failed to create token:', error);
+            toast.error('Failed to create API token');
+        } finally {
+            setIsCreating(false);
+        }
+    };
+
+    const handleRevokeToken = (token: ApiToken) => {
+        setTokenToRevoke(token);
+    };
+
+    const confirmRevokeToken = async () => {
+        if (!tokenToRevoke) return;
+
+
+        try {
+            await axios.delete(`/api-tokens/${tokenToRevoke.id}`);
+            toast.success('Token revoked successfully');
+            setTokens(tokens.filter(t => t.id !== tokenToRevoke.id));
+            setTokenToRevoke(null);
+        } catch (error) {
+            console.error('Failed to revoke token:', error);
+            toast.error('Failed to revoke token');
+        }
+    };
+
+    const copyToClipboard = () => {
+        if (generatedToken) {
+            navigator.clipboard.writeText(generatedToken);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+            toast.success('Token copied to clipboard');
+        }
+    };
+
+    const resetCreateModal = () => {
+        setShowCreateModal(false);
+        setNewTokenName('');
+        setNewTokenExpiry('');
+        setGeneratedToken(null);
+    };
+
+    return (
+        <div className="space-y-6">
+            <div className="flex items-center justify-between">
+                <div>
+                    <h3 className="text-lg font-medium text-gray-900">API Tokens</h3>
+                    <p className="text-sm text-gray-500">Manage personal access tokens for external integrations</p>
+                </div>
+                <Button onClick={() => setShowCreateModal(true)} size="sm" className="bg-re-green hover:bg-re-green/90 text-white">
+                    <Plus className="w-4 h-4 mr-2" />
+                    Generate
+                </Button>
+            </div>
+            {isLoading ? (
+                <div className="text-center py-4 text-gray-500">Loading tokens...</div>
+            ) : tokens.length === 0 ? (
+                <div className="text-center py-8 bg-gray-50 rounded-lg border border-dashed border-gray-300">
+                    <Key className="w-10 h-10 text-gray-300 mx-auto mb-2" />
+                    <p className="text-gray-500 font-medium">No API tokens found</p>
+                    <p className="text-gray-400 text-sm mt-1">Generate a token to access the API programmatically</p>
+                </div>
+            ) : (
+                <div className="rounded-md border">
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead>Name</TableHead>
+                                <TableHead>Prefix</TableHead>
+                                <TableHead>Last Used</TableHead>
+                                <TableHead>Expires</TableHead>
+                                <TableHead className="text-right">Actions</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {tokens.map((token) => (
+                                <TableRow key={token.id}>
+                                    <TableCell className="font-medium">{token.name}</TableCell>
+                                    <TableCell className="font-mono text-xs bg-slate-100 rounded px-2 py-1 w-fit">{token.prefix}...</TableCell>
+                                    <TableCell className="text-gray-500 text-sm">
+                                        {token.lastUsedAt ? format(new Date(token.lastUsedAt), 'MMM d, yyyy') : 'Never'}
+                                    </TableCell>
+                                    <TableCell className="text-gray-500 text-sm">
+                                        {token.expiresAt ? format(new Date(token.expiresAt), 'MMM d, yyyy') : 'No Expiry'}
+                                    </TableCell>
+                                    <TableCell className="text-right">
+                                        <Button
+                                            variant="ghost"
+                                            size="sm"
+                                            onClick={() => handleRevokeToken(token)}
+                                            className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                                        >
+                                            <Trash2 className="w-4 h-4" />
+                                            <span className="sr-only">Revoke</span>
+                                        </Button>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
+            )}
+
+            {/* Create Token Modal */}
+            <Dialog open={showCreateModal} onOpenChange={(open) => !open && resetCreateModal()}>
+                <DialogContent className="sm:max-w-md">
+                    <DialogHeader>
+                        <DialogTitle>Generate API Token</DialogTitle>
+                        <DialogDescription>
+                            Create a new token to access the API. Treat this token like a password.
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    {!generatedToken ? (
+                        <div className="space-y-4 py-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="token-name">Token Name</Label>
+                                <Input
+                                    id="token-name"
+                                    placeholder="e.g., CI/CD Pipeline, Prometheus"
+                                    value={newTokenName}
+                                    onChange={(e) => setNewTokenName(e.target.value)}
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="token-expiry">Expiration (Days)</Label>
+                                <Input
+                                    id="token-expiry"
+                                    type="number"
+                                    min="1"
+                                    placeholder="Leave empty for no expiry"
+                                    value={newTokenExpiry}
+                                    onChange={(e) => {
+                                        const val = e.target.value;
+                                        if (val === '') {
+                                            setNewTokenExpiry('');
+                                        } else {
+                                            const num = parseInt(val);
+                                            // Prevent negative numbers
+                                            if (!isNaN(num) && num >= 1) {
+                                                setNewTokenExpiry(num);
+                                            }
+                                        }
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="space-y-4 py-4">
+                            <Alert className="bg-green-50 border-green-200">
+                                <Check className="h-4 w-4 text-green-600" />
+                                <AlertTitle className="text-green-800">Token Generated Successfully</AlertTitle>
+                                <AlertDescription className="text-green-700">
+                                    Please copy your token now. You won't be able to see it again!
+                                </AlertDescription>
+                            </Alert>
+
+                            <div className="relative">
+                                <div className="p-4 bg-slate-900 rounded-md font-mono text-sm text-green-400 break-all pr-10">
+                                    {generatedToken}
+                                </div>
+                                <Button
+                                    size="icon"
+                                    variant="ghost"
+                                    className="absolute top-1 right-1 text-gray-400 hover:text-white hover:bg-slate-800"
+                                    onClick={copyToClipboard}
+                                >
+                                    {copied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+                                </Button>
+                            </div>
+                        </div>
+                    )}
+
+                    <DialogFooter>
+                        {!generatedToken ? (
+                            <>
+                                <Button variant="outline" onClick={resetCreateModal}>Cancel</Button>
+                                <Button onClick={handleCreateToken} disabled={!newTokenName.trim() || isCreating}>
+                                    {isCreating ? 'Generating...' : 'Generate Token'}
+                                </Button>
+                            </>
+                        ) : (
+                            <Button onClick={resetCreateModal}>Done</Button>
+                        )}
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            <AlertDialog open={!!tokenToRevoke} onOpenChange={(open) => !open && setTokenToRevoke(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Revoke API Token</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            Are you sure you want to revoke the token <strong>{tokenToRevoke?.name}</strong>?
+                            This action cannot be undone and any applications using this token will lose access immediately.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction onClick={confirmRevokeToken} className="bg-red-600 hover:bg-red-700 text-white">
+                            Revoke Token
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </div>
+    );
+}

src/components/sla/SLAProgressBar/SLAProgressBar.tsx

@@ -6,7 +6,8 @@ import { formatDateDDMMYYYY } from '@/utils/dateFormatter';
 
 export interface SLAData {
   status: 'on_track' | 'normal' | 'approaching' | 'critical' | 'breached';
-  percentageUsed: number;
+  percentageUsed?: number;
+  percent?: number; // Simplified format (alternative to percentageUsed)
   elapsedText: string;
   elapsedHours: number;
   remainingText: string;
@@ -27,8 +28,12 @@ export function SLAProgressBar({
   isPaused = false,
   testId = 'sla-progress'
 }: SLAProgressBarProps) {
+  // Pure presentational component - no business logic
   // If request is closed/approved/rejected or no SLA data, show status message
-  if (!sla || requestStatus === 'approved' || requestStatus === 'rejected' || requestStatus === 'closed') {
+  // Check if SLA has required fields (percentageUsed or at least some data)
+  const hasValidSLA = sla && (sla.percentageUsed !== undefined || sla.elapsedHours !== undefined);
+  
+  if (!hasValidSLA || requestStatus === 'approved' || requestStatus === 'rejected' || requestStatus === 'closed') {
     return (
       <div className="flex items-center gap-2" data-testid={`${testId}-status-only`}>
         {requestStatus === 'closed' ? <Lock className="h-4 w-4 text-gray-600" /> :
@@ -47,7 +52,7 @@ export function SLAProgressBar({
   // Use percentage-based colors to match approver SLA tracker
   // Green: 0-50%, Amber: 50-75%, Orange: 75-100%, Red: 100%+ (breached)
   // Grey: When paused (frozen state)
-  const percentageUsed = sla.percentageUsed || 0;
+  const percentageUsed = sla.percentageUsed !== undefined ? sla.percentageUsed : 0;
   const rawStatus = sla.status || 'on_track';
   
   // Determine colors based on percentage (matching ApprovalStepCard logic)
@@ -117,12 +122,12 @@ export function SLAProgressBar({
           className={`text-xs ${colors.badge}`}
           data-testid={`${testId}-badge`}
         >
-          {sla.percentageUsed || 0}% elapsed {isPaused && '(frozen)'}
+          {percentageUsed}% elapsed {isPaused && '(frozen)'}
         </Badge>
       </div>
       
       <Progress 
-        value={sla.percentageUsed || 0} 
+        value={percentageUsed} 
         className="h-3 mb-2"
         indicatorClassName={colors.progress}
         data-testid={`${testId}-bar`}
@@ -130,7 +135,7 @@ export function SLAProgressBar({
       
       <div className="flex items-center justify-between text-xs mb-1">
         <span className="text-gray-600" data-testid={`${testId}-elapsed`}>
-          {sla.elapsedText || formatHoursMinutes(sla.elapsedHours || 0)} elapsed
+          {formatHoursMinutes(sla.elapsedHours || 0)} elapsed
         </span>
         <span 
           className={`font-semibold ${
@@ -146,7 +151,7 @@ export function SLAProgressBar({
       
       {sla.deadline && (
         <p className="text-xs text-gray-500" data-testid={`${testId}-deadline`}>
-          Due: {formatDateDDMMYYYY(sla.deadline, true)} • {sla.percentageUsed || 0}% elapsed
+          Due: {formatDateDDMMYYYY(sla.deadline, true)} • {percentageUsed}% elapsed
         </p>
       )}
       

src/components/ui/chart.tsx

@@ -54,13 +54,13 @@ function ChartContainer({
       <div
         data-slot="chart"
         data-chart={chartId}
+        style={getChartStyle(config)}
         className={cn(
           "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
           className,
         )}
         {...props}
       >
-        <ChartStyle id={chartId} config={config} />
         <RechartsPrimitive.ResponsiveContainer>
           {children}
         </RechartsPrimitive.ResponsiveContainer>
@@ -69,37 +69,39 @@ function ChartContainer({
   );
 }
 
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+const getChartStyle = (config: ChartConfig) => {
   const colorConfig = Object.entries(config).filter(
     ([, config]) => config.theme || config.color,
   );
 
   if (!colorConfig.length) {
-    return null;
+    return {};
   }
 
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join("\n")}
-}
-`,
-          )
-          .join("\n"),
-      }}
-    />
-  );
+  const styles: Record<string, string> = {};
+
+  colorConfig.forEach(([key, itemConfig]) => {
+    // For simplicity, we'll use the default color or the light theme color
+    // If you need per-theme variables, they should be handled via CSS classes or media queries 
+    // but applying them here as inline styles is CSP-safe.
+    const color = itemConfig.color || itemConfig.theme?.light;
+    if (color) {
+      styles[`--color-${key}`] = color;
+    }
+
+    // Handle dark theme if present
+    const darkColor = itemConfig.theme?.dark;
+    if (darkColor) {
+      styles[`--color-${key}-dark`] = darkColor;
+    }
+  });
+
+  return styles as React.CSSProperties;
+};
+
+// Deprecated: Kept for backward compatibility if needed in other files.
+const ChartStyle = () => {
+  return null;
 };
 
 const ChartTooltip = RechartsPrimitive.Tooltip;

src/components/ui/date-picker.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import * as React from "react";
+import { format, parse, isValid } from "date-fns";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { cn } from "./utils";
+import { Button } from "./button";
+import { Calendar } from "./calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./popover";
+
+export interface CustomDatePickerProps {
+  /**
+   * Selected date value as string in YYYY-MM-DD format (for form compatibility)
+   * or Date object
+   */
+  value?: string | Date | null;
+  
+  /**
+   * Callback when date changes. Returns date string in YYYY-MM-DD format
+   */
+  onChange?: (date: string | null) => void;
+  
+  /**
+   * Minimum selectable date as string (YYYY-MM-DD) or Date object
+   */
+  minDate?: string | Date | null;
+  
+  /**
+   * Maximum selectable date as string (YYYY-MM-DD) or Date object
+   */
+  maxDate?: string | Date | null;
+  
+  /**
+   * Placeholder text
+   */
+  placeholderText?: string;
+  
+  /**
+   * Whether the date picker is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+
+  /**
+   * CSS classes for the wrapper div
+   */
+  wrapperClassName?: string;
+
+  /**
+   * Error state - shows red border
+   */
+  error?: boolean;
+  
+  /**
+   * Display format (default: "dd/MM/yyyy")
+   */
+  displayFormat?: string;
+  
+  /**
+   * ID for accessibility
+   */
+  id?: string;
+}
+
+/**
+ * Reusable DatePicker component with consistent dd/MM/yyyy format and button trigger.
+ * Uses native Calendar component wrapped in a Popover.
+ */
+export function CustomDatePicker({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  placeholderText = "dd/mm/yyyy",
+  disabled = false,
+  className,
+  wrapperClassName,
+  error = false,
+  displayFormat = "dd/MM/yyyy",
+  id,
+}: CustomDatePickerProps) {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+
+  // Convert input value to Date object for Calendar
+  const selectedDate = React.useMemo(() => {
+    if (!value) return undefined;
+    if (value instanceof Date) {
+      return isValid(value) ? value : undefined;
+    }
+    if (typeof value === "string") {
+      try {
+        const parsed = parse(value, "yyyy-MM-dd", new Date());
+        return isValid(parsed) ? parsed : undefined;
+      } catch (e) {
+        return undefined;
+      }
+    }
+    return undefined;
+  }, [value]);
+
+  // Convert minDate
+  const minDateObj = React.useMemo(() => {
+    if (!minDate) return undefined;
+    if (minDate instanceof Date) return isValid(minDate) ? minDate : undefined;
+    if (typeof minDate === "string") {
+      const parsed = parse(minDate, "yyyy-MM-dd", new Date());
+      return isValid(parsed) ? parsed : undefined;
+    }
+    return undefined;
+  }, [minDate]);
+
+  // Convert maxDate
+  const maxDateObj = React.useMemo(() => {
+    if (!maxDate) return undefined;
+    if (maxDate instanceof Date) return isValid(maxDate) ? maxDate : undefined;
+    if (typeof maxDate === "string") {
+      const parsed = parse(maxDate, "yyyy-MM-dd", new Date());
+      return isValid(parsed) ? parsed : undefined;
+    }
+    return undefined;
+  }, [maxDate]);
+
+  const handleSelect = (date: Date | undefined) => {
+    setIsPopoverOpen(false);
+    if (!onChange) return;
+    
+    if (!date) {
+      onChange(null);
+      return;
+    }
+    
+    // Return YYYY-MM-DD string
+    onChange(format(date, "yyyy-MM-dd"));
+  };
+
+  return (
+    <div className={cn("relative", wrapperClassName)}>
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            id={id}
+            disabled={disabled}
+            variant="outline"
+            className={cn(
+              "w-full justify-start text-left font-normal",
+              !selectedDate && "text-muted-foreground",
+              error && "border-destructive ring-destructive/20",
+              className
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {selectedDate ? (
+              format(selectedDate, displayFormat)
+            ) : (
+              <span>{placeholderText}</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={selectedDate}
+            onSelect={handleSelect}
+            disabled={(date) => {
+              if (minDateObj && date < minDateObj) return true;
+              if (maxDateObj && date > maxDateObj) return true;
+              return false;
+            }}
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+export default CustomDatePicker;
+

src/components/ui/rich-text-editor.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
 import { cn } from "./utils";
 import { Button } from "./button";
-import { Bold, Italic, Underline, List, ListOrdered, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight } from "lucide-react";
+import { Bold, Italic, Underline, List, ListOrdered, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, Highlighter, X, Type } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { sanitizeHTML } from "@/utils/sanitizer";
 
 interface RichTextEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   value: string;
@@ -11,6 +13,23 @@ interface RichTextEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   minHeight?: string;
 }
 
+// Predefined highlight colors - 12 major colors in 2 rows (6 columns x 2 rows)
+// "No Color" is first for easy access (standard pattern)
+const HIGHLIGHT_COLORS = [
+  { name: 'No Color', value: 'transparent', class: 'bg-gray-200 border-2 border-gray-400', icon: '×' },
+  { name: 'Yellow', value: '#FFEB3B', class: 'bg-yellow-400' },
+  { name: 'Green', value: '#4CAF50', class: 'bg-green-400' },
+  { name: 'Blue', value: '#2196F3', class: 'bg-blue-400' },
+  { name: 'Red', value: '#F44336', class: 'bg-red-400' },
+  { name: 'Orange', value: '#FF9800', class: 'bg-orange-400' },
+  { name: 'Purple', value: '#9C27B0', class: 'bg-purple-400' },
+  { name: 'Pink', value: '#E91E63', class: 'bg-pink-400' },
+  { name: 'Cyan', value: '#00BCD4', class: 'bg-cyan-400' },
+  { name: 'Teal', value: '#009688', class: 'bg-teal-400' },
+  { name: 'Amber', value: '#FFC107', class: 'bg-amber-400' },
+  { name: 'Indigo', value: '#3F51B5', class: 'bg-indigo-400' },
+];
+
 /**
  * RichTextEditor Component
  * 
@@ -28,6 +47,12 @@ export function RichTextEditor({
   const editorRef = React.useRef<HTMLDivElement>(null);
   const [isFocused, setIsFocused] = React.useState(false);
   const [activeFormats, setActiveFormats] = React.useState<Set<string>>(new Set());
+  const [highlightColorOpen, setHighlightColorOpen] = React.useState(false);
+  const [currentHighlightColor, setCurrentHighlightColor] = React.useState<string | null>(null);
+  const [customColor, setCustomColor] = React.useState<string>('#FFEB3B');
+  const [textColorOpen, setTextColorOpen] = React.useState(false);
+  const [currentTextColor, setCurrentTextColor] = React.useState<string | null>(null);
+  const [customTextColor, setCustomTextColor] = React.useState<string>('#000000');
 
   // Sync external value to editor
   React.useEffect(() => {
@@ -35,7 +60,8 @@ export function RichTextEditor({
       // Only update if the value actually changed externally
       const currentValue = editorRef.current.innerHTML;
       if (currentValue !== value) {
-        editorRef.current.innerHTML = value || '';
+        // Sanitize incoming content
+        editorRef.current.innerHTML = sanitizeHTML(value || '');
       }
     }
   }, [value]);
@@ -145,9 +171,6 @@ export function RichTextEditor({
           // Wrap table in scrollable container for mobile
           const wrapper = document.createElement('div');
           wrapper.className = 'table-wrapper';
-          wrapper.style.overflowX = 'auto';
-          wrapper.style.maxWidth = '100%';
-          wrapper.style.margin = '8px 0';
           wrapper.appendChild(table);
           fragment.appendChild(wrapper);
         }
@@ -209,9 +232,9 @@ export function RichTextEditor({
     selection.removeAllRanges();
     selection.addRange(range);
 
-    // Trigger onChange
+    // Trigger onChange with sanitized content
     if (editorRef.current) {
-      onChange(editorRef.current.innerHTML);
+      onChange(sanitizeHTML(editorRef.current.innerHTML));
     }
   }, [onChange, cleanWordHTML]);
 
@@ -249,6 +272,84 @@ export function RichTextEditor({
         if (style.textAlign === 'right') formats.add('right');
         if (style.textAlign === 'left') formats.add('left');
 
+        // Convert RGB/RGBA to hex for comparison
+        const colorToHex = (color: string): string | null => {
+          // If already hex format
+          if (color.startsWith('#')) {
+            return color.toUpperCase();
+          }
+          // If RGB/RGBA format
+          const result = color.match(/\d+/g);
+          if (!result || result.length < 3) return null;
+          const r = result[0];
+          const g = result[1];
+          const b = result[2];
+          if (!r || !g || !b) return null;
+          const rHex = parseInt(r).toString(16).padStart(2, '0');
+          const gHex = parseInt(g).toString(16).padStart(2, '0');
+          const bHex = parseInt(b).toString(16).padStart(2, '0');
+          return `#${rHex}${gHex}${bHex}`.toUpperCase();
+        };
+
+        // Check for background color (highlight)
+        const bgColor = style.backgroundColor;
+        // Check if background color is set and not transparent/default
+        if (bgColor &&
+          bgColor !== 'rgba(0, 0, 0, 0)' &&
+          bgColor !== 'transparent' &&
+          bgColor !== 'rgb(255, 255, 255)' &&
+          bgColor !== '#ffffff' &&
+          bgColor !== '#FFFFFF') {
+          formats.add('highlight');
+          const hexColor = colorToHex(bgColor);
+          if (hexColor) {
+            // Find matching color from our palette (allowing for slight variations)
+            const matchedColor = HIGHLIGHT_COLORS.find(c => {
+              if (c.value === 'transparent') return false;
+              // Compare hex values (case-insensitive)
+              return c.value.toUpperCase() === hexColor;
+            });
+            if (matchedColor) {
+              setCurrentHighlightColor(matchedColor.value);
+            } else {
+              // Store the actual color even if not in our palette
+              setCurrentHighlightColor(hexColor);
+            }
+          }
+        } else if (!formats.has('highlight')) {
+          // Only reset if we haven't found a highlight yet
+          setCurrentHighlightColor(null);
+        }
+
+        // Check for text color
+        const textColor = style.color;
+        // Convert to hex for comparison
+        const hexTextColor = colorToHex(textColor);
+        // Check if text color is set and not default black
+        if (textColor && hexTextColor &&
+          textColor !== 'rgba(0, 0, 0, 0)' &&
+          hexTextColor !== '#000000') {
+          formats.add('textColor');
+          // Find matching color from our palette
+          const matchedColor = HIGHLIGHT_COLORS.find(c => {
+            if (c.value === 'transparent') return false;
+            return c.value.toUpperCase() === hexTextColor;
+          });
+          if (matchedColor) {
+            setCurrentTextColor(matchedColor.value);
+          } else {
+            // Store the actual color even if not in our palette
+            setCurrentTextColor(hexTextColor);
+          }
+        } else if (!formats.has('textColor')) {
+          // Only reset if we haven't found a text color yet (default to black)
+          if (hexTextColor === '#000000' || !hexTextColor) {
+            setCurrentTextColor('#000000');
+          } else {
+            setCurrentTextColor(null);
+          }
+        }
+
         element = element.parentElement;
       }
     }
@@ -278,17 +379,276 @@ export function RichTextEditor({
 
     // Update content
     if (editorRef.current) {
-      onChange(editorRef.current.innerHTML);
+      onChange(sanitizeHTML(editorRef.current.innerHTML));
     }
 
     // Check active formats after a short delay
     setTimeout(checkActiveFormats, 10);
   }, [isFocused, onChange, checkActiveFormats]);
 
+  // Apply highlight color
+  const applyHighlight = React.useCallback((color: string) => {
+    if (!editorRef.current) return;
+
+    // Restore focus if needed
+    if (!isFocused) {
+      editorRef.current.focus();
+    }
+
+    // Save current selection
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      // If no selection, focus the editor
+      editorRef.current.focus();
+      return;
+    }
+
+    // Check if this color is already applied by checking the selection's style
+    let isAlreadyApplied = false;
+    if (selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const commonAncestor = range.commonAncestorContainer;
+      let element: HTMLElement | null = null;
+
+      if (commonAncestor.nodeType === Node.TEXT_NODE) {
+        element = commonAncestor.parentElement;
+      } else {
+        element = commonAncestor as HTMLElement;
+      }
+
+      // Check if the selected element has the same background color
+      while (element && element !== editorRef.current) {
+        const style = window.getComputedStyle(element);
+        const bgColor = style.backgroundColor;
+        if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent' &&
+          bgColor !== 'rgb(255, 255, 255)' && bgColor !== '#ffffff' && bgColor !== '#FFFFFF') {
+          // Convert to hex and compare
+          const colorToHex = (c: string): string | null => {
+            if (c.startsWith('#')) return c.toUpperCase();
+            const result = c.match(/\d+/g);
+            if (!result || result.length < 3) return null;
+            const r = result[0];
+            const g = result[1];
+            const b = result[2];
+            if (!r || !g || !b) return null;
+            const rHex = parseInt(r).toString(16).padStart(2, '0');
+            const gHex = parseInt(g).toString(16).padStart(2, '0');
+            const bHex = parseInt(b).toString(16).padStart(2, '0');
+            return `#${rHex}${gHex}${bHex}`.toUpperCase();
+          };
+          const hexBgColor = colorToHex(bgColor);
+          if (hexBgColor && hexBgColor === color.toUpperCase()) {
+            isAlreadyApplied = true;
+            break;
+          }
+        }
+        element = element.parentElement;
+      }
+    }
+
+    // Use backColor command for highlight (background color)
+    if (color === 'transparent' || isAlreadyApplied) {
+      // Remove highlight - use a more aggressive approach to fully remove
+      const range = selection.getRangeAt(0);
+      if (!range.collapsed) {
+        // Store the range before manipulation
+        const contents = range.extractContents();
+
+        // Create a new text node or span without background color
+        const fragment = document.createDocumentFragment();
+
+        // Process extracted contents to remove background colors
+        const processNode = (node: Node) => {
+          if (node.nodeType === Node.TEXT_NODE) {
+            return node.cloneNode(true);
+          } else if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node as HTMLElement;
+            const newEl = document.createElement(el.tagName.toLowerCase());
+
+            // Copy all attributes except style-related ones
+            Array.from(el.attributes).forEach(attr => {
+              if (attr.name !== 'style' && attr.name !== 'class') {
+                newEl.setAttribute(attr.name, attr.value);
+              }
+            });
+
+            // Process children and copy without background color
+            Array.from(el.childNodes).forEach(child => {
+              const processed = processNode(child);
+              if (processed) {
+                newEl.appendChild(processed);
+              }
+            });
+
+            // Remove background color if present
+            if (el.style.backgroundColor) {
+              newEl.style.backgroundColor = '';
+            }
+
+            return newEl;
+          }
+          return null;
+        };
+
+        Array.from(contents.childNodes).forEach(child => {
+          const processed = processNode(child);
+          if (processed) {
+            fragment.appendChild(processed);
+          }
+        });
+
+        // Insert the cleaned fragment
+        range.insertNode(fragment);
+
+        // Also use execCommand to ensure removal
+        document.execCommand('removeFormat', false);
+      } else {
+        // No selection - remove format from current position
+        document.execCommand('removeFormat', false);
+      }
+      setCurrentHighlightColor(null);
+      setCustomColor('#FFEB3B'); // Reset to default
+    } else {
+      // Apply new highlight color - only if there's a selection
+      if (selection.rangeCount > 0 && !selection.getRangeAt(0).collapsed) {
+        document.execCommand('backColor', false, color);
+        setCurrentHighlightColor(color);
+        // Update custom color input if it's a valid hex color (not transparent)
+        if (color !== 'transparent' && /^#[0-9A-Fa-f]{6}$/i.test(color)) {
+          setCustomColor(color);
+        }
+      } else {
+        // No selection - don't apply (prevents sticky mode where it applies to next typed text)
+        return;
+      }
+    }
+
+    // Clear selection immediately after applying to prevent "sticky" highlight mode
+    const sel = window.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+    }
+
+    // Update content
+    if (editorRef.current) {
+      onChange(sanitizeHTML(editorRef.current.innerHTML));
+    }
+
+    // Close popover
+    setHighlightColorOpen(false);
+
+    // Refocus editor after a short delay and check formats
+    setTimeout(() => {
+      if (editorRef.current) {
+        editorRef.current.focus();
+      }
+      checkActiveFormats();
+    }, 50);
+  }, [isFocused, onChange, checkActiveFormats]);
+
+  // Apply text color
+  const applyTextColor = React.useCallback((color: string) => {
+    if (!editorRef.current) return;
+
+    // Restore focus if needed
+    if (!isFocused) {
+      editorRef.current.focus();
+    }
+
+    // Save current selection
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      // If no selection, focus the editor
+      editorRef.current.focus();
+      return;
+    }
+
+    // Check if this color is already applied by checking the selection's style
+    let isAlreadyApplied = false;
+    if (selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const commonAncestor = range.commonAncestorContainer;
+      let element: HTMLElement | null = null;
+
+      if (commonAncestor.nodeType === Node.TEXT_NODE) {
+        element = commonAncestor.parentElement;
+      } else {
+        element = commonAncestor as HTMLElement;
+      }
+
+      // Check if the selected element has the same text color
+      while (element && element !== editorRef.current) {
+        const style = window.getComputedStyle(element);
+        const textColor = style.color;
+        if (textColor) {
+          // Convert to hex and compare
+          const colorToHex = (c: string): string | null => {
+            if (c.startsWith('#')) return c.toUpperCase();
+            const result = c.match(/\d+/g);
+            if (!result || result.length < 3) return null;
+            const r = result[0];
+            const g = result[1];
+            const b = result[2];
+            if (!r || !g || !b) return null;
+            const rHex = parseInt(r).toString(16).padStart(2, '0');
+            const gHex = parseInt(g).toString(16).padStart(2, '0');
+            const bHex = parseInt(b).toString(16).padStart(2, '0');
+            return `#${rHex}${gHex}${bHex}`.toUpperCase();
+          };
+          const hexTextColor = colorToHex(textColor);
+          // For black, also check if it's the default (no custom color)
+          if (color === '#000000') {
+            // If it's black and matches, or if no custom color is set (default black)
+            if (hexTextColor === '#000000' || !hexTextColor) {
+              isAlreadyApplied = true;
+              break;
+            }
+          } else if (hexTextColor && hexTextColor === color.toUpperCase()) {
+            isAlreadyApplied = true;
+            break;
+          }
+        }
+        element = element.parentElement;
+      }
+    }
+
+    // Use foreColor command for text color
+    if (color === 'transparent' || color === 'default' || isAlreadyApplied) {
+      // Remove text color by removing format or setting to default
+      // If clicking black when it's already default, do nothing or reset
+      if (color === '#000000' && isAlreadyApplied) {
+        // Already default, no need to change
+        setTextColorOpen(false);
+        return;
+      }
+      document.execCommand('removeFormat', false);
+      setCurrentTextColor(null);
+      setCustomTextColor('#000000'); // Reset to default black
+    } else {
+      document.execCommand('foreColor', false, color);
+      setCurrentTextColor(color);
+      // Update custom text color input if it's a valid hex color
+      if (color !== 'transparent' && /^#[0-9A-Fa-f]{6}$/i.test(color)) {
+        setCustomTextColor(color);
+      }
+    }
+
+    // Update content
+    if (editorRef.current) {
+      onChange(sanitizeHTML(editorRef.current.innerHTML));
+    }
+
+    // Close popover
+    setTextColorOpen(false);
+
+    // Check active formats after a short delay
+    setTimeout(checkActiveFormats, 10);
+  }, [isFocused, onChange, checkActiveFormats]);
+
   // Handle input changes
   const handleInput = React.useCallback(() => {
     if (editorRef.current) {
-      onChange(editorRef.current.innerHTML);
+      onChange(sanitizeHTML(editorRef.current.innerHTML));
     }
     checkActiveFormats();
   }, [onChange, checkActiveFormats]);
@@ -324,7 +684,7 @@ export function RichTextEditor({
   const handleBlur = React.useCallback(() => {
     setIsFocused(false);
     if (editorRef.current) {
-      onChange(editorRef.current.innerHTML);
+      onChange(sanitizeHTML(editorRef.current.innerHTML));
     }
   }, [onChange]);
 
@@ -387,6 +747,424 @@ export function RichTextEditor({
           >
             <Underline className="h-4 w-4" />
           </Button>
+
+          {/* Highlight Color Picker */}
+          <Popover open={highlightColorOpen} onOpenChange={setHighlightColorOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className={cn(
+                  "h-7 w-7 p-0",
+                  activeFormats.has('highlight') && "bg-blue-100 text-blue-700"
+                )}
+                title="Text Highlight"
+              >
+                <Highlighter className="h-4 w-4" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto p-2"
+              align="start"
+              onPointerDownOutside={(e) => {
+                // Prevent closing when clicking inside popover
+                const target = e.target as HTMLElement;
+                if (target.closest('[data-popover-content]')) {
+                  e.preventDefault();
+                }
+              }}
+            >
+              <div className="space-y-2 relative" onClick={(e) => e.stopPropagation()}>
+                {/* Cancel Button */}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="absolute top-0 right-0 h-6 w-6 p-0 hover:bg-gray-100"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setHighlightColorOpen(false);
+                  }}
+                  title="Close"
+                >
+                  <X className="h-4 w-4 text-gray-500" />
+                </Button>
+
+                <div className="text-xs font-semibold text-gray-700 mb-2 pr-6">Highlight Color</div>
+                <div className="grid grid-cols-6 gap-1.5 pr-1 mb-2">
+                  {HIGHLIGHT_COLORS.map((color) => {
+                    const isActive = currentHighlightColor === color.value;
+                    const isNoColor = color.value === 'transparent';
+                    return (
+                      <button
+                        key={color.value}
+                        type="button"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          // Standard toggle: if clicking the same color, remove it
+                          if (isActive && !isNoColor) {
+                            applyHighlight('transparent');
+                          } else {
+                            applyHighlight(color.value);
+                          }
+                        }}
+                        className={cn(
+                          "w-6 h-6 rounded border-2 transition-all hover:scale-110 hover:shadow-md relative",
+                          color.class,
+                          isActive && "ring-2 ring-blue-600 ring-offset-1 border-blue-600",
+                          isNoColor && "border-gray-400 bg-white",
+                          !isNoColor && !isActive && "border-gray-300"
+                        )}
+                        title={isActive && !isNoColor ? `${color.name} (Click to remove)` : color.name}
+                        style={!isNoColor ? { backgroundColor: color.value } : {}}
+                      >
+                        {isNoColor && (
+                          <span className="text-[10px] text-gray-600 font-bold">×</span>
+                        )}
+                        {isActive && !isNoColor && (
+                          <span className="absolute inset-0 flex items-center justify-center">
+                            <span className="w-2 h-2 bg-white rounded-full shadow-sm"></span>
+                          </span>
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+
+                {/* Remove Highlight Button - Standard pattern */}
+                {currentHighlightColor && currentHighlightColor !== 'transparent' && (
+                  <div className="mb-2">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="w-full h-7 text-xs"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        applyHighlight('transparent');
+                      }}
+                      title="Remove highlight color"
+                    >
+                      Remove Highlight
+                    </Button>
+                  </div>
+                )}
+
+                {/* Custom Color Picker */}
+                <div className="border-t border-gray-200 pt-2 mt-2">
+                  <div className="text-xs font-semibold text-gray-700 mb-1.5">Custom Color</div>
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="color"
+                      value={currentHighlightColor && currentHighlightColor !== 'transparent' ? currentHighlightColor : customColor}
+                      onChange={(e) => {
+                        const color = e.target.value;
+                        setCustomColor(color);
+                        // Only apply if there's selected text
+                        const selection = window.getSelection();
+                        if (selection && selection.rangeCount > 0 && !selection.getRangeAt(0).collapsed) {
+                          applyHighlight(color);
+                        }
+                      }}
+                      className="w-8 h-8 rounded border border-gray-300 cursor-pointer"
+                      title="Pick a custom color"
+                    />
+                    <input
+                      type="text"
+                      value={currentHighlightColor && currentHighlightColor !== 'transparent' ? currentHighlightColor : customColor}
+                      onChange={(e) => {
+                        e.stopPropagation();
+                        const color = e.target.value;
+                        // Allow typing freely - don't restrict input
+                        setCustomColor(color);
+                      }}
+                      onKeyDown={(e) => {
+                        // Prevent popover from closing
+                        e.stopPropagation();
+                        // Allow all keys including backspace, delete, etc.
+                        if (e.key === 'Enter') {
+                          e.preventDefault();
+                          const color = e.currentTarget.value.trim();
+                          // Apply if valid hex color
+                          if (/^#[0-9A-Fa-f]{6}$/i.test(color)) {
+                            applyHighlight(color);
+                          }
+                        }
+                      }}
+                      onPaste={(e) => {
+                        e.stopPropagation();
+                        // Get pasted text from clipboard
+                        const pastedText = e.clipboardData.getData('text').trim();
+                        e.preventDefault();
+
+                        // Process after paste event completes
+                        setTimeout(() => {
+                          // Check if it's a valid hex color with #
+                          if (/^#[0-9A-Fa-f]{6}$/i.test(pastedText)) {
+                            setCustomColor(pastedText);
+                            // Auto-apply if text is selected in editor
+                            const selection = window.getSelection();
+                            if (selection && selection.rangeCount > 0 && !selection.getRangeAt(0).collapsed) {
+                              applyHighlight(pastedText);
+                            }
+                          } else {
+                            // Check if it's a hex color without # prefix (6 hex digits)
+                            const hexMatch = pastedText.match(/^([0-9A-Fa-f]{6})$/);
+                            if (hexMatch) {
+                              const colorWithHash = `#${hexMatch[1]}`;
+                              setCustomColor(colorWithHash);
+                              const selection = window.getSelection();
+                              if (selection && selection.rangeCount > 0 && !selection.getRangeAt(0).collapsed) {
+                                applyHighlight(colorWithHash);
+                              }
+                            } else {
+                              // If no match, allow default paste behavior (setTimeout allows default paste)
+                              // Value will be updated by onChange
+                            }
+                          }
+                        }, 0);
+                      }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                      }}
+                      onFocus={(e) => {
+                        e.stopPropagation();
+                        // Select all text on focus for easy replacement
+                        e.target.select();
+                      }}
+                      onBlur={(e) => {
+                        // On blur, if valid color, apply it
+                        const color = e.target.value.trim();
+                        if (/^#[0-9A-Fa-f]{6}$/i.test(color)) {
+                          const selection = window.getSelection();
+                          if (selection && selection.rangeCount > 0 && !selection.getRangeAt(0).collapsed) {
+                            applyHighlight(color);
+                          }
+                        } else if (color === '') {
+                          // Reset to current if cleared
+                          setCustomColor(currentHighlightColor || '#FFEB3B');
+                        } else {
+                          // Keep the typed value even if invalid (user might be typing)
+                          setCustomColor(color);
+                        }
+                      }}
+                      placeholder="#FFEB3B"
+                      className="flex-1 h-7 px-2 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                      title="Enter hex color code (Press Enter or click Apply). Supports copy-paste."
+                      autoComplete="off"
+                      spellCheck="false"
+                    />
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 px-2 text-xs"
+                      onClick={() => {
+                        const color = customColor.trim();
+                        if (/^#[0-9A-Fa-f]{6}$/i.test(color)) {
+                          applyHighlight(color);
+                        } else {
+                          // If invalid, show current value or reset
+                          setCustomColor(currentHighlightColor || '#FFEB3B');
+                        }
+                      }}
+                      title="Apply custom color"
+                    >
+                      Apply
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          {/* Text Color Picker */}
+          <Popover open={textColorOpen} onOpenChange={setTextColorOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className={cn(
+                  "h-7 w-7 p-0",
+                  activeFormats.has('textColor') && "bg-blue-100 text-blue-700"
+                )}
+                title="Text Color"
+              >
+                <Type className="h-4 w-4" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto p-2"
+              align="start"
+              onPointerDownOutside={(e) => {
+                const target = e.target as HTMLElement;
+                if (target.closest('[data-popover-content]')) {
+                  e.preventDefault();
+                }
+              }}
+            >
+              <div className="space-y-2 relative" onClick={(e) => e.stopPropagation()}>
+                {/* Cancel Button */}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="absolute top-0 right-0 h-6 w-6 p-0 hover:bg-gray-100"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setTextColorOpen(false);
+                  }}
+                  title="Close"
+                >
+                  <X className="h-4 w-4 text-gray-500" />
+                </Button>
+
+                <div className="text-xs font-semibold text-gray-700 mb-2 pr-6">Text Color</div>
+                <div className="grid grid-cols-6 gap-1.5 pr-1 mb-2">
+                  {/* Default/Black Color Option - First position (standard) */}
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      const isDefault = currentTextColor === '#000000' || (!currentTextColor && !activeFormats.has('textColor'));
+                      // Toggle: if already default, do nothing (or could reset to default explicitly)
+                      if (!isDefault) {
+                        applyTextColor('#000000');
+                      }
+                    }}
+                    className={cn(
+                      "w-6 h-6 rounded border-2 transition-all hover:scale-110 hover:shadow-md flex items-center justify-center bg-black",
+                      (currentTextColor === '#000000' || (!currentTextColor && !activeFormats.has('textColor'))) && "ring-2 ring-blue-600 ring-offset-1 border-blue-600",
+                      (currentTextColor !== '#000000' && (currentTextColor || activeFormats.has('textColor'))) && "border-gray-300"
+                    )}
+                    title="Default (Black)"
+                  >
+                    <span className="text-[10px] text-white font-bold">A</span>
+                    {(currentTextColor === '#000000' || (!currentTextColor && !activeFormats.has('textColor'))) && (
+                      <span className="absolute inset-0 flex items-center justify-center">
+                        <span className="w-2 h-2 bg-white rounded-full shadow-sm"></span>
+                      </span>
+                    )}
+                  </button>
+                  {HIGHLIGHT_COLORS.filter(c => c.value !== 'transparent').map((color) => {
+                    const isActive = currentTextColor === color.value;
+                    return (
+                      <button
+                        key={`text-${color.value}`}
+                        type="button"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          // Standard toggle: if clicking the same color, reset to default
+                          if (isActive) {
+                            applyTextColor('#000000');
+                          } else {
+                            applyTextColor(color.value);
+                          }
+                        }}
+                        className={cn(
+                          "w-6 h-6 rounded border-2 transition-all hover:scale-110 hover:shadow-md flex items-center justify-center relative",
+                          isActive && "ring-2 ring-blue-600 ring-offset-1 border-blue-600",
+                          !isActive && "border-gray-300"
+                        )}
+                        title={isActive ? `${color.name} (Click to reset to default)` : color.name}
+                        style={{ color: color.value, borderColor: isActive ? '#2563eb' : color.value }}
+                      >
+                        <span className="text-xs font-bold">A</span>
+                        {isActive && (
+                          <span className="absolute inset-0 flex items-center justify-center">
+                            <span className="w-2 h-2 bg-white rounded-full shadow-sm"></span>
+                          </span>
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+
+                {/* Remove Text Color Button - Standard pattern */}
+                {currentTextColor && currentTextColor !== '#000000' && (
+                  <div className="mb-2">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="w-full h-7 text-xs"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        applyTextColor('#000000');
+                      }}
+                      title="Reset to default black"
+                    >
+                      Reset to Default
+                    </Button>
+                  </div>
+                )}
+
+                {/* Custom Text Color Picker */}
+                <div className="border-t border-gray-200 pt-2 mt-2">
+                  <div className="text-xs font-semibold text-gray-700 mb-1.5">Custom Color</div>
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="color"
+                      value={currentTextColor || customTextColor}
+                      onChange={(e) => {
+                        const color = e.target.value;
+                        setCustomTextColor(color);
+                        applyTextColor(color);
+                      }}
+                      className="w-8 h-8 rounded border border-gray-300 cursor-pointer"
+                      title="Pick a custom text color"
+                    />
+                    <input
+                      type="text"
+                      value={currentTextColor || customTextColor}
+                      onChange={(e) => {
+                        const color = e.target.value;
+                        setCustomTextColor(color);
+                        // Don't auto-apply, let user press Apply or Enter
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          e.preventDefault();
+                          const color = e.currentTarget.value;
+                          if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
+                            applyTextColor(color);
+                          }
+                        }
+                      }}
+                      onBlur={(e) => {
+                        // On blur, if valid color, apply it
+                        const color = e.target.value;
+                        if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
+                          applyTextColor(color);
+                        } else if (color === '') {
+                          // Reset to current if cleared
+                          setCustomTextColor(currentTextColor || '#000000');
+                        }
+                      }}
+                      placeholder="#000000"
+                      className="flex-1 h-7 px-2 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                      title="Enter hex color code (Press Enter or click Apply)"
+                    />
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 px-2 text-xs"
+                      onClick={() => applyTextColor(customTextColor)}
+                      title="Apply custom text color"
+                    >
+                      Apply
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
         </div>
 
         {/* Headings */}
@@ -549,6 +1327,8 @@ export function RichTextEditor({
           "[&_strong]:font-bold",
           "[&_em]:italic",
           "[&_u]:underline",
+          // Highlight color styles - preserve background colors on spans
+          "[&_span[style*='background']]:px-0.5 [&_span[style*='background']]:rounded",
           "[&_h1]:text-xl [&_h1]:font-bold [&_h1]:my-2",
           "[&_h2]:text-lg [&_h2]:font-semibold [&_h2]:my-2",
           "[&_h3]:text-base [&_h3]:font-semibold [&_h3]:my-1",

src/components/workNote/WorkNoteChat/WorkNoteChat.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { getWorkNotes, createWorkNoteMultipart, getWorkflowDetails, downloadWorkNoteAttachment, getWorkNoteAttachmentPreviewUrl, addSpectator, addApproverAtLevel } from '@/services/workflowApi';
+import { sanitizeHTML } from '@/utils/sanitizer';
 import { getPublicConfigurations, AdminConfiguration } from '@/services/adminApi';
 import { toast } from 'sonner';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -82,6 +83,8 @@ interface WorkNoteChatProps {
   isSpectator?: boolean; // Whether current user is a spectator (view-only)
   currentLevels?: any[]; // Current approval levels for add approver modal
   onAddApprover?: (email: string, tatHours: number, level: number) => Promise<void>; // Callback to add approver
+  maxApprovalLevels?: number; // Maximum allowed approval levels from system policy
+  onPolicyViolation?: (violations: Array<{ type: string; message: string; currentValue?: number; maxValue?: number }>) => void; // Callback for policy violations
 }
 
 // All data is now fetched from backend - no hardcoded mock data
@@ -107,9 +110,7 @@ const getStatusText = (status: string) => {
 
 const formatMessage = (content: string) => {
   // Enhanced mention highlighting - Blue color with extra bold font for high visibility
-  // Matches: @username or @FirstName LastName (only one space allowed for first name + last name)
-  // Pattern: @word or @word word (stops after second word)
-  return content
+  const formattedContent = content
     .replace(/@(\w+(?:\s+\w+)?)(?=\s|$|[.,!?;:]|@)/g, (match, mention, offset, string) => {
       const afterPos = offset + match.length;
       const afterChar = string[afterPos];
@@ -122,6 +123,8 @@ const formatMessage = (content: string) => {
       return match;
     })
     .replace(/\n/g, '<br />');
+
+  return sanitizeHTML(formattedContent);
 };
 
 const formatFileSize = (bytes: number): string => {
@@ -142,7 +145,7 @@ const FileIcon = ({ type }: { type: string }) => {
   return <Paperclip className={`${iconClass} text-gray-600`} />;
 };
 
-export function WorkNoteChat({ requestId, messages: externalMessages, onSend, skipSocketJoin = false, requestTitle, onAttachmentsExtracted, isInitiator = false, isSpectator = false, currentLevels = [], onAddApprover }: WorkNoteChatProps) {
+export function WorkNoteChat({ requestId, messages: externalMessages, onSend, skipSocketJoin = false, requestTitle, onAttachmentsExtracted, isInitiator = false, isSpectator = false, currentLevels = [], onAddApprover, maxApprovalLevels, onPolicyViolation }: WorkNoteChatProps) {
   const routeParams = useParams<{ requestId: string }>();
   const effectiveRequestId = requestId || routeParams.requestId || '';
   const [message, setMessage] = useState('');
@@ -238,7 +241,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
             id: m.noteId || m.id || String(Math.random()),
             user: {
               name: m.userName || 'User',
-              avatar: (m.userName || 'U').slice(0,2).toUpperCase(), 
+              avatar: (m.userName || 'U').slice(0, 2).toUpperCase(),
               role: m.userRole || 'Participant'
             },
             content: m.message || '',
@@ -359,7 +362,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
           const userId = p.userId || p.user_id || '';
           return {
             name: p.userName || p.user_name || p.user_email || p.userEmail || 'User',
-            avatar: (p.userName || p.user_name || p.user_email || 'U').toString().split(' ').map((s: string)=>s[0]).filter(Boolean).join('').slice(0,2).toUpperCase(),
+            avatar: (p.userName || p.user_name || p.user_email || 'U').toString().split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(),
             role: formatParticipantRole(participantType.toString()),
             status: 'offline', // will be updated by presence events
             email: p.userEmail || p.user_email || '',
@@ -462,7 +465,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
         if (details?.workflow?.requestId) {
           joinedId = details.workflow.requestId; // join by UUID to match server emits
         }
-      } catch {}
+      } catch { }
       try {
         // Get socket using helper function (handles VITE_BASE_URL or VITE_API_BASE_URL)
         const s = getSocket(); // Uses getSocketBaseUrl() helper internally
@@ -691,10 +694,10 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
           // Socket cleanup completed - logging removed
         };
         (window as any).__wn_cleanup = cleanup;
-      } catch {}
+      } catch { }
     })();
     return () => {
-      try { (window as any).__wn_cleanup?.(); } catch {}
+      try { (window as any).__wn_cleanup?.(); } catch { }
     };
   }, [effectiveRequestId, currentUserId, skipSocketJoin]);
 
@@ -760,7 +763,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
               id: m.noteId || m.id || String(Math.random()),
               user: {
                 name: m.userName || 'User',
-                avatar: (m.userName || 'U').slice(0,2).toUpperCase(), 
+                avatar: (m.userName || 'U').slice(0, 2).toUpperCase(),
                 role: m.userRole || 'Participant'
               },
               content: m.message || '',
@@ -1272,8 +1275,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
                   <div key={msg.id} className={`flex gap-2 sm:gap-3 lg:gap-4 ${msg.isSystem ? 'justify-center' : isCurrentUser ? 'justify-end' : ''}`}>
                     {!msg.isSystem && !isCurrentUser && (
                       <Avatar className="h-8 w-8 sm:h-10 sm:w-10 lg:h-12 lg:w-12 flex-shrink-0 ring-1 sm:ring-2 ring-white shadow-sm">
-                          <AvatarFallback className={`text-white font-semibold text-xs sm:text-sm ${
-                            msg.user.role === 'Initiator' ? 'bg-green-600' : 
+                        <AvatarFallback className={`text-white font-semibold text-xs sm:text-sm ${msg.user.role === 'Initiator' ? 'bg-green-600' :
                           msg.user.role === 'Current User' ? 'bg-blue-500' :
                             msg.user.role === 'System' ? 'bg-gray-500' :
                               'bg-slate-600'
@@ -1412,8 +1414,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
                                   <button
                                     key={index}
                                     onClick={() => addReaction(msg.id, reaction.emoji)}
-                                      className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs sm:text-sm transition-colors flex-shrink-0 ${
-                                        reaction.users.includes('You') 
+                                    className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs sm:text-sm transition-colors flex-shrink-0 ${reaction.users.includes('You')
                                       ? 'bg-blue-100 text-blue-800 border border-blue-200'
                                       : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                                       }`}
@@ -1562,8 +1563,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
                               className="w-full flex items-center gap-3 p-3 hover:bg-blue-50 rounded-lg text-left transition-colors border border-transparent hover:border-blue-200"
                             >
                               <Avatar className="h-10 w-10">
-                                    <AvatarFallback className={`text-white text-sm font-semibold ${
-                                      participant.role === 'Initiator' ? 'bg-green-600' :
+                                <AvatarFallback className={`text-white text-sm font-semibold ${participant.role === 'Initiator' ? 'bg-green-600' :
                                   participant.role === 'Approver' ? 'bg-purple-600' :
                                     'bg-blue-500'
                                   }`}>
@@ -1711,8 +1711,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
                   <div key={index} className="flex items-center gap-3">
                     <div className="relative">
                       <Avatar className="h-9 w-9 sm:h-10 sm:w-10">
-                      <AvatarFallback className={`text-white font-semibold text-sm ${
-                        participant.role === 'Initiator' ? 'bg-green-600' : 
+                        <AvatarFallback className={`text-white font-semibold text-sm ${participant.role === 'Initiator' ? 'bg-green-600' :
                           isCurrentUser ? 'bg-blue-500' : 'bg-slate-600'
                           }`}>
                           {participant.avatar}
@@ -1815,6 +1814,8 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
           requestTitle={requestInfo.title}
           existingParticipants={existingParticipants}
           currentLevels={currentLevels}
+          maxApprovalLevels={maxApprovalLevels}
+          onPolicyViolation={onPolicyViolation}
         />
       )}
 

src/components/workNote/WorkNoteChat/WorkNoteChatSimple.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import { getWorkNotes, createWorkNoteMultipart, getWorkflowDetails, downloadWorkNoteAttachment, getWorkNoteAttachmentPreviewUrl } from '@/services/workflowApi';
+import { sanitizeHTML } from '@/utils/sanitizer';
 import { toast } from 'sonner';
 import { getSocket, joinRequestRoom, leaveRequestRoom } from '@/utils/socket';
 import { formatDateTime } from '@/utils/dateFormatter';
@@ -58,9 +59,11 @@ interface WorkNoteChatSimpleProps {
 }
 
 const formatMessage = (content: string) => {
-  return content
+  const formattedContent = content
     .replace(/@([\w\s]+)(?=\s|$|[.,!?])/g, '<span class="inline-flex items-center px-2 py-1 rounded-md bg-blue-100 text-blue-800 font-medium text-sm">@$1</span>')
     .replace(/\n/g, '<br />');
+
+  return sanitizeHTML(formattedContent);
 };
 
 const FileIcon = ({ type }: { type: string }) => {
@@ -140,7 +143,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
         if (details?.workflow?.requestId) {
           joinedId = details.workflow.requestId;
         }
-      } catch {}
+      } catch { }
       try {
         // Get socket using helper function (handles VITE_BASE_URL or VITE_API_BASE_URL)
         const s = getSocket(); // Uses getSocketBaseUrl() helper internally
@@ -189,7 +192,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
       }
     })();
     return () => {
-      try { (window as any).__wn_cleanup?.(); } catch {}
+      try { (window as any).__wn_cleanup?.(); } catch { }
     };
   }, [requestId, currentUserId]);
 
@@ -218,7 +221,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
             };
           }) : [];
           setMessages(mapped as any);
-        } catch {}
+        } catch { }
       }
       setMessage('');
       setSelectedFiles([]);
@@ -257,7 +260,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
           } as any;
         });
         setMessages(mapped);
-      } catch {}
+      } catch { }
     } else {
       (async () => {
         try {
@@ -394,8 +397,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
               <div key={msg.id} className={`flex gap-3 ${msg.isSystem ? 'justify-center' : isCurrentUser ? 'justify-end' : ''}`}>
                 {!msg.isSystem && !isCurrentUser && (
                   <Avatar className="h-10 w-10 flex-shrink-0 ring-2 ring-white shadow-sm">
-                    <AvatarFallback className={`text-white font-semibold text-sm ${
-                      msg.user.role === 'Initiator' ? 'bg-green-600' : 
+                    <AvatarFallback className={`text-white font-semibold text-sm ${msg.user.role === 'Initiator' ? 'bg-green-600' :
                         msg.user.role === 'Approver' ? 'bg-blue-600' :
                           'bg-slate-600'
                       }`}>
@@ -528,8 +530,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
                               <button
                                 key={index}
                                 onClick={() => addReaction(msg.id, reaction.emoji)}
-                                className={`flex items-center gap-1 px-2 py-1 rounded-full text-sm transition-colors flex-shrink-0 ${
-                                  reaction.users.includes('You') 
+                                className={`flex items-center gap-1 px-2 py-1 rounded-full text-sm transition-colors flex-shrink-0 ${reaction.users.includes('You')
                                     ? 'bg-blue-100 text-blue-800 border border-blue-200'
                                     : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                                   }`}

src/components/workflow/ClaimManagementDetail/ClaimManagementDetail.tsx

@@ -1,794 +0,0 @@
-import { useState, useMemo } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { toast } from 'sonner';
-import { DealerDocumentModal } from '@/components/modals/DealerDocumentModal';
-import { InitiatorVerificationModal } from '@/components/modals/InitiatorVerificationModal';
-import { Progress } from '@/components/ui/progress';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { CLAIM_MANAGEMENT_DATABASE } from '@/utils/claimManagementDatabase';
-import { formatDateDDMMYYYY } from '@/utils/dateFormatter';
-import { 
-  ArrowLeft, 
-  Clock, 
-  FileText, 
-  MessageSquare, 
-  CheckCircle, 
-  XCircle, 
-  Download,
-  Eye,
-  Flame,
-  Target,
-  TrendingUp,
-  RefreshCw,
-  Activity,
-  MapPin,
-  Mail,
-  Phone,
-  Building,
-  Receipt,
-  Upload,
-  UserPlus,
-  ClipboardList,
-  DollarSign,
-  Calendar
-} from 'lucide-react';
-
-interface ClaimManagementDetailProps {
-  requestId: string;
-  onBack?: () => void;
-  onOpenModal?: (modal: string) => void;
-  dynamicRequests?: any[];
-}
-
-// Utility functions
-const getPriorityConfig = (priority: string) => {
-  switch (priority) {
-    case 'express':
-    case 'urgent':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        icon: Flame
-      };
-    case 'standard':
-      return {
-        color: 'bg-blue-100 text-blue-800 border-blue-200',
-        icon: Target
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: Target
-      };
-  }
-};
-
-const getStatusConfig = (status: string) => {
-  switch (status) {
-    case 'pending':
-      return {
-        color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
-        icon: Clock
-      };
-    case 'in-review':
-      return {
-        color: 'bg-blue-100 text-blue-800 border-blue-200',
-        icon: Eye
-      };
-    case 'approved':
-      return {
-        color: 'bg-green-100 text-green-800 border-green-200',
-        icon: CheckCircle
-      };
-    case 'rejected':
-      return {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        icon: XCircle
-      };
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: Clock
-      };
-  }
-};
-
-const getSLAConfig = (progress: number) => {
-  if (progress >= 80) {
-    return {
-      bg: 'bg-red-50',
-      color: 'bg-red-500',
-      textColor: 'text-red-700'
-    };
-  } else if (progress >= 60) {
-    return {
-      bg: 'bg-orange-50',
-      color: 'bg-orange-500',
-      textColor: 'text-orange-700'
-    };
-  } else {
-    return {
-      bg: 'bg-green-50',
-      color: 'bg-green-500',
-      textColor: 'text-green-700'
-    };
-  }
-};
-
-const getStepIcon = (status: string) => {
-  switch (status) {
-    case 'approved':
-      return <CheckCircle className="w-5 h-5 text-green-600" />;
-    case 'rejected':
-      return <XCircle className="w-5 h-5 text-red-600" />;
-    case 'pending':
-    case 'in-review':
-      return <Clock className="w-5 h-5 text-blue-600" />;
-    default:
-      return <Clock className="w-5 h-5 text-gray-400" />;
-  }
-};
-
-const getActionTypeIcon = (type: string) => {
-  switch (type) {
-    case 'approval':
-    case 'approved':
-      return <CheckCircle className="w-5 h-5 text-green-600" />;
-    case 'rejection':
-    case 'rejected':
-      return <XCircle className="w-5 h-5 text-red-600" />;
-    case 'comment':
-      return <MessageSquare className="w-5 h-5 text-blue-600" />;
-    case 'status_change':
-      return <RefreshCw className="w-5 h-5 text-orange-600" />;
-    case 'assignment':
-      return <UserPlus className="w-5 h-5 text-purple-600" />;
-    case 'created':
-      return <FileText className="w-5 h-5 text-blue-600" />;
-    default:
-      return <Activity className="w-5 h-5 text-gray-600" />;
-  }
-};
-
-export function ClaimManagementDetail({
-  requestId,
-  onBack,
-  onOpenModal,
-  dynamicRequests = []
-}: ClaimManagementDetailProps) {
-  const [activeTab, setActiveTab] = useState('overview');
-  const [dealerDocModal, setDealerDocModal] = useState(false);
-  const [initiatorVerificationModal, setInitiatorVerificationModal] = useState(false);
-
-  // Get claim from database or dynamic requests
-  const claim = useMemo(() => {
-    // First check static database
-    const staticClaim = CLAIM_MANAGEMENT_DATABASE[requestId];
-    if (staticClaim) return staticClaim;
-    
-    // Then check dynamic requests
-    const dynamicClaim = dynamicRequests.find((req: any) => req.id === requestId);
-    if (dynamicClaim) return dynamicClaim;
-    
-    return null;
-  }, [requestId, dynamicRequests]);
-
-  if (!claim) {
-    return (
-      <div className="flex items-center justify-center h-screen">
-        <div className="text-center">
-          <h2 className="text-2xl font-bold text-gray-900 mb-2">Claim Not Found</h2>
-          <p className="text-gray-600 mb-4">The claim request you're looking for doesn't exist.</p>
-          <Button onClick={onBack}>
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Go Back
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  const priorityConfig = getPriorityConfig(claim.priority);
-  const statusConfig = getStatusConfig(claim.status);
-  const slaConfig = getSLAConfig(claim.slaProgress);
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-7xl mx-auto p-6">
-        {/* Header Section */}
-        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
-          <div className="flex items-start justify-between mb-4">
-            <div className="flex items-start gap-4">
-              <Button 
-                variant="ghost" 
-                size="icon" 
-                onClick={onBack}
-                className="mt-1"
-              >
-                <ArrowLeft className="h-5 w-5" />
-              </Button>
-              
-              <div className="flex items-start gap-4">
-                <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
-                  <Receipt className="w-6 h-6 text-purple-600" />
-                </div>
-                
-                <div>
-                  <div className="flex items-center gap-3 mb-2">
-                    <h1 className="text-xl font-bold text-gray-900">{claim.id}</h1>
-                    <Badge className={`${priorityConfig.color}`} variant="outline">
-                      {claim.priority} priority
-                    </Badge>
-                    <Badge className={`${statusConfig.color}`} variant="outline">
-                      <statusConfig.icon className="w-3 h-3 mr-1" />
-                      {claim.status}
-                    </Badge>
-                    <Badge className="bg-purple-100 text-purple-800 border-purple-200" variant="outline">
-                      <Receipt className="w-3 h-3 mr-1" />
-                      Claim Management
-                    </Badge>
-                  </div>
-                  <h2 className="text-lg font-semibold text-gray-900">{claim.title}</h2>
-                </div>
-              </div>
-            </div>
-            
-            <div className="flex items-center gap-4">
-              {claim.amount && claim.amount !== 'TBD' && (
-                <div className="text-right">
-                  <p className="text-sm text-gray-500">Claim Amount</p>
-                  <p className="text-xl font-bold text-gray-900">{claim.amount}</p>
-                </div>
-              )}
-              <Button variant="outline" size="sm">
-                <RefreshCw className="w-4 h-4 mr-2" />
-                Refresh
-              </Button>
-            </div>
-          </div>
-
-          {/* SLA Progress */}
-          <div className={`${slaConfig.bg} rounded-lg border p-4 mt-4`}>
-            <div className="flex items-center justify-between mb-2">
-              <div className="flex items-center gap-2">
-                <Clock className={`h-4 w-4 ${slaConfig.textColor}`} />
-                <span className="text-sm font-medium text-gray-900">SLA Progress</span>
-              </div>
-              <span className={`text-sm font-semibold ${slaConfig.textColor}`}>
-                {claim.slaRemaining}
-              </span>
-            </div>
-            <Progress value={claim.slaProgress} className="h-2 mb-2" />
-            <p className="text-xs text-gray-600">
-              Due: {formatDateDDMMYYYY(claim.slaEndDate, true)} • {claim.slaProgress}% elapsed
-            </p>
-          </div>
-        </div>
-
-        {/* Tabs */}
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className="grid w-full grid-cols-4 bg-gray-100 h-10 mb-6">
-            <TabsTrigger value="overview" className="flex items-center gap-2 text-xs sm:text-sm px-2">
-              <ClipboardList className="w-3 h-3 sm:w-4 sm:h-4" />
-              Overview
-            </TabsTrigger>
-            <TabsTrigger value="workflow" className="flex items-center gap-2 text-xs sm:text-sm px-2">
-              <TrendingUp className="w-3 h-3 sm:w-4 sm:h-4" />
-              Workflow (8-Steps)
-            </TabsTrigger>
-            <TabsTrigger value="documents" className="flex items-center gap-2 text-xs sm:text-sm px-2">
-              <FileText className="w-3 h-3 sm:w-4 sm:h-4" />
-              Documents
-            </TabsTrigger>
-            <TabsTrigger value="activity" className="flex items-center gap-2 text-xs sm:text-sm px-2">
-              <Activity className="w-3 h-3 sm:w-4 sm:h-4" />
-              Activity
-            </TabsTrigger>
-          </TabsList>
-
-          {/* Overview Tab */}
-          <TabsContent value="overview">
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-              {/* Left Column - Main Content (2/3 width) */}
-              <div className="lg:col-span-2 space-y-6">
-                {/* Activity Information */}
-                <Card>
-                  <CardHeader className="pb-3">
-                    <CardTitle className="flex items-center gap-2 text-base">
-                      <Calendar className="w-5 h-5 text-blue-600" />
-                      Activity Information
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <div className="grid grid-cols-2 gap-4">
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Name</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.activityName || 'N/A'}</p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Type</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.activityType || 'N/A'}</p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Location</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1 flex items-center gap-2">
-                          <MapPin className="w-4 h-4 text-gray-400" />
-                          {claim.claimDetails?.location || 'N/A'}
-                        </p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Activity Date</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.activityDate || 'N/A'}</p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Estimated Budget</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1 flex items-center gap-2">
-                          <DollarSign className="w-4 h-4 text-green-600" />
-                          {claim.claimDetails?.estimatedBudget || 'N/A'}
-                        </p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Period</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">
-                          {claim.claimDetails?.periodStart || 'N/A'} - {claim.claimDetails?.periodEnd || 'N/A'}
-                        </p>
-                      </div>
-                    </div>
-
-                    <div className="pt-4 border-t">
-                      <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Description</label>
-                      <p className="text-sm text-gray-700 mt-2 bg-gray-50 p-3 rounded-lg whitespace-pre-line">
-                        {claim.claimDetails?.requestDescription || claim.description || 'N/A'}
-                      </p>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* Dealer Information */}
-                <Card>
-                  <CardHeader className="pb-3">
-                    <CardTitle className="flex items-center gap-2 text-base">
-                      <Building className="w-5 h-5 text-purple-600" />
-                      Dealer Information
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <div className="grid grid-cols-2 gap-4">
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Dealer Code</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.dealerCode || 'N/A'}</p>
-                      </div>
-                      <div>
-                        <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Dealer Name</label>
-                        <p className="text-sm text-gray-900 font-medium mt-1">{claim.claimDetails?.dealerName || 'N/A'}</p>
-                      </div>
-                    </div>
-
-                    <div>
-                      <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Contact Information</label>
-                      <div className="mt-2 space-y-2">
-                        <div className="flex items-center gap-2 text-sm text-gray-700">
-                          <Mail className="w-4 h-4 text-gray-400" />
-                          <span>{claim.claimDetails?.dealerEmail || 'N/A'}</span>
-                        </div>
-                        <div className="flex items-center gap-2 text-sm text-gray-700">
-                          <Phone className="w-4 h-4 text-gray-400" />
-                          <span>{claim.claimDetails?.dealerPhone || 'N/A'}</span>
-                        </div>
-                        {claim.claimDetails?.dealerAddress && (
-                          <div className="flex items-start gap-2 text-sm text-gray-700">
-                            <MapPin className="w-4 h-4 text-gray-400 mt-0.5" />
-                            <span>{claim.claimDetails.dealerAddress}</span>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* Initiator Information */}
-                <Card>
-                  <CardHeader className="pb-3">
-                    <CardTitle className="text-base">Request Initiator</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="flex items-start gap-4">
-                      <Avatar className="h-14 w-14 ring-2 ring-white shadow-md">
-                        <AvatarFallback className="bg-gray-700 text-white font-semibold text-lg">
-                          {claim.initiator?.avatar || 'U'}
-                        </AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1">
-                        <h3 className="font-semibold text-gray-900">{claim.initiator?.name || 'N/A'}</h3>
-                        <p className="text-sm text-gray-600">{claim.initiator?.role || 'N/A'}</p>
-                        <p className="text-sm text-gray-500">{claim.initiator?.department || 'N/A'}</p>
-                        
-                        <div className="mt-3 space-y-2">
-                          <div className="flex items-center gap-2 text-sm text-gray-600">
-                            <Mail className="w-4 h-4" />
-                            <span>{claim.initiator?.email || 'N/A'}</span>
-                          </div>
-                          <div className="flex items-center gap-2 text-sm text-gray-600">
-                            <Phone className="w-4 h-4" />
-                            <span>{claim.initiator?.phone || 'N/A'}</span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-
-              {/* Right Column - Quick Actions Sidebar (1/3 width) */}
-              <div className="space-y-6">
-                {/* Quick Actions */}
-                <Card>
-                  <CardHeader className="pb-2">
-                    <CardTitle className="text-base">Quick Actions</CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-2">
-                    <Button 
-                      variant="outline" 
-                      className="w-full justify-start gap-2 border-gray-300"
-                      onClick={() => onOpenModal?.('work-note')}
-                    >
-                      <MessageSquare className="w-4 h-4" />
-                      Add Work Note
-                    </Button>
-                    <Button 
-                      variant="outline" 
-                      className="w-full justify-start gap-2 border-gray-300"
-                      onClick={() => onOpenModal?.('add-spectator')}
-                    >
-                      <Eye className="w-4 h-4" />
-                      Add Spectator
-                    </Button>
-
-                    <div className="pt-4 space-y-2">
-                      <Button 
-                        className="w-full bg-green-600 hover:bg-green-700 text-white"
-                        onClick={() => onOpenModal?.('approve')}
-                      >
-                        <CheckCircle className="w-4 h-4 mr-2" />
-                        Approve Step
-                      </Button>
-                      <Button 
-                        variant="destructive"
-                        className="w-full"
-                        onClick={() => onOpenModal?.('reject')}
-                      >
-                        <XCircle className="w-4 h-4 mr-2" />
-                        Reject Step
-                      </Button>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* Spectators */}
-                {claim.spectators && claim.spectators.length > 0 && (
-                  <Card>
-                    <CardHeader className="pb-2">
-                      <CardTitle className="text-base">Spectators</CardTitle>
-                    </CardHeader>
-                    <CardContent className="space-y-3">
-                      {claim.spectators.map((spectator: any, index: number) => (
-                        <div key={index} className="flex items-center gap-3">
-                          <Avatar className="h-8 w-8">
-                            <AvatarFallback className="bg-blue-100 text-blue-800 text-xs font-semibold">
-                              {spectator.avatar}
-                            </AvatarFallback>
-                          </Avatar>
-                          <div className="flex-1 min-w-0">
-                            <p className="text-sm font-medium text-gray-900">{spectator.name}</p>
-                            <p className="text-xs text-gray-500 truncate">{spectator.role}</p>
-                          </div>
-                        </div>
-                      ))}
-                    </CardContent>
-                  </Card>
-                )}
-              </div>
-            </div>
-          </TabsContent>
-
-          {/* Workflow Tab - 8 Step Process */}
-          <TabsContent value="workflow">
-            <Card>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <div>
-                    <CardTitle className="flex items-center gap-2">
-                      <TrendingUp className="w-5 h-5 text-purple-600" />
-                      Claim Management Workflow
-                    </CardTitle>
-                    <CardDescription className="mt-2">
-                      8-Step approval process for dealer claim management
-                    </CardDescription>
-                  </div>
-                  <Badge variant="outline" className="font-medium">
-                    Step {claim.currentStep} of {claim.totalSteps}
-                  </Badge>
-                </div>
-              </CardHeader>
-              <CardContent>
-                {claim.approvalFlow && claim.approvalFlow.length > 0 ? (
-                  <div className="space-y-4">
-                    {claim.approvalFlow.map((step: any, index: number) => {
-                      const isActive = step.status === 'pending' || step.status === 'in-review';
-                      const isCompleted = step.status === 'approved';
-                      const isRejected = step.status === 'rejected';
-
-                      return (
-                        <div
-                          key={index}
-                          className={`relative p-5 rounded-lg border-2 transition-all ${
-                            isActive
-                              ? 'border-purple-500 bg-purple-50 shadow-md'
-                              : isCompleted
-                              ? 'border-green-500 bg-green-50'
-                              : isRejected
-                              ? 'border-red-500 bg-red-50'
-                              : 'border-gray-200 bg-white'
-                          }`}
-                        >
-                          <div className="flex items-start gap-4">
-                            <div className={`p-3 rounded-xl ${
-                              isActive ? 'bg-purple-100' :
-                              isCompleted ? 'bg-green-100' :
-                              isRejected ? 'bg-red-100' :
-                              'bg-gray-100'
-                            }`}>
-                              {getStepIcon(step.status)}
-                            </div>
-
-                            <div className="flex-1 min-w-0">
-                              <div className="flex items-start justify-between gap-4 mb-2">
-                                <div>
-                                  <div className="flex items-center gap-2 mb-1">
-                                    <h4 className="font-semibold text-gray-900">Step {step.step}: {step.role}</h4>
-                                    <Badge variant="outline" className={
-                                      isActive ? 'bg-purple-100 text-purple-800 border-purple-200' :
-                                      isCompleted ? 'bg-green-100 text-green-800 border-green-200' :
-                                      isRejected ? 'bg-red-100 text-red-800 border-red-200' :
-                                      'bg-gray-100 text-gray-800 border-gray-200'
-                                    }>
-                                      {step.status}
-                                    </Badge>
-                                  </div>
-                                  <p className="text-sm text-gray-600">{step.approver}</p>
-                                  {step.description && (
-                                    <p className="text-sm text-gray-500 mt-2 italic">{step.description}</p>
-                                  )}
-                                </div>
-                                <div className="text-right">
-                                  {step.tatHours && (
-                                    <p className="text-xs text-gray-500">TAT: {step.tatHours}h</p>
-                                  )}
-                                  {step.elapsedHours !== undefined && step.elapsedHours > 0 && (
-                                    <p className="text-xs text-gray-600 font-medium">Elapsed: {step.elapsedHours}h</p>
-                                  )}
-                                </div>
-                              </div>
-
-                              {step.comment && (
-                                <div className="mt-3 p-3 bg-white rounded-lg border border-gray-200">
-                                  <p className="text-sm text-gray-700">{step.comment}</p>
-                                </div>
-                              )}
-
-                              {step.timestamp && (
-                                <p className="text-xs text-gray-500 mt-2">
-                                  {isCompleted ? 'Approved' : isRejected ? 'Rejected' : 'Actioned'} on {step.timestamp}
-                                </p>
-                              )}
-
-                              {/* Workflow-specific Action Buttons */}
-                              {isActive && (
-                                <div className="mt-4 flex gap-2">
-                                  {step.step === 1 && step.role === 'Dealer - Document Upload' && (
-                                    <Button
-                                      size="sm"
-                                      onClick={() => setDealerDocModal(true)}
-                                      className="bg-purple-600 hover:bg-purple-700"
-                                    >
-                                      <Upload className="w-4 h-4 mr-2" />
-                                      Upload Documents
-                                    </Button>
-                                  )}
-                                  {step.step === 2 && step.role === 'Initiator Evaluation' && (
-                                    <Button
-                                      size="sm"
-                                      onClick={() => onOpenModal?.('approve')}
-                                      className="bg-green-600 hover:bg-green-700"
-                                    >
-                                      <CheckCircle className="w-4 h-4 mr-2" />
-                                      Approve & Continue
-                                    </Button>
-                                  )}
-                                  {step.step === 4 && step.role === 'Department Lead Approval' && (
-                                    <Button
-                                      size="sm"
-                                      onClick={() => onOpenModal?.('approve')}
-                                      className="bg-green-600 hover:bg-green-700"
-                                    >
-                                      <CheckCircle className="w-4 h-4 mr-2" />
-                                      Approve & Lock Budget
-                                    </Button>
-                                  )}
-                                  {step.step === 5 && step.role === 'Dealer - Completion Documents' && (
-                                    <Button
-                                      size="sm"
-                                      onClick={() => setDealerDocModal(true)}
-                                      className="bg-purple-600 hover:bg-purple-700"
-                                    >
-                                      <Upload className="w-4 h-4 mr-2" />
-                                      Upload Completion Docs
-                                    </Button>
-                                  )}
-                                  {step.step === 6 && step.role === 'Initiator Verification' && (
-                                    <Button
-                                      size="sm"
-                                      onClick={() => setInitiatorVerificationModal(true)}
-                                      className="bg-green-600 hover:bg-green-700"
-                                    >
-                                      <CheckCircle className="w-4 h-4 mr-2" />
-                                      Verify & Set Amount
-                                    </Button>
-                                  )}
-                                  {step.step === 8 && step.role.includes('Credit Note') && (
-                                    <Button
-                                      size="sm"
-                                      onClick={() => onOpenModal?.('approve')}
-                                      className="bg-green-600 hover:bg-green-700"
-                                    >
-                                      <CheckCircle className="w-4 h-4 mr-2" />
-                                      Issue Credit Note
-                                    </Button>
-                                  )}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                ) : (
-                  <p className="text-sm text-gray-500 text-center py-8">No workflow steps defined</p>
-                )}
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          {/* Documents Tab */}
-          <TabsContent value="documents">
-            <Card>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <CardTitle className="flex items-center gap-2">
-                    <FileText className="w-5 h-5 text-purple-600" />
-                    Claim Documents
-                  </CardTitle>
-                  <Button size="sm">
-                    <Upload className="w-4 h-4 mr-2" />
-                    Upload Document
-                  </Button>
-                </div>
-              </CardHeader>
-              <CardContent>
-                {claim.documents && claim.documents.length > 0 ? (
-                  <div className="space-y-3">
-                    {claim.documents.map((doc: any, index: number) => (
-                      <div
-                        key={index}
-                        className="flex items-center justify-between p-4 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
-                      >
-                        <div className="flex items-center gap-3">
-                          <div className="p-2 bg-purple-100 rounded-lg">
-                            <FileText className="w-5 h-5 text-purple-600" />
-                          </div>
-                          <div>
-                            <p className="font-medium text-gray-900">{doc.name}</p>
-                            <p className="text-xs text-gray-500">
-                              {doc.size} • Uploaded by {doc.uploadedBy} on {doc.uploadedAt}
-                            </p>
-                          </div>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <Button variant="ghost" size="sm">
-                            <Eye className="w-4 h-4" />
-                          </Button>
-                          <Button variant="ghost" size="sm">
-                            <Download className="w-4 h-4" />
-                          </Button>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <p className="text-sm text-gray-500 text-center py-8">No documents uploaded yet</p>
-                )}
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          {/* Activity Tab - Audit Trail */}
-          <TabsContent value="activity">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Activity className="w-5 h-5 text-orange-600" />
-                  Claim Activity Timeline
-                </CardTitle>
-                <CardDescription>
-                  Complete audit trail of all claim management activities
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  {claim.auditTrail && claim.auditTrail.length > 0 ? claim.auditTrail.map((entry: any, index: number) => (
-                    <div key={index} className="flex items-start gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors border border-gray-100">
-                      <div className="mt-1">
-                        {getActionTypeIcon(entry.type)}
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-start justify-between gap-2">
-                          <div>
-                            <p className="font-medium text-gray-900">{entry.action}</p>
-                            <p className="text-sm text-gray-600 mt-1">{entry.details}</p>
-                            <p className="text-xs text-gray-500 mt-1">by {entry.user}</p>
-                          </div>
-                          <span className="text-xs text-gray-500 whitespace-nowrap">{entry.timestamp}</span>
-                        </div>
-                      </div>
-                    </div>
-                  )) : (
-                    <div className="text-center py-12">
-                      <Activity className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-                      <p className="text-sm text-gray-500">No activity recorded yet</p>
-                      <p className="text-xs text-gray-400 mt-2">Actions and updates will appear here</p>
-                    </div>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </TabsContent>
-        </Tabs>
-      </div>
-
-      {/* Claim Management Modals */}
-      {dealerDocModal && (
-        <DealerDocumentModal
-          isOpen={dealerDocModal}
-          onClose={() => setDealerDocModal(false)}
-          onSubmit={async (_documents) => {
-            toast.success('Documents Uploaded', {
-              description: 'Your documents have been submitted for review.',
-            });
-            setDealerDocModal(false);
-          }}
-          dealerName={claim.claimDetails?.dealerName || 'Dealer'}
-          activityName={claim.claimDetails?.activityName || claim.title}
-        />
-      )}
-
-      {initiatorVerificationModal && (
-        <InitiatorVerificationModal
-          isOpen={initiatorVerificationModal}
-          onClose={() => setInitiatorVerificationModal(false)}
-          onSubmit={async (data) => {
-            toast.success('Verification Complete', {
-              description: `Amount set to ${data.approvedAmount}. E-invoice will be generated.`,
-            });
-            setInitiatorVerificationModal(false);
-          }}
-          activityName={claim.claimDetails?.activityName || claim.title}
-          requestedAmount={claim.claimDetails?.estimatedBudget || claim.amount || 'TBD'}
-          documents={claim.documents || []}
-        />
-      )}
-    </div>
-  );
-}

src/components/workflow/ClaimManagementDetail/index.ts

@@ -1 +0,0 @@
-export { ClaimManagementDetail } from './ClaimManagementDetail';

src/components/workflow/ClaimManagementWizard/ClaimManagementWizard.tsx

@@ -1,665 +0,0 @@
-import { useState } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Badge } from '@/components/ui/badge';
-import { Progress } from '@/components/ui/progress';
-import { Calendar } from '@/components/ui/calendar';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
-  ArrowLeft,
-  ArrowRight,
-  Calendar as CalendarIcon,
-  Check,
-  Receipt,
-  Building,
-  MapPin,
-  Clock,
-  CheckCircle,
-  Info,
-  FileText,
-} from 'lucide-react';
-import { format } from 'date-fns';
-import { toast } from 'sonner';
-import { getAllDealers, getDealerInfo, formatDealerAddress } from '@/utils/dealerDatabase';
-
-interface ClaimManagementWizardProps {
-  onBack?: () => void;
-  onSubmit?: (claimData: any) => void;
-}
-
-const CLAIM_TYPES = [
-  'Marketing Activity',
-  'Promotional Event',
-  'Dealer Training',
-  'Infrastructure Development',
-  'Customer Experience Initiative',
-  'Service Campaign'
-];
-
-// Fetch dealers from database
-const DEALERS = getAllDealers();
-
-const STEP_NAMES = [
-  'Claim Details',
-  'Review & Submit'
-];
-
-export function ClaimManagementWizard({ onBack, onSubmit }: ClaimManagementWizardProps) {
-  const [currentStep, setCurrentStep] = useState(1);
-  
-  const [formData, setFormData] = useState({
-    activityName: '',
-    activityType: '',
-    dealerCode: '',
-    dealerName: '',
-    dealerEmail: '',
-    dealerPhone: '',
-    dealerAddress: '',
-    activityDate: undefined as Date | undefined,
-    location: '',
-    requestDescription: '',
-    periodStartDate: undefined as Date | undefined,
-    periodEndDate: undefined as Date | undefined,
-    estimatedBudget: ''
-  });
-
-  const totalSteps = STEP_NAMES.length;
-
-  const updateFormData = (field: string, value: any) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-  };
-
-  const isStepValid = () => {
-    switch (currentStep) {
-      case 1:
-        return formData.activityName && 
-               formData.activityType && 
-               formData.dealerCode && 
-               formData.dealerName && 
-               formData.activityDate && 
-               formData.location && 
-               formData.requestDescription;
-      case 2:
-        return true;
-      default:
-        return false;
-    }
-  };
-
-  const nextStep = () => {
-    if (currentStep < totalSteps && isStepValid()) {
-      setCurrentStep(currentStep + 1);
-    }
-  };
-
-  const prevStep = () => {
-    if (currentStep > 1) {
-      setCurrentStep(currentStep - 1);
-    }
-  };
-
-  const handleDealerChange = (dealerCode: string) => {
-    const dealer = getDealerInfo(dealerCode);
-    if (dealer) {
-      updateFormData('dealerCode', dealer.code);
-      updateFormData('dealerName', dealer.name);
-      updateFormData('dealerEmail', dealer.email);
-      updateFormData('dealerPhone', dealer.phone);
-      updateFormData('dealerAddress', formatDealerAddress(dealer));
-    }
-  };
-
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const handleSubmit = async () => {
-    if (isSubmitting) return; // Prevent double submission
-    
-    const claimData = {
-      ...formData,
-      templateType: 'claim-management',
-      submittedAt: new Date().toISOString(),
-      status: 'pending',
-      currentStep: 'initiator-review',
-      workflowSteps: [
-        {
-          step: 1,
-          name: 'Initiator Evaluation',
-          status: 'pending',
-          approver: 'Current User (Initiator)',
-          description: 'Review and confirm all claim details and documents'
-        },
-        {
-          step: 2,
-          name: 'IO Confirmation',
-          status: 'waiting',
-          approver: 'System',
-          description: 'Automatic IO generation upon initiator approval'
-        },
-        {
-          step: 3,
-          name: 'Department Lead Approval',
-          status: 'waiting',
-          approver: 'Department Lead',
-          description: 'Budget blocking and final approval'
-        },
-        {
-          step: 4,
-          name: 'Document Submission',
-          status: 'waiting',
-          approver: 'Dealer',
-          description: 'Dealer submits completion documents'
-        },
-        {
-          step: 5,
-          name: 'Document Verification',
-          status: 'waiting',
-          approver: 'Initiator',
-          description: 'Verify completion documents'
-        },
-        {
-          step: 6,
-          name: 'E-Invoice Generation',
-          status: 'waiting',
-          approver: 'System',
-          description: 'Auto-generate e-invoice based on approved amount'
-        },
-        {
-          step: 7,
-          name: 'Credit Note Issuance',
-          status: 'waiting',
-          approver: 'Finance',
-          description: 'Issue credit note to dealer'
-        }
-      ]
-    };
-
-    setIsSubmitting(true);
-    try {
-      if (onSubmit) {
-        await onSubmit(claimData);
-      }
-    } catch (error) {
-      // Error handling is done in App.tsx, but we reset the state here
-      setIsSubmitting(false);
-    }
-  };
-
-  const renderStepContent = () => {
-    switch (currentStep) {
-      case 1:
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                <Receipt className="w-8 h-8 text-white" />
-              </div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">Claim Details</h2>
-              <p className="text-gray-600">
-                Provide comprehensive information about your claim request
-              </p>
-            </div>
-
-            <div className="max-w-3xl mx-auto space-y-6">
-              {/* Activity Name and Type */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div>
-                  <Label htmlFor="activityName" className="text-base font-semibold">Activity Name *</Label>
-                  <Input
-                    id="activityName"
-                    placeholder="e.g., Himalayan Adventure Fest 2024"
-                    value={formData.activityName}
-                    onChange={(e) => updateFormData('activityName', e.target.value)}
-                    className="mt-2 h-12"
-                  />
-                </div>
-
-                <div>
-                  <Label htmlFor="activityType" className="text-base font-semibold">Activity Type *</Label>
-                  <Select value={formData.activityType} onValueChange={(value) => updateFormData('activityType', value)}>
-                    <SelectTrigger className="mt-2 h-12">
-                      <SelectValue placeholder="Select activity type" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {CLAIM_TYPES.map((type) => (
-                        <SelectItem key={type} value={type}>{type}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-
-              {/* Dealer Selection */}
-              <div>
-                <Label htmlFor="dealer" className="text-base font-semibold">Dealer Code / Dealer Name *</Label>
-                <Select value={formData.dealerCode} onValueChange={handleDealerChange}>
-                  <SelectTrigger className="mt-2 h-12">
-                    <SelectValue placeholder="Select dealer">
-                      {formData.dealerCode && (
-                        <div className="flex items-center gap-2">
-                          <span className="font-mono text-sm">{formData.dealerCode}</span>
-                          <span className="text-gray-400">•</span>
-                          <span>{formData.dealerName}</span>
-                        </div>
-                      )}
-                    </SelectValue>
-                  </SelectTrigger>
-                  <SelectContent>
-                    {DEALERS.map((dealer) => (
-                      <SelectItem key={dealer.code} value={dealer.code}>
-                        <div className="flex items-center gap-2">
-                          <span className="font-mono text-sm font-semibold">{dealer.code}</span>
-                          <span className="text-gray-400">•</span>
-                          <span>{dealer.name}</span>
-                        </div>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                {formData.dealerCode && (
-                  <p className="text-sm text-gray-600 mt-2">
-                    Selected: <span className="font-semibold">{formData.dealerName}</span> ({formData.dealerCode})
-                  </p>
-                )}
-              </div>
-
-              {/* Date and Location */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div>
-                  <Label className="text-base font-semibold">Date *</Label>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant="outline"
-                        className="w-full justify-start text-left mt-2 h-12"
-                      >
-                        <CalendarIcon className="mr-2 h-4 w-4" />
-                        {formData.activityDate ? format(formData.activityDate, 'PPP') : 'Select date'}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0" align="start">
-                      <Calendar
-                        mode="single"
-                        selected={formData.activityDate}
-                        onSelect={(date) => updateFormData('activityDate', date)}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-
-                <div>
-                  <Label htmlFor="location" className="text-base font-semibold">Location *</Label>
-                  <Input
-                    id="location"
-                    placeholder="e.g., Mumbai, Maharashtra"
-                    value={formData.location}
-                    onChange={(e) => updateFormData('location', e.target.value)}
-                    className="mt-2 h-12"
-                  />
-                </div>
-              </div>
-
-              {/* Request Detail */}
-              <div>
-                <Label htmlFor="requestDescription" className="text-base font-semibold">Request in Detail - Brief Requirement *</Label>
-                <Textarea
-                  id="requestDescription"
-                  placeholder="Provide a detailed description of your claim requirement..."
-                  value={formData.requestDescription}
-                  onChange={(e) => updateFormData('requestDescription', e.target.value)}
-                  className="mt-2 min-h-[120px]"
-                />
-                <p className="text-xs text-gray-500 mt-1">
-                  Include key details about the claim, objectives, and expected outcomes
-                </p>
-              </div>
-
-              {/* Period (Optional) */}
-              <div>
-                <div className="flex items-center gap-2 mb-3">
-                  <Label className="text-base font-semibold">Period (If Any)</Label>
-                  <Badge variant="secondary" className="text-xs">Optional</Badge>
-                </div>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  <div>
-                    <Label className="text-sm text-gray-600">Start Date</Label>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant="outline"
-                          className="w-full justify-start text-left mt-2 h-12"
-                        >
-                          <CalendarIcon className="mr-2 h-4 w-4" />
-                          {formData.periodStartDate ? format(formData.periodStartDate, 'PPP') : 'Start date'}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="single"
-                          selected={formData.periodStartDate}
-                          onSelect={(date) => updateFormData('periodStartDate', date)}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-
-                  <div>
-                    <Label className="text-sm text-gray-600">End Date</Label>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant="outline"
-                          className="w-full justify-start text-left mt-2 h-12"
-                        >
-                          <CalendarIcon className="mr-2 h-4 w-4" />
-                          {formData.periodEndDate ? format(formData.periodEndDate, 'PPP') : 'End date'}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="single"
-                          selected={formData.periodEndDate}
-                          onSelect={(date) => updateFormData('periodEndDate', date)}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                </div>
-                {(formData.periodStartDate || formData.periodEndDate) && (
-                  <p className="text-xs text-gray-600 mt-2">
-                    {formData.periodStartDate && formData.periodEndDate 
-                      ? `Period: ${format(formData.periodStartDate, 'MMM dd, yyyy')} - ${format(formData.periodEndDate, 'MMM dd, yyyy')}`
-                      : 'Please select both start and end dates for the period'}
-                  </p>
-                )}
-              </div>
-            </div>
-          </motion.div>
-        );
-
-      case 2:
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                <CheckCircle className="w-8 h-8 text-white" />
-              </div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">Review & Submit</h2>
-              <p className="text-gray-600">
-                Review your claim details before submission
-              </p>
-            </div>
-
-            <div className="max-w-3xl mx-auto space-y-6">
-              {/* Activity Information */}
-              <Card className="border-2">
-                <CardHeader className="bg-gradient-to-br from-blue-50 to-indigo-50">
-                  <CardTitle className="flex items-center gap-2">
-                    <Receipt className="w-5 h-5 text-blue-600" />
-                    Activity Information
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="pt-6 space-y-4">
-                  <div className="grid grid-cols-2 gap-6">
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Activity Name</Label>
-                      <p className="font-semibold text-gray-900 mt-1">{formData.activityName}</p>
-                    </div>
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Activity Type</Label>
-                      <Badge variant="secondary" className="mt-1">{formData.activityType}</Badge>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Dealer Information */}
-              <Card className="border-2">
-                <CardHeader className="bg-gradient-to-br from-green-50 to-emerald-50">
-                  <CardTitle className="flex items-center gap-2">
-                    <Building className="w-5 h-5 text-green-600" />
-                    Dealer Information
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="pt-6 space-y-4">
-                  <div className="grid grid-cols-2 gap-6">
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Dealer Code</Label>
-                      <p className="font-semibold text-gray-900 mt-1 font-mono">{formData.dealerCode}</p>
-                    </div>
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Dealer Name</Label>
-                      <p className="font-semibold text-gray-900 mt-1">{formData.dealerName}</p>
-                    </div>
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Email</Label>
-                      <p className="text-gray-900 mt-1">{formData.dealerEmail}</p>
-                    </div>
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Phone</Label>
-                      <p className="text-gray-900 mt-1">{formData.dealerPhone}</p>
-                    </div>
-                    {formData.dealerAddress && (
-                      <div className="col-span-2">
-                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Address</Label>
-                        <p className="text-gray-900 mt-1">{formData.dealerAddress}</p>
-                      </div>
-                    )}
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Date & Location */}
-              <Card className="border-2">
-                <CardHeader className="bg-gradient-to-br from-purple-50 to-pink-50">
-                  <CardTitle className="flex items-center gap-2">
-                    <CalendarIcon className="w-5 h-5 text-purple-600" />
-                    Date & Location
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="pt-6 space-y-4">
-                  <div className="grid grid-cols-2 gap-6">
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Date</Label>
-                      <p className="font-semibold text-gray-900 mt-1">
-                        {formData.activityDate ? format(formData.activityDate, 'PPP') : 'N/A'}
-                      </p>
-                    </div>
-                    <div>
-                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Location</Label>
-                      <div className="flex items-center gap-2 mt-1">
-                        <MapPin className="w-4 h-4 text-gray-500" />
-                        <p className="font-semibold text-gray-900">{formData.location}</p>
-                      </div>
-                    </div>
-                    {formData.estimatedBudget && (
-                      <div className="col-span-2">
-                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Estimated Budget</Label>
-                        <p className="text-xl font-bold text-blue-900 mt-1">{formData.estimatedBudget}</p>
-                      </div>
-                    )}
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Request Details */}
-              <Card className="border-2">
-                <CardHeader className="bg-gradient-to-br from-orange-50 to-amber-50">
-                  <CardTitle className="flex items-center gap-2">
-                    <FileText className="w-5 h-5 text-orange-600" />
-                    Request Details
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="pt-6 space-y-4">
-                  <div>
-                    <Label className="text-xs text-gray-600 uppercase tracking-wider">Brief Requirement</Label>
-                    <div className="mt-2 p-4 bg-gray-50 rounded-lg border">
-                      <p className="text-gray-900 whitespace-pre-wrap">{formData.requestDescription}</p>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Period (if provided) */}
-              {(formData.periodStartDate || formData.periodEndDate) && (
-                <Card className="border-2">
-                  <CardHeader className="bg-gradient-to-br from-cyan-50 to-blue-50">
-                    <CardTitle className="flex items-center gap-2">
-                      <Clock className="w-5 h-5 text-cyan-600" />
-                      Period
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="pt-6 space-y-4">
-                    <div className="grid grid-cols-2 gap-6">
-                      <div>
-                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Start Date</Label>
-                        <p className="font-semibold text-gray-900 mt-1">
-                          {formData.periodStartDate ? format(formData.periodStartDate, 'PPP') : 'Not specified'}
-                        </p>
-                      </div>
-                      <div>
-                        <Label className="text-xs text-gray-600 uppercase tracking-wider">End Date</Label>
-                        <p className="font-semibold text-gray-900 mt-1">
-                          {formData.periodEndDate ? format(formData.periodEndDate, 'PPP') : 'Not specified'}
-                        </p>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              )}
-
-              {/* Confirmation Message */}
-              <div className="bg-blue-50 border-2 border-blue-200 rounded-lg p-6">
-                <div className="flex items-start gap-3">
-                  <Info className="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" />
-                  <div>
-                    <p className="font-semibold text-blue-900 mb-1">Ready to Submit</p>
-                    <p className="text-sm text-blue-800">
-                      Please review all the information above. Once submitted, your claim request will enter the approval workflow.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </motion.div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div className="w-full bg-gradient-to-br from-gray-50 to-gray-100 py-4 sm:py-6 lg:py-8 px-3 sm:px-4 lg:px-6 overflow-y-auto">
-      <div className="max-w-6xl mx-auto pb-8">
-        {/* Header */}
-        <div className="mb-6 sm:mb-8">
-          <Button
-            variant="ghost"
-            onClick={onBack}
-            className="mb-3 sm:mb-4 gap-2 text-sm sm:text-base"
-          >
-            <ArrowLeft className="w-3 h-3 sm:w-4 sm:h-4" />
-            <span className="hidden sm:inline">Back to Templates</span>
-            <span className="sm:hidden">Back</span>
-          </Button>
-          
-          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-0">
-            <div>
-              <Badge variant="secondary" className="mb-2 text-xs">Claim Management Template</Badge>
-              <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">New Claim Request</h1>
-              <p className="text-sm sm:text-base text-gray-600 mt-1">
-                Step {currentStep} of {totalSteps}: <span className="hidden sm:inline">{STEP_NAMES[currentStep - 1]}</span>
-              </p>
-            </div>
-          </div>
-
-          {/* Progress Bar */}
-          <div className="mt-4 sm:mt-6">
-            <Progress value={(currentStep / totalSteps) * 100} className="h-2" />
-            <div className="flex justify-between mt-2 px-1">
-              {STEP_NAMES.map((_name, index) => (
-                <span 
-                  key={index} 
-                  className={`text-xs sm:text-sm ${
-                    index + 1 <= currentStep ? 'text-blue-600 font-medium' : 'text-gray-400'
-                  }`}
-                >
-                  {index + 1}
-                </span>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Step Content */}
-        <Card className="mb-6 sm:mb-8">
-          <CardContent className="p-4 sm:p-6 lg:p-8">
-            <AnimatePresence mode="wait">
-              {renderStepContent()}
-            </AnimatePresence>
-          </CardContent>
-        </Card>
-
-        {/* Navigation */}
-        <div className="flex flex-col sm:flex-row justify-between gap-3 sm:gap-0 pb-4 sm:pb-0">
-          <Button
-            variant="outline"
-            onClick={prevStep}
-            disabled={currentStep === 1}
-            className="gap-2 w-full sm:w-auto order-2 sm:order-1"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Previous
-          </Button>
-
-          {currentStep < totalSteps ? (
-            <Button
-              onClick={nextStep}
-              disabled={!isStepValid()}
-              className="gap-2 w-full sm:w-auto order-1 sm:order-2"
-            >
-              Next
-              <ArrowRight className="w-4 h-4" />
-            </Button>
-          ) : (
-            <Button
-              onClick={handleSubmit}
-              disabled={!isStepValid() || isSubmitting}
-              className="gap-2 bg-green-600 hover:bg-green-700 w-full sm:w-auto order-1 sm:order-2 disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {isSubmitting ? (
-                <>
-                  <Clock className="w-4 h-4 animate-spin" />
-                  Submitting...
-                </>
-              ) : (
-                <>
-                  <Check className="w-4 h-4" />
-                  Submit Claim Request
-                </>
-              )}
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/workflow/ClaimManagementWizard/index.ts

@@ -1 +0,0 @@
-export { ClaimManagementWizard } from './ClaimManagementWizard';

src/components/workflow/CreateRequest/ApprovalWorkflowStep.tsx

@@ -7,7 +7,7 @@ import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
 import { Users, Settings, Shield, User, CheckCircle, Minus, Plus, Info, Clock } from 'lucide-react';
-import { FormData } from '@/hooks/useCreateRequestForm';
+import { FormData, SystemPolicy } from '@/hooks/useCreateRequestForm';
 import { useMultiUserSearch } from '@/hooks/useUserSearch';
 import { ensureUserExists } from '@/services/userApi';
 
@@ -15,6 +15,8 @@ interface ApprovalWorkflowStepProps {
   formData: FormData;
   updateFormData: (field: keyof FormData, value: any) => void;
   onValidationError: (error: { type: string; email: string; message: string }) => void;
+  systemPolicy: SystemPolicy;
+  onPolicyViolation: (violations: Array<{ type: string; message: string; currentValue?: number; maxValue?: number }>) => void;
 }
 
 /**
@@ -33,7 +35,9 @@ interface ApprovalWorkflowStepProps {
 export function ApprovalWorkflowStep({
   formData,
   updateFormData,
-  onValidationError
+  onValidationError,
+  systemPolicy,
+  onPolicyViolation
 }: ApprovalWorkflowStepProps) {
   const { userSearchResults, userSearchLoading, searchUsersForIndex, clearSearchForIndex } = useMultiUserSearch();
 
@@ -218,17 +222,29 @@ export function ApprovalWorkflowStep({
                   size="sm"
                   onClick={() => {
                     const currentCount = formData.approverCount || 1;
-                    const newCount = Math.min(10, currentCount + 1);
+                    const newCount = currentCount + 1;
+
+                    // Validate against system policy
+                    if (newCount > systemPolicy.maxApprovalLevels) {
+                      onPolicyViolation([{
+                        type: 'Maximum Approval Levels Exceeded',
+                        message: `Cannot add more than ${systemPolicy.maxApprovalLevels} approval levels. Please remove an approver level or contact your administrator.`,
+                        currentValue: newCount,
+                        maxValue: systemPolicy.maxApprovalLevels
+                      }]);
+                      return;
+                    }
+
                     updateFormData('approverCount', newCount);
                   }}
-                  disabled={(formData.approverCount || 1) >= 10}
+                  disabled={(formData.approverCount || 1) >= systemPolicy.maxApprovalLevels}
                   data-testid="approval-workflow-increase-count"
                 >
                   <Plus className="w-4 h-4" />
                 </Button>
               </div>
               <p className="text-sm text-gray-600 mt-2">
-                Maximum 10 approvers allowed. Each approver will review sequentially.
+                Maximum {systemPolicy.maxApprovalLevels} approver{systemPolicy.maxApprovalLevels !== 1 ? 's' : ''} allowed. Each approver will review sequentially.
               </p>
             </div>
           </CardContent>
@@ -281,14 +297,12 @@ export function ApprovalWorkflowStep({
                     <div className="w-px h-6 bg-gray-300"></div>
                   </div>
 
-                  <div className={`p-4 rounded-lg border-2 transition-all ${
-                    approver.email 
+                  <div className={`p-4 rounded-lg border-2 transition-all ${approver.email
                     ? 'border-green-200 bg-green-50'
                     : 'border-gray-200 bg-gray-50'
                     }`}>
                     <div className="flex items-center gap-3">
-                      <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
-                        approver.email 
+                      <div className={`w-10 h-10 rounded-full flex items-center justify-center ${approver.email
                         ? 'bg-green-600'
                         : 'bg-gray-400'
                         }`}>
@@ -320,7 +334,7 @@ export function ApprovalWorkflowStep({
                               <Input
                                 id={`approver-${level}`}
                                 type="email"
-                                placeholder="approver@royalenfield.com"
+                                placeholder={`approver@${import.meta.env.VITE_APP_DOMAIN}`}
                                 value={approver.email || ''}
                                 onChange={(e) => handleApproverEmailChange(index, e.target.value)}
                                 className="h-10 border-2 border-gray-300 focus:border-blue-500 mt-1 w-full"

src/components/workflow/CreateRequest/DocumentsStep.tsx

@@ -160,7 +160,7 @@ export function DocumentsStep({
               <Upload className="h-12 w-12 mx-auto mb-4 text-gray-400" />
               <h3 className="text-lg font-semibold text-gray-900 mb-2">Upload Files</h3>
               <p className="text-gray-600 mb-4">
-                Drag and drop files here, or click to browse
+                click to browse
               </p>
               <input
                 type="file"

src/components/workflow/CreateRequest/TemplateSelectionStep.tsx

@@ -1,15 +1,19 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
-import { Check, Clock, Users, Info, Flame, Target, TrendingUp } from 'lucide-react';
+import { Check, Clock, Users, Flame, Target, TrendingUp, FolderOpen, ArrowLeft, Info } from 'lucide-react';
 import { RequestTemplate } from '@/hooks/useCreateRequestForm';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
 
 interface TemplateSelectionStepProps {
   templates: RequestTemplate[];
   selectedTemplate: RequestTemplate | null;
   onSelectTemplate: (template: RequestTemplate) => void;
+  adminTemplates?: RequestTemplate[];
 }
 
 const getPriorityIcon = (priority: string) => {
@@ -21,21 +25,48 @@ const getPriorityIcon = (priority: string) => {
   }
 };
 
-/**
- * Component: TemplateSelectionStep
- * 
- * Purpose: Step 1 - Template selection for request creation
- * 
- * Features:
- * - Displays available templates
- * - Shows template details when selected
- * - Test IDs for testing
- */
 export function TemplateSelectionStep({
   templates,
   selectedTemplate,
-  onSelectTemplate
+  onSelectTemplate,
+  adminTemplates = []
 }: TemplateSelectionStepProps) {
+  const [viewMode, setViewMode] = useState<'main' | 'admin'>('main');
+
+  const navigate = useNavigate();
+
+  const handleTemplateClick = (template: RequestTemplate) => {
+    if (template.id === 'admin-templates-category') {
+      setViewMode('admin');
+    } else {
+      if (viewMode === 'admin') {
+        // If selecting an actual admin template, redirect to dedicated flow
+        navigate(`/create-admin-request/${template.id}`);
+      } else {
+        // Default behavior for standard templates
+        onSelectTemplate(template);
+      }
+    }
+  };
+
+  const displayTemplates = viewMode === 'main'
+    ? [
+      ...templates,
+      // {
+      //   id: 'admin-templates-category',
+      //   name: 'Admin Templates',
+      //   description: 'Browse standardized request workflows created by your organization administrators',
+      //   category: 'Organization',
+      //   icon: FolderOpen,
+      //   estimatedTime: 'Variable',
+      //   commonApprovers: [],
+      //   suggestedSLA: 0,
+      //   priority: 'medium',
+      //   fields: {}
+      // } as any
+    ]
+    : adminTemplates;
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
@@ -47,54 +78,83 @@ export function TemplateSelectionStep({
       {/* Header Section */}
       <div className="text-center mb-12 max-w-3xl" data-testid="template-selection-header">
         <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4" data-testid="template-selection-title">
-          Choose Your Request Type
+          {viewMode === 'main' ? 'Choose Your Request Type' : 'Organization Templates'}
         </h1>
         <p className="text-lg text-gray-600" data-testid="template-selection-description">
-          Start with a pre-built template for faster approvals, or create a custom request tailored to your needs.
+          {viewMode === 'main'
+            ? 'Start with a pre-built template for faster approvals, or create a custom request tailored to your needs.'
+            : 'Select a pre-configured workflow template defined by your organization.'}
         </p>
       </div>
 
+      {viewMode === 'admin' && (
+        <div className="w-full max-w-6xl mb-6 flex justify-start">
+          <Button variant="ghost" className="gap-2" onClick={() => setViewMode('main')}>
+            <ArrowLeft className="w-4 h-4" />
+            Back to All Types
+          </Button>
+        </div>
+      )}
+
       {/* Template Cards Grid */}
       <div
         className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"
         data-testid="template-selection-grid"
       >
-        {templates.map((template) => (
+        {displayTemplates.length === 0 && viewMode === 'admin' ? (
+          <div className="col-span-full text-center py-12 text-gray-500 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200">
+            <FolderOpen className="w-12 h-12 mx-auto mb-3 text-gray-300" />
+            <p>No admin templates available yet.</p>
+          </div>
+        ) : (
+          displayTemplates.map((template) => {
+            const isComingSoon = false;
+            const isDisabled = isComingSoon;
+            const isCategoryCard = template.id === 'admin-templates-category';
+            // const isCustomCard = template.id === 'custom';
+            const isSelected = selectedTemplate?.id === template.id;
+
+            return (
               <motion.div
                 key={template.id}
-            whileHover={{ scale: 1.03 }}
-            whileTap={{ scale: 0.98 }}
+                whileHover={!isDisabled ? { scale: 1.03 } : {}}
+                whileTap={!isDisabled ? { scale: 0.98 } : {}}
                 transition={{ type: "spring", stiffness: 300, damping: 20 }}
                 data-testid={`template-card-${template.id}`}
               >
                 <Card
-              className={`cursor-pointer h-full transition-all duration-300 border-2 ${
-                selectedTemplate?.id === template.id
-                  ? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200'
-                  : 'border-gray-200 hover:border-blue-300 hover:shadow-lg'
+                  className={`h-full transition-all duration-300 border-2 ${isDisabled
+                    ? 'border-gray-200 bg-gray-50/50 opacity-85 cursor-not-allowed'
+                    : isSelected
+                      ? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200 cursor-pointer'
+                      : isCategoryCard
+                        ? 'border-blue-200 bg-blue-50/30 hover:border-blue-400 hover:shadow-lg cursor-pointer'
+                        : 'border-gray-200 hover:border-blue-300 hover:shadow-lg cursor-pointer'
                     }`}
-              onClick={() => onSelectTemplate(template)}
+                  onClick={!isDisabled ? () => handleTemplateClick(template) : undefined}
                   data-testid={`template-card-${template.id}-clickable`}
                 >
                   <CardHeader className="space-y-4 pb-4">
                     <div className="flex items-start justify-between">
                       <div
-                    className={`w-14 h-14 rounded-xl flex items-center justify-center ${
-                      selectedTemplate?.id === template.id
+                        className={`w-14 h-14 rounded-xl flex items-center justify-center ${isSelected
+                          ? 'bg-blue-100'
+                          : isCategoryCard
                             ? 'bg-blue-100'
                             : 'bg-gray-100'
                           }`}
                         data-testid={`template-card-${template.id}-icon`}
                       >
                         <template.icon
-                      className={`w-7 h-7 ${
-                        selectedTemplate?.id === template.id
+                          className={`w-7 h-7 ${isSelected
+                            ? 'text-blue-600'
+                            : isCategoryCard
                               ? 'text-blue-600'
                               : 'text-gray-600'
                             }`}
                         />
                       </div>
-                  {selectedTemplate?.id === template.id && (
+                      {isSelected && (
                         <motion.div
                           initial={{ scale: 0 }}
                           animate={{ scale: 1 }}
@@ -108,9 +168,20 @@ export function TemplateSelectionStep({
                       )}
                     </div>
                     <div className="text-left">
-                  <CardTitle className="text-xl mb-2" data-testid={`template-card-${template.id}-name`}>
+                      <div className="flex items-start justify-between gap-2 mb-2">
+                        <CardTitle className="text-xl" data-testid={`template-card-${template.id}-name`}>
                           {template.name}
                         </CardTitle>
+                        {isComingSoon && (
+                          <Badge
+                            variant="outline"
+                            className="text-xs bg-yellow-100 text-yellow-700 border-yellow-300 font-semibold"
+                            data-testid={`template-card-${template.id}-coming-soon-badge`}
+                          >
+                            Coming Soon
+                          </Badge>
+                        )}
+                      </div>
                       <div className="flex items-center gap-2">
                         <Badge variant="secondary" className="text-xs" data-testid={`template-card-${template.id}-category`}>
                           {template.category}
@@ -126,6 +197,9 @@ export function TemplateSelectionStep({
                     >
                       {template.description}
                     </p>
+
+                    {!isCategoryCard && (
+                      <>
                         <Separator />
                         <div className="grid grid-cols-2 gap-3 text-xs text-gray-500">
                           <div className="flex items-center gap-1.5" data-testid={`template-card-${template.id}-estimated-time`}>
@@ -134,13 +208,24 @@ export function TemplateSelectionStep({
                           </div>
                           <div className="flex items-center gap-1.5" data-testid={`template-card-${template.id}-approvers-count`}>
                             <Users className="w-3.5 h-3.5" />
-                    <span>{template.commonApprovers.length} approvers</span>
+                            <span>{template.commonApprovers?.length || 0} approvers</span>
                           </div>
                         </div>
+                      </>
+                    )}
+                    {isCategoryCard && (
+                      <div className="pt-2">
+                        <p className="text-xs text-blue-600 font-medium flex items-center gap-1">
+                          Click to browse templates &rarr;
+                        </p>
+                      </div>
+                    )}
                   </CardContent>
                 </Card>
               </motion.div>
-        ))}
+            );
+          })
+        )}
       </div>
 
       {/* Template Details Card */}
@@ -165,7 +250,7 @@ export function TemplateSelectionStep({
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                   <div className="bg-white/60 p-3 rounded-lg" data-testid="template-details-sla">
                     <Label className="text-blue-900 font-semibold">Suggested SLA</Label>
-                    <p className="text-blue-700 mt-1">{selectedTemplate.suggestedSLA} days</p>
+                    <p className="text-blue-700 mt-1">{selectedTemplate.suggestedSLA} hours</p>
                   </div>
                   <div className="bg-white/60 p-3 rounded-lg" data-testid="template-details-priority">
                     <Label className="text-blue-900 font-semibold">Priority Level</Label>
@@ -180,9 +265,10 @@ export function TemplateSelectionStep({
                   </div>
                 </div>
                 <div className="bg-white/60 p-3 rounded-lg" data-testid="template-details-approvers">
-                  <Label className="text-blue-900 font-semibold">Common Approvers</Label>
+                  <Label className="text-blue-900 font-semibold">Approvers</Label>
                   <div className="flex flex-wrap gap-2 mt-2">
-                    {selectedTemplate.commonApprovers.map((approver, index) => (
+                    {selectedTemplate.commonApprovers?.length > 0 ? (
+                      selectedTemplate.commonApprovers.map((approver, index) => (
                         <Badge
                           key={`${selectedTemplate.id}-approver-${index}-${approver}`}
                           variant="outline"
@@ -191,7 +277,10 @@ export function TemplateSelectionStep({
                         >
                           {approver}
                         </Badge>
-                    ))}
+                      ))
+                    ) : (
+                      <span className="text-sm text-gray-500 italic">No specific approvers defined</span>
+                    )}
                   </div>
                 </div>
               </CardContent>

src/components/workflow/CreateRequest/WizardStepper.tsx

@@ -19,12 +19,15 @@ interface WizardStepperProps {
 export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStepperProps) {
   const progressPercentage = Math.round((currentStep / totalSteps) * 100);
 
+  // Use a narrower container for fewer steps to avoid excessive spacing
+  const containerMaxWidth = stepNames.length <= 3 ? 'max-w-xl' : 'max-w-6xl';
+
   return (
     <div
       className="bg-white border-b border-gray-200 px-3 sm:px-6 py-2 sm:py-3 flex-shrink-0"
       data-testid="wizard-stepper"
     >
-      <div className="max-w-6xl mx-auto">
+      <div className={`${containerMaxWidth} mx-auto`}>
         {/* Mobile: Current step indicator only */}
         <div className="block sm:hidden" data-testid="wizard-stepper-mobile">
           <div className="flex items-center justify-between mb-2">
@@ -65,15 +68,14 @@ export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStep
 
         {/* Desktop: Full step indicator */}
         <div className="hidden sm:block" data-testid="wizard-stepper-desktop">
-          <div className="flex items-center justify-between mb-2" data-testid="wizard-stepper-desktop-steps">
+          <div className="flex items-center justify-center gap-4 mb-2" data-testid="wizard-stepper-desktop-steps">
             {stepNames.map((_, index) => (
-              <div key={index} className="flex items-center" data-testid={`wizard-stepper-desktop-step-${index + 1}`}>
+              <div key={index} className="flex items-center flex-1 last:flex-none" data-testid={`wizard-stepper-desktop-step-${index + 1}`}>
                 <div
-                  className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold ${
-                    index + 1 < currentStep 
-                      ? 'bg-green-600 text-white' 
+                  className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold flex-shrink-0 ${index + 1 < currentStep
+                    ? 'bg-green-500 text-white'
                     : index + 1 === currentStep
-                      ? 'bg-blue-600 text-white' 
+                      ? 'bg-green-500 text-white ring-2 ring-green-500/30 ring-offset-1'
                       : 'bg-gray-200 text-gray-600'
                     }`}
                   data-testid={`wizard-stepper-desktop-step-${index + 1}-indicator`}
@@ -86,8 +88,7 @@ export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStep
                 </div>
                 {index < stepNames.length - 1 && (
                   <div
-                    className={`w-8 md:w-12 lg:w-16 h-1 mx-1 md:mx-2 ${
-                      index + 1 < currentStep ? 'bg-green-600' : 'bg-gray-200'
+                    className={`flex-1 h-0.5 mx-2 ${index + 1 < currentStep ? 'bg-green-500' : 'bg-gray-200'
                       }`}
                     data-testid={`wizard-stepper-desktop-step-${index + 1}-connector`}
                   />
@@ -96,14 +97,13 @@ export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStep
             ))}
           </div>
           <div
-            className="hidden lg:flex justify-between text-xs text-gray-600 mt-2"
+            className="hidden lg:flex justify-between text-xs text-gray-600 mt-2 px-1"
             data-testid="wizard-stepper-desktop-labels"
           >
             {stepNames.map((step, index) => (
               <span
                 key={index}
-                className={`${
-                  index + 1 === currentStep ? 'font-semibold text-blue-600' : ''
+                className={`${index + 1 === currentStep ? 'font-semibold text-green-600' : ''
                   }`}
                 data-testid={`wizard-stepper-desktop-label-${index + 1}`}
               >

src/components/workflow/DocumentUpload/DocumentCard.tsx

@@ -6,7 +6,7 @@ export interface DocumentData {
   documentId: string;
   name: string;
   fileType: string;
-  size: string;
+  size?: string;
   sizeBytes?: number;
   uploadedBy?: string;
   uploadedAt: string;
@@ -48,7 +48,9 @@ export function DocumentCard({
             {document.name}
           </p>
           <p className="text-xs text-gray-500" data-testid={`${testId}-metadata`}>
-            {document.size} • Uploaded by {document.uploadedBy} on {formatDateTime(document.uploadedAt)}
+            {document.size && <span>{document.size} • </span>}
+            {document.uploadedBy && <span>Uploaded by {document.uploadedBy} on </span>}
+            {formatDateTime(document.uploadedAt)}
           </p>
         </div>
       </div>

src/contexts/AuthContext.tsx

@@ -9,6 +9,7 @@ import { createContext, useContext, useEffect, useState, ReactNode, useRef } fro
 import { Auth0Provider, useAuth0 as useAuth0Hook } from '@auth0/auth0-react';
 import { TokenManager, isTokenExpired } from '../utils/tokenManager';
 import { exchangeCodeForTokens, refreshAccessToken, getCurrentUser, logout as logoutApi } from '../services/authApi';
+import { tanflowLogout } from '../services/tanflowAuth';
 
 interface User {
   userId?: string;
@@ -100,27 +101,37 @@ function BackendAuthProvider({ children }: { children: ReactNode }) {
 
     // PRIORITY 2: Check if URL has logout parameter (from redirect)
     const urlParams = new URLSearchParams(window.location.search);
-    if (urlParams.has('logout') || urlParams.has('okta_logged_out')) {
+    if (urlParams.has('logout') || urlParams.has('okta_logged_out') || urlParams.has('tanflow_logged_out')) {
+      console.log('🚪 Logout parameter detected in URL, clearing all tokens');
       TokenManager.clearAll();
+      // Clear auth provider flag and logout-related flags
+      sessionStorage.removeItem('auth_provider');
+      sessionStorage.removeItem('tanflow_auth_state');
+      sessionStorage.removeItem('__logout_in_progress__');
+      sessionStorage.removeItem('__force_logout__');
+      sessionStorage.removeItem('tanflow_logged_out');
       localStorage.clear();
-      sessionStorage.clear();
+      // Don't clear sessionStorage completely - we might need logout flags
       setIsAuthenticated(false);
       setUser(null);
       setIsLoading(false);
-      // Clean URL but preserve okta_logged_out flag if it exists (for prompt=login)
+      // Clean URL but preserve logout flags if they exist (for prompt=login)
       const cleanParams = new URLSearchParams();
       if (urlParams.has('okta_logged_out')) {
         cleanParams.set('okta_logged_out', 'true');
       }
+      if (urlParams.has('tanflow_logged_out')) {
+        cleanParams.set('tanflow_logged_out', 'true');
+      }
       const newUrl = cleanParams.toString() ? `/?${cleanParams.toString()}` : '/';
       window.history.replaceState({}, document.title, newUrl);
       return;
     }
 
     // PRIORITY 3: Skip auth check if on callback page - let callback handler process first
-    // This is critical for production mode where we need to exchange code for tokens
+    // This is essential for production mode where we need to exchange code for tokens
     // before we can verify session with server
-    if (window.location.pathname === '/login/callback') {
+    if (window.location.pathname === '/login/callback' || window.location.pathname === '/login/tanflow/callback') {
       // Don't check auth status here - let the callback handler do its job
       // The callback handler will set isAuthenticated after successful token exchange
       return;
@@ -138,14 +149,14 @@ function BackendAuthProvider({ children }: { children: ReactNode }) {
     // In production: Always verify with server (cookies are sent automatically)
     // In development: Check local auth data first
     if (isProductionMode) {
-      // Production: Verify session with server via httpOnly cookie
+      // Prod: Verify session with server via httpOnly cookie
       if (!isLoggingOut) {
         checkAuthStatus();
       } else {
         setIsLoading(false);
       }
     } else {
-      // Development: If no auth data exists, user is not authenticated
+      // Dev: If no auth data exists, user is not authenticated
       if (!hasAuthData) {
         setIsAuthenticated(false);
         setUser(null);
@@ -208,24 +219,57 @@ function BackendAuthProvider({ children }: { children: ReactNode }) {
     }
 
     const handleCallback = async () => {
+      const urlParams = new URLSearchParams(window.location.search);
+
+      // Check if this is a logout redirect (from Tanflow post-logout redirect)
+      // If it has logout parameters but no code, it's a logout redirect, not a login callback
+      if ((urlParams.has('logout') || urlParams.has('tanflow_logged_out') || urlParams.has('okta_logged_out')) && !urlParams.get('code')) {
+        // This is a logout redirect, not a login callback
+        // Redirect to home page - the mount useEffect will handle logout cleanup
+        console.log('🚪 Logout redirect detected in callback, redirecting to home');
+        // Extract the logout flags from current URL
+        const logoutFlags = new URLSearchParams();
+        if (urlParams.has('tanflow_logged_out')) logoutFlags.set('tanflow_logged_out', 'true');
+        if (urlParams.has('okta_logged_out')) logoutFlags.set('okta_logged_out', 'true');
+        if (urlParams.has('logout')) logoutFlags.set('logout', urlParams.get('logout') || Date.now().toString());
+        const redirectUrl = logoutFlags.toString() ? `/?${logoutFlags.toString()}` : '/?logout=' + Date.now();
+        window.location.replace(redirectUrl);
+        return;
+      }
+
       // Mark as processed immediately to prevent duplicate calls
       callbackProcessedRef.current = true;
 
-      const urlParams = new URLSearchParams(window.location.search);
       const code = urlParams.get('code');
       const errorParam = urlParams.get('error');
 
       // Clean URL immediately to prevent re-running on re-renders
       window.history.replaceState({}, document.title, '/login/callback');
 
+      // Detect provider from sessionStorage
+      const authProvider = sessionStorage.getItem('auth_provider');
+
+      // If Tanflow provider, handle it separately (will be handled by TanflowCallback component)
+      if (authProvider === 'tanflow') {
+        // Clear the provider flag and let TanflowCallback handle it
+        // Reset ref so TanflowCallback can process
+        callbackProcessedRef.current = false;
+        return;
+      }
+
+      // Handle OKTA callback (default)
       if (errorParam) {
         setError(new Error(`Authentication error: ${errorParam}`));
         setIsLoading(false);
+        // Clear provider flag
+        sessionStorage.removeItem('auth_provider');
         return;
       }
 
       if (!code) {
         setIsLoading(false);
+        // Clear provider flag
+        sessionStorage.removeItem('auth_provider');
         return;
       }
 
@@ -245,6 +289,9 @@ function BackendAuthProvider({ children }: { children: ReactNode }) {
         setIsAuthenticated(true);
         setError(null);
 
+        // Clear provider flag after successful authentication
+        sessionStorage.removeItem('auth_provider');
+
         // Clean URL after success
         window.history.replaceState({}, document.title, '/');
       } catch (err: any) {
@@ -252,6 +299,8 @@ function BackendAuthProvider({ children }: { children: ReactNode }) {
         setError(err);
         setIsAuthenticated(false);
         setUser(null);
+        // Clear provider flag on error
+        sessionStorage.removeItem('auth_provider');
         // Reset ref on error so user can retry if needed
         callbackProcessedRef.current = false;
       } finally {
@@ -274,7 +323,7 @@ function BackendAuthProvider({ children }: { children: ReactNode }) {
     try {
       setIsLoading(true);
 
-      // PRODUCTION MODE: Verify session via httpOnly cookie
+      // Prod MODE: Verify session via httpOnly cookie
       // The cookie is sent automatically with the request (withCredentials: true)
       if (isProductionMode) {
         const storedUser = TokenManager.getUserData();
@@ -320,7 +369,7 @@ function BackendAuthProvider({ children }: { children: ReactNode }) {
         return;
       }
 
-      // DEVELOPMENT MODE: Check local token
+      // Dev MODE: Check local token
       const token = TokenManager.getAccessToken();
       const storedUser = TokenManager.getUserData();
 
@@ -405,16 +454,19 @@ function BackendAuthProvider({ children }: { children: ReactNode }) {
     try {
       setError(null);
       // Redirect to Okta login
-      const oktaDomain = import.meta.env.VITE_OKTA_DOMAIN || 'https://dev-830839.oktapreview.com';
+      const oktaDomain = import.meta.env.VITE_OKTA_DOMAIN || '{{IDP_DOMAIN}}';
       const clientId = import.meta.env.VITE_OKTA_CLIENT_ID || '0oa2jgzvrpdwx2iqd0h8';
       const redirectUri = `${window.location.origin}/login/callback`;
       const responseType = 'code';
       const scope = 'openid profile email';
       const state = Math.random().toString(36).substring(7);
 
+      // Store provider type to identify OKTA callback
+      sessionStorage.setItem('auth_provider', 'okta');
+
       // Check if we're coming from a logout - if so, add prompt=login to force re-authentication
       const urlParams = new URLSearchParams(window.location.search);
-      const isAfterLogout = urlParams.has('logout') || urlParams.has('okta_logged_out');
+      const isAfterLogout = urlParams.has('logout') || urlParams.has('okta_logged_out') || urlParams.has('tanflow_logged_out');
 
       let authUrl = `${oktaDomain}/oauth2/default/v1/authorize?` +
         `client_id=${clientId}&` +
@@ -438,10 +490,15 @@ function BackendAuthProvider({ children }: { children: ReactNode }) {
 
   const logout = async () => {
     try {
-      // CRITICAL: Get id_token from TokenManager before clearing anything
-      // Okta logout endpoint works better with id_token_hint to properly end the session
-      // Note: Currently not used but kept for future Okta integration
-      void TokenManager.getIdToken();
+      //: Get id_token from TokenManager before clearing anything
+      // Needed for both Okta and Tanflow logout endpoints
+      const idToken = TokenManager.getIdToken();
+
+      // Detect which provider was used for login (check sessionStorage or user data)
+      // If auth_provider is set, use it; otherwise check if we have Tanflow id_token pattern
+      const authProvider = sessionStorage.getItem('auth_provider') ||
+        (idToken && idToken.includes('tanflow') ? 'tanflow' : null) ||
+        'okta'; // Default to OKTA if unknown
 
       // Set logout flag to prevent auto-authentication after redirect
       // This must be set BEFORE clearing storage so it survives
@@ -459,29 +516,58 @@ function BackendAuthProvider({ children }: { children: ReactNode }) {
       // IMPORTANT: This MUST be called before clearing local storage to clear httpOnly cookies
       try {
         await logoutApi();
+        console.log('🚪 Backend logout API called successfully');
       } catch (err) {
         console.error('🚪 Logout API error:', err);
         console.warn('🚪 Backend logout failed - httpOnly cookies may not be cleared');
         // Continue with logout even if API call fails
       }
 
-      // Clear all authentication data EXCEPT the logout flags and id_token (we need it for Okta logout)
-      
-      // Clear tokens but preserve logout flags
+      // Preserve logout flags, id_token, and auth_provider BEFORE clearing tokens
       const logoutInProgress = sessionStorage.getItem('__logout_in_progress__');
       const forceLogout = sessionStorage.getItem('__force_logout__');
+      const storedAuthProvider = sessionStorage.getItem('auth_provider');
 
-      // Use TokenManager.clearAll() but then restore logout flags
+      // Clear all tokens EXCEPT id_token (we need it for provider logout)
+      // Note: We'll clear id_token after provider logout
+      // Clear tokens (but we'll restore id_token if needed)
       TokenManager.clearAll();
 
-      // Restore logout flags immediately after clearAll
+      // Restore logout flags and id_token immediately after clearAll
       if (logoutInProgress) sessionStorage.setItem('__logout_in_progress__', logoutInProgress);
       if (forceLogout) sessionStorage.setItem('__force_logout__', forceLogout);
+      if (idToken) {
+        TokenManager.setIdToken(idToken); // Restore id_token for provider logout
+      }
+      if (storedAuthProvider) {
+        sessionStorage.setItem('auth_provider', storedAuthProvider); // Restore for logout
+      }
 
       // Small delay to ensure sessionStorage is written before redirect
       await new Promise(resolve => setTimeout(resolve, 100));
 
-      // Redirect directly to login page with flags
+      // Handle provider-specific logout
+      if (authProvider === 'tanflow' && idToken) {
+        console.log('🚪 Initiating Tanflow logout...');
+        // Tanflow logout - redirect to Tanflow logout endpoint
+        // This will clear Tanflow session and redirect back to our app
+        try {
+          tanflowLogout(idToken);
+          // tanflowLogout will redirect, so we don't need to do anything else here
+          return;
+        } catch (tanflowLogoutError) {
+          console.error('🚪 Tanflow logout error:', tanflowLogoutError);
+          // Fall through to default logout flow
+        }
+      }
+
+      // OKTA logout or fallback: Clear auth_provider and redirect to login page with flags
+      console.log('🚪 Using OKTA logout flow or fallback');
+      sessionStorage.removeItem('auth_provider');
+      // Clear id_token now since we're not using provider logout
+      if (idToken) {
+        TokenManager.clearAll(); // Clear id_token too
+      }
       // The okta_logged_out flag will trigger prompt=login in the login() function
       // This forces re-authentication even if Okta session still exists
       const loginUrl = `${window.location.origin}/?okta_logged_out=true&logout=${Date.now()}`;
@@ -523,7 +609,7 @@ function BackendAuthProvider({ children }: { children: ReactNode }) {
       }
     }
 
-    // Development mode: tokens in localStorage
+    // Dev mode: tokens in localStorage
     const token = TokenManager.getAccessToken();
     if (token && !isTokenExpired(token)) {
       return token;
@@ -586,7 +672,7 @@ function BackendAuthProvider({ children }: { children: ReactNode }) {
 export function _Auth0AuthProvider({ children }: { children: ReactNode }) {
   return (
     <Auth0Provider
-      domain="https://dev-830839.oktapreview.com/oauth2/default/v1"
+      domain="{{IDP_DOMAIN}}/oauth2/default/v1"
       clientId="0oa2j8slwj5S4bG5k0h8"
       authorizationParams={{
         redirect_uri: window.location.origin + '/login/callback',

src/custom/components/ClosedRequestsFilters.tsx

@@ -0,0 +1,172 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Filter, Search, SortAsc, SortDesc, Flame, Target, CheckCircle, XCircle, X } from 'lucide-react';
+
+interface ClosedRequestsFiltersProps {
+  searchTerm: string;
+  priorityFilter: string;
+  statusFilter: string;
+  templateTypeFilter: string;
+  sortBy: 'created' | 'due' | 'priority';
+  sortOrder: 'asc' | 'desc';
+  activeFiltersCount: number;
+  onSearchChange: (value: string) => void;
+  onPriorityChange: (value: string) => void;
+  onStatusChange: (value: string) => void;
+  onTemplateTypeChange: (value: string) => void;
+  onSortByChange: (value: 'created' | 'due' | 'priority') => void;
+  onSortOrderChange: () => void;
+  onClearFilters: () => void;
+}
+
+/**
+ * Standard Closed Requests Filters Component
+ * 
+ * Used for regular users (non-dealers).
+ * Includes: Search, Priority, Status (Closure Type), Template Type, and Sort filters.
+ */
+export function StandardClosedRequestsFilters({
+  searchTerm,
+  priorityFilter,
+  statusFilter,
+  templateTypeFilter,
+  sortBy,
+  sortOrder,
+  activeFiltersCount,
+  onSearchChange,
+  onPriorityChange,
+  onStatusChange,
+  onTemplateTypeChange,
+  onSortByChange,
+  onSortOrderChange,
+  onClearFilters,
+}: ClosedRequestsFiltersProps) {
+  return (
+    <Card className="shadow-lg border-0" data-testid="closed-requests-filters">
+      <CardHeader className="pb-3 sm:pb-4 px-3 sm:px-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 sm:gap-3">
+            <div className="p-1.5 sm:p-2 bg-blue-100 rounded-lg">
+              <Filter className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
+            </div>
+            <div>
+              <CardTitle className="text-base sm:text-lg">Filters & Search</CardTitle>
+              <CardDescription className="text-xs sm:text-sm">
+                {activeFiltersCount > 0 && (
+                  <span className="text-blue-600 font-medium">
+                    {activeFiltersCount} filter{activeFiltersCount > 1 ? 's' : ''} active
+                  </span>
+                )}
+              </CardDescription>
+            </div>
+          </div>
+          {activeFiltersCount > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClearFilters}
+              className="text-red-600 hover:bg-red-50 gap-1 h-8 sm:h-9 px-2 sm:px-3"
+              data-testid="closed-requests-clear-filters"
+            >
+              <X className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
+              <span className="text-xs sm:text-sm">Clear</span>
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
+            <Input
+              placeholder="Search requests, IDs..."
+              value={searchTerm}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="pl-9 sm:pl-10 h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white transition-colors"
+              data-testid="closed-requests-search"
+            />
+          </div>
+
+          <Select value={priorityFilter} onValueChange={onPriorityChange}>
+            <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-priority-filter">
+              <SelectValue placeholder="All Priorities" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Priorities</SelectItem>
+              <SelectItem value="express">
+                <div className="flex items-center gap-2">
+                  <Flame className="w-4 h-4 text-orange-600" />
+                  <span>Express</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="standard">
+                <div className="flex items-center gap-2">
+                  <Target className="w-4 h-4 text-blue-600" />
+                  <span>Standard</span>
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Select value={statusFilter} onValueChange={onStatusChange}>
+            <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-status-filter">
+              <SelectValue placeholder="Closure Type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Closures</SelectItem>
+              <SelectItem value="approved">
+                <div className="flex items-center gap-2">
+                  <CheckCircle className="w-4 h-4 text-green-600" />
+                  <span>Closed After Approval</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="rejected">
+                <div className="flex items-center gap-2">
+                  <XCircle className="w-4 h-4 text-red-600" />
+                  <span>Closed After Rejection</span>
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
+            <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-template-type-filter">
+              <SelectValue placeholder="All Templates" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Templates</SelectItem>
+              <SelectItem value="CUSTOM">Non-Templatized</SelectItem>
+              <SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <div className="flex gap-2">
+            <Select value={sortBy} onValueChange={(value) => onSortByChange(value as 'created' | 'due' | 'priority')}>
+              <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-sort-by">
+                <SelectValue placeholder="Sort by" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="due">Due Date</SelectItem>
+                <SelectItem value="created">Date Created</SelectItem>
+                <SelectItem value="priority">Priority</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onSortOrderChange}
+              className="px-2 sm:px-3 h-9 sm:h-10 md:h-11"
+              data-testid="closed-requests-sort-order"
+            >
+              {sortOrder === 'asc' ? <SortAsc className="w-3.5 h-3.5 sm:w-4 sm:h-4" /> : <SortDesc className="w-3.5 h-3.5 sm:w-4 sm:h-4" />}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

src/custom/components/RequestsFilters.tsx

@@ -0,0 +1,161 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Filter, Search, SortAsc, SortDesc, X, Flame, Target } from 'lucide-react';
+
+interface RequestsFiltersProps {
+  searchTerm: string;
+  statusFilter: string;
+  priorityFilter: string;
+  templateTypeFilter: string;
+  sortBy: 'created' | 'due' | 'priority' | 'sla';
+  sortOrder: 'asc' | 'desc';
+  onSearchChange: (value: string) => void;
+  onStatusFilterChange: (value: string) => void;
+  onPriorityFilterChange: (value: string) => void;
+  onTemplateTypeFilterChange: (value: string) => void;
+  onSortByChange: (value: 'created' | 'due' | 'priority' | 'sla') => void;
+  onSortOrderChange: (value: 'asc' | 'desc') => void;
+  onClearFilters: () => void;
+  activeFiltersCount: number;
+}
+
+/**
+ * Standard Requests Filters Component
+ * 
+ * Used for regular users (non-dealers).
+ * Includes: Search, Status, Priority, Template Type, and Sort filters.
+ */
+export function StandardRequestsFilters({
+  searchTerm,
+  statusFilter,
+  priorityFilter,
+  templateTypeFilter,
+  sortBy,
+  sortOrder,
+  onSearchChange,
+  onStatusFilterChange,
+  onPriorityFilterChange,
+  onTemplateTypeFilterChange,
+  onSortByChange,
+  onSortOrderChange,
+  onClearFilters,
+  activeFiltersCount,
+}: RequestsFiltersProps) {
+  return (
+    <Card className="shadow-lg border-0">
+      <CardHeader className="pb-3 sm:pb-4 px-3 sm:px-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 sm:gap-3">
+            <div className="p-1.5 sm:p-2 bg-blue-100 rounded-lg">
+              <Filter className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
+            </div>
+            <div>
+              <CardTitle className="text-base sm:text-lg">Filters & Search</CardTitle>
+              <CardDescription className="text-xs sm:text-sm">
+                {activeFiltersCount > 0 && (
+                  <span className="text-blue-600 font-medium">
+                    {activeFiltersCount} filter{activeFiltersCount > 1 ? 's' : ''} active
+                  </span>
+                )}
+              </CardDescription>
+            </div>
+          </div>
+          {activeFiltersCount > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClearFilters}
+              className="text-red-600 hover:bg-red-50 gap-1 h-8 sm:h-9 px-2 sm:px-3"
+            >
+              <X className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
+              <span className="text-xs sm:text-sm">Clear</span>
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
+        {/* Standard filters - Search, Status, Priority, Template Type, and Sort */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
+            <Input
+              placeholder="Search requests, IDs..."
+              value={searchTerm}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="pl-9 sm:pl-10 h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200 transition-colors"
+            />
+          </div>
+
+          <Select value={priorityFilter} onValueChange={onPriorityFilterChange}>
+            <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
+              <SelectValue placeholder="All Priorities" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Priorities</SelectItem>
+              <SelectItem value="express">
+                <div className="flex items-center gap-2">
+                  <Flame className="w-4 h-4 text-orange-600" />
+                  <span>Express</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="standard">
+                <div className="flex items-center gap-2">
+                  <Target className="w-4 h-4 text-blue-600" />
+                  <span>Standard</span>
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Select value={statusFilter} onValueChange={onStatusFilterChange}>
+            <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
+              <SelectValue placeholder="All Statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Statuses</SelectItem>
+              <SelectItem value="pending">Pending (In Approval)</SelectItem>
+              <SelectItem value="approved">Approved (Needs Closure)</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Select value={templateTypeFilter} onValueChange={onTemplateTypeFilterChange}>
+            <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
+              <SelectValue placeholder="All Templates" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Templates</SelectItem>
+              <SelectItem value="CUSTOM">Non-Templatized</SelectItem>
+              <SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <div className="flex gap-2">
+            <Select value={sortBy} onValueChange={(value: any) => onSortByChange(value)}>
+              <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
+                <SelectValue placeholder="Sort by" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="due">Due Date</SelectItem>
+                <SelectItem value="created">Date Created</SelectItem>
+                <SelectItem value="priority">Priority</SelectItem>
+                <SelectItem value="sla">SLA Progress</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onSortOrderChange(sortOrder === 'asc' ? 'desc' : 'asc')}
+              className="px-2 sm:px-3 h-9 sm:h-10 md:h-11"
+            >
+              {sortOrder === 'asc' ? <SortAsc className="w-3.5 h-3.5 sm:w-4 sm:h-4" /> : <SortDesc className="w-3.5 h-3.5 sm:w-4 sm:h-4" />}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

src/custom/components/UserAllRequestsFilters.tsx

@@ -0,0 +1,457 @@
+/**
+ * Standard User All Requests Filters Component
+ * 
+ * Full filters for regular users (non-dealers).
+ * Includes: Search, Status, Priority, Template Type, Department, SLA Compliance,
+ * Initiator, Approver, and Date Range filters.
+ */
+
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { X, Search, Filter, RefreshCw, Calendar as CalendarIcon } from 'lucide-react';
+import { format } from 'date-fns';
+import type { DateRange } from '@/services/dashboard.service';
+import { CustomDatePicker } from '@/components/ui/date-picker';
+
+interface StandardUserAllRequestsFiltersProps {
+  // Filters
+  searchTerm: string;
+  statusFilter: string;
+  priorityFilter: string;
+  templateTypeFilter: string;
+  departmentFilter: string;
+  slaComplianceFilter: string;
+  initiatorFilter: string;
+  approverFilter: string;
+  approverFilterType: 'current' | 'any';
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  showCustomDatePicker: boolean;
+
+  // Departments
+  departments: string[];
+  loadingDepartments: boolean;
+
+  // State for user search
+  initiatorSearch: {
+    selectedUser: { userId: string; email: string; displayName?: string } | null;
+    searchQuery: string;
+    searchResults: Array<{ userId: string; email: string; displayName?: string }>;
+    showResults: boolean;
+    handleSearch: (query: string) => void;
+    handleSelect: (user: { userId: string; email: string; displayName?: string }) => void;
+    handleClear: () => void;
+    setShowResults: (show: boolean) => void;
+  };
+
+  approverSearch: {
+    selectedUser: { userId: string; email: string; displayName?: string } | null;
+    searchQuery: string;
+    searchResults: Array<{ userId: string; email: string; displayName?: string }>;
+    showResults: boolean;
+    handleSearch: (query: string) => void;
+    handleSelect: (user: { userId: string; email: string; displayName?: string }) => void;
+    handleClear: () => void;
+    setShowResults: (show: boolean) => void;
+  };
+
+  // Actions
+  onSearchChange: (value: string) => void;
+  onStatusChange: (value: string) => void;
+  onPriorityChange: (value: string) => void;
+  onTemplateTypeChange: (value: string) => void;
+  onDepartmentChange: (value: string) => void;
+  onSlaComplianceChange: (value: string) => void;
+  onInitiatorChange?: (value: string) => void;
+  onApproverChange?: (value: string) => void;
+  onApproverTypeChange?: (value: 'current' | 'any') => void;
+  onDateRangeChange: (value: DateRange) => void;
+  onCustomStartDateChange?: (date: Date | undefined) => void;
+  onCustomEndDateChange?: (date: Date | undefined) => void;
+  onShowCustomDatePickerChange?: (show: boolean) => void;
+  onApplyCustomDate?: () => void;
+  onClearFilters: () => void;
+
+  // Computed
+  hasActiveFilters: boolean;
+}
+
+export function StandardUserAllRequestsFilters({
+  searchTerm,
+  statusFilter,
+  priorityFilter,
+  templateTypeFilter,
+  departmentFilter,
+  slaComplianceFilter,
+  initiatorFilter: _initiatorFilter,
+  approverFilter,
+  approverFilterType,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  showCustomDatePicker,
+  departments,
+  loadingDepartments,
+  initiatorSearch,
+  approverSearch,
+  onSearchChange,
+  onStatusChange,
+  onPriorityChange,
+  onTemplateTypeChange,
+  onDepartmentChange,
+  onSlaComplianceChange,
+  onInitiatorChange: _onInitiatorChange,
+  onApproverChange: _onApproverChange,
+  onApproverTypeChange,
+  onDateRangeChange,
+  onCustomStartDateChange,
+  onCustomEndDateChange,
+  onShowCustomDatePickerChange,
+  onApplyCustomDate,
+  onClearFilters,
+  hasActiveFilters,
+}: StandardUserAllRequestsFiltersProps) {
+  return (
+    <Card className="border-gray-200 shadow-md" data-testid="user-all-requests-filters">
+      <CardContent className="p-4 sm:p-6">
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Filter className="w-5 h-5 text-muted-foreground" />
+              <h3 className="font-semibold text-gray-900">Advanced Filters</h3>
+              {hasActiveFilters && (
+                <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
+                  Active
+                </Badge>
+              )}
+            </div>
+            {hasActiveFilters && (
+              <Button variant="ghost" size="sm" onClick={onClearFilters} className="gap-2">
+                <RefreshCw className="w-4 h-4" />
+                Clear All
+              </Button>
+            )}
+          </div>
+
+          <Separator />
+
+          {/* Primary Filters */}
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
+            <div className="relative md:col-span-3 lg:col-span-1">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <Input
+                placeholder="Search requests..."
+                value={searchTerm}
+                onChange={(e) => onSearchChange(e.target.value)}
+                className="pl-10 h-10"
+                data-testid="search-input"
+              />
+            </div>
+
+            <Select value={statusFilter} onValueChange={onStatusChange}>
+              <SelectTrigger className="h-10" data-testid="status-filter">
+                <SelectValue placeholder="All Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Status</SelectItem>
+                <SelectItem value="pending">Pending</SelectItem>
+                <SelectItem value="paused">Paused</SelectItem>
+                <SelectItem value="approved">Approved</SelectItem>
+                <SelectItem value="rejected">Rejected</SelectItem>
+                <SelectItem value="closed">Closed</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select value={priorityFilter} onValueChange={onPriorityChange}>
+              <SelectTrigger className="h-10" data-testid="priority-filter">
+                <SelectValue placeholder="All Priority" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Priority</SelectItem>
+                <SelectItem value="express">Express</SelectItem>
+                <SelectItem value="standard">Standard</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
+              <SelectTrigger className="h-10" data-testid="template-type-filter">
+                <SelectValue placeholder="All Templates" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Templates</SelectItem>
+                <SelectItem value="CUSTOM">Custom</SelectItem>
+                <SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select
+              value={departmentFilter}
+              onValueChange={onDepartmentChange}
+              disabled={loadingDepartments || departments.length === 0}
+            >
+              <SelectTrigger className="h-10" data-testid="department-filter">
+                <SelectValue placeholder={loadingDepartments ? "Loading..." : "All Departments"} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Departments</SelectItem>
+                {departments.map((dept) => (
+                  <SelectItem key={dept} value={dept}>{dept}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Select value={slaComplianceFilter} onValueChange={onSlaComplianceChange}>
+              <SelectTrigger className="h-10" data-testid="sla-compliance-filter">
+                <SelectValue placeholder="All SLA Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All SLA Status</SelectItem>
+                <SelectItem value="compliant">Compliant</SelectItem>
+                <SelectItem value="on-track">On Track</SelectItem>
+                <SelectItem value="approaching">Approaching</SelectItem>
+                <SelectItem value="critical">Critical</SelectItem>
+                <SelectItem value="breached">Breached</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* User Filters - Initiator and Approver */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
+            {/* Initiator Filter */}
+            <div className="flex flex-col">
+              <Label className="text-sm font-medium text-gray-700 mb-2">Initiator</Label>
+              <div className="relative">
+                {initiatorSearch.selectedUser ? (
+                  <div className="flex items-center gap-2 h-10 px-3 bg-white border border-gray-300 rounded-md">
+                    <span className="flex-1 text-sm text-gray-900 truncate">
+                      {initiatorSearch.selectedUser.displayName || initiatorSearch.selectedUser.email}
+                    </span>
+                    <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={initiatorSearch.handleClear}>
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ) : (
+                  <>
+                    <Input
+                      placeholder="Search initiator..."
+                      value={initiatorSearch.searchQuery}
+                      onChange={(e) => initiatorSearch.handleSearch(e.target.value)}
+                      onFocus={() => {
+                        if (initiatorSearch.searchResults.length > 0) {
+                          initiatorSearch.setShowResults(true);
+                        }
+                      }}
+                      onBlur={() => setTimeout(() => initiatorSearch.setShowResults(false), 200)}
+                      className="h-10"
+                      data-testid="initiator-search-input"
+                    />
+                    {initiatorSearch.showResults && initiatorSearch.searchResults.length > 0 && (
+                      <div className="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
+                        {initiatorSearch.searchResults.map((user) => (
+                          <button
+                            key={user.userId}
+                            type="button"
+                            onClick={() => initiatorSearch.handleSelect(user)}
+                            className="w-full px-4 py-2 text-left hover:bg-gray-50"
+                          >
+                            <div className="flex flex-col">
+                              <span className="text-sm font-medium text-gray-900">
+                                {user.displayName || user.email}
+                              </span>
+                              {user.displayName && (
+                                <span className="text-xs text-gray-500">{user.email}</span>
+                              )}
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+
+            {/* Approver Filter */}
+            <div className="flex flex-col">
+              <div className="flex items-center justify-between mb-2">
+                <Label className="text-sm font-medium text-gray-700">Approver</Label>
+                {approverFilter !== 'all' && onApproverTypeChange && (
+                  <Select
+                    value={approverFilterType}
+                    onValueChange={(value: 'current' | 'any') => onApproverTypeChange(value)}
+                  >
+                    <SelectTrigger className="h-7 w-32 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="current">Current Only</SelectItem>
+                      <SelectItem value="any">Any Approver</SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              </div>
+              <div className="relative">
+                {approverSearch.selectedUser ? (
+                  <div className="flex items-center gap-2 h-10 px-3 bg-white border border-gray-300 rounded-md">
+                    <span className="flex-1 text-sm text-gray-900 truncate">
+                      {approverSearch.selectedUser.displayName || approverSearch.selectedUser.email}
+                    </span>
+                    <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={approverSearch.handleClear}>
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ) : (
+                  <>
+                    <Input
+                      placeholder="Search approver..."
+                      value={approverSearch.searchQuery}
+                      onChange={(e) => approverSearch.handleSearch(e.target.value)}
+                      onFocus={() => {
+                        if (approverSearch.searchResults.length > 0) {
+                          approverSearch.setShowResults(true);
+                        }
+                      }}
+                      onBlur={() => setTimeout(() => approverSearch.setShowResults(false), 200)}
+                      className="h-10"
+                      data-testid="approver-search-input"
+                    />
+                    {approverSearch.showResults && approverSearch.searchResults.length > 0 && (
+                      <div className="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
+                        {approverSearch.searchResults.map((user) => (
+                          <button
+                            key={user.userId}
+                            type="button"
+                            onClick={() => approverSearch.handleSelect(user)}
+                            className="w-full px-4 py-2 text-left hover:bg-gray-50"
+                          >
+                            <div className="flex flex-col">
+                              <span className="text-sm font-medium text-gray-900">
+                                {user.displayName || user.email}
+                              </span>
+                              {user.displayName && (
+                                <span className="text-xs text-gray-500">{user.email}</span>
+                              )}
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Date Range Filter */}
+          <div className="flex items-center gap-3 flex-wrap">
+            <CalendarIcon className="w-4 h-4 text-muted-foreground" />
+            <Select value={dateRange} onValueChange={(value) => onDateRangeChange(value as DateRange)}>
+              <SelectTrigger className="w-[160px] h-10">
+                <SelectValue placeholder="Date Range" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Time</SelectItem>
+                <SelectItem value="today">Today</SelectItem>
+                <SelectItem value="week">This Week</SelectItem>
+                <SelectItem value="month">This Month</SelectItem>
+                <SelectItem value="last7days">Last 7 Days</SelectItem>
+                <SelectItem value="last30days">Last 30 Days</SelectItem>
+                <SelectItem value="custom">Custom Range</SelectItem>
+              </SelectContent>
+            </Select>
+
+            {dateRange === 'custom' && (
+              <Popover open={showCustomDatePicker} onOpenChange={onShowCustomDatePickerChange}>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" size="sm" className="gap-2">
+                    <CalendarIcon className="w-4 h-4" />
+                    {customStartDate && customEndDate
+                      ? `${format(customStartDate, 'MMM d, yyyy')} - ${format(customEndDate, 'MMM d, yyyy')}`
+                      : 'Select dates'}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-4" align="start">
+                  <div className="space-y-4">
+                    <div className="space-y-3">
+                      <div className="space-y-2">
+                        <Label htmlFor="start-date">Start Date</Label>
+                        <CustomDatePicker
+                          value={customStartDate || null}
+                          onChange={(dateStr: string | null) => {
+                            const date = dateStr ? new Date(dateStr) : undefined;
+                            if (date) {
+                              onCustomStartDateChange?.(date);
+                              if (customEndDate && date > customEndDate) {
+                                onCustomEndDateChange?.(date);
+                              }
+                            } else {
+                              onCustomStartDateChange?.(undefined);
+                            }
+                          }}
+                          maxDate={new Date()}
+                          placeholderText="dd/mm/yyyy"
+                          className="w-full"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="end-date">End Date</Label>
+                        <CustomDatePicker
+                          value={customEndDate || null}
+                          onChange={(dateStr: string | null) => {
+                            const date = dateStr ? new Date(dateStr) : undefined;
+                            if (date) {
+                              onCustomEndDateChange?.(date);
+                              if (customStartDate && date < customStartDate) {
+                                onCustomStartDateChange?.(date);
+                              }
+                            } else {
+                              onCustomEndDateChange?.(undefined);
+                            }
+                          }}
+                          minDate={customStartDate || undefined}
+                          maxDate={new Date()}
+                          placeholderText="dd/mm/yyyy"
+                          className="w-full"
+                        />
+                      </div>
+                    </div>
+                    <div className="flex gap-2 pt-2 border-t">
+                      <Button
+                        size="sm"
+                        onClick={onApplyCustomDate}
+                        disabled={!customStartDate || !customEndDate}
+                        className="flex-1 bg-re-green hover:bg-re-green/90"
+                      >
+                        Apply Range
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => {
+                          onShowCustomDatePickerChange?.(false);
+                          onCustomStartDateChange?.(undefined);
+                          onCustomEndDateChange?.(undefined);
+                          onDateRangeChange('month');
+                        }}
+                      >
+                        Cancel
+                      </Button>
+                    </div>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

src/custom/components/request-creation/CreateRequest.tsx

@@ -0,0 +1,9 @@
+/**
+ * Custom Request Creation Component
+ * 
+ * This component handles the creation of custom requests.
+ * Located in: src/custom/components/request-creation/
+ */
+
+// Re-export the original component
+export { CreateRequest } from '@/pages/CreateRequest/CreateRequest';

src/custom/components/request-detail/OverviewTab.tsx

@@ -0,0 +1,9 @@
+/**
+ * Custom Request Overview Tab
+ * 
+ * This component is specific to Custom requests.
+ * Located in: src/custom/components/request-detail/
+ */
+
+// Re-export the original component
+export { OverviewTab } from '@/pages/RequestDetail/components/tabs/OverviewTab';

src/custom/components/request-detail/WorkflowTab.tsx

@@ -0,0 +1,9 @@
+/**
+ * Custom Request Workflow Tab
+ * 
+ * This component is specific to Custom requests.
+ * Located in: src/custom/components/request-detail/
+ */
+
+// Re-export the original component
+export { WorkflowTab } from '@/pages/RequestDetail/components/tabs/WorkflowTab';

src/custom/index.ts

@@ -0,0 +1,32 @@
+/**
+ * Custom Request Flow
+ * 
+ * This module exports all components, hooks, utilities, and types
+ * specific to Custom requests. This allows for complete segregation
+ * of custom request functionality.
+ * 
+ * LOCATION: src/custom/
+ * 
+ * To remove Custom flow completely:
+ * 1. Delete this entire folder: src/custom/
+ * 2. Remove from src/flows.ts registry
+ * 3. Done! All custom request code is removed.
+ */
+
+// Request Detail Components
+export { OverviewTab as CustomOverviewTab } from './components/request-detail/OverviewTab';
+export { WorkflowTab as CustomWorkflowTab } from './components/request-detail/WorkflowTab';
+
+// Request Creation Components
+export { CreateRequest as CustomCreateRequest } from './components/request-creation/CreateRequest';
+
+// Request Detail Screen (Complete standalone screen)
+export { CustomRequestDetail } from './pages/RequestDetail';
+
+// Filters
+export { StandardRequestsFilters } from './components/RequestsFilters';
+export { StandardClosedRequestsFilters } from './components/ClosedRequestsFilters';
+export { StandardUserAllRequestsFilters } from './components/UserAllRequestsFilters';
+
+// Re-export types
+export type { RequestDetailProps } from '@/pages/RequestDetail/types/requestDetail.types';

src/custom/pages/RequestDetail.tsx

@@ -1,31 +1,31 @@
 /**
- * RequestDetail Component (Template-Driven)
+ * Custom Request Detail Screen
  * 
- * Purpose: Flexible, template-driven request detail view
+ * Standalone, dedicated request detail screen for Custom requests.
+ * This is a complete module that uses custom request specific components.
  * 
- * Architecture:
- * - Template-based configuration for different user types
- * - Dynamic tab rendering based on template
- * - Reusable across multiple scenarios (standard, dealer, vendor, etc.)
- * - Maintains all existing functionality while adding flexibility
+ * LOCATION: src/custom/pages/RequestDetail.tsx
  * 
- * Usage:
- * - Automatically selects template based on request type and user role
- * - Can be explicitly set via template prop
- * - Fully backward compatible with existing code
+ * IMPORTANT: This entire file and all its dependencies are in src/custom/ folder.
+ * Deleting src/custom/ folder removes ALL custom request related code.
  */
 
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Component, ErrorInfo, ReactNode } from 'react';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
+  ClipboardList,
+  TrendingUp,
+  FileText,
+  Activity,
+  MessageSquare,
   AlertTriangle,
+  FileCheck,
+  ShieldX,
   RefreshCw,
   ArrowLeft,
-  ShieldX,
-  FileText,
 } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 
@@ -37,23 +37,25 @@ import { useDocumentUpload } from '@/hooks/useDocumentUpload';
 import { useConclusionRemark } from '@/hooks/useConclusionRemark';
 import { useModalManager } from '@/hooks/useModalManager';
 import { downloadDocument } from '@/services/workflowApi';
+import { getPublicConfigurations, AdminConfiguration } from '@/services/adminApi';
+import { PolicyViolationModal } from '@/components/modals/PolicyViolationModal';
 
-// Components
-import { RequestDetailHeader } from './components/RequestDetailHeader';
+// Custom Request Components (import from index to get properly aliased exports)
+import { CustomOverviewTab, CustomWorkflowTab } from '../index';
+
+// Shared Components (from src/shared/)
+import { SharedComponents } from '@/shared/components';
+const { DocumentsTab, ActivityTab, WorkNotesTab, SummaryTab, RequestDetailHeader, QuickActionsSidebar, RequestDetailModals } = SharedComponents;
+
+// Other components
 import { ShareSummaryModal } from '@/components/modals/ShareSummaryModal';
 import { getSummaryDetails, getSummaryByRequestId, type SummaryDetails } from '@/services/summaryApi';
 import { toast } from 'sonner';
-import { QuickActionsSidebar } from './components/QuickActionsSidebar';
-import { RequestDetailModals } from './components/RequestDetailModals';
-import { RequestDetailProps } from './types/requestDetail.types';
+import { RequestDetailProps } from '@/pages/RequestDetail/types/requestDetail.types';
 import { PauseModal } from '@/components/workflow/PauseModal';
 import { ResumeModal } from '@/components/workflow/ResumeModal';
 import { RetriggerPauseModal } from '@/components/workflow/RetriggerPauseModal';
 
-// Template system
-import { getTemplateForContext, getTemplate } from './templates';
-import { TemplateContext } from './types/template.types';
-
 /**
  * Error Boundary Component
  */
@@ -68,7 +70,7 @@ class RequestDetailErrorBoundary extends Component<{ children: ReactNode }, { ha
   }
 
   override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('RequestDetail Error:', error, errorInfo);
+    console.error('Custom RequestDetail Error:', error, errorInfo);
   }
 
   override render() {
@@ -94,28 +96,42 @@ class RequestDetailErrorBoundary extends Component<{ children: ReactNode }, { ha
 }
 
 /**
- * RequestDetailInner Component (Template-Driven)
+ * Custom RequestDetailInner Component
  */
-function RequestDetailInner({ 
-  requestId: propRequestId, 
-  onBack, 
-  dynamicRequests = [],
-  template: explicitTemplate,
-}: RequestDetailProps & { template?: string }) {
+function CustomRequestDetailInner({ requestId: propRequestId, onBack, dynamicRequests = [] }: RequestDetailProps) {
   const params = useParams<{ requestId: string }>();
   const requestIdentifier = params.requestId || propRequestId || '';
 
   const urlParams = new URLSearchParams(window.location.search);
-  const initialTab = urlParams.get('tab') || '';
+  const initialTab = urlParams.get('tab') || 'overview';
 
   const [activeTab, setActiveTab] = useState(initialTab);
   const [showShareSummaryModal, setShowShareSummaryModal] = useState(false);
   const [summaryId, setSummaryId] = useState<string | null>(null);
   const [summaryDetails, setSummaryDetails] = useState<SummaryDetails | null>(null);
+  const [loadingSummary, setLoadingSummary] = useState(false);
   const [sharedRecipientsRefreshTrigger, setSharedRecipientsRefreshTrigger] = useState(0);
   const [showPauseModal, setShowPauseModal] = useState(false);
   const [showResumeModal, setShowResumeModal] = useState(false);
   const [showRetriggerModal, setShowRetriggerModal] = useState(false);
+  const [systemPolicy, setSystemPolicy] = useState<{
+    maxApprovalLevels: number;
+    maxParticipants: number;
+    allowSpectators: boolean;
+    maxSpectators: number;
+  }>({
+    maxApprovalLevels: 10,
+    maxParticipants: 50,
+    allowSpectators: true,
+    maxSpectators: 20
+  });
+  const [policyViolationModal, setPolicyViolationModal] = useState<{
+    open: boolean;
+    violations: Array<{ type: string; message: string; currentValue?: number; maxValue?: number }>;
+  }>({
+    open: false,
+    violations: []
+  });
   const { user } = useAuth();
 
   // Custom hooks
@@ -173,9 +189,6 @@ function RequestDetailInner({
     handleAddSpectator,
   } = useModalManager(requestIdentifier, currentApprovalLevel, refreshDetails);
 
-  const needsClosure = (request?.status === 'approved' || request?.status === 'rejected') && isInitiator;
-  const isClosed = request?.status === 'closed' || (request?.status === 'approved' && !isInitiator) || (request?.status === 'rejected' && !isInitiator);
-
   const {
     conclusionRemark,
     setConclusionRemark,
@@ -184,97 +197,36 @@ function RequestDetailInner({
     aiGenerated,
     handleGenerateConclusion,
     handleFinalizeConclusion,
+    generationAttempts,
+    generationFailed,
+    maxAttemptsReached,
   } = useConclusionRemark(request, requestIdentifier, isInitiator, refreshDetails, onBack, setActionStatus, setShowActionStatusModal);
 
-  // Select template based on request type and user role
-  const template = useMemo(() => {
-    if (!request || !user) return null;
-    
-    // Use explicit template if provided
-    if (explicitTemplate) {
-      return getTemplate(explicitTemplate);
-    }
-    
-    // Auto-select template
-    return getTemplateForContext(user, request, params);
-  }, [request, user, explicitTemplate, params]);
-
-  // Build template context
-  const templateContext: TemplateContext = useMemo(() => ({
-    request,
-    apiRequest,
-    user,
-    isInitiator,
-    isSpectator,
-    currentApprovalLevel,
-    isClosed,
-    needsClosure,
-    refreshDetails,
-    unreadWorkNotes,
-    mergedMessages,
-    workNoteAttachments,
-    setWorkNoteAttachments,
-    uploadingDocument,
-    triggerFileInput,
-    previewDocument,
-    setPreviewDocument,
-    documentPolicy,
-    documentError,
-    setDocumentError,
-    conclusionRemark,
-    setConclusionRemark,
-    conclusionLoading,
-    conclusionSubmitting,
-    aiGenerated,
-    handleGenerateConclusion,
-    handleFinalizeConclusion,
-    summaryDetails,
-    pausedByUserId: request?.pauseInfo?.pausedBy?.userId,
-    currentUserId: (user as any)?.userId,
-    onAddApprover: () => setShowAddApproverModal(true),
-    onAddSpectator: () => setShowAddSpectatorModal(true),
-    onApprove: () => setShowApproveModal(true),
-    onReject: () => setShowRejectModal(true),
-    onPause: () => setShowPauseModal(true),
-    onResume: () => setShowResumeModal(true),
-    onRetrigger: () => setShowRetriggerModal(true),
-    onSkipApprover: (data: any) => {
-      if (!data.levelId) {
-        alert('Level ID not available');
-        return;
-      }
-      setSkipApproverData(data);
-      setShowSkipApproverModal(true);
-    },
-    downloadDocument,
-    existingParticipants,
-  }), [
-    request, apiRequest, user, isInitiator, isSpectator, currentApprovalLevel, isClosed, needsClosure,
-    refreshDetails, unreadWorkNotes, mergedMessages, workNoteAttachments, setWorkNoteAttachments,
-    uploadingDocument, triggerFileInput, previewDocument, setPreviewDocument, documentPolicy,
-    documentError, setDocumentError, conclusionRemark, setConclusionRemark, conclusionLoading,
-    conclusionSubmitting, aiGenerated, handleGenerateConclusion, handleFinalizeConclusion,
-    summaryDetails, existingParticipants,
-  ]);
-
-  // Get visible tabs based on template configuration
-  const visibleTabs = useMemo(() => {
-    if (!template) return [];
-    
-    return template.tabs
-      .filter(tab => !tab.visible || tab.visible(templateContext))
-      .sort((a, b) => (a.order || 0) - (b.order || 0));
-  }, [template, templateContext]);
-
-  // Set default tab
+  // Load system policy on mount
   useEffect(() => {
-    if (!activeTab && template && visibleTabs.length > 0) {
-      const defaultTab = template.defaultTab || visibleTabs[0]?.id;
-      if (defaultTab) {
-        setActiveTab(defaultTab);
+    const loadSystemPolicy = async () => {
+      try {
+        const systemSettingsConfigs = await getPublicConfigurations('SYSTEM_SETTINGS');
+        const workflowSharingConfigs = await getPublicConfigurations('WORKFLOW_SHARING');
+        const allConfigs = [...systemSettingsConfigs, ...workflowSharingConfigs];
+        const configMap: Record<string, string> = {};
+        allConfigs.forEach((c: AdminConfiguration) => {
+          configMap[c.configKey] = c.configValue;
+        });
+
+        setSystemPolicy({
+          maxApprovalLevels: parseInt(configMap['MAX_APPROVAL_LEVELS'] || '10'),
+          maxParticipants: parseInt(configMap['MAX_PARTICIPANTS_PER_REQUEST'] || '50'),
+          allowSpectators: configMap['ALLOW_ADD_SPECTATOR']?.toLowerCase() === 'true',
+          maxSpectators: parseInt(configMap['MAX_SPECTATORS_PER_REQUEST'] || '20')
+        });
+      } catch (error) {
+        console.error('Failed to load system policy:', error);
       }
-    }
-  }, [template, visibleTabs, activeTab]);
+    };
+
+    loadSystemPolicy();
+  }, []);
 
   // Auto-switch tab when URL query parameter changes
   useEffect(() => {
@@ -285,18 +237,51 @@ function RequestDetailInner({
     }
   }, [requestIdentifier]);
 
-  // Template lifecycle: onInit
-  useEffect(() => {
-    if (template?.onInit && templateContext) {
-      template.onInit(templateContext);
+  const handleRefresh = () => {
+    refreshDetails();
+  };
+
+  // Pause handlers
+  const handlePause = () => {
+    setShowPauseModal(true);
+  };
+
+  const handleResume = () => {
+    setShowResumeModal(true);
+  };
+
+  const handleResumeSuccess = async () => {
+    await refreshDetails();
+  };
+
+  const handleRetrigger = () => {
+    setShowRetriggerModal(true);
+  };
+
+  const handlePauseSuccess = async () => {
+    await refreshDetails();
+  };
+
+  const handleRetriggerSuccess = async () => {
+    await refreshDetails();
+  };
+
+  const handleShareSummary = async () => {
+    if (!apiRequest?.requestId) {
+      toast.error('Request ID not found');
+      return;
     }
 
-    return () => {
-      if (template?.onDestroy && templateContext) {
-        template.onDestroy(templateContext);
+    if (!summaryId) {
+      toast.error('Summary not available. Please ensure the request is closed and the summary has been generated.');
+      return;
     }
+
+    setShowShareSummaryModal(true);
   };
-  }, [template?.id]); // Only run when template changes
+
+  const needsClosure = (request?.status === 'approved' || request?.status === 'rejected') && isInitiator;
+  const isClosed = request?.status === 'closed';
 
   // Fetch summary details if request is closed
   useEffect(() => {
@@ -308,6 +293,7 @@ function RequestDetailInner({
       }
 
       try {
+        setLoadingSummary(true);
         const summary = await getSummaryByRequestId(apiRequest.requestId);
         
         if (summary?.summaryId) {
@@ -327,42 +313,14 @@ function RequestDetailInner({
       } catch (error: any) {
         setSummaryDetails(null);
         setSummaryId(null);
+      } finally {
+        setLoadingSummary(false);
       }
     };
 
     fetchSummaryDetails();
   }, [isClosed, apiRequest?.requestId]);
 
-  const handleRefresh = () => {
-    refreshDetails();
-  };
-
-  const handleShareSummary = async () => {
-    if (!apiRequest?.requestId) {
-      toast.error('Request ID not found');
-      return;
-    }
-
-    if (!summaryId) {
-      toast.error('Summary not available. Please ensure the request is closed and the summary has been generated.');
-      return;
-    }
-
-    setShowShareSummaryModal(true);
-  };
-
-  const handlePauseSuccess = async () => {
-    await refreshDetails();
-  };
-
-  const handleResumeSuccess = async () => {
-    await refreshDetails();
-  };
-
-  const handleRetriggerSuccess = async () => {
-    await refreshDetails();
-  };
-
   // Get current levels for WorkNotesTab
   const currentLevels = (request?.approvalFlow || [])
     .filter((flow: any) => flow && typeof flow.step === 'number')
@@ -379,7 +337,7 @@ function RequestDetailInner({
       <div className="flex items-center justify-center h-screen bg-gray-50" data-testid="loading-state">
         <div className="text-center">
           <RefreshCw className="w-12 h-12 text-blue-600 animate-spin mx-auto mb-4" />
-          <p className="text-gray-600">Loading request details...</p>
+          <p className="text-gray-600">Loading custom request details...</p>
         </div>
       </div>
     );
@@ -397,17 +355,6 @@ function RequestDetailInner({
           <p className="text-gray-600 mb-6 leading-relaxed">
             {accessDenied.message}
           </p>
-          <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6 text-left">
-            <p className="text-sm text-amber-800">
-              <strong>Who can access this request?</strong>
-            </p>
-            <ul className="text-sm text-amber-700 mt-2 space-y-1">
-              <li>• The person who created this request (Initiator)</li>
-              <li>• Designated approvers at any level</li>
-              <li>• Added spectators or participants</li>
-              <li>• Organization administrators</li>
-            </ul>
-          </div>
           <div className="flex gap-3 justify-center">
             <Button 
               variant="outline" 
@@ -437,9 +384,9 @@ function RequestDetailInner({
           <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
             <FileText className="w-10 h-10 text-gray-400" />
           </div>
-          <h2 className="text-2xl font-bold text-gray-900 mb-3">Request Not Found</h2>
+          <h2 className="text-2xl font-bold text-gray-900 mb-3">Custom Request Not Found</h2>
           <p className="text-gray-600 mb-6">
-            The request you're looking for doesn't exist or may have been deleted.
+            The custom request you're looking for doesn't exist or may have been deleted.
           </p>
           <div className="flex gap-3 justify-center">
             <Button 
@@ -462,27 +409,10 @@ function RequestDetailInner({
     );
   }
 
-  // No template found
-  if (!template) {
-    return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-6">
-        <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
-          <AlertTriangle className="w-16 h-16 text-amber-500 mx-auto mb-4" />
-          <h2 className="text-2xl font-bold mb-2">Template Not Found</h2>
-          <p className="text-gray-600 mb-4">Unable to load the appropriate template for this request.</p>
-          <Button onClick={() => window.history.back()}>Go Back</Button>
-        </div>
-      </div>
-    );
-  }
-
-  const showQuickActions = template.layout?.showQuickActionsSidebar && 
-    !template.layout?.fullWidthTabs?.includes(activeTab);
-
   return (
     <>
-      <div className="min-h-screen bg-gray-50" data-testid="request-detail-page">
-        <div className="max-w-7xl mx-auto p-6">
+      <div className="min-h-screen bg-gray-50" data-testid="custom-request-detail-page">
+        <div className="max-w-7xl mx-auto">
           {/* Header Section */}
           <RequestDetailHeader
             request={request}
@@ -491,63 +421,166 @@ function RequestDetailInner({
             onRefresh={handleRefresh}
             onShareSummary={handleShareSummary}
             isInitiator={isInitiator}
+            // Custom module: Business logic for preparing SLA data
+            slaData={request?.summary?.sla || request?.sla || null}
+            isPaused={request?.pauseInfo?.isPaused || false}
           />
 
           {/* Tabs */}
-          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" data-testid="request-detail-tabs">
-            <div className="mb-6">
-              <TabsList className="bg-white border border-gray-200 shadow-sm">
-                {visibleTabs.map(tab => {
-                  const Icon = tab.icon;
-                  const badgeCount = tab.badge ? tab.badge(templateContext) : null;
-                  
-                  return (
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" data-testid="custom-request-detail-tabs">
+            <div className="mb-4 sm:mb-6">
+              <TabsList className="grid grid-cols-3 sm:grid-cols-6 lg:flex lg:flex-row h-auto bg-gray-100 p-1.5 sm:p-1 rounded-lg gap-1.5 sm:gap-1">
                 <TabsTrigger
-                      key={tab.id}
-                      value={tab.id}
-                      className="flex items-center gap-2 relative"
-                      data-testid={`tab-${tab.id}`}
+                  value="overview"
+                  className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900"
+                  data-testid="tab-overview"
                 >
-                      <Icon className="w-4 h-4" />
-                      <span>{tab.label}</span>
-                      {badgeCount && badgeCount > 0 && (
+                  <ClipboardList className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                  <span className="truncate">Overview</span>
+                </TabsTrigger>
+                {isClosed && summaryDetails && (
+                  <TabsTrigger
+                    value="summary"
+                    className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900"
+                    data-testid="tab-summary"
+                  >
+                    <FileCheck className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                    <span className="truncate">Summary</span>
+                  </TabsTrigger>
+                )}
+                <TabsTrigger
+                  value="workflow"
+                  className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900"
+                  data-testid="tab-workflow"
+                >
+                  <TrendingUp className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                  <span className="truncate">Workflow</span>
+                </TabsTrigger>
+                <TabsTrigger
+                  value="documents"
+                  className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900"
+                  data-testid="tab-documents"
+                >
+                  <FileText className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                  <span className="truncate">Docs</span>
+                </TabsTrigger>
+                <TabsTrigger
+                  value="activity"
+                  className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900 col-span-1 sm:col-span-1"
+                  data-testid="tab-activity"
+                >
+                  <Activity className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                  <span className="truncate">Activity</span>
+                </TabsTrigger>
+                <TabsTrigger
+                  value="worknotes"
+                  className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900 relative col-span-2 sm:col-span-1"
+                  data-testid="tab-worknotes"
+                >
+                  <MessageSquare className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                  <span className="truncate">Work Notes</span>
+                  {unreadWorkNotes > 0 && (
                     <Badge
                       className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-white text-[10px] flex items-center justify-center p-0"
-                          data-testid={`${tab.id}-badge`}
+                      data-testid="worknotes-unread-badge"
                     >
-                          {badgeCount > 9 ? '9+' : badgeCount}
+                      {unreadWorkNotes > 9 ? '9+' : unreadWorkNotes}
                     </Badge>
                   )}
                 </TabsTrigger>
-                  );
-                })}
               </TabsList>
             </div>
 
             {/* Main Layout */}
-            <div className={showQuickActions ? 'grid grid-cols-1 lg:grid-cols-3 gap-6' : ''}>
+            <div className={activeTab === 'worknotes' ? '' : 'grid grid-cols-1 lg:grid-cols-3 gap-6'}>
               {/* Left Column: Tab content */}
-              <div className={showQuickActions ? 'lg:col-span-2' : ''}>
-                {visibleTabs.map(tab => {
-                  const TabComponent = tab.component;
-                  const isWorkNotes = tab.id === 'worknotes';
-                  
-                  return (
-                    <TabsContent 
-                      key={tab.id}
-                      value={tab.id} 
-                      className="mt-0"
-                      forceMount={isWorkNotes ? true : undefined}
-                      hidden={activeTab !== tab.id}
-                    >
-                      <TabComponent {...templateContext} />
+              <div className={activeTab === 'worknotes' ? '' : 'lg:col-span-2'}>
+                <TabsContent value="overview" className="mt-0" data-testid="overview-tab-content">
+                  <CustomOverviewTab
+                    request={request}
+                    isInitiator={isInitiator}
+                    needsClosure={needsClosure}
+                    conclusionRemark={conclusionRemark}
+                    setConclusionRemark={setConclusionRemark}
+                    conclusionLoading={conclusionLoading}
+                    conclusionSubmitting={conclusionSubmitting}
+                    aiGenerated={aiGenerated}
+                    handleGenerateConclusion={handleGenerateConclusion}
+                    handleFinalizeConclusion={handleFinalizeConclusion}
+                    onPause={handlePause}
+                    onResume={handleResume}
+                    onRetrigger={handleRetrigger}
+                    currentUserIsApprover={!!currentApprovalLevel}
+                    pausedByUserId={request?.pauseInfo?.pausedBy?.userId}
+                    currentUserId={(user as any)?.userId}
+                    generationAttempts={generationAttempts}
+                    generationFailed={generationFailed}
+                    maxAttemptsReached={maxAttemptsReached}
+                  />
+                </TabsContent>
+
+                {isClosed && (
+                  <TabsContent value="summary" className="mt-0" data-testid="summary-tab-content">
+                    <SummaryTab 
+                      summary={summaryDetails} 
+                      loading={loadingSummary}
+                      onShare={handleShareSummary}
+                      isInitiator={isInitiator}
+                    />
+                  </TabsContent>
+                )}
+
+                <TabsContent value="workflow" className="mt-0">
+                  <CustomWorkflowTab
+                    request={request}
+                    user={user}
+                    isInitiator={isInitiator}
+                    onSkipApprover={(data) => {
+                      if (!data.levelId) {
+                        alert('Level ID not available');
+                        return;
+                      }
+                      setSkipApproverData(data);
+                      setShowSkipApproverModal(true);
+                    }}
+                    onRefresh={refreshDetails}
+                  />
+                </TabsContent>
+
+                <TabsContent value="documents" className="mt-0">
+                  <DocumentsTab
+                    request={request}
+                    workNoteAttachments={workNoteAttachments}
+                    uploadingDocument={uploadingDocument}
+                    documentPolicy={documentPolicy}
+                    triggerFileInput={triggerFileInput}
+                    setPreviewDocument={setPreviewDocument}
+                    downloadDocument={downloadDocument}
+                  />
+                </TabsContent>
+
+                <TabsContent value="activity" className="mt-0">
+                  <ActivityTab request={request} />
+                </TabsContent>
+
+                <TabsContent value="worknotes" className="mt-0" forceMount={true} hidden={activeTab !== 'worknotes'}>
+                  <WorkNotesTab
+                    requestId={requestIdentifier}
+                    requestTitle={request.title}
+                    mergedMessages={mergedMessages}
+                    setWorkNoteAttachments={setWorkNoteAttachments}
+                    isInitiator={isInitiator}
+                    isSpectator={isSpectator}
+                    currentLevels={currentLevels}
+                    onAddApprover={handleAddApprover}
+                    maxApprovalLevels={systemPolicy.maxApprovalLevels}
+                    onPolicyViolation={(violations) => setPolicyViolationModal({ open: true, violations })}
+                  />
                 </TabsContent>
-                  );
-                })}
               </div>
 
               {/* Right Column: Quick Actions Sidebar */}
-              {showQuickActions && (
+              {activeTab !== 'worknotes' && (
                 <QuickActionsSidebar
                   request={request}
                   isInitiator={isInitiator}
@@ -557,13 +590,14 @@ function RequestDetailInner({
                   onAddSpectator={() => setShowAddSpectatorModal(true)}
                   onApprove={() => setShowApproveModal(true)}
                   onReject={() => setShowRejectModal(true)}
-                  onPause={() => setShowPauseModal(true)}
-                  onResume={() => setShowResumeModal(true)}
-                  onRetrigger={() => setShowRetriggerModal(true)}
+                  onPause={handlePause}
+                  onResume={handleResume}
+                  onRetrigger={handleRetrigger}
                   summaryId={summaryId}
                   refreshTrigger={sharedRecipientsRefreshTrigger}
                   pausedByUserId={request?.pauseInfo?.pausedBy?.userId}
                   currentUserId={(user as any)?.userId}
+                  apiRequest={apiRequest}
                 />
               )}
             </div>
@@ -630,6 +664,8 @@ function RequestDetailInner({
         actionStatus={actionStatus}
         existingParticipants={existingParticipants}
         currentLevels={currentLevels}
+        maxApprovalLevels={systemPolicy.maxApprovalLevels}
+        onPolicyViolation={(violations) => setPolicyViolationModal({ open: true, violations })}
         setShowApproveModal={setShowApproveModal}
         setShowRejectModal={setShowRejectModal}
         setShowAddApproverModal={setShowAddApproverModal}
@@ -648,18 +684,30 @@ function RequestDetailInner({
         downloadDocument={downloadDocument}
         documentPolicy={documentPolicy}
       />
+
+      {/* Policy Violation Modal */}
+      <PolicyViolationModal
+        open={policyViolationModal.open}
+        onClose={() => setPolicyViolationModal({ open: false, violations: [] })}
+        violations={policyViolationModal.violations}
+        policyDetails={{
+          maxApprovalLevels: systemPolicy.maxApprovalLevels,
+          maxParticipants: systemPolicy.maxParticipants,
+          allowSpectators: systemPolicy.allowSpectators,
+          maxSpectators: systemPolicy.maxSpectators,
+        }}
+      />
     </>
   );
 }
 
 /**
- * RequestDetail Component (Exported)
+ * Custom RequestDetail Component (Exported)
  */
-export function RequestDetailTemplated(props: RequestDetailProps & { template?: string }) {
+export function CustomRequestDetail(props: RequestDetailProps) {
   return (
     <RequestDetailErrorBoundary>
-      <RequestDetailInner {...props} />
+      <CustomRequestDetailInner {...props} />
     </RequestDetailErrorBoundary>
   );
 }
-

src/dealer-claim/components/DealerClosedRequestsFilters.tsx

@@ -0,0 +1,142 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Filter, Search, SortAsc, SortDesc, X, CheckCircle, XCircle } from 'lucide-react';
+
+interface DealerClosedRequestsFiltersProps {
+  searchTerm: string;
+  statusFilter?: string;
+  priorityFilter?: string;
+  templateTypeFilter?: string;
+  sortBy: 'created' | 'due' | 'priority';
+  sortOrder: 'asc' | 'desc';
+  onSearchChange: (value: string) => void;
+  onStatusChange?: (value: string) => void;
+  onPriorityChange?: (value: string) => void;
+  onTemplateTypeChange?: (value: string) => void;
+  onSortByChange: (value: 'created' | 'due' | 'priority') => void;
+  onSortOrderChange: () => void;
+  onClearFilters: () => void;
+  activeFiltersCount: number;
+}
+
+/**
+ * Dealer Closed Requests Filters Component
+ * 
+ * Simplified filters for dealer users viewing closed requests.
+ * Only includes: Search, Status (closure type), and Sort filters.
+ * Removes: Priority and Template Type filters.
+ */
+export function DealerClosedRequestsFilters({
+  searchTerm,
+  statusFilter = 'all',
+  sortBy,
+  sortOrder,
+  onSearchChange,
+  onStatusChange,
+  onSortByChange,
+  onSortOrderChange,
+  onClearFilters,
+  activeFiltersCount,
+  ...rest // Accept but ignore other props for interface compatibility
+}: DealerClosedRequestsFiltersProps) {
+  void rest; // Explicitly mark as unused
+  return (
+    <Card className="shadow-lg border-0" data-testid="dealer-closed-requests-filters">
+      <CardHeader className="pb-3 sm:pb-4 px-3 sm:px-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 sm:gap-3">
+            <div className="p-1.5 sm:p-2 bg-blue-100 rounded-lg">
+              <Filter className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
+            </div>
+            <div>
+              <CardTitle className="text-base sm:text-lg">Filters & Search</CardTitle>
+              <CardDescription className="text-xs sm:text-sm">
+                {activeFiltersCount > 0 && (
+                  <span className="text-blue-600 font-medium">
+                    {activeFiltersCount} filter{activeFiltersCount > 1 ? 's' : ''} active
+                  </span>
+                )}
+              </CardDescription>
+            </div>
+          </div>
+          {activeFiltersCount > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClearFilters}
+              className="text-red-600 hover:bg-red-50 gap-1 h-8 sm:h-9 px-2 sm:px-3"
+              data-testid="dealer-closed-requests-clear-filters"
+            >
+              <X className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
+              <span className="text-xs sm:text-sm">Clear</span>
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
+        {/* Dealer-specific filters - Search, Status (Closure Type), and Sort */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
+            <Input
+              placeholder="Search requests, IDs..."
+              value={searchTerm}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="pl-9 sm:pl-10 h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200 transition-colors"
+              data-testid="dealer-closed-requests-search"
+            />
+          </div>
+          
+          {onStatusChange && (
+            <Select value={statusFilter} onValueChange={onStatusChange}>
+              <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200" data-testid="dealer-closed-requests-status-filter">
+                <SelectValue placeholder="Closure Type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Closures</SelectItem>
+                <SelectItem value="approved">
+                  <div className="flex items-center gap-2">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>Closed After Approval</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="rejected">
+                  <div className="flex items-center gap-2">
+                    <XCircle className="w-4 h-4 text-red-600" />
+                    <span>Closed After Rejection</span>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          )}
+
+          <div className="flex gap-2">
+            <Select value={sortBy} onValueChange={(value) => onSortByChange(value as 'created' | 'due' | 'priority')}>
+              <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200" data-testid="dealer-closed-requests-sort-by">
+                <SelectValue placeholder="Sort by" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="due">Due Date</SelectItem>
+                <SelectItem value="created">Date Created</SelectItem>
+                <SelectItem value="priority">Priority</SelectItem>
+              </SelectContent>
+            </Select>
+            
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onSortOrderChange}
+              className="px-2 sm:px-3 h-9 sm:h-10 md:h-11"
+              data-testid="dealer-closed-requests-sort-order"
+            >
+              {sortOrder === 'asc' ? <SortAsc className="w-3.5 h-3.5 sm:w-4 sm:h-4" /> : <SortDesc className="w-3.5 h-3.5 sm:w-4 sm:h-4" />}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

src/dealer-claim/components/DealerRequestsFilters.tsx

@@ -0,0 +1,114 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Filter, Search, SortAsc, SortDesc, X } from 'lucide-react';
+
+interface DealerRequestsFiltersProps {
+  searchTerm: string;
+  statusFilter?: string;
+  priorityFilter?: string;
+  templateTypeFilter?: string;
+  sortBy: 'created' | 'due' | 'priority' | 'sla';
+  sortOrder: 'asc' | 'desc';
+  onSearchChange: (value: string) => void;
+  onStatusFilterChange?: (value: string) => void;
+  onPriorityFilterChange?: (value: string) => void;
+  onTemplateTypeFilterChange?: (value: string) => void;
+  onSortByChange: (value: 'created' | 'due' | 'priority' | 'sla') => void;
+  onSortOrderChange: (value: 'asc' | 'desc') => void;
+  onClearFilters: () => void;
+  activeFiltersCount: number;
+}
+
+/**
+ * Dealer Requests Filters Component
+ * 
+ * Simplified filters for dealer users.
+ * Only includes: Search and Sort filters (no status, priority, or template type).
+ */
+export function DealerRequestsFilters({
+  searchTerm,
+  sortBy,
+  sortOrder,
+  onSearchChange,
+  onSortByChange,
+  onSortOrderChange,
+  onClearFilters,
+  activeFiltersCount,
+  ...rest // Accept but ignore other props for interface compatibility
+}: DealerRequestsFiltersProps) {
+  void rest; // Explicitly mark as unused
+  return (
+    <Card className="shadow-lg border-0">
+      <CardHeader className="pb-3 sm:pb-4 px-3 sm:px-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 sm:gap-3">
+            <div className="p-1.5 sm:p-2 bg-blue-100 rounded-lg">
+              <Filter className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
+            </div>
+            <div>
+              <CardTitle className="text-base sm:text-lg">Filters & Search</CardTitle>
+              <CardDescription className="text-xs sm:text-sm">
+                {activeFiltersCount > 0 && (
+                  <span className="text-blue-600 font-medium">
+                    {activeFiltersCount} filter{activeFiltersCount > 1 ? 's' : ''} active
+                  </span>
+                )}
+              </CardDescription>
+            </div>
+          </div>
+          {activeFiltersCount > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClearFilters}
+              className="text-red-600 hover:bg-red-50 gap-1 h-8 sm:h-9 px-2 sm:px-3"
+            >
+              <X className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
+              <span className="text-xs sm:text-sm">Clear</span>
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
+        {/* Dealer-specific filters - Only Search and Sort */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
+            <Input
+              placeholder="Search requests, IDs..."
+              value={searchTerm}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="pl-9 sm:pl-10 h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200 transition-colors"
+            />
+          </div>
+          
+          <div className="flex gap-2">
+            <Select value={sortBy} onValueChange={(value: any) => onSortByChange(value)}>
+              <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
+                <SelectValue placeholder="Sort by" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="due">Due Date</SelectItem>
+                <SelectItem value="created">Date Created</SelectItem>
+                <SelectItem value="priority">Priority</SelectItem>
+                <SelectItem value="sla">SLA Progress</SelectItem>
+              </SelectContent>
+            </Select>
+            
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onSortOrderChange(sortOrder === 'asc' ? 'desc' : 'asc')}
+              className="px-2 sm:px-3 h-9 sm:h-10 md:h-11"
+            >
+              {sortOrder === 'asc' ? <SortAsc className="w-3.5 h-3.5 sm:w-4 sm:h-4" /> : <SortDesc className="w-3.5 h-3.5 sm:w-4 sm:h-4" />}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

src/dealer-claim/components/DealerUserAllRequestsFilters.tsx

@@ -0,0 +1,389 @@
+/**
+ * Dealer User All Requests Filters Component
+ * 
+ * Simplified filters for dealer users viewing their all requests.
+ * Only includes: Search, Status, Initiator, Approver, and Date Range filters.
+ * Removes: Priority, Template Type, Department, and SLA Compliance filters.
+ */
+
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { X, Search, Filter, RefreshCw, Calendar as CalendarIcon } from 'lucide-react';
+import { format } from 'date-fns';
+import type { DateRange } from '@/services/dashboard.service';
+import { CustomDatePicker } from '@/components/ui/date-picker';
+
+interface DealerUserAllRequestsFiltersProps {
+  // Filters
+  searchTerm: string;
+  statusFilter: string;
+  priorityFilter?: string;
+  templateTypeFilter?: string;
+  departmentFilter?: string;
+  slaComplianceFilter?: string;
+  initiatorFilter: string;
+  approverFilter: string;
+  approverFilterType: 'current' | 'any';
+  dateRange: DateRange;
+  customStartDate?: Date;
+  customEndDate?: Date;
+  showCustomDatePicker: boolean;
+  
+  // State for user search
+  initiatorSearch: {
+    selectedUser: { userId: string; email: string; displayName?: string } | null;
+    searchQuery: string;
+    searchResults: Array<{ userId: string; email: string; displayName?: string }>;
+    showResults: boolean;
+    handleSearch: (query: string) => void;
+    handleSelect: (user: { userId: string; email: string; displayName?: string }) => void;
+    handleClear: () => void;
+    setShowResults: (show: boolean) => void;
+  };
+  
+  approverSearch: {
+    selectedUser: { userId: string; email: string; displayName?: string } | null;
+    searchQuery: string;
+    searchResults: Array<{ userId: string; email: string; displayName?: string }>;
+    showResults: boolean;
+    handleSearch: (query: string) => void;
+    handleSelect: (user: { userId: string; email: string; displayName?: string }) => void;
+    handleClear: () => void;
+    setShowResults: (show: boolean) => void;
+  };
+  
+  // Actions
+  onSearchChange: (value: string) => void;
+  onStatusChange: (value: string) => void;
+  onInitiatorChange?: (value: string) => void;
+  onApproverChange?: (value: string) => void;
+  onApproverTypeChange?: (value: 'current' | 'any') => void;
+  onDateRangeChange: (value: DateRange) => void;
+  onCustomStartDateChange?: (date: Date | undefined) => void;
+  onCustomEndDateChange?: (date: Date | undefined) => void;
+  onShowCustomDatePickerChange?: (show: boolean) => void;
+  onApplyCustomDate?: () => void;
+  onClearFilters: () => void;
+  
+  // Computed
+  hasActiveFilters: boolean;
+}
+
+export function DealerUserAllRequestsFilters({
+  searchTerm,
+  statusFilter,
+  initiatorFilter,
+  approverFilter,
+  approverFilterType,
+  dateRange,
+  customStartDate,
+  customEndDate,
+  showCustomDatePicker,
+  initiatorSearch,
+  approverSearch,
+  onSearchChange,
+  onStatusChange,
+  onInitiatorChange,
+  onApproverChange,
+  onApproverTypeChange,
+  onDateRangeChange,
+  onCustomStartDateChange,
+  onCustomEndDateChange,
+  onShowCustomDatePickerChange,
+  onApplyCustomDate,
+  onClearFilters,
+  hasActiveFilters,
+  ...rest // Accept but ignore other props for interface compatibility
+}: DealerUserAllRequestsFiltersProps) {
+  void rest; // Explicitly mark as unused
+  return (
+    <Card className="border-gray-200 shadow-md" data-testid="dealer-user-all-requests-filters">
+      <CardContent className="p-4 sm:p-6">
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Filter className="w-5 h-5 text-muted-foreground" />
+              <h3 className="font-semibold text-gray-900">Filters</h3>
+              {hasActiveFilters && (
+                <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
+                  Active
+                </Badge>
+              )}
+            </div>
+            {hasActiveFilters && (
+              <Button variant="ghost" size="sm" onClick={onClearFilters} className="gap-2">
+                <RefreshCw className="w-4 h-4" />
+                Clear All
+              </Button>
+            )}
+          </div>
+
+          <Separator />
+
+          {/* Primary Filters - Only Search and Status for dealers */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <Input
+                placeholder="Search requests..."
+                value={searchTerm}
+                onChange={(e) => onSearchChange(e.target.value)}
+                className="pl-10 h-10"
+                data-testid="dealer-search-input"
+              />
+            </div>
+
+            <Select value={statusFilter} onValueChange={onStatusChange}>
+              <SelectTrigger className="h-10" data-testid="dealer-status-filter">
+                <SelectValue placeholder="All Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Status</SelectItem>
+                <SelectItem value="pending">Pending</SelectItem>
+                <SelectItem value="paused">Paused</SelectItem>
+                <SelectItem value="approved">Approved</SelectItem>
+                <SelectItem value="rejected">Rejected</SelectItem>
+                <SelectItem value="closed">Closed</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* User Filters - Initiator and Approver */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
+            {/* Initiator Filter */}
+            <div className="flex flex-col">
+              <Label className="text-sm font-medium text-gray-700 mb-2">Initiator</Label>
+              <div className="relative">
+                {initiatorSearch.selectedUser ? (
+                  <div className="flex items-center gap-2 h-10 px-3 bg-white border border-gray-300 rounded-md">
+                    <span className="flex-1 text-sm text-gray-900 truncate">
+                      {initiatorSearch.selectedUser.displayName || initiatorSearch.selectedUser.email}
+                    </span>
+                    <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={initiatorSearch.handleClear}>
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ) : (
+                  <>
+                    <Input
+                      placeholder="Search initiator..."
+                      value={initiatorSearch.searchQuery}
+                      onChange={(e) => initiatorSearch.handleSearch(e.target.value)}
+                      onFocus={() => {
+                        if (initiatorSearch.searchResults.length > 0) {
+                          initiatorSearch.setShowResults(true);
+                        }
+                      }}
+                      onBlur={() => setTimeout(() => initiatorSearch.setShowResults(false), 200)}
+                      className="h-10"
+                      data-testid="dealer-initiator-search-input"
+                    />
+                    {initiatorSearch.showResults && initiatorSearch.searchResults.length > 0 && (
+                      <div className="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
+                        {initiatorSearch.searchResults.map((user) => (
+                          <button
+                            key={user.userId}
+                            type="button"
+                            onClick={() => initiatorSearch.handleSelect(user)}
+                            className="w-full px-4 py-2 text-left hover:bg-gray-50"
+                          >
+                            <div className="flex flex-col">
+                              <span className="text-sm font-medium text-gray-900">
+                                {user.displayName || user.email}
+                              </span>
+                              {user.displayName && (
+                                <span className="text-xs text-gray-500">{user.email}</span>
+                              )}
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+
+            {/* Approver Filter */}
+            <div className="flex flex-col">
+              <div className="flex items-center justify-between mb-2">
+                <Label className="text-sm font-medium text-gray-700">Approver</Label>
+                {approverFilter !== 'all' && onApproverTypeChange && (
+                  <Select
+                    value={approverFilterType}
+                    onValueChange={(value: 'current' | 'any') => onApproverTypeChange(value)}
+                  >
+                    <SelectTrigger className="h-7 w-32 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="current">Current Only</SelectItem>
+                      <SelectItem value="any">Any Approver</SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              </div>
+              <div className="relative">
+                {approverSearch.selectedUser ? (
+                  <div className="flex items-center gap-2 h-10 px-3 bg-white border border-gray-300 rounded-md">
+                    <span className="flex-1 text-sm text-gray-900 truncate">
+                      {approverSearch.selectedUser.displayName || approverSearch.selectedUser.email}
+                    </span>
+                    <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={approverSearch.handleClear}>
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ) : (
+                  <>
+                    <Input
+                      placeholder="Search approver..."
+                      value={approverSearch.searchQuery}
+                      onChange={(e) => approverSearch.handleSearch(e.target.value)}
+                      onFocus={() => {
+                        if (approverSearch.searchResults.length > 0) {
+                          approverSearch.setShowResults(true);
+                        }
+                      }}
+                      onBlur={() => setTimeout(() => approverSearch.setShowResults(false), 200)}
+                      className="h-10"
+                      data-testid="dealer-approver-search-input"
+                    />
+                    {approverSearch.showResults && approverSearch.searchResults.length > 0 && (
+                      <div className="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
+                        {approverSearch.searchResults.map((user) => (
+                          <button
+                            key={user.userId}
+                            type="button"
+                            onClick={() => approverSearch.handleSelect(user)}
+                            className="w-full px-4 py-2 text-left hover:bg-gray-50"
+                          >
+                            <div className="flex flex-col">
+                              <span className="text-sm font-medium text-gray-900">
+                                {user.displayName || user.email}
+                              </span>
+                              {user.displayName && (
+                                <span className="text-xs text-gray-500">{user.email}</span>
+                              )}
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Date Range Filter */}
+          <div className="flex items-center gap-3 flex-wrap">
+            <CalendarIcon className="w-4 h-4 text-muted-foreground" />
+            <Select value={dateRange} onValueChange={(value) => onDateRangeChange(value as DateRange)}>
+              <SelectTrigger className="w-[160px] h-10">
+                <SelectValue placeholder="Date Range" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Time</SelectItem>
+                <SelectItem value="today">Today</SelectItem>
+                <SelectItem value="week">This Week</SelectItem>
+                <SelectItem value="month">This Month</SelectItem>
+                <SelectItem value="last7days">Last 7 Days</SelectItem>
+                <SelectItem value="last30days">Last 30 Days</SelectItem>
+                <SelectItem value="custom">Custom Range</SelectItem>
+              </SelectContent>
+            </Select>
+
+            {dateRange === 'custom' && (
+              <Popover open={showCustomDatePicker} onOpenChange={onShowCustomDatePickerChange}>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" size="sm" className="gap-2">
+                    <CalendarIcon className="w-4 h-4" />
+                    {customStartDate && customEndDate
+                      ? `${format(customStartDate, 'MMM d, yyyy')} - ${format(customEndDate, 'MMM d, yyyy')}`
+                      : 'Select dates'}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-4" align="start">
+                  <div className="space-y-4">
+                    <div className="space-y-3">
+                      <div className="space-y-2">
+                        <Label htmlFor="start-date">Start Date</Label>
+                        <CustomDatePicker
+                          value={customStartDate || null}
+                          onChange={(dateStr: string | null) => {
+                            const date = dateStr ? new Date(dateStr) : undefined;
+                            if (date) {
+                              onCustomStartDateChange?.(date);
+                              if (customEndDate && date > customEndDate) {
+                                onCustomEndDateChange?.(date);
+                              }
+                            } else {
+                              onCustomStartDateChange?.(undefined);
+                            }
+                          }}
+                          maxDate={new Date()}
+                          placeholderText="dd/mm/yyyy"
+                          className="w-full"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="end-date">End Date</Label>
+                        <CustomDatePicker
+                          value={customEndDate || null}
+                          onChange={(dateStr: string | null) => {
+                            const date = dateStr ? new Date(dateStr) : undefined;
+                            if (date) {
+                              onCustomEndDateChange?.(date);
+                              if (customStartDate && date < customStartDate) {
+                                onCustomStartDateChange?.(date);
+                              }
+                            } else {
+                              onCustomEndDateChange?.(undefined);
+                            }
+                          }}
+                          minDate={customStartDate || undefined}
+                          maxDate={new Date()}
+                          placeholderText="dd/mm/yyyy"
+                          className="w-full"
+                        />
+                      </div>
+                    </div>
+                    <div className="flex gap-2 pt-2 border-t">
+                      <Button
+                        size="sm"
+                        onClick={onApplyCustomDate}
+                        disabled={!customStartDate || !customEndDate}
+                        className="flex-1 bg-re-green hover:bg-re-green/90"
+                      >
+                        Apply
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => {
+                          onShowCustomDatePickerChange?.(false);
+                          onCustomStartDateChange?.(undefined);
+                          onCustomEndDateChange?.(undefined);
+                          onDateRangeChange('month');
+                        }}
+                      >
+                        Cancel
+                      </Button>
+                    </div>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

src/dealer-claim/components/request-detail/IOTab.tsx

@@ -0,0 +1,499 @@
+/**
+ * Dealer Claim IO Tab
+ * 
+ * This component handles IO (Internal Order) management for dealer claims.
+ * Located in: src/dealer-claim/components/request-detail/
+ */
+
+import { useState, useEffect, useMemo } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { DollarSign, Download, CircleCheckBig, Target, CircleAlert } from 'lucide-react';
+import { toast } from 'sonner';
+import { validateIO, updateIODetails, getClaimDetails } from '@/services/dealerClaimApi';
+import { useAuth } from '@/contexts/AuthContext';
+
+interface IOTabProps {
+  request: any;
+  apiRequest?: any;
+  onRefresh?: () => void;
+}
+
+interface IOBlockedDetails {
+  ioNumber: string;
+  blockedAmount: number;
+  availableBalance: number; // Available amount before block
+  remainingBalance: number; // Remaining amount after block
+  blockedDate: string;
+  blockedBy: string; // User who blocked
+  sapDocumentNumber: string;
+  status: 'blocked' | 'released' | 'failed' | 'pending';
+}
+
+export function IOTab({ request, apiRequest, onRefresh }: IOTabProps) {
+  const { user } = useAuth();
+  const requestId = apiRequest?.requestId || request?.requestId;
+
+  // Get organizer user object from association (organizer) or fallback to organizedBy UUID
+  const proposalDetails = apiRequest?.proposalDetails || {};
+  const claimDetails = apiRequest?.claimDetails || apiRequest || {};
+
+  // Calculate total base amount (needed for budget verification as requested)
+  // This is the taxable amount excluding GST
+  const totalBaseAmount = useMemo(() => {
+    const costBreakupRaw = proposalDetails?.costBreakup || claimDetails?.costBreakup || [];
+    const costBreakup = Array.isArray(costBreakupRaw)
+      ? costBreakupRaw
+      : (typeof costBreakupRaw === 'string'
+        ? JSON.parse(costBreakupRaw)
+        : []);
+
+    if (!Array.isArray(costBreakup) || costBreakup.length === 0) {
+      return Number(claimDetails?.totalProposedTaxableAmount || proposalDetails?.totalEstimatedBudget || proposalDetails?.total_estimated_budget || 0);
+    }
+
+    return costBreakup.reduce((sum: number, item: any) => {
+      const amount = typeof item === 'object' ? (item.amount || 0) : 0;
+      const quantity = typeof item === 'object' ? (item.quantity || 1) : 1;
+      return sum + (Number(amount) * Number(quantity));
+    }, 0);
+  }, [proposalDetails?.costBreakup, claimDetails?.costBreakup, claimDetails?.totalProposedTaxableAmount, proposalDetails?.totalEstimatedBudget]);
+
+  // Use base amount as the target budget for blocking
+  const estimatedBudget = totalBaseAmount;
+
+  // Budget status for signaling (Scenario 2)
+  // Use apiRequest as the primary source of truth, fall back to request
+  const budgetTracking = apiRequest?.budgetTracking || request?.budgetTracking || {};
+  const budgetStatus = budgetTracking?.budgetStatus || budgetTracking?.budget_status || '';
+  const internalOrdersList = apiRequest?.internalOrders || apiRequest?.internal_orders || request?.internalOrders || [];
+  const isAdditionalBlockingNeeded = budgetStatus === 'PROPOSED' && internalOrdersList.length > 0;
+
+  const [ioNumber, setIoNumber] = useState('');
+  const [fetchingAmount, setFetchingAmount] = useState(false);
+  const [fetchedAmount, setFetchedAmount] = useState<number | null>(null);
+  const [amountToBlock, setAmountToBlock] = useState<string>('');
+  const [blockedIOs, setBlockedIOs] = useState<IOBlockedDetails[]>([]);
+  const [blockingBudget, setBlockingBudget] = useState(false);
+
+  // Load existing IO blocks
+  useEffect(() => {
+    if (internalOrdersList.length > 0) {
+      const formattedIOs = internalOrdersList.map((io: any) => {
+        const org = io.organizer || null;
+        const blockedByName = org?.displayName ||
+          org?.display_name ||
+          org?.name ||
+          (org?.firstName && org?.lastName ? `${org.firstName} ${org.lastName}`.trim() : null) ||
+          org?.email ||
+          'Unknown User';
+        return {
+          ioNumber: io.ioNumber || io.io_number,
+          blockedAmount: Number(io.ioBlockedAmount || io.io_blocked_amount || 0),
+          availableBalance: Number(io.ioAvailableBalance || io.io_available_balance || 0),
+          remainingBalance: Number(io.ioRemainingBalance || io.io_remaining_balance || 0),
+          blockedDate: io.organizedAt || io.organized_at || new Date().toISOString(),
+          blockedBy: blockedByName,
+          sapDocumentNumber: io.sapDocumentNumber || io.sap_document_number || '',
+          status: (io.status === 'BLOCKED' ? 'blocked' :
+            io.status === 'RELEASED' ? 'released' :
+              io.status === 'PENDING' ? 'pending' : 'blocked') as any,
+        };
+      });
+      setBlockedIOs(formattedIOs);
+
+      // If we are not in Scenario 2 (additional blocking), set the IO number from the last block for convenience
+      if (!isAdditionalBlockingNeeded && formattedIOs.length > 0) {
+        setIoNumber(formattedIOs[formattedIOs.length - 1].ioNumber);
+      }
+    }
+  }, [apiRequest, request, isAdditionalBlockingNeeded, internalOrdersList]);
+
+  /**
+   * Fetch available budget from SAP
+   * Validates IO number and gets available balance (returns dummy data for now)
+   * Does not store anything in database - only validates
+   */
+  const handleFetchAmount = async () => {
+    if (!ioNumber.trim()) {
+      toast.error('Please enter an IO number');
+      return;
+    }
+
+    if (!requestId) {
+      toast.error('Request ID not found');
+      return;
+    }
+
+    setFetchingAmount(true);
+    try {
+      // Call validate IO endpoint - returns dummy data for now, will integrate with SAP later
+      const ioData = await validateIO(requestId, ioNumber.trim());
+
+      if (ioData.isValid && ioData.availableBalance > 0) {
+        setFetchedAmount(ioData.availableBalance);
+
+        // Calculate total already blocked amount
+        const totalAlreadyBlocked = blockedIOs.reduce((sum, io) => sum + io.blockedAmount, 0);
+
+        // Calculate remaining budget to block
+        const remainingToBlock = Math.max(0, estimatedBudget - totalAlreadyBlocked);
+
+        // Pre-fill amount to block with remaining budget, otherwise use available balance
+        if (remainingToBlock > 0) {
+          setAmountToBlock(String(remainingToBlock.toFixed(2)));
+        } else if (estimatedBudget > 0 && totalAlreadyBlocked === 0) {
+          setAmountToBlock(String(estimatedBudget.toFixed(2)));
+        } else {
+          setAmountToBlock(String(ioData.availableBalance.toFixed(2)));
+        }
+
+        toast.success(`IO fetched from SAP. Available balance: ₹${ioData.availableBalance.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`);
+      } else {
+        toast.error('Invalid IO number or no available balance found');
+        setFetchedAmount(null);
+        setAmountToBlock('');
+      }
+    } catch (error: any) {
+      console.error('Failed to fetch IO budget:', error);
+      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to validate IO number or fetch budget from SAP';
+      toast.error(errorMessage);
+      setFetchedAmount(null);
+    } finally {
+      setFetchingAmount(false);
+    }
+  };
+
+  /**
+   * Block budget in SAP system
+   * This function:
+   * 1. Validates the IO number and amount
+   * 2. Calls SAP to block the budget
+   * 3. Saves IO number, blocked amount, and balance details to database
+   */
+  const handleBlockBudget = async () => {
+    if (!ioNumber.trim() || fetchedAmount === null) {
+      toast.error('Please fetch IO amount first');
+      return;
+    }
+
+    if (!requestId) {
+      toast.error('Request ID not found');
+      return;
+    }
+
+    const blockAmountRaw = parseFloat(amountToBlock);
+
+    if (!amountToBlock || isNaN(blockAmountRaw) || blockAmountRaw <= 0) {
+      toast.error('Please enter a valid amount to block');
+      return;
+    }
+
+    // Round to exactly 2 decimal places to avoid floating point precision issues
+    // Use parseFloat with toFixed to ensure exact 2 decimal precision
+    const blockAmount = parseFloat(blockAmountRaw.toFixed(2));
+
+    if (blockAmount > fetchedAmount) {
+      toast.error('Amount to block exceeds available IO budget');
+      return;
+    }
+
+
+    // Calculate total already blocked
+    const totalAlreadyBlocked = blockedIOs.reduce((sum, io) => sum + io.blockedAmount, 0);
+    const totalPlanned = totalAlreadyBlocked + blockAmount;
+
+    // Validate that total planned must exactly match estimated budget
+    if (estimatedBudget > 0) {
+      const roundedEstimatedBudget = parseFloat(estimatedBudget.toFixed(2));
+      const roundedTotalPlanned = parseFloat(totalPlanned.toFixed(2));
+
+      if (Math.abs(roundedTotalPlanned - roundedEstimatedBudget) > 0.01) {
+        toast.error(`Total blocked amount (₹${roundedTotalPlanned.toLocaleString('en-IN')}) must be exactly equal to the estimated budget (₹${roundedEstimatedBudget.toLocaleString('en-IN')})`);
+        return;
+      }
+    }
+
+    // Blocking budget
+
+    setBlockingBudget(true);
+    try {
+      // Call updateIODetails with blockedAmount to block budget in SAP and store in database
+      // This will store in internal_orders and claim_budget_tracking tables
+      // Note: Backend will recalculate remainingBalance from SAP's response, so we pass it for reference only
+      // Ensure all amounts are rounded to 2 decimal places for consistency
+      const roundedFetchedAmount = parseFloat(fetchedAmount.toFixed(2));
+      const calculatedRemaining = parseFloat((roundedFetchedAmount - blockAmount).toFixed(2));
+      const payload = {
+        ioNumber: ioNumber.trim(),
+        ioAvailableBalance: roundedFetchedAmount,
+        ioBlockedAmount: blockAmount,
+        ioRemainingBalance: calculatedRemaining, // Calculated value (backend will use SAP's actual value)
+      };
+
+      // Sending to backend
+
+      await updateIODetails(requestId, payload);
+
+      // Fetch updated claim details to get the blocked IO data
+      const claimData = await getClaimDetails(requestId);
+      const updatedInternalOrder = claimData?.internalOrder || claimData?.internal_order;
+
+      if (updatedInternalOrder) {
+        const savedBlockedAmount = Number(updatedInternalOrder.ioBlockedAmount || updatedInternalOrder.io_blocked_amount || blockAmount);
+        const savedRemainingBalance = Number(updatedInternalOrder.ioRemainingBalance || updatedInternalOrder.io_remaining_balance || 0);
+
+        // Calculate expected remaining balance for validation/debugging
+        const expectedRemainingBalance = fetchedAmount - savedBlockedAmount;
+
+        // Blocking result processed
+
+        // Warn if the saved amount differs from what we sent
+        if (Math.abs(savedBlockedAmount - blockAmount) > 0.01) {
+          console.warn('[IOTab] ⚠️ Amount mismatch! Sent:', blockAmount, 'Saved:', savedBlockedAmount);
+        }
+
+        // Warn if remaining balance calculation seems incorrect (for backend debugging)
+        if (Math.abs(savedRemainingBalance - expectedRemainingBalance) > 0.01) {
+          console.warn('[IOTab] ⚠️ Remaining balance calculation issue detected!', {
+            availableBalance: fetchedAmount,
+            blockedAmount: savedBlockedAmount,
+            expectedRemaining: expectedRemainingBalance,
+            backendRemaining: savedRemainingBalance,
+            difference: savedRemainingBalance - expectedRemainingBalance,
+          });
+        }
+
+        const currentUser = user as any;
+        // When blocking, always use the current user who is performing the block action
+        // The organizer association may be from initial IO organization, but we want who blocked the amount
+        const blockedByName = currentUser?.displayName ||
+          currentUser?.display_name ||
+          currentUser?.name ||
+          (currentUser?.firstName && currentUser?.lastName ? `${currentUser.firstName} ${currentUser.lastName}`.trim() : null) ||
+          currentUser?.email ||
+          'Current User';
+
+        const blocked: IOBlockedDetails = {
+          ioNumber: updatedInternalOrder.ioNumber || updatedInternalOrder.io_number || ioNumber,
+          blockedAmount: savedBlockedAmount,
+          availableBalance: fetchedAmount, // Available amount before block
+          remainingBalance: savedRemainingBalance,
+          blockedDate: updatedInternalOrder.organizedAt || updatedInternalOrder.organized_at || new Date().toISOString(),
+          blockedBy: blockedByName,
+          sapDocumentNumber: updatedInternalOrder.sapDocumentNumber || updatedInternalOrder.sap_document_number || '',
+          status: 'blocked',
+        };
+
+        setBlockedIOs(prev => [...prev, blocked]);
+        setAmountToBlock(''); // Clear the input
+        setFetchedAmount(null); // Reset fetched state
+        toast.success('IO budget blocked successfully in SAP');
+
+        // Refresh request details
+        onRefresh?.();
+      } else {
+        toast.error('IO blocked but failed to fetch updated details');
+        onRefresh?.();
+      }
+    } catch (error: any) {
+      console.error('Failed to block IO budget:', error);
+      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to block IO budget in SAP';
+      toast.error(errorMessage);
+    } finally {
+      setBlockingBudget(false);
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      {/* IO Budget Management Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <DollarSign className="w-5 h-5 text-[#2d4a3e]" />
+            IO Budget Management
+          </CardTitle>
+          <CardDescription>
+            Enter IO number to fetch available budget from SAP
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* IO Number Input */}
+          <div className="space-y-3">
+            <Label htmlFor="ioNumber">IO Number *</Label>
+            <div className="flex gap-2">
+              <Input
+                id="ioNumber"
+                placeholder="Enter IO number (e.g., IO-2024-12345)"
+                value={ioNumber}
+                onChange={(e) => setIoNumber(e.target.value)}
+                disabled={fetchingAmount || (blockedIOs.length > 0 && !isAdditionalBlockingNeeded)}
+                className="flex-1"
+              />
+              <Button
+                onClick={handleFetchAmount}
+                disabled={!ioNumber.trim() || fetchingAmount || (blockedIOs.length > 0 && !isAdditionalBlockingNeeded)}
+                className="bg-[#2d4a3e] hover:bg-[#1f3329]"
+              >
+                <Download className="w-4 h-4 mr-2" />
+                {fetchingAmount ? 'Fetching...' : 'Fetch Amount'}
+              </Button>
+            </div>
+          </div>
+
+          {/* Instructions when IO number is entered but not fetched */}
+          {!fetchedAmount && blockedIOs.length === 0 && ioNumber.trim() && (
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+              <p className="text-sm text-blue-800">
+                <strong>Next Step:</strong> Click "Fetch Amount" to validate the IO number and get available balance from SAP.
+              </p>
+            </div>
+          )}
+
+          {/* Fetched Amount Display */}
+          {fetchedAmount !== null && (blockedIOs.length === 0 || isAdditionalBlockingNeeded) && (
+            <>
+              <div className="bg-green-50 border-2 border-green-200 rounded-lg p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-xs text-gray-600 uppercase tracking-wide mb-1">Available Amount</p>
+                    <p className="text-2xl font-bold text-green-700">
+                      ₹{fetchedAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                    </p>
+                  </div>
+                  <CircleCheckBig className="w-8 h-8 text-green-600" />
+                </div>
+                <div className="mt-3 pt-3 border-t border-green-200">
+                  <p className="text-xs text-gray-600"><strong>IO Number:</strong> {ioNumber}</p>
+                  <p className="text-xs text-gray-600 mt-1"><strong>Fetched from:</strong> SAP System</p>
+                </div>
+              </div>
+
+              {/* Amount to Block Input */}
+              <div className="space-y-3">
+                <Label htmlFor="blockAmount">Amount to Block *</Label>
+                <div className="relative">
+                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">₹</span>
+                  <Input
+                    type="number"
+                    id="blockAmount"
+                    placeholder="Enter amount to block"
+                    min="0"
+                    step="0.01"
+                    value={amountToBlock}
+                    onChange={(e) => setAmountToBlock(e.target.value)}
+                    className="pl-8"
+                  />
+                </div>
+                {estimatedBudget > 0 && (
+                  <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
+                    <p className="text-xs text-amber-800">
+                      <strong>Required:</strong> Amount must be exactly equal to the estimated budget: <strong>₹{estimatedBudget.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong>
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              {/* Block Button */}
+              <Button
+                onClick={handleBlockBudget}
+                disabled={
+                  blockingBudget ||
+                  !amountToBlock ||
+                  parseFloat(amountToBlock) <= 0 ||
+                  parseFloat(amountToBlock) > fetchedAmount ||
+                  (estimatedBudget > 0 && Math.abs((blockedIOs.reduce((s, i) => s + i.blockedAmount, 0) + parseFloat(amountToBlock)) - estimatedBudget) > 0.01)
+                }
+                className="w-full bg-[#2d4a3e] hover:bg-[#1f3329]"
+              >
+                <Target className="w-4 h-4 mr-2" />
+                {blockingBudget ? 'Blocking in SAP...' : 'Block IO in SAP'}
+              </Button>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* IO Blocked Details Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <CircleCheckBig className="w-5 h-5 text-green-600" />
+            IO Blocked Details
+          </CardTitle>
+          <CardDescription>
+            Details of IO blocked in SAP system
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {blockedIOs.length > 0 ? (
+            <div className="space-y-6">
+              {isAdditionalBlockingNeeded && (
+                <div className="bg-amber-50 border-2 border-amber-500 rounded-lg p-4 animate-pulse">
+                  <div className="flex items-start gap-3">
+                    <CircleAlert className="w-6 h-6 text-amber-600 flex-shrink-0 mt-0.5" />
+                    <div>
+                      <p className="font-semibold text-amber-900">Additional Budget Blocking Required</p>
+                      <p className="text-sm text-amber-700 mt-1">Actual expenses exceed the previously blocked amount. Please block an additional ₹{(estimatedBudget - blockedIOs.reduce((s, i) => s + i.blockedAmount, 0)).toLocaleString('en-IN', { minimumFractionDigits: 2 })}.</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {blockedIOs.slice().reverse().map((io, idx) => (
+                <div key={idx} className="border rounded-lg overflow-hidden">
+                  <div className={`p-3 flex justify-between items-center ${idx === 0 ? 'bg-green-50' : 'bg-gray-50'}`}>
+                    <span className="font-semibold text-sm">IO: {io.ioNumber}</span>
+                    <Badge className={
+                      io.status === 'blocked' ? 'bg-green-100 text-green-800' :
+                        io.status === 'pending' ? 'bg-amber-100 text-amber-800' :
+                          'bg-blue-100 text-blue-800'
+                    }>
+                      {io.status === 'blocked' ? 'Blocked' :
+                        io.status === 'pending' ? 'Provisioned' : 'Released'}
+                    </Badge>
+                  </div>
+                  <div className="grid grid-cols-2 divide-x divide-y">
+                    <div className="p-3">
+                      <p className="text-[10px] text-gray-500 uppercase">Amount</p>
+                      <p className="text-sm font-bold text-green-700">₹{io.blockedAmount.toLocaleString('en-IN')}</p>
+                    </div>
+                    <div className="p-3">
+                      <p className="text-[10px] text-gray-500 uppercase">SAP Doc</p>
+                      <p className="text-sm font-medium">{io.sapDocumentNumber || 'N/A'}</p>
+                    </div>
+                    <div className="p-3">
+                      <p className="text-[10px] text-gray-500 uppercase">Blocked By</p>
+                      <p className="text-xs">{io.blockedBy}</p>
+                    </div>
+                    <div className="p-3">
+                      <p className="text-[10px] text-gray-500 uppercase">Date</p>
+                      <p className="text-[10px]">{new Date(io.blockedDate).toLocaleString()}</p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+
+              <div className="mt-4 p-4 bg-[#2d4a3e] text-white rounded-lg flex justify-between items-center">
+                <span className="font-bold">Total Blocked:</span>
+                <span className="text-xl font-bold">₹{blockedIOs.reduce((s, i) => s + i.blockedAmount, 0).toLocaleString('en-IN', { minimumFractionDigits: 2 })}</span>
+              </div>
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <DollarSign className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+              <p className="text-sm text-gray-500 mb-2">No IO blocked yet</p>
+              <p className="text-xs text-gray-400">
+                Enter IO number and fetch amount to block budget
+              </p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/dealer-claim/components/request-detail/OverviewTab.tsx

@@ -0,0 +1,296 @@
+/**
+ * Dealer Claim Request Overview Tab
+ * 
+ * This component is specific to Dealer Claim requests.
+ * Located in: src/dealer-claim/components/request-detail/
+ */
+
+import {
+  ActivityInformationCard,
+  DealerInformationCard,
+  ProposalDetailsCard,
+  RequestInitiatorCard,
+} from './claim-cards';
+import { isClaimManagementRequest } from '@/utils/claimRequestUtils';
+import {
+  mapToClaimManagementRequest,
+  determineUserRole,
+  getRoleBasedVisibility,
+  type RequestRole,
+} from '@/utils/claimDataMapper';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { RichTextEditor } from '@/components/ui/rich-text-editor';
+import { FormattedDescription } from '@/components/common/FormattedDescription';
+import { CheckCircle, RefreshCw, Loader2 } from 'lucide-react';
+import { formatDateTime } from '@/utils/dateFormatter';
+
+interface ClaimManagementOverviewTabProps {
+  request: any; // Original request object
+  apiRequest: any; // API request data
+  currentUserId: string;
+  isInitiator: boolean;
+  onEditClaimAmount?: () => void;
+  className?: string;
+  // Closure props
+  needsClosure?: boolean;
+  conclusionRemark?: string;
+  setConclusionRemark?: (value: string) => void;
+  conclusionLoading?: boolean;
+  conclusionSubmitting?: boolean;
+  aiGenerated?: boolean;
+  handleGenerateConclusion?: () => void;
+  handleFinalizeConclusion?: () => void;
+  generationAttempts?: number;
+  generationFailed?: boolean;
+  maxAttemptsReached?: boolean;
+}
+
+export function ClaimManagementOverviewTab({
+  request: _request,
+  apiRequest,
+  currentUserId,
+  isInitiator: _isInitiator,
+  onEditClaimAmount: _onEditClaimAmount,
+  className = '',
+  needsClosure = false,
+  conclusionRemark = '',
+  setConclusionRemark,
+  conclusionLoading = false,
+  conclusionSubmitting = false,
+  aiGenerated = false,
+  handleGenerateConclusion,
+  handleFinalizeConclusion,
+  generationAttempts = 0,
+  generationFailed = false,
+  maxAttemptsReached = false,
+}: ClaimManagementOverviewTabProps) {
+  // Check if this is a claim management request
+  if (!isClaimManagementRequest(apiRequest)) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        <p>This is not a claim management request.</p>
+      </div>
+    );
+  }
+
+  // Map API data to claim management structure
+  const claimRequest = mapToClaimManagementRequest(apiRequest, currentUserId);
+  
+  if (!claimRequest) {
+    console.warn('[ClaimManagementOverviewTab] Failed to map claim data:', {
+      apiRequest,
+      hasClaimDetails: !!apiRequest?.claimDetails,
+      hasProposalDetails: !!apiRequest?.proposalDetails,
+      hasCompletionDetails: !!apiRequest?.completionDetails,
+    });
+    return (
+      <div className="text-center py-8 text-gray-500">
+        <p>Unable to load claim management data.</p>
+        <p className="text-xs mt-2">Please ensure the request has been properly initialized.</p>
+      </div>
+    );
+  }
+
+  // Mapped claim data ready
+
+  // Determine user's role
+  const userRole: RequestRole = determineUserRole(apiRequest, currentUserId);
+  
+  // Get visibility settings based on role
+  const visibility = getRoleBasedVisibility(userRole);
+  
+  // User role and visibility determined
+
+  // Extract initiator info from request
+  // The apiRequest has initiator object with displayName, email, department, phone, etc.
+  const initiatorInfo = {
+    name: apiRequest.initiator?.name || apiRequest.initiator?.displayName || apiRequest.initiator?.email || 'Unknown',
+    role: apiRequest.initiator?.role || apiRequest.initiator?.designation || 'Initiator',
+    department: apiRequest.initiator?.department || apiRequest.department || '',
+    email: apiRequest.initiator?.email || 'N/A',
+    phone: apiRequest.initiator?.phone || apiRequest.initiator?.mobile,
+  };
+
+  // Closure setup check completed
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {/* Activity Information - Always visible */}
+      {/* Dealer-claim module: Business logic for preparing timestamp data */}
+      <ActivityInformationCard 
+        activityInfo={claimRequest.activityInfo}
+        createdAt={apiRequest?.createdAt}
+        updatedAt={apiRequest?.updatedAt}
+      />
+
+      {/* Dealer Information - Always visible */}
+      <DealerInformationCard dealerInfo={claimRequest.dealerInfo} />
+
+      {/* Proposal Details - Only shown after dealer submits proposal */}
+      {visibility.showProposalDetails && claimRequest.proposalDetails && (
+        <ProposalDetailsCard proposalDetails={claimRequest.proposalDetails} />
+      )}
+
+      {/* Request Initiator */}
+      <RequestInitiatorCard initiatorInfo={initiatorInfo} />
+
+      {/* Closed Request Conclusion Remark Display */}
+      {apiRequest?.status === 'closed' && apiRequest?.conclusionRemark && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <CheckCircle className="w-5 h-5 text-gray-600" />
+              Conclusion Remark
+            </CardTitle>
+            <CardDescription className="mt-1 text-xs sm:text-sm">Final summary of this closed request</CardDescription>
+          </CardHeader>
+          <CardContent className="pt-4">
+            <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+              <FormattedDescription 
+                content={apiRequest.conclusionRemark || ''} 
+                className="text-sm"
+              />
+            </div>
+
+            {apiRequest.closureDate && (
+              <div className="mt-3 flex items-center justify-between text-xs text-gray-500 border-t border-gray-200 pt-3">
+                <span>Request closed on {formatDateTime(apiRequest.closureDate)}</span>
+                <span>By {initiatorInfo.name}</span>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Conclusion Remark Section - Closure Setup */}
+      {needsClosure && (
+        <Card data-testid="conclusion-remark-card">
+          <CardHeader className={`bg-gradient-to-r border-b ${
+            (apiRequest?.status || '').toLowerCase() === 'rejected' 
+              ? 'from-red-50 to-rose-50 border-red-200' 
+              : 'from-green-50 to-emerald-50 border-green-200'
+          }`}>
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+              <div>
+                <CardTitle className={`flex items-center gap-2 text-base sm:text-lg ${
+                  (apiRequest?.status || '').toLowerCase() === 'rejected' ? 'text-red-700' : 'text-green-700'
+                }`}>
+                  <CheckCircle className={`w-5 h-5 ${
+                    (apiRequest?.status || '').toLowerCase() === 'rejected' ? 'text-red-600' : 'text-green-600'
+                  }`} />
+                  Conclusion Remark - Final Step
+                </CardTitle>
+                <CardDescription className="mt-1 text-xs sm:text-sm">
+                  {(apiRequest?.status || '').toLowerCase() === 'rejected' 
+                    ? 'This request was rejected. Please review the AI-generated closure remark and finalize it to close this request.'
+                    : 'All approvals are complete. Please review and finalize the conclusion to close this request.'}
+                </CardDescription>
+              </div>
+              {handleGenerateConclusion && (
+                <div className="flex flex-col items-end gap-1.5">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleGenerateConclusion}
+                    disabled={conclusionLoading || maxAttemptsReached}
+                    className="gap-2 shrink-0 h-9"
+                    data-testid="generate-ai-conclusion-button"
+                  >
+                    <RefreshCw className={`w-3.5 h-3.5 ${conclusionLoading ? 'animate-spin' : ''}`} />
+                    {aiGenerated ? 'Regenerate' : 'Generate with AI'}
+                  </Button>
+                  {aiGenerated && !maxAttemptsReached && !generationFailed && (
+                     <span className="text-[10px] text-gray-500 font-medium px-1">
+                      {2 - generationAttempts} attempts remaining
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+          </CardHeader>
+          <CardContent className="pt-4">
+            {conclusionLoading ? (
+              <div className="flex items-center justify-center py-8" data-testid="conclusion-loading">
+                <div className="text-center">
+                  <Loader2 className="w-8 h-8 text-blue-600 animate-spin mx-auto mb-2" />
+                  <p className="text-sm text-gray-600">Preparing conclusion remark...</p>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <label className="text-sm font-medium text-gray-700">Conclusion Remark</label>
+                    {aiGenerated && (
+                      <span className="text-xs text-blue-600" data-testid="ai-generated-label">
+                        ✓ System-generated suggestion (editable)
+                      </span>
+                    )}
+                  </div>
+
+                  {setConclusionRemark && (
+                    <RichTextEditor
+                      value={conclusionRemark}
+                      onChange={(html) => setConclusionRemark(html)}
+                      placeholder="Enter a professional conclusion remark summarizing the request outcome, key decisions, and approvals..."
+                      className="text-sm"
+                      minHeight="160px"
+                      data-testid="conclusion-remark-textarea"
+                    />
+                  )}
+                  <p className="text-xs text-blue-600 mt-1">
+                    💡 Tip: You can paste formatted content (lists, tables) and the formatting will be preserved.
+                  </p>
+
+                  <div className="flex items-center justify-between mt-2">
+                    <p className="text-xs text-gray-500">This will be the final summary for this request</p>
+                    <p className="text-xs text-gray-500" data-testid="character-count">
+                      {conclusionRemark ? conclusionRemark.replace(/<[^>]*>/g, '').length : 0} / 2000 characters
+                    </p>
+                  </div>
+                </div>
+
+                <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                  <p className="text-xs sm:text-sm font-semibold text-blue-900 mb-1.5">Finalizing this request will:</p>
+                  <ul className="text-xs sm:text-sm text-blue-800 space-y-0.5 pl-4">
+                    <li className="list-disc">Change request status to "CLOSED"</li>
+                    <li className="list-disc">Notify all participants of closure</li>
+                    <li className="list-disc">Move request to Closed Requests</li>
+                    <li className="list-disc">Save conclusion remark permanently</li>
+                  </ul>
+                </div>
+
+                {handleFinalizeConclusion && (
+                  <div className="flex gap-3 justify-end pt-3 border-t">
+                    <Button
+                      onClick={handleFinalizeConclusion}
+                      disabled={conclusionSubmitting || !conclusionRemark.trim()}
+                      className="bg-green-600 hover:bg-green-700 text-white"
+                      data-testid="finalize-close-button"
+                    >
+                      {conclusionSubmitting ? (
+                        <>
+                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                          Finalizing...
+                        </>
+                      ) : (
+                        <>
+                          <CheckCircle className="w-4 h-4 mr-2" />
+                          Finalize & Close Request
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+// Export as DealerClaimOverviewTab for consistency
+export { ClaimManagementOverviewTab as DealerClaimOverviewTab };

src/dealer-claim/components/request-detail/claim-cards/ActivityInformationCard.tsx

@@ -0,0 +1,227 @@
+/**
+ * ActivityInformationCard Component
+ * Displays activity details for Claim Management requests
+ */
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Calendar, MapPin, DollarSign, Receipt } from 'lucide-react';
+import { ClaimActivityInfo } from '@/pages/RequestDetail/types/claimManagement.types';
+import { format } from 'date-fns';
+import { formatDateTime } from '@/utils/dateFormatter';
+import { FormattedDescription } from '@/components/common/FormattedDescription';
+
+interface ActivityInformationCardProps {
+  activityInfo: ClaimActivityInfo;
+  className?: string;
+  // Plug-and-play: Pass timestamps from module's business logic
+  createdAt?: string | Date;
+  updatedAt?: string | Date;
+}
+
+export function ActivityInformationCard({
+  activityInfo,
+  className,
+  createdAt,
+  updatedAt
+}: ActivityInformationCardProps) {
+  // Defensive check: Ensure activityInfo exists
+  if (!activityInfo) {
+    console.warn('[ActivityInformationCard] activityInfo is missing');
+    return (
+      <Card className={className}>
+        <CardContent className="py-8 text-center text-gray-500">
+          <p>Activity information not available</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const formatCurrency = (amount: string | number) => {
+    const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
+    if (isNaN(numAmount)) return 'N/A';
+    return `₹${numAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  };
+
+  const formatDate = (dateString?: string) => {
+    if (!dateString) return 'N/A';
+    try {
+      return format(new Date(dateString), 'MMM d, yyyy');
+    } catch {
+      return dateString;
+    }
+  };
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Calendar className="w-5 h-5 text-blue-600" />
+          Activity Information
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          {/* Activity Name */}
+          <div>
+            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+              Activity Name
+            </label>
+            <p className="text-sm text-gray-900 font-medium mt-1">
+              {activityInfo.activityName}
+            </p>
+          </div>
+
+          {/* Activity Type */}
+          <div>
+            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+              Activity Type
+            </label>
+            <p className="text-sm text-gray-900 font-medium mt-1">
+              {activityInfo.activityType}
+            </p>
+          </div>
+
+          {/* Location */}
+          <div>
+            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+              Location
+            </label>
+            <p className="text-sm text-gray-900 font-medium mt-1 flex items-center gap-2">
+              <MapPin className="w-4 h-4 text-gray-400" />
+              {activityInfo.location}
+            </p>
+          </div>
+
+          {/* Requested Date */}
+          <div>
+            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+              Requested Date
+            </label>
+            <p className="text-sm text-gray-900 font-medium mt-1">
+              {formatDate(activityInfo.requestedDate)}
+            </p>
+          </div>
+
+          {/* Estimated Budget */}
+          <div>
+            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+              Estimated Budget
+            </label>
+            <p className="text-sm text-gray-900 font-medium mt-1 flex items-center gap-2">
+              <DollarSign className="w-4 h-4 text-green-600" />
+              {activityInfo.estimatedBudget !== undefined && activityInfo.estimatedBudget !== null
+                ? formatCurrency(activityInfo.estimatedBudget)
+                : 'TBD'}
+            </p>
+          </div>
+
+          {/* Closed Expenses - Show if value exists (including 0) */}
+          {activityInfo.closedExpenses !== undefined && activityInfo.closedExpenses !== null && (
+            <div>
+              <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                Closed Expenses
+              </label>
+              <p className="text-sm text-gray-900 font-medium mt-1 flex items-center gap-2">
+                <Receipt className="w-4 h-4 text-blue-600" />
+                {formatCurrency(
+                  activityInfo.closedExpensesBreakdown && activityInfo.closedExpensesBreakdown.length > 0
+                    ? activityInfo.closedExpensesBreakdown.reduce((sum, item: any) => sum + (item.totalAmt || (Number(item.amount) + Number(item.gstAmt || 0))), 0)
+                    : activityInfo.closedExpenses
+                )}
+              </p>
+            </div>
+          )}
+
+          {/* Period */}
+          {activityInfo.period && (
+            <div className="col-span-2">
+              <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                Period
+              </label>
+              <p className="text-sm text-gray-900 font-medium mt-1">
+                {formatDate(activityInfo.period.startDate)} - {formatDate(activityInfo.period.endDate)}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Closed Expenses Breakdown */}
+        {activityInfo.closedExpensesBreakdown && activityInfo.closedExpensesBreakdown.length > 0 && (
+          <div className="pt-4 border-t">
+            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-3 block">
+              Closed Expenses Breakdown
+            </label>
+            <div className="bg-blue-50 border border-blue-200 rounded-lg overflow-hidden">
+              <table className="w-full text-xs sm:text-sm">
+                <thead className="bg-blue-100/50">
+                  <tr>
+                    <th className="px-3 py-2 text-left font-semibold text-blue-900">Description</th>
+                    <th className="px-3 py-2 text-right font-semibold text-blue-900 w-24">Base</th>
+                    <th className="px-3 py-2 text-right font-semibold text-blue-900 w-24">GST</th>
+                    <th className="px-3 py-2 text-right font-semibold text-blue-900 w-28">Total</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-blue-200/50">
+                  {activityInfo.closedExpensesBreakdown.map((item: any, index: number) => (
+                    <tr key={index} className="hover:bg-blue-100/30">
+                      <td className="px-3 py-2 text-gray-700">
+                        {item.description}
+                        {item.gstRate ? <span className="text-[10px] text-gray-400 block">{item.gstRate}% GST</span> : null}
+                      </td>
+                      <td className="px-3 py-2 text-right text-gray-900">{formatCurrency(item.amount)}</td>
+                      <td className="px-3 py-2 text-right text-gray-900">{formatCurrency(item.gstAmt || 0)}</td>
+                      <td className="px-3 py-2 text-right font-medium text-gray-900">
+                        {formatCurrency(item.totalAmt || (Number(item.amount) + Number(item.gstAmt || 0)))}
+                      </td>
+                    </tr>
+                  ))}
+                  <tr className="bg-blue-100/50 font-bold">
+                    <td colSpan={3} className="px-3 py-2 text-blue-900">Final Claim Amount</td>
+                    <td className="px-3 py-2 text-right text-blue-700">
+                      {formatCurrency(
+                        activityInfo.closedExpensesBreakdown.reduce((sum: number, item: any) => sum + (item.totalAmt || (Number(item.amount) + Number(item.gstAmt || 0))), 0)
+                      )}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {/* Description */}
+        {activityInfo.description && (
+          <div className="pt-4 border-t">
+            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+              Description
+            </label>
+            <div className="mt-2 bg-gray-50 p-3 rounded-lg border border-gray-200">
+              <FormattedDescription
+                content={activityInfo.description || ''}
+                className="text-sm"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Timestamps - Similar to Request Details Card */}
+        {(createdAt || updatedAt) && (
+          <div className="grid grid-cols-2 gap-4 pt-4 border-t border-gray-300">
+            {createdAt && (
+              <div>
+                <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Created</label>
+                <p className="text-sm text-gray-900 font-medium mt-1">{formatDateTime(createdAt)}</p>
+              </div>
+            )}
+            {updatedAt && (
+              <div>
+                <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Last Updated</label>
+                <p className="text-sm text-gray-900 font-medium mt-1">{formatDateTime(updatedAt)}</p>
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

src/dealer-claim/components/request-detail/claim-cards/CloserCard.tsx

@@ -0,0 +1,118 @@
+/**
+ * CloserCard Component
+ * Displays who closed the request and closure details
+ */
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Mail, Calendar, FileText } from 'lucide-react';
+import { formatDateTime } from '@/utils/dateFormatter';
+
+interface CloserInfo {
+  name?: string;
+  role?: string;
+  department?: string;
+  email?: string;
+  closureDate?: string;
+  conclusionRemark?: string;
+}
+
+interface CloserCardProps {
+  closerInfo: CloserInfo;
+  className?: string;
+}
+
+export function CloserCard({ closerInfo, className }: CloserCardProps) {
+  // If no closure date, don't render
+  if (!closerInfo.closureDate) {
+    return null;
+  }
+
+  // Generate initials from name
+  const getInitials = (name?: string) => {
+    if (!name) return 'CL';
+    return name
+      .split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  const closerName = closerInfo.name || 'System';
+  const hasCloserInfo = closerInfo.name || closerInfo.email;
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="text-base">Request Closer</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {hasCloserInfo ? (
+          <div className="flex items-start gap-4">
+            <Avatar className="h-14 w-14 ring-2 ring-white shadow-md">
+              <AvatarFallback className="bg-green-700 text-white font-semibold text-lg">
+                {getInitials(closerInfo.name)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex-1">
+              <h3 className="font-semibold text-gray-900">{closerName}</h3>
+              {closerInfo.role && (
+                <p className="text-sm text-gray-600">{closerInfo.role}</p>
+              )}
+              {closerInfo.department && (
+                <p className="text-sm text-gray-500">{closerInfo.department}</p>
+              )}
+              
+              <div className="mt-3 space-y-2">
+                {/* Email */}
+                {closerInfo.email && (
+                  <div className="flex items-center gap-2 text-sm text-gray-600">
+                    <Mail className="w-4 h-4" />
+                    <span>{closerInfo.email}</span>
+                  </div>
+                )}
+
+                {/* Closure Date */}
+                {closerInfo.closureDate && (
+                  <div className="flex items-center gap-2 text-sm text-gray-600">
+                    <Calendar className="w-4 h-4" />
+                    <span>Closed on {formatDateTime(closerInfo.closureDate, { includeTime: true, format: 'short' })}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <p className="text-sm text-gray-600">Request closed by system</p>
+            {closerInfo.closureDate && (
+              <div className="flex items-center gap-2 text-sm text-gray-600">
+                <Calendar className="w-4 h-4" />
+                <span>Closed on {formatDateTime(closerInfo.closureDate, { includeTime: true, format: 'short' })}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Conclusion Remark */}
+        {closerInfo.conclusionRemark && (
+          <div className="mt-4 pt-4 border-t border-gray-200">
+            <div className="flex items-start gap-2">
+              <FileText className="w-4 h-4 text-gray-500 mt-0.5 flex-shrink-0" />
+              <div className="flex-1">
+                <p className="text-xs font-medium text-gray-600 uppercase tracking-wider mb-1">
+                  Conclusion Remark
+                </p>
+                <p className="text-sm text-gray-700 whitespace-pre-wrap">
+                  {closerInfo.conclusionRemark}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+

src/dealer-claim/components/request-detail/claim-cards/DealerInformationCard.tsx

@@ -5,7 +5,7 @@
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Building, Mail, Phone, MapPin } from 'lucide-react';
-import { DealerInfo } from '../../types/claimManagement.types';
+import { DealerInfo } from '@/pages/RequestDetail/types/claimManagement.types';
 
 interface DealerInformationCardProps {
   dealerInfo: DealerInfo;
@@ -13,6 +13,30 @@ interface DealerInformationCardProps {
 }
 
 export function DealerInformationCard({ dealerInfo, className }: DealerInformationCardProps) {
+  // Defensive check: Ensure dealerInfo exists
+  if (!dealerInfo) {
+    console.warn('[DealerInformationCard] dealerInfo is missing');
+    return (
+      <Card className={className}>
+        <CardContent className="py-8 text-center text-gray-500">
+          <p>Dealer information not available</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Check if essential fields are present
+  if (!dealerInfo.dealerCode && !dealerInfo.dealerName) {
+    console.warn('[DealerInformationCard] Dealer info missing essential fields:', dealerInfo);
+    return (
+      <Card className={className}>
+        <CardContent className="py-8 text-center text-gray-500">
+          <p>Dealer information incomplete</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
   return (
     <Card className={className}>
       <CardHeader>
@@ -72,5 +96,3 @@ export function DealerInformationCard({ dealerInfo, className }: DealerInformati
     </Card>
   );
 }
-
-

src/dealer-claim/components/request-detail/claim-cards/ProcessDetailsCard.tsx

@@ -1,6 +1,6 @@
 /**
  * ProcessDetailsCard Component
- * Displays process-related details: IO Number, DMS Number, Claim Amount, and Budget Breakdowns
+ * Displays process-related details: IO Number, E-Invoice, Claim Amount, and Budget Breakdowns
  * Visibility controlled by user role
  */
 
@@ -8,15 +8,51 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Activity, Receipt, DollarSign, Pen } from 'lucide-react';
-import {
-  IODetails,
-  DMSDetails,
-  ClaimAmountDetails,
-  CostBreakdownItem,
-  RoleBasedVisibility,
-} from '../../types/claimManagement.types';
 import { format } from 'date-fns';
 
+// Local minimal types to avoid external dependency issues
+interface IODetails {
+  ioNumber?: string;
+  remarks?: string;
+  availableBalance?: number;
+  blockedAmount?: number;
+  remainingBalance?: number;
+  blockedByName?: string;
+  blockedAt?: string;
+}
+
+interface DMSDetails {
+  dmsNumber?: string;
+  remarks?: string;
+  createdByName?: string;
+  createdAt?: string;
+  // PWC fields
+  irn?: string;
+  ackNo?: string;
+  ackDate?: string;
+  signedInvoiceUrl?: string;
+}
+
+interface ClaimAmountDetails {
+  amount: number;
+  lastUpdatedBy?: string;
+  lastUpdatedAt?: string;
+}
+
+interface CostBreakdownItem {
+  description: string;
+  amount: number;
+  gstAmt?: number;
+  totalAmt?: number;
+}
+
+interface RoleBasedVisibility {
+  showIODetails: boolean;
+  showDMSDetails: boolean;
+  showClaimAmount: boolean;
+  canEditClaimAmount: boolean;
+}
+
 interface ProcessDetailsCardProps {
   ioDetails?: IODetails;
   dmsDetails?: DMSDetails;
@@ -38,29 +74,34 @@ export function ProcessDetailsCard({
   onEditClaimAmount,
   className,
 }: ProcessDetailsCardProps) {
-  const formatCurrency = (amount: number) => {
+  const formatCurrency = (amount?: number | null) => {
+    if (amount === undefined || amount === null || Number.isNaN(amount)) {
+      return '₹0.00';
+    }
     return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
   };
 
-  const formatDate = (dateString: string) => {
+  const formatDate = (dateString?: string | null) => {
+    if (!dateString) return '';
     try {
       return format(new Date(dateString), 'MMM d, yyyy, h:mm a');
     } catch {
-      return dateString;
+      return dateString || '';
     }
   };
 
-  const calculateTotal = (items: CostBreakdownItem[]) => {
-    return items.reduce((sum, item) => sum + item.amount, 0);
+  const calculateTotal = (items?: CostBreakdownItem[]) => {
+    if (!items || items.length === 0) return 0;
+    return items.reduce((sum, item) => sum + (item.totalAmt ?? (item.amount + (item.gstAmt ?? 0))), 0);
   };
 
   // Don't render if nothing to show
   const hasContent =
     (visibility.showIODetails && ioDetails) ||
     (visibility.showDMSDetails && dmsDetails) ||
-    (visibility.showClaimAmount && claimAmount) ||
-    estimatedBudgetBreakdown ||
-    closedExpensesBreakdown;
+    (visibility.showClaimAmount && claimAmount && claimAmount.amount !== undefined && claimAmount.amount !== null) ||
+    (estimatedBudgetBreakdown && estimatedBudgetBreakdown.length > 0) ||
+    (closedExpensesBreakdown && closedExpensesBreakdown.length > 0);
 
   if (!hasContent) {
     return null;
@@ -131,27 +172,57 @@ export function ProcessDetailsCard({
           </div>
         )}
 
-        {/* DMS Details */}
+        {/* E-Invoice Details */}
         {visibility.showDMSDetails && dmsDetails && (
           <div className="bg-white rounded-lg p-3 border border-purple-200">
             <div className="flex items-center gap-2 mb-2">
               <Activity className="w-4 h-4 text-purple-600" />
               <Label className="text-xs font-semibold text-purple-900 uppercase tracking-wide">
-                DMS Number
+                E-Invoice Details
               </Label>
             </div>
-            <p className="font-bold text-gray-900 mb-2">{dmsDetails.dmsNumber}</p>
+
+            <div className="grid grid-cols-2 gap-3 mb-2">
+
+              {dmsDetails.ackNo && (
+                <div>
+                  <p className="text-[10px] text-gray-500 uppercase">Ack No</p>
+                  <p className="font-bold text-sm text-purple-700">{dmsDetails.ackNo}</p>
+                </div>
+              )}
+            </div>
+
+            {dmsDetails.irn && (
+              <div className="mb-2 p-2 bg-purple-50 rounded border border-purple-100">
+                <p className="text-[10px] text-purple-600 uppercase font-semibold">IRN</p>
+                <p className="text-[10px] font-mono break-all text-gray-700 leading-tight">
+                  {dmsDetails.irn}
+                </p>
+              </div>
+            )}
+
+            {dmsDetails.signedInvoiceUrl && (
+              <Button
+                variant="outline"
+                size="sm"
+                className="w-full h-8 text-xs gap-2 mb-2 border-purple-200 text-purple-700 hover:bg-purple-50"
+                onClick={() => window.open(dmsDetails.signedInvoiceUrl, '_blank')}
+              >
+                <Receipt className="w-3.5 h-3.5" />
+                View E-Invoice
+              </Button>
+            )}
 
             {dmsDetails.remarks && (
               <div className="pt-2 border-t border-purple-100">
-                <p className="text-xs text-gray-600 mb-1">Remarks:</p>
+                <p className="text-[10px] text-gray-500 uppercase mb-1">Remarks</p>
                 <p className="text-xs text-gray-900">{dmsDetails.remarks}</p>
               </div>
             )}
 
             <div className="pt-2 border-t border-purple-100 mt-2">
-              <p className="text-xs text-gray-500">By {dmsDetails.createdByName}</p>
-              <p className="text-xs text-gray-500">{formatDate(dmsDetails.createdAt)}</p>
+              <p className="text-[10px] text-gray-500">By {dmsDetails.createdByName}</p>
+              <p className="text-[10px] text-gray-500">{formatDate(dmsDetails.createdAt)}</p>
             </div>
           </div>
         )}
@@ -207,10 +278,10 @@ export function ProcessDetailsCard({
             </div>
             <div className="space-y-1.5 pt-1">
               {estimatedBudgetBreakdown.map((item, index) => (
-                <div key={index} className="flex justify-between items-center text-xs">
-                  <span className="text-gray-700">{item.description}</span>
-                  <span className="font-medium text-gray-900">
-                    {formatCurrency(item.amount)}
+                <div key={index} className="flex justify-between items-center text-[10px] sm:text-xs">
+                  <div className="text-gray-700 truncate mr-2" title={item.description}>{item.description}</div>
+                  <span className="font-medium text-gray-900 whitespace-nowrap">
+                    {formatCurrency(item.totalAmt ?? (item.amount + (item.gstAmt ?? 0)))}
                   </span>
                 </div>
               ))}
@@ -235,10 +306,10 @@ export function ProcessDetailsCard({
             </div>
             <div className="space-y-1.5 pt-1">
               {closedExpensesBreakdown.map((item, index) => (
-                <div key={index} className="flex justify-between items-center text-xs">
-                  <span className="text-gray-700">{item.description}</span>
-                  <span className="font-medium text-gray-900">
-                    {formatCurrency(item.amount)}
+                <div key={index} className="flex justify-between items-center text-[10px] sm:text-xs">
+                  <div className="text-gray-700 truncate mr-2" title={item.description}>{item.description}</div>
+                  <span className="font-medium text-gray-900 whitespace-nowrap">
+                    {formatCurrency(item.totalAmt ?? (item.amount + (item.gstAmt ?? 0)))}
                   </span>
                 </div>
               ))}
@@ -255,5 +326,3 @@ export function ProcessDetailsCard({
     </Card>
   );
 }
-
-

src/dealer-claim/components/request-detail/claim-cards/ProposalDetailsCard.tsx

@@ -5,32 +5,81 @@
 
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Receipt, Calendar } from 'lucide-react';
-import { ProposalDetails } from '../../types/claimManagement.types';
 import { format } from 'date-fns';
 
+// Minimal local types to avoid missing imports during runtime
+interface ProposalCostItem {
+  description: string;
+  amount?: number | null;
+  gstRate?: number;
+  gstAmt?: number;
+  cgstAmt?: number;
+  sgstAmt?: number;
+  igstAmt?: number;
+  quantity?: number;
+  totalAmt?: number;
+}
+
+interface ProposalDetails {
+  costBreakup: ProposalCostItem[];
+  estimatedBudgetTotal?: number | null;
+  totalEstimatedBudget?: number | null;
+  timelineForClosure?: string | null;
+  dealerComments?: string | null;
+  submittedOn?: string | null;
+}
+
 interface ProposalDetailsCardProps {
   proposalDetails: ProposalDetails;
   className?: string;
 }
 
 export function ProposalDetailsCard({ proposalDetails, className }: ProposalDetailsCardProps) {
-  const formatCurrency = (amount: number) => {
+  // Calculate estimated total from costBreakup if not provided
+  const calculateEstimatedTotal = () => {
+    const total = proposalDetails.totalEstimatedBudget ?? proposalDetails.estimatedBudgetTotal;
+    if (total !== undefined && total !== null) {
+      return total;
+    }
+
+    // Calculate sum from costBreakup items
+    if (proposalDetails.costBreakup && proposalDetails.costBreakup.length > 0) {
+      const total = proposalDetails.costBreakup.reduce((sum, item) => {
+        const amount = item.amount || 0;
+        const gst = item.gstAmt || 0;
+        const lineTotal = item.totalAmt || (Number(amount) + Number(gst));
+        return sum + (Number.isNaN(lineTotal) ? 0 : lineTotal);
+      }, 0);
+      return total;
+    }
+
+    return 0;
+  };
+
+  const estimatedTotal = calculateEstimatedTotal();
+
+  const formatCurrency = (amount?: number | null) => {
+    if (amount === undefined || amount === null || Number.isNaN(amount)) {
+      return '₹0.00';
+    }
     return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
   };
 
-  const formatDate = (dateString: string) => {
+  const formatDate = (dateString?: string | null) => {
+    if (!dateString) return '';
     try {
       return format(new Date(dateString), 'MMM d, yyyy, h:mm a');
     } catch {
-      return dateString;
+      return dateString || '';
     }
   };
 
-  const formatTimelineDate = (dateString: string) => {
+  const formatTimelineDate = (dateString?: string | null) => {
+    if (!dateString) return '-';
     try {
       return format(new Date(dateString), 'MMM d, yyyy');
     } catch {
-      return dateString;
+      return dateString || '-';
     }
   };
 
@@ -61,27 +110,44 @@ export function ProposalDetailsCard({ proposalDetails, className }: ProposalDeta
                     Item Description
                   </th>
                   <th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide">
-                    Amount
+                    Base Amount
+                  </th>
+                  <th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide">
+                    GST
+                  </th>
+                  <th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide">
+                    Total
                   </th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-200">
-                {proposalDetails.costBreakup.map((item, index) => (
+                {(proposalDetails.costBreakup || []).map((item, index) => (
                   <tr key={index} className="hover:bg-gray-50">
                     <td className="px-4 py-3 text-sm text-gray-900">
-                      {item.description}
+                      <div>{item.description}</div>
+                      {item.gstRate ? (
+                        <div className="text-[10px] text-gray-400">
+                          {item.cgstAmt ? `CGST: ${item.gstRate / 2}%, SGST: ${item.gstRate / 2}%` : `IGST: ${item.gstRate}%`}
+                        </div>
+                      ) : null}
+                    </td>
+                    <td className="px-4 py-3 text-sm text-gray-900 text-right">
+                      {formatCurrency(item.amount)}
+                    </td>
+                    <td className="px-4 py-3 text-sm text-gray-900 text-right">
+                      {formatCurrency(item.gstAmt)}
                     </td>
                     <td className="px-4 py-3 text-sm text-gray-900 text-right font-medium">
-                      {formatCurrency(item.amount)}
+                      {formatCurrency(item.totalAmt || (Number(item.amount || 0) + Number(item.gstAmt || 0)))}
                     </td>
                   </tr>
                 ))}
                 <tr className="bg-green-50 font-semibold">
-                  <td className="px-4 py-3 text-sm text-gray-900">
-                    Estimated Budget (Total)
+                  <td colSpan={3} className="px-4 py-3 text-sm text-gray-900">
+                    Estimated Budget (Total Inclusive of GST)
                   </td>
                   <td className="px-4 py-3 text-sm text-green-700 text-right">
-                    {formatCurrency(proposalDetails.estimatedBudgetTotal)}
+                    {formatCurrency(estimatedTotal)}
                   </td>
                 </tr>
               </tbody>
@@ -119,5 +185,3 @@ export function ProposalDetailsCard({ proposalDetails, className }: ProposalDeta
     </Card>
   );
 }
-
-

src/dealer-claim/components/request-detail/claim-cards/RequestInitiatorCard.tsx

@@ -73,5 +73,3 @@ export function RequestInitiatorCard({ initiatorInfo, className }: RequestInitia
     </Card>
   );
 }
-
-

src/dealer-claim/components/request-detail/claim-cards/index.ts

@@ -1,12 +1,13 @@
 /**
- * Claim Management Card Components
- * Re-export all claim-specific card components for easy imports
+ * Dealer Claim Request Detail Cards
+ * 
+ * These components are specific to Dealer Claim request details.
+ * Located in: src/dealer-claim/components/request-detail/claim-cards/
  */
 
 export { ActivityInformationCard } from './ActivityInformationCard';
 export { DealerInformationCard } from './DealerInformationCard';
-export { ProposalDetailsCard } from './ProposalDetailsCard';
 export { ProcessDetailsCard } from './ProcessDetailsCard';
+export { ProposalDetailsCard } from './ProposalDetailsCard';
 export { RequestInitiatorCard } from './RequestInitiatorCard';
-
-
+export { CloserCard } from './CloserCard';

src/dealer-claim/components/request-detail/modals/AdditionalApproverReviewModal.tsx

@@ -0,0 +1,237 @@
+/**
+ * AdditionalApproverReviewModal Component
+ * Modal for Additional Approvers to review request and approve/reject
+ * Similar to InitiatorProposalApprovalModal but simpler - shows request details
+ */
+
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { 
+  CheckCircle, 
+  XCircle, 
+  FileText,
+  MessageSquare,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { FormattedDescription } from '@/components/common/FormattedDescription';
+
+interface AdditionalApproverReviewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onApprove: (comments: string) => Promise<void>;
+  onReject: (comments: string) => Promise<void>;
+  requestTitle?: string;
+  requestDescription?: string;
+  requestId?: string;
+  levelName?: string;
+  approverName?: string;
+}
+
+export function AdditionalApproverReviewModal({
+  isOpen,
+  onClose,
+  onApprove,
+  onReject,
+  requestTitle = 'Request',
+  requestDescription = '',
+  requestId,
+  levelName = 'Approval Level',
+  approverName = 'Approver',
+}: AdditionalApproverReviewModalProps) {
+  const [comments, setComments] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [actionType, setActionType] = useState<'approve' | 'reject' | null>(null);
+
+  const handleApprove = async () => {
+    if (!comments.trim()) {
+      toast.error('Please provide approval comments');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      setActionType('approve');
+      await onApprove(comments);
+      handleReset();
+      onClose();
+    } catch (error) {
+      console.error('Failed to approve request:', error);
+      toast.error('Failed to approve request. Please try again.');
+    } finally {
+      setSubmitting(false);
+      setActionType(null);
+    }
+  };
+
+  const handleReject = async () => {
+    if (!comments.trim()) {
+      toast.error('Please provide rejection reason');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      setActionType('reject');
+      await onReject(comments);
+      handleReset();
+      onClose();
+    } catch (error) {
+      console.error('Failed to reject request:', error);
+      toast.error('Failed to reject request. Please try again.');
+    } finally {
+      setSubmitting(false);
+      setActionType(null);
+    }
+  };
+
+  const handleReset = () => {
+    setComments('');
+    setActionType(null);
+  };
+
+  const handleClose = () => {
+    if (!submitting) {
+      handleReset();
+      onClose();
+    }
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="dealer-proposal-modal overflow-hidden flex flex-col max-w-3xl">
+        <DialogHeader className="flex-shrink-0 pb-3 lg:pb-4 px-6 pt-4 lg:pt-6 border-b">
+          <DialogTitle className="flex items-center gap-2 text-lg lg:text-xl">
+            <CheckCircle className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" />
+            Review Request
+          </DialogTitle>
+          <DialogDescription className="text-xs lg:text-sm">
+            {levelName}: Review request details and make a decision
+          </DialogDescription>
+          <div className="space-y-1 mt-2 text-xs text-gray-600">
+            <div className="flex flex-wrap gap-x-4 gap-y-1">
+              <div>
+                <strong>Request ID:</strong> {requestId || 'N/A'}
+              </div>
+              <div>
+                <strong>Approver:</strong> {approverName}
+              </div>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto overflow-x-hidden py-3 lg:py-4 px-6">
+          <div className="space-y-4">
+            {/* Request Title */}
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <h3 className="font-semibold text-sm lg:text-base flex items-center gap-2">
+                  <FileText className="w-4 h-4 text-blue-600" />
+                  Request Title
+                </h3>
+              </div>
+              <div className="border rounded-lg p-2.5 lg:p-3 bg-gray-50">
+                <p className="text-sm lg:text-base font-medium text-gray-900">{requestTitle}</p>
+              </div>
+            </div>
+
+            {/* Request Description */}
+            {requestDescription && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <h3 className="font-semibold text-sm lg:text-base flex items-center gap-2">
+                    <MessageSquare className="w-4 h-4 text-blue-600" />
+                    Request Description
+                  </h3>
+                </div>
+                <div className="border rounded-lg p-2.5 lg:p-3 bg-gray-50 max-h-[200px] overflow-y-auto">
+                  <FormattedDescription
+                    content={requestDescription}
+                    className="text-xs lg:text-sm text-gray-700"
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Decision Section */}
+            <div className="space-y-2 border-t pt-3 lg:pt-3">
+              <h3 className="font-semibold text-sm lg:text-base">Your Decision & Comments</h3>
+              <Textarea
+                placeholder="Provide your evaluation comments, approval conditions, or rejection reasons..."
+                value={comments}
+                onChange={(e) => setComments(e.target.value)}
+                className="min-h-[80px] lg:min-h-[90px] text-xs lg:text-sm"
+              />
+              <p className="text-xs text-gray-500">{comments.length} characters</p>
+            </div>
+
+            {/* Warning for missing comments */}
+            {!comments.trim() && (
+              <div className="bg-amber-50 border border-amber-200 rounded-lg p-2 flex items-start gap-2">
+                <XCircle className="w-3.5 h-3.5 text-amber-600 flex-shrink-0 mt-0.5" />
+                <p className="text-xs text-amber-800">
+                  Please provide comments before making a decision. Comments are required and will be visible to all participants.
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end px-6 pb-6 pt-3 lg:pt-4 flex-shrink-0 border-t bg-gray-50">
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            disabled={submitting}
+            className="border-2"
+          >
+            Cancel
+          </Button>
+          <div className="flex gap-2">
+            <Button
+              onClick={handleReject}
+              disabled={!comments.trim() || submitting}
+              variant="destructive"
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {submitting && actionType === 'reject' ? (
+                'Rejecting...'
+              ) : (
+                <>
+                  <XCircle className="w-4 h-4 mr-2" />
+                  Reject
+                </>
+              )}
+            </Button>
+            <Button
+              onClick={handleApprove}
+              disabled={!comments.trim() || submitting}
+              className="bg-green-600 hover:bg-green-700 text-white"
+            >
+              {submitting && actionType === 'approve' ? (
+                'Approving...'
+              ) : (
+                <>
+                  <CheckCircle className="w-4 h-4 mr-2" />
+                  Approve
+                </>
+              )}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

src/dealer-claim/components/request-detail/modals/CreditNoteSAPModal.tsx

@@ -0,0 +1,304 @@
+/**
+ * CreditNoteSAPModal Component
+ * Modal for Step 8: Credit Note from SAP
+ * Allows Finance team to review credit note details and send to dealer
+ */
+
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import { Receipt, CircleCheckBig, Hash, Calendar, DollarSign, Building, FileText, Download, Send } from 'lucide-react';
+import { toast } from 'sonner';
+import { formatDateTime } from '@/utils/dateFormatter';
+
+interface CreditNoteSAPModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onDownload?: () => Promise<void>;
+  onSendToDealer?: () => Promise<void>;
+  creditNoteData?: {
+    creditNoteNumber?: string;
+    creditNoteDate?: string;
+    creditNoteAmount?: number;
+    status?: 'PENDING' | 'APPROVED' | 'ISSUED' | 'SENT' | 'CONFIRMED';
+  };
+  dealerInfo?: {
+    dealerName?: string;
+    dealerCode?: string;
+    dealerEmail?: string;
+  };
+  activityName?: string;
+  requestNumber?: string;
+  requestId?: string;
+  dueDate?: string;
+  taxationType?: string | null;
+}
+
+export function CreditNoteSAPModal({
+  isOpen,
+  onClose,
+  onDownload,
+  onSendToDealer,
+  creditNoteData,
+  dealerInfo,
+  activityName,
+  requestNumber,
+  requestId: _requestId,
+  dueDate,
+  taxationType,
+}: CreditNoteSAPModalProps) {
+  const [downloading, setDownloading] = useState(false);
+  const [sending, setSending] = useState(false);
+
+  const isNonGst = taxationType === 'Non GST' || taxationType === 'Non-GST';
+
+  const hasCreditNote = creditNoteData?.creditNoteNumber && creditNoteData?.creditNoteNumber !== '';
+  const creditNoteNumber = creditNoteData?.creditNoteNumber || '';
+  const creditNoteDate = creditNoteData?.creditNoteDate
+    ? formatDateTime(creditNoteData.creditNoteDate, { includeTime: false, format: 'short' })
+    : '';
+  const creditNoteAmount = creditNoteData?.creditNoteAmount || 0;
+  const status = creditNoteData?.status || 'PENDING';
+
+  const dealerName = dealerInfo?.dealerName || 'Jaipur Royal Enfield';
+  const dealerCode = dealerInfo?.dealerCode || 'RE-JP-009';
+  const activity = activityName || 'Activity';
+  const requestIdDisplay = requestNumber || 'RE-REQ-2024-CM-101';
+  const dueDateDisplay = dueDate
+    ? formatDateTime(dueDate, { includeTime: false, format: 'short' })
+    : 'Jan 4, 2026';
+
+  const handleDownload = async () => {
+    if (onDownload) {
+      try {
+        setDownloading(true);
+        await onDownload();
+        toast.success('Credit note downloaded successfully');
+      } catch (error) {
+        console.error('Failed to download credit note:', error);
+        toast.error('Failed to download credit note. Please try again.');
+      } finally {
+        setDownloading(false);
+      }
+    } else {
+      // Default behavior: show info message
+      toast.info('Credit note will be automatically saved to Documents tab');
+    }
+  };
+
+  const handleSendToDealer = async () => {
+    if (onSendToDealer) {
+      try {
+        setSending(true);
+        await onSendToDealer();
+        toast.success('Credit note sent to dealer successfully');
+        onClose();
+      } catch (error) {
+        console.error('Failed to send credit note to dealer:', error);
+        toast.error('Failed to send credit note. Please try again.');
+      } finally {
+        setSending(false);
+      }
+    } else {
+      // Default behavior: show info message
+      toast.info('Email notification will be sent to dealer with credit note attachment');
+    }
+  };
+
+  const formatCurrency = (amount: number) => {
+    return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-lg lg:max-w-[1000px] max-w-4xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="font-semibold flex items-center gap-2 text-2xl flex-wrap">
+            <div className="flex items-center gap-2">
+              <Receipt className="w-6 h-6 text-[--re-green]" />
+              Credit Note from SAP
+            </div>
+            {taxationType && (
+              <Badge className={`ml-2 border-none shadow-sm ${!isNonGst ? 'bg-emerald-600 text-white hover:bg-emerald-700' : 'bg-indigo-600 text-white hover:bg-indigo-700'}`}>
+                {!isNonGst ? 'GST Claim' : 'Non-GST Claim'}
+              </Badge>
+            )}
+          </DialogTitle>
+          <DialogDescription className="text-base">
+            Review and send credit note to dealer
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-5 py-4">
+          {hasCreditNote ? (
+            <>
+              {/* Credit Note Document Card */}
+              <div className="bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-lg p-6">
+                <div className="flex items-center justify-between mb-4">
+                  <div>
+                    <h3 className="font-semibold text-green-900 text-xl mb-1">Royal Enfield</h3>
+                    <p className="text-sm text-green-700">Credit Note Document</p>
+                  </div>
+                  <Badge className="bg-green-600 text-white px-4 py-2 text-base">
+                    <CircleCheckBig className="w-4 h-4 mr-2" />
+                    {status === 'APPROVED' ? 'Approved' : status === 'ISSUED' ? 'Issued' : status === 'SENT' ? 'Sent' : 'Pending'}
+                  </Badge>
+                </div>
+                <div className="grid grid-cols-2 gap-4 mt-4">
+                  <div className="bg-white rounded-lg p-3 border border-green-100">
+                    <Label className="font-medium text-xs text-gray-600 uppercase tracking-wider flex items-center gap-1">
+                      <Hash className="w-3 h-3" />
+                      Credit Note Number
+                    </Label>
+                    <p className="font-bold text-gray-900 mt-1 text-lg">{creditNoteNumber}</p>
+                  </div>
+                  <div className="bg-white rounded-lg p-3 border border-green-100">
+                    <Label className="font-medium text-xs text-gray-600 uppercase tracking-wider flex items-center gap-1">
+                      <Calendar className="w-3 h-3" />
+                      Issue Date
+                    </Label>
+                    <p className="font-semibold text-gray-900 mt-1">{creditNoteDate}</p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Credit Note Amount */}
+              <div className="bg-blue-50 border-2 border-blue-200 rounded-lg p-5">
+                <Label className="font-medium text-xs text-gray-600 uppercase tracking-wider flex items-center gap-1 mb-3">
+                  <DollarSign className="w-4 h-4" />
+                  Credit Note Amount
+                </Label>
+                <p className="text-4xl font-bold text-blue-700">{formatCurrency(creditNoteAmount)}</p>
+              </div>
+            </>
+          ) : (
+            /* No Credit Note Available */
+            <div className="bg-gray-50 border-2 border-gray-300 rounded-lg p-8 text-center">
+              <div className="flex flex-col items-center justify-center space-y-4">
+                <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
+                  <Receipt className="w-8 h-8 text-gray-400" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-700 mb-2">No Credit Note Available</h3>
+                  <p className="text-sm text-gray-500">
+                    Credit note has not been generated yet. Please wait for the credit note to be generated from DMS.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Dealer Information */}
+          <div className="bg-purple-50 border-2 border-purple-200 rounded-lg p-5">
+            <h3 className="font-semibold text-purple-900 mb-4 flex items-center gap-2">
+              <Building className="w-5 h-5" />
+              Dealer Information
+            </h3>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="bg-white rounded-lg p-3 border border-purple-100">
+                <Label className="flex items-center gap-2 font-medium text-xs text-gray-600 uppercase tracking-wider">
+                  Dealer Name
+                </Label>
+                <p className="font-semibold text-gray-900 mt-1">{dealerName}</p>
+              </div>
+              <div className="bg-white rounded-lg p-3 border border-purple-100">
+                <Label className="flex items-center gap-2 font-medium text-xs text-gray-600 uppercase tracking-wider">
+                  Dealer Code
+                </Label>
+                <p className="font-semibold text-gray-900 mt-1">{dealerCode}</p>
+              </div>
+              <div className="bg-white rounded-lg p-3 border border-purple-100">
+                <Label className="flex items-center gap-2 font-medium text-xs text-gray-600 uppercase tracking-wider">
+                  Activity
+                </Label>
+                <p className="font-semibold text-gray-900 mt-1">{activity}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Reference Details */}
+          <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+            <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
+              <FileText className="w-4 h-4" />
+              Reference Details
+            </h3>
+            <div className="grid grid-cols-2 gap-3 text-sm">
+              <div>
+                <Label className="flex items-center gap-2 font-medium text-xs text-gray-600">
+                  Request ID
+                </Label>
+                <p className="font-medium text-gray-900 mt-1">{requestIdDisplay}</p>
+              </div>
+              <div>
+                <Label className="flex items-center gap-2 font-medium text-xs text-gray-600">
+                  Due Date
+                </Label>
+                <p className="font-medium text-gray-900 mt-1">{dueDateDisplay}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Available Actions Info */}
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
+            <FileText className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
+            <div className="text-sm text-blue-800">
+              <p className="font-semibold mb-2">Available Actions</p>
+              <ul className="list-disc list-inside space-y-1 text-xs">
+                <li>
+                  <strong>Download:</strong> Credit note will be automatically saved to Documents tab
+                </li>
+                <li>
+                  <strong>Send to Dealer:</strong> Email notification will be sent to dealer with credit note attachment
+                </li>
+                <li>All actions will be recorded in activity trail for audit purposes</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="flex-col-reverse gap-2 sm:flex-row flex items-center justify-between sm:justify-between">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            disabled={downloading || sending}
+            className="border-2"
+          >
+            Close
+          </Button>
+          <div className="flex gap-2">
+            {hasCreditNote && (
+              <>
+                <Button
+                  variant="outline"
+                  onClick={handleDownload}
+                  disabled={downloading || sending}
+                  className="border-blue-600 text-blue-600 hover:bg-blue-50"
+                >
+                  <Download className="w-4 h-4 mr-2" />
+                  {downloading ? 'Downloading...' : 'Download'}
+                </Button>
+                <Button
+                  onClick={handleSendToDealer}
+                  disabled={downloading || sending}
+                  className="bg-green-600 hover:bg-green-700 text-white shadow-md"
+                >
+                  <Send className="w-4 h-4 mr-2" />
+                  {sending ? 'Sending...' : 'Send to Dealer'}
+                </Button>
+              </>
+            )}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/dealer-claim/components/request-detail/modals/DMSPushModal.css

@@ -0,0 +1,66 @@
+.settlement-push-modal {
+  width: 90vw !important;
+  max-width: 1000px !important;
+  min-width: 320px !important;
+  max-height: 95vh !important;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Mobile responsive */
+@media (max-width: 640px) {
+  .settlement-push-modal {
+    width: 95vw !important;
+    max-width: 95vw !important;
+    max-height: 95vh !important;
+  }
+}
+
+/* Tablet and small desktop */
+@media (min-width: 641px) and (max-width: 1023px) {
+  .settlement-push-modal {
+    width: 90vw !important;
+    max-width: 900px !important;
+  }
+}
+
+/* Scrollable content area */
+.settlement-push-modal .flex-1 {
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+/* Custom scrollbar for the modal content */
+.settlement-push-modal .flex-1::-webkit-scrollbar {
+  width: 6px;
+}
+
+.settlement-push-modal .flex-1::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.settlement-push-modal .flex-1::-webkit-scrollbar-thumb {
+  background: #e2e8f0;
+  border-radius: 10px;
+}
+
+.settlement-push-modal .flex-1::-webkit-scrollbar-thumb:hover {
+  background: #cbd5e1;
+}
+
+.file-preview-dialog {
+  width: 95vw !important;
+  max-width: 1200px !important;
+  max-height: 95vh !important;
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.file-preview-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}

src/dealer-claim/components/request-detail/modals/DMSPushModal.tsx

@@ -0,0 +1,975 @@
+/**
+ * DMSPushModal Component
+ * Modal for Step 6: Push to DMS Verification
+ * Allows user to verify completion details and expenses before pushing to DMS
+ */
+
+import { useState, useMemo, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Receipt,
+  DollarSign,
+  TriangleAlert,
+  Activity,
+  CheckCircle2,
+  Download,
+  Eye,
+  Loader2,
+  RefreshCw,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { getDocumentPreviewUrl, downloadDocument } from '@/services/workflowApi';
+import '@/components/common/FilePreview/FilePreview.css';
+import './DMSPushModal.css';
+
+interface ExpenseItem {
+  description: string;
+  amount: number;
+}
+
+interface CompletionDetails {
+  activityCompletionDate?: string;
+  numberOfParticipants?: number;
+  closedExpenses?: ExpenseItem[];
+  totalClosedExpenses?: number;
+  completionDescription?: string;
+}
+
+interface IODetails {
+  ioNumber?: string;
+  blockedAmount?: number;
+  availableBalance?: number;
+  remainingBalance?: number;
+}
+
+interface CompletionDocuments {
+  completionDocuments?: Array<{
+    name: string;
+    url?: string;
+    id?: string;
+  }>;
+  activityPhotos?: Array<{
+    name: string;
+    url?: string;
+    id?: string;
+  }>;
+  invoicesReceipts?: Array<{
+    name: string;
+    url?: string;
+    id?: string;
+  }>;
+  attendanceSheet?: {
+    name: string;
+    url?: string;
+    id?: string;
+  };
+}
+
+interface DMSPushModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onPush: (comments: string) => Promise<void>;
+  onReQuotation?: (comments: string) => Promise<void>;
+  completionDetails?: CompletionDetails | null;
+  ioDetails?: IODetails | null;
+  completionDocuments?: CompletionDocuments | null;
+  requestTitle?: string;
+  requestNumber?: string;
+  taxationType?: string | null;
+}
+
+export function DMSPushModal({
+  isOpen,
+  onClose,
+  onPush,
+  onReQuotation,
+  completionDetails,
+  ioDetails,
+  completionDocuments,
+  requestTitle,
+  requestNumber,
+  taxationType,
+}: DMSPushModalProps) {
+  const isNonGst = useMemo(() => {
+    return taxationType === 'Non GST' || taxationType === 'Non-GST';
+  }, [taxationType]);
+
+  const [comments, setComments] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [previewDocument, setPreviewDocument] = useState<{
+    name: string;
+    url: string;
+    type?: string;
+    size?: number;
+  } | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+
+  const commentsChars = comments.length;
+  const maxCommentsChars = 500;
+
+  // Calculate total closed expenses
+  const totalClosedExpenses = useMemo(() => {
+    if (completionDetails?.totalClosedExpenses) {
+      return completionDetails.totalClosedExpenses;
+    }
+    if (completionDetails?.closedExpenses && Array.isArray(completionDetails.closedExpenses)) {
+      return completionDetails.closedExpenses.reduce((sum, item) => {
+        const amount = typeof item === 'object' ? (item.amount || 0) : 0;
+        const gst = typeof item === 'object' ? ((item as any).gstAmt || 0) : 0;
+        const total = (item as any).totalAmt || (amount + gst);
+        return sum + (Number(total) || 0);
+      }, 0);
+    }
+    return 0;
+  }, [completionDetails]);
+
+  // Format date
+  const formatDate = (dateString?: string) => {
+    if (!dateString) return '—';
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleDateString('en-IN', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      });
+    } catch {
+      return dateString;
+    }
+  };
+
+  // Format currency
+  const formatCurrency = (amount: number) => {
+    return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  };
+
+  // Check if document can be previewed
+  const canPreviewDocument = (doc: { name: string; url?: string; id?: string }): boolean => {
+    if (!doc.name) return false;
+    const name = doc.name.toLowerCase();
+    return name.endsWith('.pdf') ||
+      name.endsWith('.jpg') ||
+      name.endsWith('.jpeg') ||
+      name.endsWith('.png') ||
+      name.endsWith('.gif') ||
+      name.endsWith('.webp');
+  };
+
+  // Handle document preview - fetch as blob to avoid CSP issues
+  const handlePreviewDocument = async (doc: { name: string; url?: string; id?: string }) => {
+    if (!doc.id) {
+      toast.error('Document preview not available - document ID missing');
+      return;
+    }
+
+    setPreviewLoading(true);
+    try {
+      const previewUrl = getDocumentPreviewUrl(doc.id);
+
+      // Determine file type from name
+      const fileName = doc.name.toLowerCase();
+      const isPDF = fileName.endsWith('.pdf');
+      const isImage = fileName.match(/\.(jpg|jpeg|png|gif|webp)$/i);
+
+      // Fetch document as a blob to create a blob URL (CSP compliant)
+      const isProduction = import.meta.env.PROD || import.meta.env.MODE === 'production';
+      const token = isProduction ? null : localStorage.getItem('accessToken');
+
+      const headers: HeadersInit = {
+        'Accept': isPDF ? 'application/pdf' : '*/*'
+      };
+
+      if (!isProduction && token) {
+        headers['Authorization'] = `Bearer ${token}`;
+      }
+
+      const response = await fetch(previewUrl, {
+        headers,
+        credentials: 'include',
+        mode: 'cors'
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to load file: ${response.status} ${response.statusText}`);
+      }
+
+      const blob = await response.blob();
+
+      if (blob.size === 0) {
+        throw new Error('File is empty or could not be loaded');
+      }
+
+      // Create blob URL (CSP compliant - uses 'blob:' protocol)
+      const blobUrl = window.URL.createObjectURL(blob);
+
+      setPreviewDocument({
+        name: doc.name,
+        url: blobUrl,
+        type: blob.type || (isPDF ? 'application/pdf' : isImage ? 'image' : undefined),
+        size: blob.size,
+      });
+    } catch (error) {
+      console.error('Failed to load document preview:', error);
+      toast.error('Failed to load document preview');
+    } finally {
+      setPreviewLoading(false);
+    }
+  };
+
+  // Cleanup blob URLs on unmount
+  useEffect(() => {
+    return () => {
+      if (previewDocument?.url && previewDocument.url.startsWith('blob:')) {
+        window.URL.revokeObjectURL(previewDocument.url);
+      }
+    };
+  }, [previewDocument]);
+
+  const handleSubmit = async () => {
+    if (!comments.trim()) {
+      toast.error('Please provide comments before proceeding');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      await onPush(comments.trim());
+      handleReset();
+      onClose();
+    } catch (error) {
+      console.error('Failed to generate e-invoice:', error);
+      toast.error('Failed to generate e-invoice. Please try again.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleReset = () => {
+    setComments('');
+  };
+
+  const handleReQuotation = async () => {
+    if (!comments.trim()) {
+      toast.error('Please provide comments (reason) for re-quotation request');
+      return;
+    }
+
+    if (!onReQuotation) {
+      toast.error('Re-quotation handler not provided');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      await onReQuotation(comments.trim());
+      handleReset();
+      onClose();
+    } catch (error) {
+      console.error('Failed to request re-quotation:', error);
+      // Error is handled in the parent handler
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleClose = () => {
+    if (!submitting) {
+      handleReset();
+      onClose();
+    }
+  };
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={handleClose}>
+        <DialogContent className="settlement-push-modal overflow-hidden flex flex-col w-full max-w-none">
+          <DialogHeader className="px-6 pt-6 pb-3 flex-shrink-0">
+            <div className="flex items-center gap-2 sm:gap-3 mb-2">
+              <div className="p-1.5 sm:p-2 rounded-lg bg-indigo-100">
+                <Activity className="w-4 h-4 sm:w-5 sm:h-5 sm:w-6 sm:h-6 text-indigo-600" />
+              </div>
+              <div className="flex-1">
+                <DialogTitle className="font-semibold text-lg sm:text-xl flex items-center gap-2 flex-wrap">
+                  E-Invoice Generation & Sync
+                  {taxationType && (
+                    <Badge className={`ml-2 border-none shadow-sm ${!isNonGst ? 'bg-emerald-600 text-white hover:bg-emerald-700' : 'bg-indigo-600 text-white hover:bg-indigo-700'}`}>
+                      {!isNonGst ? 'GST Claim' : 'Non-GST Claim'}
+                    </Badge>
+                  )}
+                </DialogTitle>
+                <DialogDescription className="text-xs sm:text-sm mt-1">
+                  Review completion details and expenses before generating e-invoice and initiating SAP settlement
+                </DialogDescription>
+              </div>
+            </div>
+
+            {/* Request Info Card - Grid layout */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 p-3 sm:p-4 bg-gray-50 rounded-lg border">
+              <div className="flex items-center justify-between sm:flex-col sm:items-start sm:gap-1">
+                <span className="font-medium text-xs sm:text-sm text-gray-600">Workflow Step:</span>
+                <Badge variant="outline" className="font-mono text-xs">Requestor Claim Approval</Badge>
+              </div>
+              {requestNumber && (
+                <div className="flex flex-col gap-1">
+                  <span className="font-medium text-xs sm:text-sm text-gray-600">Request Number:</span>
+                  <p className="text-gray-700 font-mono text-xs sm:text-sm">{requestNumber}</p>
+                </div>
+              )}
+              <div className="flex flex-col gap-1">
+                <span className="font-medium text-xs sm:text-sm text-gray-600">Title:</span>
+                <p className="text-gray-700 text-xs sm:text-sm line-clamp-2">{requestTitle || '—'}</p>
+              </div>
+              <div className="flex items-center gap-2 sm:flex-col sm:items-start sm:gap-1">
+                <span className="font-medium text-xs sm:text-sm text-gray-600">Action:</span>
+                <Badge className="bg-indigo-100 text-indigo-800 border-indigo-200 text-xs">
+                  <Activity className="w-3 h-3 mr-1" />
+                  SYNC TO SAP
+                </Badge>
+              </div>
+            </div>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-y-auto overflow-x-hidden px-6 py-3">
+            <div className="space-y-3 sm:space-y-4 max-w-7xl mx-auto">
+              {/* Grid layout for all three cards on larger screens */}
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+                {/* Completion Details Card */}
+                {completionDetails && (
+                  <Card>
+                    <CardHeader className="pb-3">
+                      <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
+                        <CheckCircle2 className="w-4 h-4 sm:w-5 sm:h-5 text-green-600" />
+                        Completion Details
+                      </CardTitle>
+                      <CardDescription className="text-xs sm:text-sm">
+                        Review activity completion information
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-2 sm:space-y-3">
+                      {completionDetails.activityCompletionDate && (
+                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 py-1.5 sm:py-2 border-b">
+                          <span className="text-xs sm:text-sm text-gray-600">Activity Completion Date:</span>
+                          <span className="text-xs sm:text-sm font-semibold text-gray-900">
+                            {formatDate(completionDetails.activityCompletionDate)}
+                          </span>
+                        </div>
+                      )}
+                      {completionDetails.numberOfParticipants !== undefined && (
+                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 py-1.5 sm:py-2 border-b">
+                          <span className="text-xs sm:text-sm text-gray-600">Number of Participants:</span>
+                          <span className="text-xs sm:text-sm font-semibold text-gray-900">
+                            {completionDetails.numberOfParticipants}
+                          </span>
+                        </div>
+                      )}
+                      {completionDetails.completionDescription && (
+                        <div className="pt-2">
+                          <p className="text-xs text-gray-600 mb-1">Completion Description:</p>
+                          <p className="text-xs sm:text-sm text-gray-900 line-clamp-3">
+                            {completionDetails.completionDescription}
+                          </p>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* IO Details Card */}
+                {ioDetails && ioDetails.ioNumber && (
+                  <Card>
+                    <CardHeader className="pb-3">
+                      <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
+                        <Receipt className="w-4 h-4 sm:w-5 sm:h-5 text-purple-600" />
+                        IO Details
+                      </CardTitle>
+                      <CardDescription className="text-xs sm:text-sm">
+                        Internal Order information for budget reference
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-2 sm:space-y-3">
+                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 py-1.5 sm:py-2 border-b">
+                        <span className="text-xs sm:text-sm text-gray-600">IO Number:</span>
+                        <span className="text-xs sm:text-sm font-semibold text-gray-900 font-mono">
+                          {ioDetails.ioNumber}
+                        </span>
+                      </div>
+                      {ioDetails.blockedAmount !== undefined && ioDetails.blockedAmount > 0 && (
+                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 py-1.5 sm:py-2 border-b">
+                          <span className="text-xs sm:text-sm text-gray-600">Blocked Amount:</span>
+                          <span className="text-xs sm:text-sm font-bold text-green-700">
+                            {formatCurrency(ioDetails.blockedAmount)}
+                          </span>
+                        </div>
+                      )}
+                      {ioDetails.remainingBalance !== undefined && ioDetails.remainingBalance !== null && (
+                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 py-1.5 sm:py-2">
+                          <span className="text-xs sm:text-sm text-gray-600">Remaining Balance:</span>
+                          <span className="text-xs sm:text-sm font-semibold text-gray-900">
+                            {formatCurrency(ioDetails.remainingBalance)}
+                          </span>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* Expense Breakdown Card */}
+                {completionDetails?.closedExpenses && completionDetails.closedExpenses.length > 0 && (
+                  <Card className="md:col-span-2 lg:col-span-3">
+                    <CardHeader className="pb-3">
+                      <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
+                        <DollarSign className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
+                        Expense Breakdown
+                      </CardTitle>
+                      <CardDescription className="text-xs sm:text-sm">
+                        Review closed expenses breakdown (Base + GST)
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      {/* Table Header */}
+                      <div className="grid grid-cols-12 gap-2 mb-2 px-3 text-xs font-medium text-gray-500 uppercase tracking-wider hidden sm:grid">
+                        <div className={`${isNonGst ? 'col-span-8' : 'col-span-4'}`}>Description</div>
+                        <div className="col-span-2 text-right">Base</div>
+                        {!isNonGst && (
+                          <>
+                            <div className="col-span-2 text-right">GST Rate</div>
+                            <div className="col-span-2 text-right">GST Amt</div>
+                          </>
+                        )}
+                        <div className="col-span-2 text-right">Total</div>
+                      </div>
+
+                      <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                        {completionDetails.closedExpenses.map((expense, index) => {
+                          const amount = typeof expense === 'object' ? (expense.amount || 0) : 0; // Base Amount
+                          const gstRate = typeof expense === 'object' ? ((expense as any).gstRate || 0) : 0;
+                          const gstAmt = typeof expense === 'object' ? ((expense as any).gstAmt || 0) : 0; // GST Amount
+                          const total = typeof expense === 'object' ? ((expense as any).totalAmt || (amount + gstAmt)) : 0; // Total Amount
+
+                          return (
+                            <div
+                              key={index}
+                              className="grid grid-cols-1 sm:grid-cols-12 gap-2 items-center py-2 px-3 bg-gray-50 rounded border text-xs sm:text-sm"
+                            >
+                              {/* Mobile View: Stacked */}
+                              <div className="sm:hidden flex justify-between w-full mb-1">
+                                <span className="font-semibold text-gray-900">{expense.description || `Expense ${index + 1}`}</span>
+                                <span className="font-bold text-gray-900">{formatCurrency(total)}</span>
+                              </div>
+                              <div className="sm:hidden flex justify-between w-full text-xs text-gray-500">
+                                <span>Base: {formatCurrency(amount)}</span>
+                                {!isNonGst && (
+                                  <span>GST: {gstRate}% ({formatCurrency(gstAmt)})</span>
+                                )}
+                              </div>
+
+                              {/* Desktop View: Grid */}
+                              <div className={`hidden sm:block ${isNonGst ? 'col-span-8' : 'col-span-4'} min-w-0`}>
+                                <p className="font-medium text-gray-900 truncate" title={expense.description}>
+                                  {expense.description || `Expense ${index + 1}`}
+                                </p>
+                              </div>
+                              <div className="hidden sm:block col-span-2 text-right text-gray-600">
+                                {formatCurrency(amount)}
+                              </div>
+                              {!isNonGst && (
+                                <>
+                                  <div className="hidden sm:block col-span-2 text-right text-gray-600">
+                                    {gstRate}%
+                                  </div>
+                                  <div className="hidden sm:block col-span-2 text-right text-gray-600">
+                                    {formatCurrency(gstAmt)}
+                                  </div>
+                                </>
+                              )}
+                              <div className="hidden sm:block col-span-2 text-right font-semibold text-gray-900">
+                                {formatCurrency(total)}
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+
+                      <div className="flex items-center justify-between py-2 sm:py-3 px-3 sm:px-4 bg-blue-50 rounded border-2 border-blue-200 mt-3 sm:mt-4">
+                        <span className="text-xs sm:text-sm font-semibold text-gray-900">Total Closed Expenses:</span>
+                        <span className="text-sm sm:text-base font-bold text-blue-700">
+                          {formatCurrency(totalClosedExpenses)}
+                        </span>
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+              </div>
+
+              {/* Completion Documents Section */}
+              {completionDocuments && (
+                <div className="space-y-4">
+                  {/* Completion Documents */}
+                  {completionDocuments.completionDocuments && completionDocuments.completionDocuments.length > 0 && (
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-semibold text-sm sm:text-base flex items-center gap-2">
+                          <CheckCircle2 className="w-4 h-4 sm:w-5 sm:h-5 text-green-600" />
+                          Completion Documents
+                        </h3>
+                        <Badge variant="secondary" className="text-xs">
+                          {completionDocuments.completionDocuments.length} file(s)
+                        </Badge>
+                      </div>
+                      <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                        {completionDocuments.completionDocuments.map((doc, index) => (
+                          <div
+                            key={index}
+                            className="border rounded-lg p-2.5 lg:p-3 bg-gray-50 flex items-center justify-between gap-2"
+                          >
+                            <div className="flex items-center gap-2 lg:gap-3 min-w-0 flex-1">
+                              <CheckCircle2 className="w-4 h-4 lg:w-5 lg:h-5 text-green-600 flex-shrink-0" />
+                              <div className="min-w-0 flex-1">
+                                <p className="font-medium text-xs lg:text-sm text-gray-900 truncate" title={doc.name}>
+                                  {doc.name}
+                                </p>
+                              </div>
+                            </div>
+                            {doc.id && (
+                              <div className="flex items-center gap-1 flex-shrink-0">
+                                {canPreviewDocument(doc) && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handlePreviewDocument(doc)}
+                                    disabled={previewLoading}
+                                    className="p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                    title="Preview document"
+                                  >
+                                    {previewLoading ? (
+                                      <Loader2 className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 animate-spin" />
+                                    ) : (
+                                      <Eye className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" />
+                                    )}
+                                  </button>
+                                )}
+                                <button
+                                  type="button"
+                                  onClick={async () => {
+                                    try {
+                                      if (doc.id) {
+                                        await downloadDocument(doc.id);
+                                      }
+                                    } catch (error) {
+                                      console.error('Failed to download document:', error);
+                                      toast.error('Failed to download document');
+                                    }
+                                  }}
+                                  className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+                                  title="Download document"
+                                >
+                                  <Download className="w-4 h-4 lg:w-5 lg:h-5 text-gray-600" />
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Activity Photos */}
+                  {completionDocuments.activityPhotos && completionDocuments.activityPhotos.length > 0 && (
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-semibold text-sm sm:text-base flex items-center gap-2">
+                          <Activity className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
+                          Activity Photos
+                        </h3>
+                        <Badge variant="secondary" className="text-xs">
+                          {completionDocuments.activityPhotos.length} file(s)
+                        </Badge>
+                      </div>
+                      <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                        {completionDocuments.activityPhotos.map((doc, index) => (
+                          <div
+                            key={index}
+                            className="border rounded-lg p-2.5 lg:p-3 bg-gray-50 flex items-center justify-between gap-2"
+                          >
+                            <div className="flex items-center gap-2 lg:gap-3 min-w-0 flex-1">
+                              <Activity className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 flex-shrink-0" />
+                              <div className="min-w-0 flex-1">
+                                <p className="font-medium text-xs lg:text-sm text-gray-900 truncate" title={doc.name}>
+                                  {doc.name}
+                                </p>
+                              </div>
+                            </div>
+                            {doc.id && (
+                              <div className="flex items-center gap-1 flex-shrink-0">
+                                {canPreviewDocument(doc) && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handlePreviewDocument(doc)}
+                                    disabled={previewLoading}
+                                    className="p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                    title="Preview photo"
+                                  >
+                                    {previewLoading ? (
+                                      <Loader2 className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 animate-spin" />
+                                    ) : (
+                                      <Eye className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" />
+                                    )}
+                                  </button>
+                                )}
+                                <button
+                                  type="button"
+                                  onClick={async () => {
+                                    try {
+                                      if (doc.id) {
+                                        await downloadDocument(doc.id);
+                                      }
+                                    } catch (error) {
+                                      console.error('Failed to download document:', error);
+                                      toast.error('Failed to download document');
+                                    }
+                                  }}
+                                  className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+                                  title="Download photo"
+                                >
+                                  <Download className="w-4 h-4 lg:w-5 lg:h-5 text-gray-600" />
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Invoices / Receipts */}
+                  {completionDocuments.invoicesReceipts && completionDocuments.invoicesReceipts.length > 0 && (
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-semibold text-sm sm:text-base flex items-center gap-2">
+                          <Receipt className="w-4 h-4 sm:w-5 sm:h-5 text-purple-600" />
+                          Invoices / Receipts
+                        </h3>
+                        <Badge variant="secondary" className="text-xs">
+                          {completionDocuments.invoicesReceipts.length} file(s)
+                        </Badge>
+                      </div>
+                      <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                        {completionDocuments.invoicesReceipts.map((doc, index) => (
+                          <div
+                            key={index}
+                            className="border rounded-lg p-2.5 lg:p-3 bg-gray-50 flex items-center justify-between gap-2"
+                          >
+                            <div className="flex items-center gap-2 lg:gap-3 min-w-0 flex-1">
+                              <Receipt className="w-4 h-4 lg:w-5 lg:h-5 text-purple-600 flex-shrink-0" />
+                              <div className="min-w-0 flex-1">
+                                <p className="font-medium text-xs lg:text-sm text-gray-900 truncate" title={doc.name}>
+                                  {doc.name}
+                                </p>
+                              </div>
+                            </div>
+                            {doc.id && (
+                              <div className="flex items-center gap-1 flex-shrink-0">
+                                {canPreviewDocument(doc) && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handlePreviewDocument(doc)}
+                                    disabled={previewLoading}
+                                    className="p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                    title="Preview document"
+                                  >
+                                    {previewLoading ? (
+                                      <Loader2 className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 animate-spin" />
+                                    ) : (
+                                      <Eye className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" />
+                                    )}
+                                  </button>
+                                )}
+                                <button
+                                  type="button"
+                                  onClick={async () => {
+                                    try {
+                                      if (doc.id) {
+                                        await downloadDocument(doc.id);
+                                      }
+                                    } catch (error) {
+                                      console.error('Failed to download document:', error);
+                                      toast.error('Failed to download document');
+                                    }
+                                  }}
+                                  className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+                                  title="Download document"
+                                >
+                                  <Download className="w-4 h-4 lg:w-5 lg:h-5 text-gray-600" />
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Attendance Sheet */}
+                  {completionDocuments.attendanceSheet && (
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-semibold text-sm sm:text-base flex items-center gap-2">
+                          <Activity className="w-4 h-4 sm:w-5 sm:h-5 text-indigo-600" />
+                          Attendance Sheet
+                        </h3>
+                      </div>
+                      <div className="border rounded-lg p-2.5 lg:p-3 bg-gray-50 flex items-center justify-between gap-2">
+                        <div className="flex items-center gap-2 lg:gap-3 min-w-0 flex-1">
+                          <Activity className="w-4 h-4 lg:w-5 lg:h-5 text-indigo-600 flex-shrink-0" />
+                          <div className="min-w-0 flex-1">
+                            <p className="font-medium text-xs lg:text-sm text-gray-900 truncate" title={completionDocuments.attendanceSheet.name}>
+                              {completionDocuments.attendanceSheet.name}
+                            </p>
+                          </div>
+                        </div>
+                        {completionDocuments.attendanceSheet.id && (
+                          <div className="flex items-center gap-1 flex-shrink-0">
+                            {canPreviewDocument(completionDocuments.attendanceSheet) && (
+                              <button
+                                type="button"
+                                onClick={() => handlePreviewDocument(completionDocuments.attendanceSheet!)}
+                                disabled={previewLoading}
+                                className="p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                title="Preview document"
+                              >
+                                {previewLoading ? (
+                                  <Loader2 className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 animate-spin" />
+                                ) : (
+                                  <Eye className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" />
+                                )}
+                              </button>
+                            )}
+                            <button
+                              type="button"
+                              onClick={async () => {
+                                try {
+                                  if (completionDocuments.attendanceSheet?.id) {
+                                    await downloadDocument(completionDocuments.attendanceSheet.id);
+                                  }
+                                } catch (error) {
+                                  console.error('Failed to download document:', error);
+                                  toast.error('Failed to download document');
+                                }
+                              }}
+                              className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+                              title="Download document"
+                            >
+                              <Download className="w-4 h-4 lg:w-5 lg:h-5 text-gray-600" />
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Verification Warning */}
+              <div className="p-2.5 sm:p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+                <div className="flex items-start gap-2">
+                  <TriangleAlert className="w-4 h-4 sm:w-5 sm:h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
+                  <div>
+                    <p className="text-xs sm:text-sm font-semibold text-yellow-900">
+                      Please verify all details before generation
+                    </p>
+                    <p className="text-xs text-yellow-700 mt-1">
+                      Once submitted, the system will generate an e-invoice and initiate the SAP settlement process.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Comments & Remarks */}
+              <div className="space-y-1.5 max-w-2xl">
+                <Label htmlFor="comment" className="text-xs sm:text-sm font-semibold text-gray-900 flex items-center gap-2">
+                  Comments & Remarks <span className="text-red-500">*</span>
+                </Label>
+                <Textarea
+                  id="comment"
+                  placeholder="Enter your comments about e-invoice generation (e.g., verified expenses, ready for settlement)..."
+                  value={comments}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    if (value.length <= maxCommentsChars) {
+                      setComments(value);
+                    }
+                  }}
+                  rows={4}
+                  className="text-sm min-h-[80px] resize-none"
+                />
+                <div className="flex items-center justify-between text-xs text-gray-500">
+                  <div className="flex items-center gap-1">
+                    <TriangleAlert className="w-3 h-3" />
+                    Required and visible to all
+                  </div>
+                  <span>{commentsChars}/{maxCommentsChars}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 px-6 pt-3 pb-6 border-t flex-shrink-0">
+            <Button
+              variant="outline"
+              onClick={handleClose}
+              disabled={submitting}
+            >
+              Cancel
+            </Button>
+            {onReQuotation && (
+              <Button
+                variant="outline"
+                className="border-orange-500 text-orange-600 hover:bg-orange-50"
+                onClick={handleReQuotation}
+                disabled={!comments.trim() || submitting}
+              >
+                {submitting ? (
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                ) : (
+                  <RefreshCw className="w-4 h-4 mr-2" />
+                )}
+                Request Re-quotation
+              </Button>
+            )}
+            <Button
+              onClick={handleSubmit}
+              disabled={!comments.trim() || submitting}
+              className="bg-indigo-600 hover:bg-indigo-700 text-white"
+            >
+              {submitting ? (
+                'Processing...'
+              ) : (
+                <>
+                  <Activity className="w-4 h-4 mr-2" />
+                  Generate & Sync
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+
+      </Dialog>
+
+      {/* File Preview Modal - Matching DocumentsTab style */}
+      {previewDocument && (
+        <Dialog
+          open={!!previewDocument}
+          onOpenChange={() => setPreviewDocument(null)}
+        >
+          <DialogContent className="file-preview-dialog p-3 sm:p-6">
+            <div className="file-preview-content">
+              <DialogHeader className="pb-4 flex-shrink-0 pr-8">
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="flex items-center gap-3 flex-1 min-w-0">
+                    <Eye className="w-5 h-5 text-blue-600 flex-shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <DialogTitle className="text-base sm:text-lg font-bold text-gray-900 truncate pr-2">
+                        {previewDocument.name}
+                      </DialogTitle>
+                      {previewDocument.type && (
+                        <p className="text-xs sm:text-sm text-gray-500">
+                          {previewDocument.type} {previewDocument.size && `• ${(previewDocument.size / 1024).toFixed(1)} KB`}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 flex-wrap mr-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        const link = document.createElement('a');
+                        link.href = previewDocument.url;
+                        link.download = previewDocument.name;
+                        link.click();
+                      }}
+                      className="gap-2 h-9"
+                    >
+                      <Download className="h-4 w-4" />
+                      <span className="hidden sm:inline">Download</span>
+                    </Button>
+                  </div>
+                </div>
+              </DialogHeader>
+
+              <div className="file-preview-body bg-gray-100 rounded-lg p-2 sm:p-4">
+                {previewLoading ? (
+                  <div className="flex items-center justify-center h-full min-h-[70vh]">
+                    <div className="text-center">
+                      <Loader2 className="w-8 h-8 animate-spin text-blue-600 mx-auto mb-2" />
+                      <p className="text-sm text-gray-600">Loading preview...</p>
+                    </div>
+                  </div>
+                ) : previewDocument.name.toLowerCase().endsWith('.pdf') || previewDocument.type?.includes('pdf') ? (
+                  <div className="w-full h-full flex items-center justify-center">
+                    <iframe
+                      src={previewDocument.url}
+                      className="w-full h-full rounded-lg border-0"
+                      title={previewDocument.name}
+                      style={{
+                        minHeight: '70vh',
+                        height: '100%'
+                      }}
+                    />
+                  </div>
+                ) : previewDocument.name.match(/\.(jpg|jpeg|png|gif|webp)$/i) || previewDocument.type?.includes('image') ? (
+                  <div className="flex items-center justify-center h-full">
+                    <img
+                      src={previewDocument.url}
+                      alt={previewDocument.name}
+                      style={{
+                        maxWidth: '100%',
+                        maxHeight: '100%',
+                        objectFit: 'contain'
+                      }}
+                      className="rounded-lg shadow-lg"
+                    />
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center justify-center h-full text-center">
+                    <div className="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center mb-4">
+                      <Eye className="w-10 h-10 text-gray-400" />
+                    </div>
+                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Preview Not Available</h3>
+                    <p className="text-sm text-gray-600 mb-6">
+                      This file type cannot be previewed. Please download to view.
+                    </p>
+                    <Button
+                      onClick={() => {
+                        const link = document.createElement('a');
+                        link.href = previewDocument.url;
+                        link.download = previewDocument.name;
+                        link.click();
+                      }}
+                      className="gap-2"
+                    >
+                      <Download className="h-4 w-4" />
+                      Download {previewDocument.name}
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
+  );
+}
+

src/dealer-claim/components/request-detail/modals/DealerCompletionDocumentsModal.css

@@ -0,0 +1,67 @@
+.dealer-completion-documents-modal {
+  width: 90vw !important;
+  max-width: 90vw !important;
+  max-height: 95vh !important;
+}
+
+/* Mobile responsive */
+@media (max-width: 640px) {
+  .dealer-completion-documents-modal {
+    width: 95vw !important;
+    max-width: 95vw !important;
+    max-height: 95vh !important;
+  }
+}
+
+/* Tablet and small desktop */
+@media (min-width: 641px) and (max-width: 1023px) {
+  .dealer-completion-documents-modal {
+    width: 90vw !important;
+    max-width: 90vw !important;
+  }
+}
+
+/* Large screens - fixed max-width for better readability */
+@media (min-width: 1024px) {
+  .dealer-completion-documents-modal {
+    width: 90vw !important;
+    max-width: 1200px !important;
+  }
+}
+
+/* Extra large screens */
+@media (min-width: 1536px) {
+  .dealer-completion-documents-modal {
+    width: 90vw !important;
+    max-width: 1200px !important;
+  }
+}
+
+/* Date input calendar icon positioning */
+.dealer-completion-documents-modal input[type="date"] {
+  position: relative;
+  cursor: pointer;
+}
+
+.dealer-completion-documents-modal input[type="date"]::-webkit-calendar-picker-indicator {
+  position: absolute;
+  right: 0.5rem;
+  cursor: pointer;
+  opacity: 1;
+  z-index: 1;
+  pointer-events: auto;
+}
+
+.dealer-completion-documents-modal input[type="date"]::-webkit-inner-spin-button,
+.dealer-completion-documents-modal input[type="date"]::-webkit-clear-button {
+  display: none;
+  -webkit-appearance: none;
+}
+
+/* Firefox date input */
+.dealer-completion-documents-modal input[type="date"]::-moz-calendar-picker-indicator {
+  position: absolute;
+  right: 0.5rem;
+  cursor: pointer;
+  opacity: 1;
+}

src/dealer-claim/components/request-detail/modals/DealerProposalModal.css

@@ -0,0 +1,67 @@
+.dealer-proposal-modal {
+  width: 90vw !important;
+  max-width: 90vw !important;
+  max-height: 95vh !important;
+}
+
+/* Mobile responsive */
+@media (max-width: 640px) {
+  .dealer-proposal-modal {
+    width: 95vw !important;
+    max-width: 95vw !important;
+    max-height: 95vh !important;
+  }
+}
+
+/* Tablet and small desktop */
+@media (min-width: 641px) and (max-width: 1023px) {
+  .dealer-proposal-modal {
+    width: 90vw !important;
+    max-width: 90vw !important;
+  }
+}
+
+/* Large screens - fixed max-width for better readability */
+@media (min-width: 1024px) {
+  .dealer-proposal-modal {
+    width: 90vw !important;
+    max-width: 1200px !important;
+  }
+}
+
+/* Extra large screens */
+@media (min-width: 1536px) {
+  .dealer-proposal-modal {
+    width: 90vw !important;
+    max-width: 1200px !important;
+  }
+}
+
+/* Date input calendar icon positioning */
+.dealer-proposal-modal input[type="date"] {
+  position: relative;
+  cursor: pointer;
+}
+
+.dealer-proposal-modal input[type="date"]::-webkit-calendar-picker-indicator {
+  position: absolute;
+  right: 0.5rem;
+  cursor: pointer;
+  opacity: 1;
+  z-index: 1;
+  pointer-events: auto;
+}
+
+.dealer-proposal-modal input[type="date"]::-webkit-inner-spin-button,
+.dealer-proposal-modal input[type="date"]::-webkit-clear-button {
+  display: none;
+  -webkit-appearance: none;
+}
+
+/* Firefox date input */
+.dealer-proposal-modal input[type="date"]::-moz-calendar-picker-indicator {
+  position: absolute;
+  right: 0.5rem;
+  cursor: pointer;
+  opacity: 1;
+}

src/dealer-claim/components/request-detail/modals/DeptLeadIOApprovalModal.css

@@ -0,0 +1,39 @@
+.dept-lead-io-modal {
+  width: 90vw !important;
+  max-width: 90vw !important;
+  max-height: 95vh !important;
+}
+
+/* Mobile responsive */
+@media (max-width: 640px) {
+  .dept-lead-io-modal {
+    width: 95vw !important;
+    max-width: 95vw !important;
+    max-height: 95vh !important;
+  }
+}
+
+/* Tablet and small desktop */
+@media (min-width: 641px) and (max-width: 1023px) {
+  .dept-lead-io-modal {
+    width: 90vw !important;
+    max-width: 90vw !important;
+  }
+}
+
+/* Large screens - fixed max-width for better readability */
+@media (min-width: 1024px) {
+  .dept-lead-io-modal {
+    width: 90vw !important;
+    max-width: 1000px !important;
+  }
+}
+
+/* Extra large screens */
+@media (min-width: 1536px) {
+  .dept-lead-io-modal {
+    width: 90vw !important;
+    max-width: 1000px !important;
+  }
+}
+

src/dealer-claim/components/request-detail/modals/DeptLeadIOApprovalModal.tsx

@@ -0,0 +1,339 @@
+/**
+ * DeptLeadIOApprovalModal Component
+ * Modal for Step 3: Dept Lead Approval and IO Organization
+ * Allows department lead to approve request and organize IO details
+ */
+
+import { useState, useMemo } from 'react';
+import * as React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Badge } from '@/components/ui/badge';
+import { CircleCheckBig, CircleX, Receipt, TriangleAlert } from 'lucide-react';
+import { toast } from 'sonner';
+import './DeptLeadIOApprovalModal.css';
+
+interface DeptLeadIOApprovalModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onApprove: (data: {
+    ioNumber: string;
+    comments: string;
+  }) => Promise<void>;
+  onReject: (comments: string) => Promise<void>;
+  requestTitle?: string;
+  requestId?: string;
+  // Pre-filled IO data from IO table
+  preFilledIONumber?: string;
+  preFilledBlockedAmount?: number;
+  preFilledRemainingBalance?: number;
+  taxationType?: string | null;
+}
+
+export function DeptLeadIOApprovalModal({
+  isOpen,
+  onClose,
+  onApprove,
+  onReject,
+  requestTitle,
+  requestId: _requestId,
+  preFilledIONumber,
+  preFilledBlockedAmount,
+  preFilledRemainingBalance,
+  taxationType,
+}: DeptLeadIOApprovalModalProps) {
+  const [actionType, setActionType] = useState<'approve' | 'reject'>('approve');
+  const [comments, setComments] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const isNonGst = useMemo(() => {
+    return taxationType === 'Non GST' || taxationType === 'Non-GST';
+  }, [taxationType]);
+
+  // Get IO number from props (read-only, from IO table)
+  const ioNumber = preFilledIONumber || '';
+
+  // Reset form when modal opens/closes
+  React.useEffect(() => {
+    if (isOpen) {
+      setComments('');
+      setActionType('approve');
+    }
+  }, [isOpen]);
+
+  const commentsChars = comments.length;
+  const maxCommentsChars = 500;
+
+  // Validate form
+  const isFormValid = useMemo(() => {
+    if (actionType === 'reject') {
+      return comments.trim().length > 0;
+    }
+    // For approve, need IO number (from table) and comments
+    return (
+      ioNumber.trim().length > 0 && // IO number must exist from IO table
+      comments.trim().length > 0
+    );
+  }, [actionType, ioNumber, comments]);
+
+  const handleSubmit = async () => {
+    if (!isFormValid) {
+      if (actionType === 'approve') {
+        if (!ioNumber.trim()) {
+          toast.error('IO number is required. Please block amount from IO tab first.');
+          return;
+        }
+      }
+      if (!comments.trim()) {
+        toast.error('Please provide comments');
+        return;
+      }
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+
+      if (actionType === 'approve') {
+        await onApprove({
+          ioNumber: ioNumber.trim(),
+          comments: comments.trim(),
+        });
+      } else {
+        await onReject(comments.trim());
+      }
+
+      handleReset();
+      onClose();
+    } catch (error) {
+      console.error(`Failed to ${actionType} request:`, error);
+      toast.error(`Failed to ${actionType} request. Please try again.`);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleReset = () => {
+    setActionType('approve');
+    setComments('');
+  };
+
+  const handleClose = () => {
+    if (!submitting) {
+      handleReset();
+      onClose();
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="dept-lead-io-modal overflow-hidden flex flex-col">
+        <DialogHeader className="flex-shrink-0 px-6 pt-6 pb-3">
+          <div className="flex items-center gap-2 lg:gap-3 mb-2">
+            <div className="p-1.5 lg:p-2 rounded-lg bg-green-100">
+              <CircleCheckBig className="w-5 h-5 lg:w-6 lg:h-6 text-green-600" />
+            </div>
+            <div className="flex-1">
+              <DialogTitle className="font-semibold text-lg lg:text-xl flex items-center gap-2 flex-wrap">
+                Review and Approve
+                {taxationType && (
+                  <Badge className={`ml-2 border-none shadow-sm ${!isNonGst ? 'bg-emerald-600 text-white hover:bg-emerald-700' : 'bg-indigo-600 text-white hover:bg-indigo-700'}`}>
+                    {!isNonGst ? 'GST Claim' : 'Non-GST Claim'}
+                  </Badge>
+                )}
+              </DialogTitle>
+              <DialogDescription className="text-xs lg:text-sm mt-1">
+                Review IO details and provide your approval comments
+              </DialogDescription>
+            </div>
+          </div>
+
+          {/* Request Info Card */}
+          <div className="space-y-2 lg:space-y-3 p-3 lg:p-4 bg-gray-50 rounded-lg border">
+            <div className="flex items-center justify-between">
+              <span className="font-medium text-sm lg:text-base text-gray-900">Workflow Step:</span>
+              <Badge variant="outline" className="font-mono text-xs">Step 3</Badge>
+            </div>
+            <div>
+              <span className="font-medium text-sm lg:text-base text-gray-900">Title:</span>
+              <p className="text-xs lg:text-sm text-gray-700 mt-1">{requestTitle || '—'}</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-sm lg:text-base text-gray-900">Action:</span>
+              <Badge className="bg-green-100 text-green-800 border-green-200 text-xs">
+                <CircleCheckBig className="w-3 h-3 mr-1" />
+                APPROVE
+              </Badge>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto overflow-x-hidden py-3 lg:py-4 px-6">
+          <div className="space-y-3 lg:space-y-4">
+            {/* Action Toggle Buttons */}
+            <div className="flex gap-2 p-1 bg-gray-100 rounded-lg">
+              <Button
+                type="button"
+                onClick={() => setActionType('approve')}
+                className={`flex-1 text-sm lg:text-base ${actionType === 'approve'
+                  ? 'bg-green-600 text-white shadow-sm'
+                  : 'text-gray-700 hover:bg-gray-200'
+                  }`}
+                variant={actionType === 'approve' ? 'default' : 'ghost'}
+              >
+                <CircleCheckBig className="w-4 h-4 mr-1" />
+                Approve
+              </Button>
+              <Button
+                type="button"
+                onClick={() => setActionType('reject')}
+                className={`flex-1 text-sm lg:text-base ${actionType === 'reject'
+                  ? 'bg-red-600 text-white shadow-sm'
+                  : 'text-gray-700 hover:bg-gray-200'
+                  }`}
+                variant={actionType === 'reject' ? 'destructive' : 'ghost'}
+              >
+                <CircleX className="w-4 h-4 mr-1" />
+                Reject
+              </Button>
+            </div>
+
+            {/* Main Content Area - Two Column Layout on Large Screens */}
+            <div className="space-y-3 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-6">
+              {/* Left Column - IO Organisation Details (Only shown when approving) */}
+              {actionType === 'approve' && (
+                <div className="p-3 lg:p-4 bg-blue-50 border border-blue-200 rounded-lg space-y-3">
+                  <div className="flex items-center gap-2">
+                    <Receipt className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" />
+                    <h4 className="font-semibold text-sm lg:text-base text-blue-900">IO Organisation Details</h4>
+                  </div>
+
+                  {/* IO Number - Read-only from IO table */}
+                  <div className="space-y-1">
+                    <Label htmlFor="ioNumber" className="text-xs lg:text-sm font-semibold text-gray-900 flex items-center gap-2">
+                      IO Number <span className="text-red-500">*</span>
+                    </Label>
+                    <Input
+                      id="ioNumber"
+                      value={ioNumber || '—'}
+                      disabled
+                      readOnly
+                      className="bg-gray-100 h-8 lg:h-9 cursor-not-allowed text-xs lg:text-sm"
+                    />
+                    {!ioNumber && (
+                      <p className="text-xs text-red-600 mt-1">
+                        ⚠️ IO number not found. Please block amount from IO tab first.
+                      </p>
+                    )}
+                    {ioNumber && (
+                      <p className="text-xs text-blue-600 mt-1">
+                        ✓ Loaded from IO table
+                      </p>
+                    )}
+                  </div>
+
+                  {/* IO Balance Information - Read-only */}
+                  <div className="grid grid-cols-2 gap-2">
+                    {/* Blocked Amount Display */}
+                    {preFilledBlockedAmount !== undefined && preFilledBlockedAmount > 0 && (
+                      <div className="p-2 bg-green-50 border border-green-200 rounded">
+                        <div className="flex flex-col">
+                          <span className="text-xs font-semibold text-gray-700">Blocked Amount:</span>
+                          <span className="text-xs lg:text-sm font-bold text-green-700 mt-1">
+                            ₹{preFilledBlockedAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                          </span>
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Remaining Balance Display */}
+                    {preFilledRemainingBalance !== undefined && preFilledRemainingBalance !== null && (
+                      <div className="p-2 bg-blue-50 border border-blue-200 rounded">
+                        <div className="flex flex-col">
+                          <span className="text-xs font-semibold text-gray-700">Remaining Balance:</span>
+                          <span className="text-xs lg:text-sm font-bold text-blue-700 mt-1">
+                            ₹{preFilledRemainingBalance.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                          </span>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                </div>
+              )}
+
+              {/* Right Column - Comments & Remarks */}
+              <div className={`space-y-1.5 ${actionType === 'approve' ? '' : 'lg:col-span-2'}`}>
+                <Label htmlFor="comment" className="text-xs lg:text-sm font-semibold text-gray-900 flex items-center gap-2">
+                  Comments & Remarks <span className="text-red-500">*</span>
+                </Label>
+                <Textarea
+                  id="comment"
+                  placeholder={
+                    actionType === 'approve'
+                      ? 'Enter your approval comments and any conditions or notes...'
+                      : 'Enter detailed reasons for rejection...'
+                  }
+                  value={comments}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    if (value.length <= maxCommentsChars) {
+                      setComments(value);
+                    }
+                  }}
+                  rows={4}
+                  className="text-xs lg:text-sm min-h-[80px] lg:min-h-[100px] resize-none"
+                />
+                <div className="flex items-center justify-between text-xs text-gray-500">
+                  <div className="flex items-center gap-1">
+                    <TriangleAlert className="w-3 h-3" />
+                    Required and visible to all
+                  </div>
+                  <span>{commentsChars}/{maxCommentsChars}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="flex-shrink-0 flex flex-col-reverse sm:flex-row sm:justify-end gap-2 px-6 pb-6 pt-3 border-t">
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            disabled={submitting}
+            className="text-sm lg:text-base"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={!isFormValid || submitting}
+            className={`text-sm lg:text-base ${actionType === 'approve'
+              ? 'bg-green-600 hover:bg-green-700'
+              : 'bg-red-600 hover:bg-red-700'
+              } text-white`}
+          >
+            {submitting ? (
+              `${actionType === 'approve' ? 'Approving' : 'Rejecting'}...`
+            ) : (
+              <>
+                <CircleCheckBig className="w-4 h-4 mr-2" />
+                {actionType === 'approve' ? 'Approve Request' : 'Reject Request'}
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/dealer-claim/components/request-detail/modals/EditClaimAmountModal.tsx

@@ -92,7 +92,7 @@ export function EditClaimAmountModal({
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[500px]">
+      <DialogContent className="sm:max-w-[500px] lg:max-w-[800px]">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <DollarSign className="w-5 h-5 text-green-600" />
@@ -192,5 +192,3 @@ export function EditClaimAmountModal({
     </Dialog>
   );
 }
-
-

src/dealer-claim/components/request-detail/modals/EmailNotificationTemplateModal.tsx

@@ -0,0 +1,147 @@
+/**
+ * EmailNotificationTemplateModal Component
+ * Modal for displaying email notification templates for automated workflow steps
+ * Used for Step 4: Activity Creation and other auto-triggered steps
+ */
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Mail, User, Building, Calendar, X } from 'lucide-react';
+
+interface EmailNotificationTemplateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  stepNumber: number;
+  stepName: string;
+  requestNumber?: string;
+  recipientEmail?: string;
+  subject?: string;
+  emailBody?: string;
+}
+
+export function EmailNotificationTemplateModal({
+  isOpen,
+  onClose,
+  stepNumber,
+  stepName,
+  requestNumber = 'RE-REQ-2024-CM-101',
+  recipientEmail = `system@${import.meta.env.VITE_EMAIL_DOMAIN}`,
+  subject,
+  emailBody,
+}: EmailNotificationTemplateModalProps) {
+  // Default subject if not provided
+  const defaultSubject = `System Notification: Activity Created - ${requestNumber}`;
+  const finalSubject = subject || defaultSubject;
+
+  // Default email body if not provided
+  const defaultEmailBody = `System Notification
+
+Activity has been automatically created for claim ${requestNumber}.
+
+All stakeholders have been notified.
+
+This is an automated message.`;
+
+  const finalEmailBody = emailBody || defaultEmailBody;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-2xl lg:max-w-[1000px] max-w-2xl">
+        <DialogHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
+                <Mail className="w-5 h-5 text-blue-600" />
+              </div>
+              <div>
+                <DialogTitle className="text-lg leading-none font-semibold">
+                  Email Notification Template
+                </DialogTitle>
+                <DialogDescription className="text-sm">
+                  Step {stepNumber}: {stepName}
+                </DialogDescription>
+              </div>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Email Header Section */}
+          <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-4 border border-blue-200">
+            <div className="space-y-2">
+              <div className="flex items-start gap-2">
+                <User className="w-4 h-4 text-gray-600 mt-0.5 flex-shrink-0" />
+                <div className="flex-1">
+                  <p className="text-xs text-gray-600">To:</p>
+                  <p className="text-sm font-medium text-gray-900">{recipientEmail}</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-2">
+                <Mail className="w-4 h-4 text-gray-600 mt-0.5 flex-shrink-0" />
+                <div className="flex-1">
+                  <p className="text-xs text-gray-600">Subject:</p>
+                  <p className="text-sm font-semibold text-gray-900">{finalSubject}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Email Body Section */}
+          <div className="bg-white rounded-lg border border-gray-200 p-6">
+            <div className="space-y-4">
+              {/* Company Header */}
+              <div className="flex items-center gap-2 pb-3 border-b border-gray-200">
+                <Building className="w-5 h-5 text-purple-600" />
+                <span className="font-semibold text-gray-900">Royal Enfield</span>
+              </div>
+
+              {/* Email Content */}
+              <div className="prose prose-sm max-w-none">
+                <pre className="whitespace-pre-wrap font-sans text-sm text-gray-700 leading-relaxed bg-transparent p-0 border-0">
+                  {finalEmailBody}
+                </pre>
+              </div>
+
+              {/* Footer */}
+              <div className="pt-3 border-t border-gray-200">
+                <div className="flex items-center gap-2 text-xs text-gray-500">
+                  <Calendar className="w-3 h-3" />
+                  <span>Automated email • Royal Enfield Claims Portal</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Badges */}
+          <div className="flex items-center gap-2">
+            <Badge className="bg-blue-50 text-blue-700 border-blue-200">
+              Step {stepNumber}
+            </Badge>
+            <Badge className="bg-purple-50 text-purple-700 border-purple-200">
+              Auto-triggered
+            </Badge>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex justify-end gap-2 pt-2">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            className="h-9"
+          >
+            <X className="w-4 h-4 mr-2" />
+            Close
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/dealer-claim/components/request-detail/modals/InitiatorActionModal.tsx

@@ -0,0 +1,215 @@
+/**
+ * InitiatorActionModal Component
+ * Modal for Initiator to take action on a returned/rejected request
+ * Actions: Reopen, Request Revised Quotation, Cancel
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { 
+  RefreshCw, 
+  MessageSquare, 
+  FileEdit, 
+  XOctagon, 
+  AlertTriangle,
+  Loader2
+} from 'lucide-react';
+import { toast } from 'sonner';
+
+interface InitiatorActionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAction: (action: 'REOPEN' | 'REVISE' | 'CANCEL', comments: string) => Promise<void>;
+  requestTitle?: string;
+  requestId?: string;
+  defaultAction?: 'REOPEN' | 'REVISE' | 'CANCEL';
+}
+
+export function InitiatorActionModal({
+  isOpen,
+  onClose,
+  onAction,
+  requestTitle = 'Request',
+  requestId: _requestId,
+  defaultAction,
+}: InitiatorActionModalProps) {
+  const [comments, setComments] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [selectedAction, setSelectedAction] = useState<'REOPEN' | 'REVISE' | 'CANCEL' | null>(defaultAction || null);
+  
+  // Update selectedAction when defaultAction changes
+  useEffect(() => {
+    if (defaultAction) {
+      setSelectedAction(defaultAction);
+    }
+  }, [defaultAction]);
+
+  const actions = [
+    {
+      id: 'REOPEN',
+      label: 'Reopen & Resubmit',
+      description: 'Resubmit the request to the department head for approval.',
+      icon: <RefreshCw className="w-5 h-5 text-blue-600" />,
+      color: 'blue',
+      variant: 'default' as const
+    },
+    {
+      id: 'REVISE',
+      label: 'Request Revised Quotation',
+      description: 'Ask dealer to submit a new proposal/quotation.',
+      icon: <FileEdit className="w-5 h-5 text-amber-600" />,
+      color: 'amber',
+      variant: 'default' as const
+    },
+    {
+      id: 'CANCEL',
+      label: 'Cancel Request',
+      description: 'Permanently close and cancel this request.',
+      icon: <XOctagon className="w-5 h-5 text-red-600" />,
+      color: 'red',
+      variant: 'destructive' as const
+    }
+  ];
+
+  const handleActionClick = (actionId: any) => {
+    setSelectedAction(actionId);
+  };
+
+  const handleSubmit = async () => {
+    if (!selectedAction) {
+      toast.error('Please select an action');
+      return;
+    }
+
+    if (!comments.trim()) {
+      toast.error('Please provide a reason or comments for this action');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      await onAction(selectedAction, comments);
+      handleReset();
+      onClose();
+    } catch (error: any) {
+      console.error('Failed to perform initiator action:', error);
+      const errorMessage = error?.response?.data?.message || error?.message || 'Action failed. Please try again.';
+      toast.error(errorMessage);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleReset = () => {
+    setComments('');
+    setSelectedAction(null);
+  };
+
+  const handleClose = () => {
+    if (!submitting) {
+      handleReset();
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle className="text-xl">Action Required: {requestTitle}</DialogTitle>
+          <DialogDescription>
+            This request has been returned to you. Please select how you would like to proceed.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {actions.map((action) => (
+              <div
+                key={action.id}
+                onClick={() => handleActionClick(action.id)}
+                className={`
+                  cursor-pointer p-4 border-2 rounded-xl transition-all duration-200
+                  ${selectedAction === action.id 
+                    ? `border-${action.color}-600 bg-${action.color}-50 shadow-sm` 
+                    : 'border-gray-100 hover:border-gray-200 hover:bg-gray-50'}
+                `}
+              >
+                <div className="flex items-center gap-3 mb-2">
+                  <div className={`p-2 rounded-lg bg-white border border-gray-100`}>
+                    {action.icon}
+                  </div>
+                  <h4 className="font-bold text-sm text-gray-900">{action.label}</h4>
+                </div>
+                <p className="text-xs text-gray-500 leading-relaxed">
+                  {action.description}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          <div className="space-y-2">
+            <h3 className="text-sm font-semibold text-gray-900 flex items-center gap-2">
+              <MessageSquare className="w-4 h-4 text-gray-500" />
+              Comments / Reason
+            </h3>
+            <Textarea
+              placeholder="Provide a detailed reason for your decision..."
+              value={comments}
+              onChange={(e) => setComments(e.target.value)}
+              className="min-h-[120px] text-sm resize-none"
+            />
+          </div>
+
+          {selectedAction === 'CANCEL' && (
+            <div className="p-3 bg-red-50 border border-red-100 rounded-lg flex items-start gap-3">
+              <AlertTriangle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
+              <div className="text-xs text-red-800">
+                <p className="font-bold mb-1">Warning: Irreversible Action</p>
+                <p>Cancelling this request will permanently close it. This action cannot be undone.</p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="border-t pt-4">
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            disabled={submitting}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={!selectedAction || !comments.trim() || submitting}
+            className={`
+              min-w-[120px]
+              ${selectedAction === 'CANCEL' ? 'bg-red-600 hover:bg-red-700' : 'bg-purple-600 hover:bg-purple-700'}
+            `}
+          >
+            {submitting ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Processing...
+              </>
+            ) : (
+              'Confirm Action'
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/dealer-claim/components/request-detail/modals/InitiatorProposalApprovalModal.tsx

@@ -0,0 +1,867 @@
+/**
+ * InitiatorProposalApprovalModal Component
+ * Modal for Step 2: Requestor Evaluation & Confirmation
+ * Allows initiator to review dealer's proposal and approve/reject
+ */
+
+import { useState, useMemo, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Badge } from '@/components/ui/badge';
+import {
+  CheckCircle,
+  XCircle,
+  FileText,
+  IndianRupee,
+  Calendar,
+  MessageSquare,
+  Download,
+  Eye,
+  Plus,
+  Minus,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { getDocumentPreviewUrl, downloadDocument } from '@/services/workflowApi';
+import { DocumentCard } from '@/components/workflow/DocumentUpload/DocumentCard';
+import { FilePreview } from '@/components/common/FilePreview/FilePreview';
+import '@/components/common/FilePreview/FilePreview.css';
+import './DealerProposalModal.css';
+
+interface CostItem {
+  id: string;
+  description: string;
+  amount: number;
+  quantity?: number;
+}
+
+interface ProposalData {
+  proposalDocument?: {
+    name: string;
+    url?: string;
+    id?: string;
+  };
+  costBreakup: CostItem[];
+  expectedCompletionDate: string;
+  otherDocuments?: Array<{
+    name: string;
+    url?: string;
+    id?: string;
+  }>;
+  dealerComments: string;
+  submittedAt?: string;
+}
+
+interface InitiatorProposalApprovalModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onApprove: (comments: string) => Promise<void>;
+  onReject: (comments: string) => Promise<void>;
+  onRequestRevision?: (comments: string) => Promise<void>;
+  proposalData: ProposalData | null;
+  dealerName?: string;
+  activityName?: string;
+  requestId?: string;
+  request?: any; // Request object to check IO blocking status
+  previousProposalData?: any;
+  taxationType?: string | null;
+}
+
+export function InitiatorProposalApprovalModal({
+  isOpen,
+  onClose,
+  onApprove,
+  onReject,
+  onRequestRevision,
+  proposalData,
+  dealerName = 'Dealer',
+  activityName = 'Activity',
+  requestId: _requestId, // Prefix with _ to indicate intentionally unused
+  request,
+  previousProposalData,
+  taxationType,
+}: InitiatorProposalApprovalModalProps) {
+  const isNonGst = useMemo(() => {
+    return taxationType === 'Non GST' || taxationType === 'Non-GST';
+  }, [taxationType]);
+
+  const [comments, setComments] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [actionType, setActionType] = useState<'approve' | 'reject' | 'revision' | null>(null);
+  const [showPreviousProposal, setShowPreviousProposal] = useState(false);
+
+  // Calculate total budget (needed for display)
+  const totalBudget = useMemo(() => {
+    if (!proposalData?.costBreakup) return 0;
+
+    // Ensure costBreakup is an array
+    const costBreakup = Array.isArray(proposalData.costBreakup)
+      ? proposalData.costBreakup
+      : (typeof proposalData.costBreakup === 'string'
+        ? JSON.parse(proposalData.costBreakup)
+        : []);
+
+    if (!Array.isArray(costBreakup)) return 0;
+
+    return costBreakup.reduce((sum: number, item: any) => {
+      const amount = typeof item === 'object' ? (item.amount || 0) : 0;
+      const quantity = typeof item === 'object' ? (item.quantity || 1) : 1;
+      const baseTotal = amount * quantity;
+      const gst = typeof item === 'object' ? (item.gstAmt || 0) : 0;
+      const total = item.totalAmt || (baseTotal + gst);
+      return sum + (Number(total) || 0);
+    }, 0);
+  }, [proposalData]);
+
+  // Calculate total base amount (needed for budget verification as requested)
+  // This is the taxable amount excluding GST
+  const totalBaseAmount = useMemo(() => {
+    if (!proposalData?.costBreakup) return 0;
+
+    const costBreakup = Array.isArray(proposalData.costBreakup)
+      ? proposalData.costBreakup
+      : (typeof proposalData.costBreakup === 'string'
+        ? JSON.parse(proposalData.costBreakup)
+        : []);
+
+    if (!Array.isArray(costBreakup)) return 0;
+
+    return costBreakup.reduce((sum: number, item: any) => {
+      const amount = typeof item === 'object' ? (item.amount || 0) : 0;
+      const quantity = typeof item === 'object' ? (item.quantity || 1) : 1;
+      return sum + (Number(amount) * Number(quantity));
+    }, 0);
+  }, [proposalData]);
+
+  // Check if IO is blocked (IO blocking moved to Requestor Evaluation level)
+  // Sum up all successful blocks from internalOrders array
+  const totalBlockedAmount = useMemo(() => {
+    const internalOrders = request?.internalOrders || request?.internal_orders || [];
+
+    // If we have an array, sum the blocked amounts
+    if (Array.isArray(internalOrders) && internalOrders.length > 0) {
+      return internalOrders.reduce((sum: number, io: any) => {
+        const amt = Number(io.ioBlockedAmount || io.io_blocked_amount || 0);
+        return sum + amt;
+      }, 0);
+    }
+
+    // Fallback to single internalOrder object for backward compatibility
+    const singleIO = request?.internalOrder || request?.internal_order;
+    return Number(singleIO?.ioBlockedAmount || singleIO?.io_blocked_amount || 0);
+  }, [request?.internalOrders, request?.internal_orders, request?.internalOrder, request?.internal_order]);
+
+  // Budget is considered blocked only if the total blocked amount matches or exceeds the proposed base amount
+  // Allow a small margin for floating point comparison if needed, but here simple >= should suffice
+  const isIOBlocked = totalBlockedAmount >= (totalBaseAmount - 0.01);
+  const remainingBaseToBlock = Math.max(0, totalBaseAmount - totalBlockedAmount);
+
+  const [previewDoc, setPreviewDoc] = useState<{
+    name: string;
+    url: string;
+    type?: string;
+    size?: number;
+    id?: string;
+  } | null>(null);
+
+  // Format date
+  const formatDate = (dateString: string) => {
+    if (!dateString) return '—';
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleDateString('en-IN', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      });
+    } catch {
+      return dateString;
+    }
+  };
+
+  // Check if document can be previewed
+  const canPreviewDocument = (doc: { name: string; url?: string; id?: string }): boolean => {
+    if (!doc.name) return false;
+    const name = doc.name.toLowerCase();
+    return name.endsWith('.pdf') ||
+      name.endsWith('.jpg') ||
+      name.endsWith('.jpeg') ||
+      name.endsWith('.png') ||
+      name.endsWith('.gif') ||
+      name.endsWith('.webp');
+  };
+
+  // Handle document preview - leverage FilePreview's internal fetching
+  const handlePreviewDocument = (doc: { name: string; url?: string; id?: string; storageUrl?: string; documentId?: string }) => {
+    let fileUrl = doc.url || doc.storageUrl || '';
+    const documentId = doc.id || doc.documentId || '';
+
+    if (!documentId && !fileUrl) {
+      toast.error('Document preview not available');
+      return;
+    }
+
+    // Handle relative URLs for snapshots
+    if (fileUrl && !fileUrl.startsWith('http') && !fileUrl.startsWith('blob:')) {
+      const baseUrl = import.meta.env.VITE_BASE_URL || '';
+      const cleanBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+      const cleanFileUrl = fileUrl.startsWith('/') ? fileUrl : `/${fileUrl}`;
+      fileUrl = `${cleanBaseUrl}${cleanFileUrl}`;
+    }
+
+    setPreviewDoc({
+      name: doc.name || 'Document',
+      url: fileUrl || (documentId ? getDocumentPreviewUrl(documentId) : ''),
+      type: (doc.name || '').toLowerCase().endsWith('.pdf') ? 'application/pdf' : 'image/jpeg',
+      id: documentId
+    });
+  };
+
+  // Cleanup blob URLs on unmount
+  useEffect(() => {
+    return () => {
+      if (previewDoc?.url && previewDoc.url.startsWith('blob:')) {
+        window.URL.revokeObjectURL(previewDoc.url);
+      }
+    };
+  }, [previewDoc]);
+
+  const handleApprove = async () => {
+    if (!comments.trim()) {
+      toast.error('Please provide approval comments');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      setActionType('approve');
+      await onApprove(comments);
+      handleReset();
+      onClose();
+    } catch (error) {
+      console.error('Failed to approve proposal:', error);
+      toast.error('Failed to approve proposal. Please try again.');
+    } finally {
+      setSubmitting(false);
+      setActionType(null);
+    }
+  };
+
+  const handleReject = async () => {
+    if (!comments.trim()) {
+      toast.error('Please provide rejection reason');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      setActionType('reject');
+      await onReject(comments);
+      handleReset();
+      onClose();
+    } catch (error) {
+      console.error('Failed to reject proposal:', error);
+      toast.error('Failed to reject proposal. Please try again.');
+    } finally {
+      setSubmitting(false);
+      setActionType(null);
+    }
+  };
+
+  const handleRequestRevision = async () => {
+    if (!comments.trim()) {
+      toast.error('Please provide reasons for requesting a revision');
+      return;
+    }
+
+    if (!onRequestRevision) {
+      toast.error('Revision feature is not available');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      setActionType('revision');
+      await onRequestRevision(comments);
+      handleReset();
+      onClose();
+    } catch (error) {
+      console.error('Failed to request revision:', error);
+      toast.error('Failed to request revision. Please try again.');
+    } finally {
+      setSubmitting(false);
+      setActionType(null);
+    }
+  };
+
+  const handleReset = () => {
+    setComments('');
+    setActionType(null);
+  };
+
+  const handleClose = () => {
+    if (!submitting) {
+      handleReset();
+      onClose();
+    }
+  };
+
+  // Don't return null - show modal even if proposalData is not loaded yet
+  // This allows the modal to open and show a loading/empty state
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="dealer-proposal-modal overflow-hidden flex flex-col">
+        <DialogHeader className="flex-shrink-0 pb-3 lg:pb-4 px-6 pt-4 lg:pt-6 border-b">
+          <DialogTitle className="flex items-center gap-2 text-lg lg:text-xl flex-wrap">
+            <div className="flex items-center gap-2">
+              <CheckCircle className="w-4 h-4 lg:w-5 lg:h-5 text-green-600" />
+              Requestor Evaluation & Confirmation
+            </div>
+            {taxationType && (
+              <Badge className={`ml-2 border-none shadow-sm ${!isNonGst ? 'bg-emerald-600 text-white hover:bg-emerald-700' : 'bg-indigo-600 text-white hover:bg-indigo-700'}`}>
+                {!isNonGst ? 'GST Claim' : 'Non-GST Claim'}
+              </Badge>
+            )}
+          </DialogTitle>
+          <DialogDescription className="text-xs lg:text-sm">
+            Step 2: Review dealer proposal and make a decision
+          </DialogDescription>
+          <div className="space-y-1 mt-2 text-xs text-gray-600">
+            <div className="flex flex-wrap gap-x-4 gap-y-1">
+              <div>
+                <strong>Dealer:</strong> {dealerName}
+              </div>
+              <div>
+                <strong>Activity:</strong> {activityName}
+              </div>
+            </div>
+            <div className="mt-1 text-amber-600 font-medium">
+              Decision: <strong>Confirms?</strong> (YES → Continue to Dept Lead / NO → Request is cancelled)
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto overflow-x-hidden min-h-0 py-3 lg:py-4 px-6">
+
+          {/* Previous Proposal Reference Section */}
+          {previousProposalData && (
+            <div className="mb-6">
+              <div
+                className="bg-amber-50 border border-amber-200 rounded-lg overflow-hidden cursor-pointer hover:bg-amber-100/50 transition-colors"
+                onClick={() => setShowPreviousProposal(!showPreviousProposal)}
+              >
+                <div className="px-4 py-3 flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <FileText className="w-4 h-4 text-amber-700" />
+                    <span className="text-sm font-semibold text-amber-900">Reference: Previous Proposal Details (last revision)</span>
+                    <Badge variant="secondary" className="bg-amber-200 text-amber-800 text-[10px]">
+                      ₹{Number(previousProposalData.totalEstimatedBudget || previousProposalData.totalBudget || 0).toLocaleString('en-IN')}
+                    </Badge>
+                  </div>
+                  <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-amber-700">
+                    {showPreviousProposal ? <Minus className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
+                  </Button>
+                </div>
+
+                {showPreviousProposal && (
+                  <div className="px-4 pb-4 border-t border-amber-200 space-y-4 bg-white/50">
+                    {/* Header Info: Date & Document */}
+                    <div className="flex flex-wrap gap-4 text-xs mt-3">
+                      {previousProposalData.expectedCompletionDate && (
+                        <div className="flex items-center gap-1.5 text-gray-700">
+                          <Calendar className="w-3.5 h-3.5 text-gray-500" />
+                          <span className="font-medium">Expected Completion:</span>
+                          <span>{new Date(previousProposalData.expectedCompletionDate).toLocaleDateString('en-IN')}</span>
+                        </div>
+                      )}
+
+                      {previousProposalData.documentUrl && (
+                        <div className="flex items-center gap-1.5">
+                          {canPreviewDocument({ name: previousProposalData.documentUrl }) ? (
+                            <>
+                              <Eye className="w-3.5 h-3.5 text-blue-500" />
+                              <a
+                                href={previousProposalData.documentUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-blue-600 hover:underline font-medium flex items-center gap-1"
+                              >
+                                View Previous Document
+                              </a>
+                            </>
+                          ) : (
+                            <>
+                              <Download className="w-3.5 h-3.5 text-blue-500" />
+                              <a
+                                href={previousProposalData.documentUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-blue-600 hover:underline font-medium flex items-center gap-1"
+                              >
+                                Download Previous Document
+                              </a>
+                            </>
+                          )}
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Cost Breakdown */}
+                    {(previousProposalData.costItems || previousProposalData.costBreakup) && (previousProposalData.costItems || previousProposalData.costBreakup).length > 0 && (
+                      <div className="w-full pt-2 border-t border-amber-200/50">
+                        <p className="text-[10px] font-semibold text-gray-700 mb-2 flex items-center gap-1">
+                          <IndianRupee className="w-3 h-3" />
+                          Previous Cost Breakdown
+                        </p>
+                        <div className="border rounded-md overflow-hidden text-[10px]">
+                          <table className="w-full text-left">
+                            <thead className="bg-gray-50 text-gray-600">
+                              <tr>
+                                <th className="p-2 font-medium">Description</th>
+                                <th className="p-2 font-medium text-right">Amount</th>
+                              </tr>
+                            </thead>
+                            <tbody className="divide-y">
+                              {(previousProposalData.costItems || previousProposalData.costBreakup).map((item: any, idx: number) => (
+                                <tr key={idx} className="bg-white">
+                                  <td className="p-2 text-gray-800">{item.description}</td>
+                                  <td className="p-2 text-right text-gray-800 font-medium">
+                                    ₹{Number(item.amount).toLocaleString('en-IN')}
+                                  </td>
+                                </tr>
+                              ))}
+                              <tr className="bg-gray-50 font-bold border-t">
+                                <td className="p-2 text-gray-900">Total</td>
+                                <td className="p-2 text-right text-gray-900">
+                                  ₹{Number(previousProposalData.totalEstimatedBudget || previousProposalData.totalBudget || 0).toLocaleString('en-IN')}
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Additional/Supporting Documents */}
+                    {previousProposalData.otherDocuments && previousProposalData.otherDocuments.length > 0 && (
+                      <div className="w-full pt-2 border-t border-amber-200/50">
+                        <p className="text-[10px] font-semibold text-gray-700 mb-1.5 flex items-center gap-1">
+                          <FileText className="w-3 h-3" />
+                          Supporting Documents
+                        </p>
+                        <div className="space-y-2 max-h-[150px] overflow-y-auto">
+                          {previousProposalData.otherDocuments.map((doc: any, idx: number) => (
+                            <DocumentCard
+                              key={idx}
+                              document={{
+                                documentId: doc.documentId || doc.id || '',
+                                name: doc.originalFileName || doc.fileName || doc.name || 'Supporting Document',
+                                fileType: (doc.originalFileName || doc.fileName || doc.name || '').split('.').pop() || 'file',
+                                uploadedAt: doc.uploadedAt || new Date().toISOString()
+                              }}
+                              onPreview={canPreviewDocument({ name: doc.originalFileName || doc.fileName || doc.name || '' }) ? () => handlePreviewDocument(doc) : undefined}
+                              onDownload={async (id) => {
+                                if (id) {
+                                  await downloadDocument(id);
+                                } else {
+                                  let downloadUrl = doc.storageUrl || doc.documentUrl;
+                                  if (downloadUrl && !downloadUrl.startsWith('http')) {
+                                    const baseUrl = import.meta.env.VITE_BASE_URL || '';
+                                    const cleanBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+                                    const cleanFileUrl = downloadUrl.startsWith('/') ? downloadUrl : `/${downloadUrl}`;
+                                    downloadUrl = `${cleanBaseUrl}${cleanFileUrl}`;
+                                  }
+                                  if (downloadUrl) window.open(downloadUrl, '_blank');
+                                }
+                              }}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Comments */}
+                    {(previousProposalData.comments || previousProposalData.dealerComments) && (
+                      <div className="w-full pt-2 border-t border-amber-200/50">
+                        <p className="text-[10px] font-semibold text-gray-700 mb-1 flex items-center gap-1">
+                          <MessageSquare className="w-3 h-3" />
+                          Previous Comments
+                        </p>
+                        <div className="text-[10px] text-gray-600 bg-white p-2 border border-gray-100 rounded italic">
+                          "{previousProposalData.comments || previousProposalData.dealerComments}"
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-6 lg:items-start lg:content-start">
+            {/* Left Column - Documents */}
+            <div className="space-y-4 lg:space-y-4 flex flex-col">
+              {/* Proposal Document Section */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <h3 className="font-semibold text-sm lg:text-base flex items-center gap-2">
+                    <FileText className="w-4 h-4 text-blue-600" />
+                    Proposal Document
+                  </h3>
+                </div>
+                {proposalData?.proposalDocument ? (
+                  <div className="border rounded-lg p-2.5 lg:p-3 bg-gray-50 flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2 lg:gap-3 min-w-0 flex-1">
+                      <FileText className="w-5 h-5 lg:w-6 lg:h-6 text-blue-600 flex-shrink-0" />
+                      <div className="min-w-0 flex-1">
+                        <p className="font-medium text-xs lg:text-sm text-gray-900 truncate" title={proposalData.proposalDocument.name}>
+                          {proposalData.proposalDocument.name}
+                        </p>
+                        {proposalData?.submittedAt && (
+                          <p className="text-xs text-gray-500 truncate">
+                            Submitted on {formatDate(proposalData.submittedAt)}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 flex-shrink-0">
+                      {proposalData.proposalDocument.id && (
+                        <>
+                          {canPreviewDocument(proposalData.proposalDocument) && (
+                            <button
+                              type="button"
+                              onClick={() => handlePreviewDocument(proposalData.proposalDocument!)}
+                              className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+                              title="Preview document"
+                            >
+                              <Eye className="w-5 h-5 text-blue-600" />
+                            </button>
+                          )}
+                          <button
+                            type="button"
+                            onClick={async () => {
+                              try {
+                                if (proposalData.proposalDocument?.id) {
+                                  await downloadDocument(proposalData.proposalDocument.id);
+                                }
+                              } catch (error) {
+                                console.error('Failed to download document:', error);
+                                toast.error('Failed to download document');
+                              }
+                            }}
+                            className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+                            title="Download document"
+                          >
+                            <Download className="w-5 h-5 text-gray-600" />
+                          </button>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                ) : (
+                  <p className="text-xs text-gray-500 italic">No proposal document available</p>
+                )}
+              </div>
+
+              {/* Other Supporting Documents */}
+              {proposalData?.otherDocuments && proposalData.otherDocuments.length > 0 && (
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-semibold text-sm lg:text-base flex items-center gap-2">
+                      <FileText className="w-4 h-4 text-gray-600" />
+                      Other Supporting Documents
+                    </h3>
+                    <Badge variant="secondary" className="text-xs">
+                      {proposalData.otherDocuments.length} file(s)
+                    </Badge>
+                  </div>
+                  <div className="space-y-2 max-h-[150px] lg:max-h-[140px] overflow-y-auto">
+                    {proposalData.otherDocuments.map((doc, index) => (
+                      <div
+                        key={index}
+                        className="border rounded-lg p-2 lg:p-3 bg-gray-50 flex items-center justify-between gap-2"
+                      >
+                        <div className="flex items-center gap-2 lg:gap-3 min-w-0 flex-1">
+                          <FileText className="w-4 h-4 lg:w-5 lg:h-5 text-gray-600 flex-shrink-0" />
+                          <p className="text-xs lg:text-sm font-medium text-gray-900 truncate" title={doc.name}>
+                            {doc.name}
+                          </p>
+                        </div>
+                        {doc.id && (
+                          <div className="flex items-center gap-1 flex-shrink-0">
+                            {canPreviewDocument(doc) && (
+                              <button
+                                type="button"
+                                onClick={() => handlePreviewDocument(doc)}
+                                className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+                                title="Preview document"
+                              >
+                                <Eye className="w-5 h-5 text-blue-600" />
+                              </button>
+                            )}
+                            <button
+                              type="button"
+                              onClick={async () => {
+                                try {
+                                  if (doc.id) {
+                                    await downloadDocument(doc.id);
+                                  }
+                                } catch (error) {
+                                  console.error('Failed to download document:', error);
+                                  toast.error('Failed to download document');
+                                }
+                              }}
+                              className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+                              title="Download document"
+                            >
+                              <Download className="w-5 h-5 text-gray-600" />
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Right Column - Planning & Details */}
+            <div className="space-y-4 lg:space-y-4 flex flex-col">
+              {/* Cost Breakup Section */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <h3 className="font-semibold text-sm lg:text-base flex items-center gap-2">
+                    <IndianRupee className="w-4 h-4 text-green-600" />
+                    Cost Breakup
+                  </h3>
+                </div>
+                {(() => {
+                  // Ensure costBreakup is an array
+                  const costBreakup = proposalData?.costBreakup
+                    ? (Array.isArray(proposalData.costBreakup)
+                      ? proposalData.costBreakup
+                      : (typeof proposalData.costBreakup === 'string'
+                        ? JSON.parse(proposalData.costBreakup)
+                        : []))
+                    : [];
+
+                  return costBreakup && Array.isArray(costBreakup) && costBreakup.length > 0 ? (
+                    <>
+                      <div className="border rounded-lg overflow-hidden max-h-[200px] lg:max-h-[180px] overflow-y-auto">
+                        <div className="bg-gray-50 px-3 lg:px-4 py-2 border-b sticky top-0">
+                          <div className={`grid ${isNonGst ? 'grid-cols-3' : 'grid-cols-4'} gap-4 text-xs lg:text-sm font-semibold text-gray-700`}>
+                            <div className="col-span-1">Item Description</div>
+                            <div className="text-right">Base</div>
+                            {!isNonGst && <div className="text-right">GST</div>}
+                            <div className="text-right">Total</div>
+                          </div>
+                        </div>
+                        <div className="divide-y">
+                          {costBreakup.map((item: any, index: number) => (
+                            <div key={item?.id || item?.description || index} className={`px-3 lg:px-4 py-2 lg:py-3 grid ${isNonGst ? 'grid-cols-3' : 'grid-cols-4'} gap-4`}>
+                              <div className="col-span-1 text-xs lg:text-sm text-gray-700">
+                                <div className="flex items-center gap-1.5 mb-0.5">
+                                  <span className="font-medium">
+                                    {item?.description?.startsWith('[ADDITIONAL]')
+                                      ? item.description.replace('[ADDITIONAL]', '').trim()
+                                      : (item?.description || 'N/A')}
+                                  </span>
+                                  {costBreakup.some((i: any) => i?.description?.startsWith('[ADDITIONAL]')) && (
+                                    item?.description?.startsWith('[ADDITIONAL]') ? (
+                                      <Badge className="text-[9px] h-3.5 px-1 bg-amber-100 text-amber-700 hover:bg-amber-100 border-none leading-none">ADDITIONAL</Badge>
+                                    ) : (
+                                      <Badge className="text-[9px] h-3.5 px-1 bg-gray-100 text-gray-600 hover:bg-gray-100 border-none leading-none">ORIGINAL</Badge>
+                                    )
+                                  )}
+                                </div>
+                                {!isNonGst && item?.gstRate ? <span className="block text-[10px] text-gray-400">{item.gstRate}% GST</span> : null}
+                              </div>
+                              <div className="text-xs lg:text-sm text-gray-900 text-right">
+                                ₹{(Number(item?.amount) || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                              </div>
+                              {!isNonGst && (
+                                <div className="text-xs lg:text-sm text-gray-900 text-right">
+                                  ₹{(Number(item?.gstAmt) || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                                </div>
+                              )}
+                              <div className="text-xs lg:text-sm font-semibold text-gray-900 text-right">
+                                ₹{(Number(item?.totalAmt || ((item?.amount || 0) * (item?.quantity || 1) + (item?.gstAmt || 0))) || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                      <div className="border-2 border-[--re-green] rounded-lg p-2.5 lg:p-3">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <IndianRupee className="w-4 h-4 text-[--re-green]" />
+                            <span className="font-semibold text-xs lg:text-sm text-gray-700">Total Estimated Budget</span>
+                          </div>
+                          <div className="text-lg lg:text-xl font-bold text-[--re-green]">
+                            ₹{totalBudget.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                          </div>
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-xs text-gray-500 italic">No cost breakdown available</p>
+                  );
+                })()}
+              </div>
+
+              {/* Timeline Section */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <h3 className="font-semibold text-sm lg:text-base flex items-center gap-2">
+                    <Calendar className="w-4 h-4 text-purple-600" />
+                    Expected Completion Date
+                  </h3>
+                </div>
+                <div className="border rounded-lg p-2.5 lg:p-3 bg-gray-50">
+                  <p className="text-sm lg:text-base font-semibold text-gray-900">
+                    {proposalData?.expectedCompletionDate ? formatDate(proposalData.expectedCompletionDate) : 'Not specified'}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Comments Section - Side by Side */}
+            <div className="space-y-2 border-t pt-3 lg:pt-3 lg:col-span-2 mt-2">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6">
+                {/* Dealer Comments */}
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-semibold text-sm lg:text-base flex items-center gap-2">
+                      <MessageSquare className="w-4 h-4 text-blue-600" />
+                      Dealer Comments
+                    </h3>
+                  </div>
+                  <div className="border rounded-lg p-2.5 lg:p-3 bg-gray-50 max-h-[150px] lg:max-h-[140px] overflow-y-auto">
+                    <p className="text-xs text-gray-700 whitespace-pre-wrap">
+                      {proposalData?.dealerComments || 'No comments provided'}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Your Decision & Comments */}
+                <div className="space-y-2">
+                  <h3 className="font-semibold text-sm lg:text-base">Your Decision & Comments</h3>
+                  <Textarea
+                    placeholder="Provide your evaluation comments, approval conditions, or rejection reasons..."
+                    value={comments}
+                    onChange={(e) => setComments(e.target.value)}
+                    className="min-h-[150px] lg:min-h-[140px] text-xs lg:text-sm w-full"
+                  />
+                  <p className="text-xs text-gray-500">{comments.length} characters</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Warning for missing comments */}
+            {!comments.trim() && (
+              <div className="bg-amber-50 border border-amber-200 rounded-lg p-2 flex items-start gap-2 lg:col-span-2">
+                <XCircle className="w-3.5 h-3.5 text-amber-600 flex-shrink-0 mt-0.5" />
+                <p className="text-xs text-amber-800">
+                  Please provide comments before making a decision. Comments are required and will be visible to all participants.
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end px-6 pb-6 pt-3 lg:pt-4 flex-shrink-0 border-t bg-gray-50">
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            disabled={submitting}
+            className="border-2 w-full sm:w-auto"
+          >
+            Cancel
+          </Button>
+          <div className="flex flex-col gap-2 w-full sm:w-auto">
+            <div className="flex flex-col sm:flex-row gap-2">
+              <Button
+                onClick={handleRequestRevision}
+                disabled={!comments.trim() || submitting}
+                variant="secondary"
+                className="bg-amber-100 hover:bg-amber-200 text-amber-900 border border-amber-200 w-full sm:w-auto"
+              >
+                {submitting && actionType === 'revision' ? (
+                  'Requesting...'
+                ) : (
+                  <>
+                    <MessageSquare className="w-4 h-4 mr-2" />
+                    Request Revised Quotation
+                  </>
+                )}
+              </Button>
+              <Button
+                onClick={handleReject}
+                disabled={!comments.trim() || submitting}
+                variant="destructive"
+                className="bg-red-600 hover:bg-red-700 w-full sm:w-auto"
+              >
+                {submitting && actionType === 'reject' ? (
+                  'Rejecting...'
+                ) : (
+                  <>
+                    <XCircle className="w-4 h-4 mr-2" />
+                    Reject (Cancel Request)
+                  </>
+                )}
+              </Button>
+              <Button
+                onClick={handleApprove}
+                disabled={!comments.trim() || !isIOBlocked || submitting}
+                className="bg-green-600 hover:bg-green-700 text-white disabled:opacity-50 disabled:cursor-not-allowed w-full sm:w-auto"
+                title={!isIOBlocked ? 'Please block IO budget before approving' : ''}
+              >
+                {submitting && actionType === 'approve' ? (
+                  'Approving...'
+                ) : (
+                  <>
+                    <CheckCircle className="w-4 h-4 mr-2" />
+                    Approve (Continue to Dept Lead)
+                  </>
+                )}
+              </Button>
+            </div>
+            {/* Warning for IO not blocked - shown below Approve button */}
+            {!isIOBlocked && (
+              <p className="text-xs text-red-600 text-center sm:text-left font-medium">
+                {totalBlockedAmount > 0
+                  ? `Pending block: ₹${remainingBaseToBlock.toLocaleString('en-IN', { minimumFractionDigits: 2 })} more needs to be blocked in the IO Tab.`
+                  : "Please block IO budget in the IO Tab before approving."}
+              </p>
+            )}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+
+      {/* Standardized File Preview */}
+      {previewDoc && (
+        <FilePreview
+          fileName={previewDoc.name}
+          fileType={previewDoc.type || ''}
+          fileUrl={previewDoc.url}
+          fileSize={previewDoc.size}
+          attachmentId={previewDoc.id}
+          onDownload={downloadDocument}
+          open={!!previewDoc}
+          onClose={() => setPreviewDoc(null)}
+        />
+      )}
+    </Dialog>
+  );
+}

src/dealer-claim/components/request-detail/modals/SnapshotDetailsModal.tsx

@@ -0,0 +1,307 @@
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { 
+  FileText, 
+  Calendar, 
+  Receipt, 
+  AlignLeft
+} from "lucide-react";
+import { DocumentCard } from '@/components/workflow/DocumentUpload/DocumentCard';
+import { FilePreview } from '@/components/common/FilePreview/FilePreview';
+import { getDocumentPreviewUrl, downloadDocument } from '@/services/workflowApi';
+
+interface SnapshotDetailsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  snapshot: any;
+  type: 'PROPOSAL' | 'COMPLETION';
+  title?: string;
+}
+
+export function SnapshotDetailsModal({
+  isOpen,
+  onClose,
+  snapshot,
+  type,
+  title
+}: SnapshotDetailsModalProps) {
+  // State for preview
+  const [previewDoc, setPreviewDoc] = useState<{
+    fileName: string;
+    fileType: string;
+    documentId: string;
+    fileUrl?: string;
+    fileSize?: number;
+  } | null>(null);
+
+  if (!snapshot) return null;
+
+  const isProposal = type === 'PROPOSAL';
+
+  // Helper to format currency
+  const formatCurrency = (amount: number | string) => {
+    return Number(amount || 0).toLocaleString('en-IN', {
+      maximumFractionDigits: 2,
+      style: 'currency',
+      currency: 'INR'
+    });
+  };
+
+  // Helper to format date
+  const formatDate = (dateString: string) => {
+    if (!dateString) return null;
+    try {
+      return new Date(dateString).toLocaleDateString('en-IN', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric'
+      });
+    } catch {
+      return dateString;
+    }
+  };
+
+  // Helper to check if file is previewable
+  const canPreview = (fileName: string): boolean => {
+    if (!fileName) return false;
+    const name = fileName.toLowerCase();
+    return name.endsWith('.pdf') || 
+           !!name.match(/\.(jpg|jpeg|png|gif|webp)$/i);
+  };
+
+  // Helper to get file type for DocumentCard
+  const getFileType = (fileName: string) => {
+    const ext = (fileName || '').split('.').pop()?.toLowerCase();
+    if (ext === 'pdf') return 'pdf';
+    if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext || '')) return 'image';
+    return 'file';
+  };
+
+  // Handle document preview click
+  const handlePreview = (doc: any) => {
+    const fileName = doc.fileName || doc.originalFileName || (isProposal ? 'Proposal Document' : 'Completion Document');
+    const documentId = doc.documentId || '';
+    const fileType = fileName.toLowerCase().endsWith('.pdf') ? 'application/pdf' : 'image/jpeg';
+    
+    let fileUrl = '';
+    if (documentId) {
+      fileUrl = getDocumentPreviewUrl(documentId);
+    } else {
+      // Fallback for documents without ID (using direct storageUrl)
+      fileUrl = doc.storageUrl || doc.documentUrl || '';
+      if (fileUrl && !fileUrl.startsWith('http')) {
+        const baseUrl = import.meta.env.VITE_BASE_URL || '';
+        const cleanBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+        const cleanFileUrl = fileUrl.startsWith('/') ? fileUrl : `/${fileUrl}`;
+        fileUrl = `${cleanBaseUrl}${cleanFileUrl}`;
+      }
+    }
+
+    setPreviewDoc({
+      fileName,
+      fileType,
+      documentId,
+      fileUrl,
+      fileSize: doc.sizeBytes
+    });
+  };
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+          <DialogHeader className="px-6 py-4 border-b">
+            <DialogTitle className="flex items-center gap-2">
+              {isProposal ? (
+                <FileText className="w-5 h-5 text-blue-600" />
+              ) : (
+                <Receipt className="w-5 h-5 text-green-600" />
+              )}
+              {title || (isProposal ? 'Proposal Snapshot Details' : 'Completion Snapshot Details')}
+            </DialogTitle>
+            <DialogDescription>
+              View detailed snapshot of the {isProposal ? 'proposal' : 'completion request'} at this version.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto min-h-0 px-6 py-4">
+            <div className="space-y-6">
+              {/* Header Stats */}
+              <div className="grid grid-cols-2 gap-4">
+                <div className="p-3 bg-gray-50 rounded-lg border border-gray-100">
+                  <p className="text-xs text-gray-500 font-medium mb-1">
+                    {isProposal ? 'Total Budget' : 'Total Expenses'}
+                  </p>
+                  <p className={`text-lg font-bold ${isProposal ? 'text-blue-700' : 'text-green-700'}`}>
+                    {formatCurrency(snapshot.totalBudget || snapshot.totalExpenses)}
+                  </p>
+                </div>
+                
+                {isProposal && snapshot.expectedCompletionDate && (
+                  <div className="p-3 bg-gray-50 rounded-lg border border-gray-100">
+                    <p className="text-xs text-gray-500 font-medium mb-1 flex items-center gap-1">
+                      <Calendar className="w-3 h-3" />
+                      Expected Completion
+                    </p>
+                    <p className="text-sm font-semibold text-gray-700">
+                      {formatDate(snapshot.expectedCompletionDate)}
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              {/* Main Document */}
+              {snapshot.documentUrl && (
+                <div className="space-y-2">
+                  <h4 className="text-sm font-semibold text-gray-900 border-b pb-1">
+                    Primary Document
+                  </h4>
+                  <DocumentCard
+                    document={{
+                      documentId: '',
+                      name: isProposal ? 'Proposal Document' : 'Completion Document',
+                      fileType: getFileType(snapshot.documentUrl),
+                      uploadedAt: new Date().toISOString()
+                    }}
+                    onPreview={canPreview(snapshot.documentUrl) ? () => handlePreview({
+                      fileName: isProposal ? 'Proposal Document' : 'Completion Document',
+                      documentUrl: snapshot.documentUrl
+                    }) : undefined}
+                    onDownload={async () => {
+                      // Handle download for document without ID
+                      let downloadUrl = snapshot.documentUrl;
+                      if (!downloadUrl.startsWith('http')) {
+                        const baseUrl = import.meta.env.VITE_BASE_URL || '';
+                        const cleanBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+                        const cleanFileUrl = downloadUrl.startsWith('/') ? downloadUrl : `/${downloadUrl}`;
+                        downloadUrl = `${cleanBaseUrl}${cleanFileUrl}`;
+                      }
+                      window.open(downloadUrl, '_blank');
+                    }}
+                  />
+                </div>
+              )}
+
+              {/* Supporting Documents */}
+              {snapshot.otherDocuments && snapshot.otherDocuments.length > 0 && (
+                <div className="space-y-2">
+                  <h4 className="text-sm font-semibold text-gray-900 border-b pb-1 flex items-center justify-between">
+                    <span>Supporting Documents</span>
+                    <Badge variant="secondary" className="text-[10px] h-5">
+                      {snapshot.otherDocuments.length} Files
+                    </Badge>
+                  </h4>
+                  <div className="space-y-2">
+                    {snapshot.otherDocuments.map((doc: any, idx: number) => (
+                      <DocumentCard
+                        key={idx}
+                        document={{
+                          documentId: doc.documentId || '',
+                          name: doc.originalFileName || doc.fileName || 'Supporting Document',
+                          fileType: getFileType(doc.originalFileName || doc.fileName || ''),
+                          uploadedAt: doc.uploadedAt || new Date().toISOString()
+                        }}
+                        onPreview={canPreview(doc.originalFileName || doc.fileName || '') ? () => handlePreview(doc) : undefined}
+                        onDownload={doc.documentId ? downloadDocument : async () => {
+                          let downloadUrl = doc.storageUrl || doc.documentUrl;
+                          if (downloadUrl && !downloadUrl.startsWith('http')) {
+                            const baseUrl = import.meta.env.VITE_BASE_URL || '';
+                            const cleanBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+                            const cleanFileUrl = downloadUrl.startsWith('/') ? downloadUrl : `/${downloadUrl}`;
+                            downloadUrl = `${cleanBaseUrl}${cleanFileUrl}`;
+                          }
+                          if (downloadUrl) window.open(downloadUrl, '_blank');
+                        }}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Cost Breakup / Expenses */}
+              {(snapshot.costItems || snapshot.expenses) && (
+                <div className="space-y-2">
+                  <h4 className="text-sm font-semibold text-gray-900 border-b pb-1">
+                    {isProposal ? 'Cost Breakdown' : 'Expenses Breakdown'}
+                  </h4>
+                  <div className="border rounded-md overflow-hidden text-sm">
+                    <table className="w-full text-left">
+                      <thead className="bg-gray-50 text-gray-600 text-xs uppercase">
+                        <tr>
+                          <th className="p-3 font-medium">Description</th>
+                          <th className="p-3 font-medium text-right">Amount</th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-gray-100">
+                        {(snapshot.costItems || snapshot.expenses).length > 0 ? (
+                          (snapshot.costItems || snapshot.expenses).map((item: any, idx: number) => (
+                            <tr key={idx} className="bg-white hover:bg-gray-50/50">
+                              <td className="p-3 text-gray-800">{item.description}</td>
+                              <td className="p-3 text-right text-gray-900 font-medium tabular-nums">
+                                {formatCurrency(item.amount)}
+                              </td>
+                            </tr>
+                          ))
+                        ) : (
+                          <tr>
+                            <td colSpan={2} className="p-4 text-center text-gray-500 italic text-xs">
+                              No breakdown items available
+                            </td>
+                          </tr>
+                        )}
+                        <tr className="bg-gray-50/80 font-semibold text-gray-900 border-t-2 border-gray-100">
+                          <td className="p-3">Total</td>
+                          <td className="p-3 text-right tabular-nums">
+                            {formatCurrency(snapshot.totalBudget || snapshot.totalExpenses)}
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              )}
+
+              {/* Comments */}
+              {snapshot.comments && (
+                <div className="space-y-2">
+                  <h4 className="text-sm font-semibold text-gray-900 border-b pb-1 flex items-center gap-1">
+                    <AlignLeft className="w-4 h-4" />
+                    Comments
+                  </h4>
+                  <div className="bg-gray-50 rounded-lg p-3 text-sm text-gray-700 italic border border-gray-100">
+                    {snapshot.comments}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="px-6 py-4 border-t bg-gray-50 flex justify-end">
+            <Button onClick={onClose}>Close</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* File Preview */}
+      {previewDoc && (
+        <FilePreview
+          fileName={previewDoc.fileName}
+          fileType={previewDoc.fileType}
+          fileUrl={previewDoc.fileUrl}
+          fileSize={previewDoc.fileSize}
+          attachmentId={previewDoc.documentId}
+          onDownload={downloadDocument}
+          open={!!previewDoc}
+          onClose={() => setPreviewDoc(null)}
+        />
+      )}
+    </>
+  );
+}

src/dealer-claim/components/request-detail/modals/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Dealer Claim Request Detail Modals
+ * 
+ * These modals are specific to Dealer Claim request details.
+ * Located in: src/dealer-claim/components/request-detail/modals/
+ */
+
+export { AdditionalApproverReviewModal } from './AdditionalApproverReviewModal';
+export { CreditNoteSAPModal } from './CreditNoteSAPModal';
+export { DealerCompletionDocumentsModal } from './DealerCompletionDocumentsModal';
+export { DealerProposalSubmissionModal } from './DealerProposalSubmissionModal';
+export { DeptLeadIOApprovalModal } from './DeptLeadIOApprovalModal';
+export { DMSPushModal } from './DMSPushModal';
+export { EditClaimAmountModal } from './EditClaimAmountModal';
+export { EmailNotificationTemplateModal } from './EmailNotificationTemplateModal';
+export { InitiatorActionModal } from './InitiatorActionModal';
+export { InitiatorProposalApprovalModal } from './InitiatorProposalApprovalModal';
+export { SnapshotDetailsModal } from './SnapshotDetailsModal';

src/dealer-claim/index.ts

@@ -0,0 +1,42 @@
+/**
+ * Dealer Claim Request Flow
+ * 
+ * This module exports all components, hooks, utilities, and types
+ * specific to Dealer Claim requests. This allows for complete segregation
+ * of dealer claim functionality.
+ * 
+ * LOCATION: src/dealer-claim/
+ * 
+ * To remove Dealer Claim flow completely:
+ * 1. Delete this entire folder: src/dealer-claim/
+ * 2. Remove from src/flows.ts registry
+ * 3. Done! All dealer claim code is removed.
+ */
+
+// Request Detail Components
+export { DealerClaimOverviewTab } from './components/request-detail/OverviewTab';
+export { DealerClaimWorkflowTab } from './components/request-detail/WorkflowTab';
+export { IOTab } from './components/request-detail/IOTab';
+
+// Request Detail Cards
+export * from './components/request-detail/claim-cards';
+
+// Request Detail Modals
+export * from './components/request-detail/modals';
+
+// Request Creation Components
+export { ClaimManagementWizard } from './components/request-creation/ClaimManagementWizard';
+
+// Request Detail Screen (Complete standalone screen)
+export { DealerClaimRequestDetail } from './pages/RequestDetail';
+
+// Dashboard
+export { DealerDashboard } from './pages/Dashboard';
+
+// Filters
+export { DealerRequestsFilters } from './components/DealerRequestsFilters';
+export { DealerClosedRequestsFilters } from './components/DealerClosedRequestsFilters';
+export { DealerUserAllRequestsFilters } from './components/DealerUserAllRequestsFilters';
+
+// Re-export types
+export type { RequestDetailProps } from '@/pages/RequestDetail/types/requestDetail.types';

src/dealer-claim/pages/Dashboard.tsx

@@ -0,0 +1,671 @@
+import { useEffect, useState, useMemo } from 'react';
+import { Shield, Clock, FileText, ChartColumn, ChartPie, Activity, Target, DollarSign, Zap, Package, TrendingUp, TrendingDown, CircleCheckBig, CircleX, CreditCard, TriangleAlert } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { PieChart, Pie, Cell, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { getDealerDashboard, type DashboardKPIs as DashboardKPIsType, type CategoryData as CategoryDataType } from '@/services/dealerClaimApi';
+import { RefreshCw } from 'lucide-react';
+import { toast } from 'sonner';
+
+// Use types from dealerClaimApi
+type DashboardKPIs = DashboardKPIsType;
+type CategoryData = CategoryDataType;
+
+interface DashboardProps {
+  onNavigate?: (page: string) => void;
+  onNewRequest?: () => void;
+}
+
+export function DealerDashboard({ onNavigate, onNewRequest: _onNewRequest }: DashboardProps) {
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [kpis, setKpis] = useState<DashboardKPIs>({
+    totalClaims: 0,
+    totalValue: 0,
+    approved: 0,
+    rejected: 0,
+    pending: 0,
+    credited: 0,
+    pendingCredit: 0,
+    approvedValue: 0,
+    rejectedValue: 0,
+    pendingValue: 0,
+    creditedValue: 0,
+    pendingCreditValue: 0,
+  });
+  const [categoryData, setCategoryData] = useState<CategoryData[]>([]);
+  const [dateRange, _setDateRange] = useState<string>('all');
+  const [startDate, _setStartDate] = useState<string | undefined>();
+  const [endDate, _setEndDate] = useState<string | undefined>();
+
+  const fetchDashboardData = async (isRefresh = false) => {
+    try {
+      if (isRefresh) {
+        setRefreshing(true);
+      } else {
+        setLoading(true);
+      }
+
+      // Fetch dealer claims dashboard data
+      const data = await getDealerDashboard(
+        dateRange || 'all',
+        startDate,
+        endDate
+      );
+      
+      setKpis(data.kpis || {
+        totalClaims: 0,
+        totalValue: 0,
+        approved: 0,
+        rejected: 0,
+        pending: 0,
+        credited: 0,
+        pendingCredit: 0,
+        approvedValue: 0,
+        rejectedValue: 0,
+        pendingValue: 0,
+        creditedValue: 0,
+        pendingCreditValue: 0,
+      });
+
+      setCategoryData(data.categoryData || []);
+    } catch (error: any) {
+      console.error('[DealerDashboard] Error fetching data:', error);
+      toast.error('Failed to load dashboard data. Please try again later.');
+      // Reset to empty state on error
+      setKpis({
+        totalClaims: 0,
+        totalValue: 0,
+        approved: 0,
+        rejected: 0,
+        pending: 0,
+        credited: 0,
+        pendingCredit: 0,
+        approvedValue: 0,
+        rejectedValue: 0,
+        pendingValue: 0,
+        creditedValue: 0,
+        pendingCreditValue: 0,
+      });
+      setCategoryData([]);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchDashboardData();
+  }, []);
+
+  const formatCurrency = (amount: number, showExactRupees = false) => {
+    // Handle null, undefined, or invalid values
+    if (amount == null || isNaN(amount)) {
+      return '₹0';
+    }
+    
+    // Convert to number if it's a string
+    const numAmount = typeof amount === 'string' ? parseFloat(amount) : Number(amount);
+    
+    // Handle zero or negative values
+    if (numAmount <= 0) {
+      return '₹0';
+    }
+    
+    // If showExactRupees is true or amount is less than 10,000, show exact rupees
+    if (showExactRupees || numAmount < 10000) {
+      return `₹${Math.round(numAmount).toLocaleString('en-IN')}`;
+    }
+    
+    if (numAmount >= 100000) {
+      return `₹${(numAmount / 100000).toFixed(1)}L`;
+    }
+    if (numAmount >= 1000) {
+      return `₹${(numAmount / 1000).toFixed(1)}K`;
+    }
+    // Show exact rupee amount for amounts less than 1000 (e.g., ₹100, ₹200, ₹999)
+    return `₹${Math.round(numAmount).toLocaleString('en-IN')}`;
+  };
+
+  const formatNumber = (num: number) => {
+    return num.toLocaleString('en-IN');
+  };
+
+  const calculateApprovalRate = () => {
+    if (kpis.totalClaims === 0) return 0;
+    return ((kpis.approved / kpis.totalClaims) * 100).toFixed(1);
+  };
+
+  const calculateCreditRate = () => {
+    if (kpis.approved === 0) return 0;
+    return ((kpis.credited / kpis.approved) * 100).toFixed(1);
+  };
+
+  // Prepare data for pie chart (Distribution by Activity Type)
+  const distributionData = useMemo(() => {
+    const totalRaised = categoryData.reduce((sum, cat) => sum + cat.raised, 0);
+    if (totalRaised === 0) return [];
+
+    return categoryData.map(cat => ({
+      name: cat.activityType.length > 20 ? cat.activityType.substring(0, 20) + '...' : cat.activityType,
+      value: cat.raised,
+      fullName: cat.activityType,
+      percentage: ((cat.raised / totalRaised) * 100).toFixed(0),
+    }));
+  }, [categoryData]);
+
+  // Prepare data for bar chart (Status by Category)
+  const statusByCategoryData = useMemo(() => {
+    return categoryData.map(cat => ({
+      name: cat.activityType.length > 15 ? cat.activityType.substring(0, 15) + '...' : cat.activityType,
+      fullName: cat.activityType,
+      Raised: cat.raised,
+      Approved: cat.approved,
+      Rejected: cat.rejected,
+      Pending: cat.pending,
+    }));
+  }, [categoryData]);
+
+  // Prepare data for value comparison chart (keep original values, formatCurrency will handle display)
+  const valueComparisonData = useMemo(() => {
+    return categoryData.map(cat => ({
+      name: cat.activityType.length > 15 ? cat.activityType.substring(0, 15) + '...' : cat.activityType,
+      fullName: cat.activityType,
+      Raised: cat.raisedValue, // Keep original value
+      Approved: cat.approvedValue, // Keep original value
+      Credited: cat.creditedValue, // Keep original value
+    }));
+  }, [categoryData]);
+
+  const COLORS = ['#166534', '#15803d', '#16a34a', '#22c55e', '#4ade80', '#86efac', '#bbf7d0'];
+
+  // Find best performing category
+  const bestPerforming = useMemo(() => {
+    if (categoryData.length === 0) return null;
+    return categoryData.reduce((best, cat) => 
+      cat.approvalRate > (best?.approvalRate || 0) ? cat : best
+    );
+  }, [categoryData]);
+
+  // Find highest value category
+  const highestValue = useMemo(() => {
+    if (categoryData.length === 0) return null;
+    return categoryData.reduce((best, cat) => 
+      cat.raisedValue > (best?.raisedValue || 0) ? cat : best
+    );
+  }, [categoryData]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="flex flex-col items-center gap-4">
+          <RefreshCw className="w-8 h-8 animate-spin text-blue-600" />
+          <p className="text-muted-foreground">Loading dashboard...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show empty state if no data
+  const hasNoData = kpis.totalClaims === 0 && categoryData.length === 0;
+
+  if (hasNoData) {
+    return (
+      <div className="space-y-6 max-w-[1600px] mx-auto p-4">
+        {/* Hero Section */}
+        <Card className="border-0 shadow-xl relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900" />
+          <CardContent className="relative z-10 p-8 lg:p-12">
+            <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
+              <div className="text-white">
+                <div className="flex items-center gap-4 mb-6">
+                  <div className="w-16 h-16 bg-yellow-400 rounded-xl flex items-center justify-center shadow-lg">
+                    <Shield className="w-8 h-8 text-slate-900" />
+                  </div>
+                  <div>
+                    <h1 className="text-4xl text-white font-bold">Claims Analytics Dashboard</h1>
+                    <p className="text-xl text-gray-200 mt-1">Comprehensive insights into approval workflows</p>
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-4 mt-8">
+                  <Button
+                    onClick={() => onNavigate?.('/new-request')}
+                    className="bg-blue-600 hover:bg-blue-700 text-white border-0 shadow-lg hover:shadow-xl transition-all duration-200"
+                  >
+                    <FileText className="w-5 h-5 mr-2" />
+                    Create New Claim
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      setRefreshing(true);
+                      fetchDashboardData(true);
+                    }}
+                    disabled={refreshing}
+                    variant="outline"
+                    className="bg-white/10 hover:bg-white/20 text-white border-white/20"
+                  >
+                    <RefreshCw className={`w-5 h-5 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
+                    Refresh
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Empty State */}
+        <Card className="shadow-lg">
+          <CardContent className="flex flex-col items-center justify-center py-16 px-4">
+            <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-6">
+              <ChartPie className="w-12 h-12 text-gray-400" />
+            </div>
+            <h2 className="text-2xl font-semibold text-gray-900 mb-2">No Claims Data Available</h2>
+            <p className="text-gray-600 text-center max-w-md mb-6">
+              You don't have any claims data yet. Once you create and submit claim requests, your analytics will appear here.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <Button
+                onClick={() => onNavigate?.('/new-request')}
+                className="bg-blue-600 hover:bg-blue-700 text-white"
+              >
+                <FileText className="w-5 h-5 mr-2" />
+                Create Your First Claim
+              </Button>
+              <Button
+                onClick={() => {
+                  setRefreshing(true);
+                  fetchDashboardData(true);
+                }}
+                disabled={refreshing}
+                variant="outline"
+              >
+                <RefreshCw className={`w-5 h-5 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
+                Refresh Data
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 max-w-[1600px] mx-auto p-4">
+      {/* Hero Section */}
+      <Card className="border-0 shadow-xl relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900" />
+        <CardContent className="relative z-10 p-8 lg:p-12">
+          <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
+            <div className="text-white">
+              <div className="flex items-center gap-4 mb-6">
+                <div className="w-16 h-16 bg-yellow-400 rounded-xl flex items-center justify-center shadow-lg">
+                  <Shield className="w-8 h-8 text-slate-900" />
+                </div>
+                <div>
+                  <h1 className="text-4xl text-white font-bold">Claims Analytics Dashboard</h1>
+                  <p className="text-xl text-gray-200 mt-1">Comprehensive insights into approval workflows</p>
+                </div>
+              </div>
+              <div className="flex flex-wrap gap-4 mt-8">
+                <Button
+                  onClick={() => onNavigate?.('/requests?status=pending')}
+                  className="bg-blue-600 hover:bg-blue-700 text-white border-0 shadow-lg hover:shadow-xl transition-all duration-200"
+                >
+                  <Clock className="w-5 h-5 mr-2" />
+                  View Pending Claims
+                </Button>
+                <Button
+                  onClick={() => onNavigate?.('/requests')}
+                  className="bg-emerald-600 hover:bg-emerald-700 text-white border-0 shadow-lg hover:shadow-xl transition-all duration-200"
+                >
+                  <FileText className="w-5 h-5 mr-2" />
+                  My Claims
+                </Button>
+              </div>
+            </div>
+            <div className="hidden lg:flex items-center gap-4">
+              <div className="w-24 h-24 bg-yellow-400/20 rounded-full flex items-center justify-center">
+                <div className="w-16 h-16 bg-yellow-400/30 rounded-full flex items-center justify-center">
+                  <ChartColumn className="w-8 h-8 text-yellow-400" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* KPI Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 gap-4">
+        <Card className="border-l-4 border-l-blue-500 shadow-lg hover:shadow-xl transition-all duration-300">
+          <CardHeader className="pb-2">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm text-muted-foreground">Raised Claims</CardTitle>
+              <div className="p-2 rounded-lg bg-blue-50">
+                <FileText className="h-4 w-4 text-blue-600" />
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl text-gray-900">{formatNumber(kpis.totalClaims)}</div>
+            <p className="text-xs text-muted-foreground mt-1">{formatCurrency(kpis.totalValue, true)}</p>
+          </CardContent>
+        </Card>
+
+        <Card className="border-l-4 border-l-green-500 shadow-lg hover:shadow-xl transition-all duration-300">
+          <CardHeader className="pb-2">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm text-muted-foreground">Approved</CardTitle>
+              <div className="p-2 rounded-lg bg-green-50">
+                <CircleCheckBig className="h-4 w-4 text-green-600" />
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl text-gray-900">{formatNumber(kpis.approved)}</div>
+            <div className="flex items-center gap-1 mt-1">
+              <TrendingUp className="h-3 w-3 text-green-600" />
+              <p className="text-xs text-green-600">{calculateApprovalRate()}% approval rate</p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="border-l-4 border-l-red-500 shadow-lg hover:shadow-xl transition-all duration-300">
+          <CardHeader className="pb-2">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm text-muted-foreground">Rejected</CardTitle>
+              <div className="p-2 rounded-lg bg-red-50">
+                <CircleX className="h-4 w-4 text-red-600" />
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl text-gray-900">{formatNumber(kpis.rejected)}</div>
+            <div className="flex items-center gap-1 mt-1">
+              <TrendingDown className="h-3 w-3 text-red-600" />
+              <p className="text-xs text-red-600">
+                {kpis.totalClaims > 0 ? ((kpis.rejected / kpis.totalClaims) * 100).toFixed(1) : 0}% rejection rate
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="border-l-4 border-l-orange-500 shadow-lg hover:shadow-xl transition-all duration-300">
+          <CardHeader className="pb-2">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm text-muted-foreground">Pending</CardTitle>
+              <div className="p-2 rounded-lg bg-orange-50">
+                <Clock className="h-4 w-4 text-orange-600" />
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl text-gray-900">{formatNumber(kpis.pending)}</div>
+            <p className="text-xs text-muted-foreground mt-1">{formatCurrency(kpis.pendingValue)}</p>
+          </CardContent>
+        </Card>
+
+        <Card className="border-l-4 border-l-emerald-500 shadow-lg hover:shadow-xl transition-all duration-300">
+          <CardHeader className="pb-2">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm text-muted-foreground">Credited</CardTitle>
+              <div className="p-2 rounded-lg bg-emerald-50">
+                <CreditCard className="h-4 w-4 text-emerald-600" />
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl text-gray-900">{formatNumber(kpis.credited)}</div>
+            <div className="flex items-center gap-1 mt-1">
+              <TrendingUp className="h-3 w-3 text-emerald-600" />
+              <p className="text-xs text-emerald-600">{calculateCreditRate()}% credit rate</p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="border-l-4 border-l-amber-500 shadow-lg hover:shadow-xl transition-all duration-300">
+          <CardHeader className="pb-2">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm text-muted-foreground">Pending Credit</CardTitle>
+              <div className="p-2 rounded-lg bg-amber-50">
+                <TriangleAlert className="h-4 w-4 text-amber-600" />
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl text-gray-900">{formatNumber(kpis.pendingCredit)}</div>
+            <p className="text-xs text-muted-foreground mt-1">{formatCurrency(kpis.pendingCreditValue)}</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Charts Section */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Distribution by Activity Type */}
+        <Card className="shadow-lg">
+          <CardHeader>
+            <div className="flex items-center gap-3">
+              <div className="p-3 bg-purple-100 rounded-lg">
+                <ChartPie className="h-5 w-5 text-purple-600" />
+              </div>
+              <div>
+                <CardTitle>Claims Distribution by Activity Type</CardTitle>
+                <CardDescription>Total claims raised across activity types</CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <PieChart>
+                <Pie
+                  data={distributionData}
+                  cx="50%"
+                  cy="50%"
+                  labelLine={false}
+                  label={({ name, percentage }) => `${name}: ${percentage}%`}
+                  outerRadius={80}
+                  fill="#8884d8"
+                  dataKey="value"
+                >
+                  {distributionData.map((_entry, index) => (
+                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                  ))}
+                </Pie>
+                <Tooltip />
+              </PieChart>
+            </ResponsiveContainer>
+            <div className="grid grid-cols-3 gap-2 mt-4">
+              {distributionData.slice(0, 3).map((item, index) => (
+                <div key={index} className="flex items-center gap-2 p-2 rounded-lg bg-gray-50">
+                  <div className="w-3 h-3 rounded" style={{ backgroundColor: COLORS[index % COLORS.length] }} />
+                  <div>
+                    <p className="text-xs text-gray-600">{item.name}</p>
+                    <p className="text-sm text-gray-900">{formatNumber(item.value)}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Status by Category */}
+        <Card className="shadow-lg">
+          <CardHeader>
+            <div className="flex items-center gap-3">
+              <div className="p-3 bg-blue-100 rounded-lg">
+                <ChartColumn className="h-5 w-5 text-blue-600" />
+              </div>
+              <div>
+                <CardTitle>Claims Status by Activity Type</CardTitle>
+                <CardDescription>Count comparison across workflow stages</CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={statusByCategoryData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="name" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Bar dataKey="Raised" fill="#3b82f6" />
+                <Bar dataKey="Approved" fill="#22c55e" />
+                <Bar dataKey="Rejected" fill="#ef4444" />
+                <Bar dataKey="Pending" fill="#f59e0b" />
+              </BarChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Detailed Category Breakdown */}
+      <Card className="shadow-lg">
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <div className="p-3 bg-emerald-100 rounded-lg">
+              <Activity className="h-5 w-5 text-emerald-600" />
+            </div>
+            <div>
+              <CardTitle>Detailed Activity Type Breakdown</CardTitle>
+              <CardDescription>In-depth analysis of claims by type and status</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div>
+              <h3 className="text-lg mb-4 text-gray-900">Activity Type Value Comparison</h3>
+              <ResponsiveContainer width="100%" height={350}>
+                <BarChart data={valueComparisonData}>
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="name" />
+                  <YAxis tickFormatter={(value) => formatCurrency(value)} />
+                  <Tooltip 
+                    formatter={(value: number) => formatCurrency(value)}
+                    labelFormatter={(label) => label}
+                  />
+                  <Legend />
+                  <Bar dataKey="Raised" fill="#3b82f6" />
+                  <Bar dataKey="Approved" fill="#22c55e" />
+                  <Bar dataKey="Credited" fill="#10b981" />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+              {categoryData.slice(0, 3).map((cat, index) => (
+                <Card key={index} className="shadow-md hover:shadow-lg transition-shadow">
+                  <CardHeader className="pb-3">
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="text-base">{cat.activityType}</CardTitle>
+                      <Badge className="bg-emerald-50 text-emerald-700 border-emerald-200">
+                        {cat.approvalRate.toFixed(1)}% approved
+                      </Badge>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    <div className="space-y-2">
+                      <div className="flex justify-between text-sm">
+                        <span className="text-gray-600">Raised:</span>
+                        <span className="text-gray-900">{formatNumber(cat.raised)} ({formatCurrency(cat.raisedValue)})</span>
+                      </div>
+                      <div className="flex justify-between text-sm">
+                        <span className="text-gray-600">Approved:</span>
+                        <span className="text-green-600">{formatNumber(cat.approved)} ({formatCurrency(cat.approvedValue)})</span>
+                      </div>
+                      <div className="flex justify-between text-sm">
+                        <span className="text-gray-600">Rejected:</span>
+                        <span className="text-red-600">{formatNumber(cat.rejected)} ({formatCurrency(cat.rejectedValue)})</span>
+                      </div>
+                      <div className="flex justify-between text-sm">
+                        <span className="text-gray-600">Pending:</span>
+                        <span className="text-orange-600">{formatNumber(cat.pending)} ({formatCurrency(cat.pendingValue)})</span>
+                      </div>
+                      <div className="h-px bg-gray-200 my-2" />
+                      <div className="flex justify-between text-sm">
+                        <span className="text-gray-600">Credited:</span>
+                        <span className="text-emerald-600">{formatNumber(cat.credited)} ({formatCurrency(cat.creditedValue)})</span>
+                      </div>
+                      <div className="flex justify-between text-sm">
+                        <span className="text-gray-600">Pending Credit:</span>
+                        <span className="text-amber-600">{formatNumber(cat.pendingCredit)} ({formatCurrency(cat.pendingCreditValue)})</span>
+                      </div>
+                    </div>
+                    <div className="pt-2">
+                      <div className="flex justify-between text-xs text-gray-600 mb-1">
+                        <span>Credit Rate</span>
+                        <span>{cat.creditRate.toFixed(1)}%</span>
+                      </div>
+                      <Progress value={cat.creditRate} className="h-2" />
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Performance Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card className="border-t-4 border-t-green-500 shadow-lg hover:shadow-xl transition-shadow">
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between mb-4">
+              <div className="p-3 bg-green-100 rounded-lg">
+                <Target className="h-6 w-6 text-green-600" />
+              </div>
+              <TrendingUp className="h-5 w-5 text-green-600" />
+            </div>
+            <h3 className="text-sm text-gray-600 mb-1">Best Performing</h3>
+            <p className="text-xl text-gray-900 mb-1">{bestPerforming?.activityType || 'N/A'}</p>
+            <p className="text-sm text-green-600">{bestPerforming?.approvalRate.toFixed(2) || 0}% approval rate</p>
+          </CardContent>
+        </Card>
+
+        <Card className="border-t-4 border-t-blue-500 shadow-lg hover:shadow-xl transition-shadow">
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between mb-4">
+              <div className="p-3 bg-blue-100 rounded-lg">
+                <DollarSign className="h-6 w-6 text-blue-600" />
+              </div>
+              <Activity className="h-5 w-5 text-blue-600" />
+            </div>
+            <h3 className="text-sm text-gray-600 mb-1">Top Activity Type</h3>
+            <p className="text-xl text-gray-900 mb-1">{highestValue?.activityType || 'N/A'}</p>
+            <p className="text-sm text-blue-600">{highestValue ? formatCurrency(highestValue.raisedValue, true) : '₹0'} raised</p>
+          </CardContent>
+        </Card>
+
+        <Card className="border-t-4 border-t-emerald-500 shadow-lg hover:shadow-xl transition-shadow">
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between mb-4">
+              <div className="p-3 bg-emerald-100 rounded-lg">
+                <Zap className="h-6 w-6 text-emerald-600" />
+              </div>
+              <CircleCheckBig className="h-5 w-5 text-emerald-600" />
+            </div>
+            <h3 className="text-sm text-gray-600 mb-1">Overall Credit Rate</h3>
+            <p className="text-xl text-gray-900 mb-1">{calculateCreditRate()}%</p>
+            <p className="text-sm text-emerald-600">{formatNumber(kpis.credited)} claims credited</p>
+          </CardContent>
+        </Card>
+
+        <Card className="border-t-4 border-t-amber-500 shadow-lg hover:shadow-xl transition-shadow">
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between mb-4">
+              <div className="p-3 bg-amber-100 rounded-lg">
+                <Package className="h-6 w-6 text-amber-600" />
+              </div>
+              <TriangleAlert className="h-5 w-5 text-amber-600" />
+            </div>
+            <h3 className="text-sm text-gray-600 mb-1">Pending Action</h3>
+            <p className="text-xl text-gray-900 mb-1">{formatNumber(kpis.pendingCredit)}</p>
+            <p className="text-sm text-amber-600">{formatCurrency(kpis.pendingCreditValue)} awaiting credit</p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+

src/dealer-claim/pages/RequestDetail.tsx

@@ -0,0 +1,805 @@
+/**
+ * Dealer Claim Request Detail Screen
+ * 
+ * Standalone, dedicated request detail screen for Dealer Claim requests.
+ * This is a complete module that uses dealer claim specific components.
+ * 
+ * LOCATION: src/dealer-claim/pages/RequestDetail.tsx
+ * 
+ * IMPORTANT: This entire file and all its dependencies are in src/dealer-claim/ folder.
+ * Deleting src/dealer-claim/ folder removes ALL dealer claim related code.
+ */
+
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { Component, ErrorInfo, ReactNode } from 'react';
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  ClipboardList,
+  TrendingUp,
+  FileText,
+  Activity,
+  MessageSquare,
+  AlertTriangle,
+  FileCheck,
+  ShieldX,
+  RefreshCw,
+  ArrowLeft,
+  DollarSign,
+} from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+
+// Context and hooks
+import { useAuth } from '@/contexts/AuthContext';
+import { useRequestDetails } from '@/hooks/useRequestDetails';
+import { useRequestSocket } from '@/hooks/useRequestSocket';
+import { useDocumentUpload } from '@/hooks/useDocumentUpload';
+import { useModalManager } from '@/hooks/useModalManager';
+import { useConclusionRemark } from '@/hooks/useConclusionRemark';
+import { downloadDocument } from '@/services/workflowApi';
+import { getPublicConfigurations, AdminConfiguration } from '@/services/adminApi';
+import { PolicyViolationModal } from '@/components/modals/PolicyViolationModal';
+import { getSocket, joinUserRoom } from '@/utils/socket';
+
+
+// Dealer Claim Components (import from index to get properly aliased exports)
+import { DealerClaimOverviewTab, DealerClaimWorkflowTab, IOTab } from '../index';
+
+// Shared Components
+import { SharedComponents } from '@/shared/components';
+const { DocumentsTab, ActivityTab, WorkNotesTab, SummaryTab, RequestDetailHeader, QuickActionsSidebar, RequestDetailModals } = SharedComponents;
+
+// Other components
+import { ShareSummaryModal } from '@/components/modals/ShareSummaryModal';
+import { getSummaryDetails, getSummaryByRequestId, type SummaryDetails } from '@/services/summaryApi';
+import { toast } from 'sonner';
+import { RequestDetailProps } from '@/pages/RequestDetail/types/requestDetail.types';
+import { PauseModal } from '@/components/workflow/PauseModal';
+import { ResumeModal } from '@/components/workflow/ResumeModal';
+import { RetriggerPauseModal } from '@/components/workflow/RetriggerPauseModal';
+
+/**
+ * Error Boundary Component
+ */
+class RequestDetailErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean; error: Error | null }> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Dealer Claim RequestDetail Error:', error, errorInfo);
+  }
+
+  override render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen bg-gray-50 flex items-center justify-center p-6">
+          <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
+            <AlertTriangle className="w-16 h-16 text-red-500 mx-auto mb-4" />
+            <h2 className="text-2xl font-bold mb-2">Error Loading Request</h2>
+            <p className="text-gray-600 mb-4">{this.state.error?.message || 'An unexpected error occurred'}</p>
+            <Button onClick={() => window.location.reload()} className="mr-2">
+              Reload Page
+            </Button>
+            <Button variant="outline" onClick={() => window.history.back()}>
+              Go Back
+            </Button>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+/**
+ * Dealer Claim RequestDetailInner Component
+ */
+function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynamicRequests = [] }: RequestDetailProps) {
+  const params = useParams<{ requestId: string }>();
+  const requestIdentifier = params.requestId || propRequestId || '';
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const initialTab = urlParams.get('tab') || 'overview';
+
+  const [activeTab, setActiveTab] = useState(initialTab);
+  const [showShareSummaryModal, setShowShareSummaryModal] = useState(false);
+  const [summaryId, setSummaryId] = useState<string | null>(null);
+  const [summaryDetails, setSummaryDetails] = useState<SummaryDetails | null>(null);
+  const [loadingSummary, setLoadingSummary] = useState(false);
+  const [sharedRecipientsRefreshTrigger, setSharedRecipientsRefreshTrigger] = useState(0);
+  const [showPauseModal, setShowPauseModal] = useState(false);
+  const [showResumeModal, setShowResumeModal] = useState(false);
+  const [showRetriggerModal, setShowRetriggerModal] = useState(false);
+  const [systemPolicy, setSystemPolicy] = useState<{
+    maxApprovalLevels: number;
+    maxParticipants: number;
+    allowSpectators: boolean;
+    maxSpectators: number;
+  }>({
+    maxApprovalLevels: 10,
+    maxParticipants: 50,
+    allowSpectators: true,
+    maxSpectators: 20
+  });
+  const [policyViolationModal, setPolicyViolationModal] = useState<{
+    open: boolean;
+    violations: Array<{ type: string; message: string; currentValue?: number; maxValue?: number }>;
+  }>({
+    open: false,
+    violations: []
+  });
+  const { user } = useAuth();
+
+  // Custom hooks
+  const {
+    request,
+    apiRequest,
+    loading: requestLoading,
+    refreshing,
+    refreshDetails,
+    currentApprovalLevel,
+    isSpectator,
+    isInitiator,
+    existingParticipants,
+    accessDenied,
+  } = useRequestDetails(requestIdentifier, dynamicRequests, user);
+
+  // Determine if user is department lead (find dynamically by levelName, not hardcoded step number)
+  const currentUserId = (user as any)?.userId || '';
+
+  // IO tab visibility for dealer claims
+  // Restricted: Hide from Dealers, show for internal roles (Initiator, Dept Lead, Finance, Admin)
+  const isDealer = (user as any)?.jobTitle === 'Dealer' || (user as any)?.designation === 'Dealer';
+  const isClaimManagement = request?.workflowType === 'CLAIM_MANAGEMENT' ||
+    apiRequest?.workflowType === 'CLAIM_MANAGEMENT' ||
+    request?.templateType === 'claim-management';
+  const showIOTab = isClaimManagement && !isDealer;
+
+  const {
+    mergedMessages,
+    unreadWorkNotes,
+    workNoteAttachments,
+    setWorkNoteAttachments,
+  } = useRequestSocket(requestIdentifier, apiRequest, activeTab, user);
+
+  const {
+    uploadingDocument,
+    triggerFileInput,
+    previewDocument,
+    setPreviewDocument,
+    documentPolicy,
+    documentError,
+    setDocumentError,
+  } = useDocumentUpload(apiRequest, refreshDetails);
+
+  // State to temporarily store approval level for modal (used for additional approvers)
+  const [temporaryApprovalLevel, setTemporaryApprovalLevel] = useState<any>(null);
+
+  // Use temporary level if set, otherwise use currentApprovalLevel
+  const effectiveApprovalLevel = temporaryApprovalLevel || currentApprovalLevel;
+
+  const {
+    showApproveModal,
+    setShowApproveModal,
+    showRejectModal,
+    setShowRejectModal,
+    showAddApproverModal,
+    setShowAddApproverModal,
+    showAddSpectatorModal,
+    setShowAddSpectatorModal,
+    showSkipApproverModal,
+    setShowSkipApproverModal,
+    showActionStatusModal,
+    setShowActionStatusModal,
+    skipApproverData,
+    setSkipApproverData,
+    actionStatus,
+    setActionStatus,
+    handleApproveConfirm: originalHandleApproveConfirm,
+    handleRejectConfirm: originalHandleRejectConfirm,
+    handleAddApprover,
+    handleSkipApprover,
+    handleAddSpectator,
+  } = useModalManager(requestIdentifier, effectiveApprovalLevel, refreshDetails);
+
+  // Wrapper handlers that clear temporary level after action
+  const handleApproveConfirm = async (description: string) => {
+    await originalHandleApproveConfirm(description);
+    setTemporaryApprovalLevel(null);
+  };
+
+  const handleRejectConfirm = async (description: string) => {
+    await originalHandleRejectConfirm(description);
+    setTemporaryApprovalLevel(null);
+  };
+
+  // Closure functionality - only for initiator when request is approved/rejected
+  // Check both lowercase and uppercase status values
+  const requestStatus = (request?.status || apiRequest?.status || '').toLowerCase();
+  const needsClosure = (requestStatus === 'approved' || requestStatus === 'rejected') && isInitiator;
+
+  // Closure check completed
+  const {
+    conclusionRemark,
+    setConclusionRemark,
+    conclusionLoading,
+    conclusionSubmitting,
+    aiGenerated,
+    handleGenerateConclusion,
+    handleFinalizeConclusion,
+    generationAttempts,
+    generationFailed,
+    maxAttemptsReached,
+  } = useConclusionRemark(
+    request,
+    requestIdentifier,
+    isInitiator,
+    refreshDetails,
+    onBack,
+    setActionStatus,
+    setShowActionStatusModal
+  );
+
+  // Load system policy on mount
+  useEffect(() => {
+    const loadSystemPolicy = async () => {
+      try {
+        const systemSettingsConfigs = await getPublicConfigurations('SYSTEM_SETTINGS');
+        const workflowSharingConfigs = await getPublicConfigurations('WORKFLOW_SHARING');
+        const allConfigs = [...systemSettingsConfigs, ...workflowSharingConfigs];
+        const configMap: Record<string, string> = {};
+        allConfigs.forEach((c: AdminConfiguration) => {
+          configMap[c.configKey] = c.configValue;
+        });
+
+        setSystemPolicy({
+          maxApprovalLevels: parseInt(configMap['MAX_APPROVAL_LEVELS'] || '10'),
+          maxParticipants: parseInt(configMap['MAX_PARTICIPANTS_PER_REQUEST'] || '50'),
+          allowSpectators: configMap['ALLOW_ADD_SPECTATOR']?.toLowerCase() === 'true',
+          maxSpectators: parseInt(configMap['MAX_SPECTATORS_PER_REQUEST'] || '20')
+        });
+      } catch (error) {
+        console.error('Failed to load system policy:', error);
+      }
+    };
+
+    loadSystemPolicy();
+  }, []);
+
+  // Auto-switch tab when URL query parameter changes
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const tabParam = urlParams.get('tab');
+    if (tabParam) {
+      setActiveTab(tabParam);
+    }
+  }, [requestIdentifier]);
+
+  const handleRefresh = () => {
+    refreshDetails();
+  };
+
+  // Pause handlers
+  const handlePause = () => {
+    setShowPauseModal(true);
+  };
+
+  const handleResume = () => {
+    setShowResumeModal(true);
+  };
+
+  const handleResumeSuccess = async () => {
+    await refreshDetails();
+  };
+
+  const handleRetrigger = () => {
+    setShowRetriggerModal(true);
+  };
+
+  const handlePauseSuccess = async () => {
+    await refreshDetails();
+  };
+
+  const handleRetriggerSuccess = async () => {
+    await refreshDetails();
+  };
+
+  const handleShareSummary = async () => {
+    if (!apiRequest?.requestId) {
+      toast.error('Request ID not found');
+      return;
+    }
+
+    if (!summaryId) {
+      toast.error('Summary not available. Please ensure the request is closed and the summary has been generated.');
+      return;
+    }
+
+    setShowShareSummaryModal(true);
+  };
+
+  const isClosed = request?.status === 'closed';
+
+  // Fetch summary details if request is closed
+  useEffect(() => {
+    const fetchSummaryDetails = async () => {
+      if (!isClosed || !apiRequest?.requestId) {
+        setSummaryDetails(null);
+        setSummaryId(null);
+        return;
+      }
+
+      try {
+        setLoadingSummary(true);
+        const summary = await getSummaryByRequestId(apiRequest.requestId);
+
+        if (summary?.summaryId) {
+          setSummaryId(summary.summaryId);
+          try {
+            const details = await getSummaryDetails(summary.summaryId);
+            setSummaryDetails(details);
+          } catch (error: any) {
+            console.error('Failed to fetch summary details:', error);
+            setSummaryDetails(null);
+            setSummaryId(null);
+          }
+        } else {
+          setSummaryDetails(null);
+          setSummaryId(null);
+        }
+      } catch (error: any) {
+        setSummaryDetails(null);
+        setSummaryId(null);
+      } finally {
+        setLoadingSummary(false);
+      }
+    };
+
+    fetchSummaryDetails();
+  }, [isClosed, apiRequest?.requestId]);
+
+  // Listen for credit note notifications and trigger silent refresh
+  useEffect(() => {
+    if (!currentUserId || !apiRequest?.requestId) return;
+
+    const socket = getSocket();
+    if (!socket) return;
+
+    joinUserRoom(socket, currentUserId);
+
+    const handleNewNotification = (data: { notification: any }) => {
+      const notif = data?.notification;
+      if (!notif) return;
+
+      const notifRequestId = notif.requestId || notif.request_id;
+      const notifRequestNumber = notif.metadata?.requestNumber || notif.metadata?.request_number;
+      if (notifRequestId !== apiRequest.requestId &&
+        notifRequestNumber !== requestIdentifier &&
+        notifRequestNumber !== apiRequest.requestNumber) return;
+
+      // Check for credit note metadata
+      if (notif.metadata?.creditNoteNumber || notif.metadata?.credit_note_number) {
+        refreshDetails();
+      }
+    };
+
+    socket.on('notification:new', handleNewNotification);
+    return () => {
+      socket.off('notification:new', handleNewNotification);
+    };
+  }, [currentUserId, apiRequest?.requestId, requestIdentifier, refreshDetails]);
+
+  // Get current levels for WorkNotesTab
+  const currentLevels = (request?.approvalFlow || [])
+    .filter((flow: any) => flow && typeof flow.step === 'number')
+    .map((flow: any) => ({
+      levelNumber: flow.step || 0,
+      approverName: flow.approver || 'Unknown',
+      status: flow.status || 'pending',
+      tatHours: flow.tatHours || 24,
+    }));
+
+  // Loading state
+  if (requestLoading && !request && !apiRequest) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-gray-50" data-testid="loading-state">
+        <div className="text-center">
+          <RefreshCw className="w-12 h-12 text-blue-600 animate-spin mx-auto mb-4" />
+          <p className="text-gray-600">Loading dealer claim request details...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Access Denied state
+  if (accessDenied?.denied) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-6" data-testid="access-denied-state">
+        <div className="max-w-lg w-full bg-white rounded-2xl shadow-xl p-8 text-center">
+          <div className="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
+            <ShieldX className="w-10 h-10 text-red-500" />
+          </div>
+          <h2 className="text-2xl font-bold text-gray-900 mb-3">Access Denied</h2>
+          <p className="text-gray-600 mb-6 leading-relaxed">
+            {accessDenied.message}
+          </p>
+          <div className="flex gap-3 justify-center">
+            <Button
+              variant="outline"
+              onClick={onBack || (() => window.history.back())}
+              className="flex items-center gap-2"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              Go Back
+            </Button>
+            <Button
+              onClick={() => window.location.href = '/dashboard'}
+              className="bg-blue-600 hover:bg-blue-700"
+            >
+              Go to Dashboard
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Not Found state
+  if (!request) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-6" data-testid="not-found-state">
+        <div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 text-center">
+          <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
+            <FileText className="w-10 h-10 text-gray-400" />
+          </div>
+          <h2 className="text-2xl font-bold text-gray-900 mb-3">Dealer Claim Request Not Found</h2>
+          <p className="text-gray-600 mb-6">
+            The dealer claim request you're looking for doesn't exist or may have been deleted.
+          </p>
+          <div className="flex gap-3 justify-center">
+            <Button
+              variant="outline"
+              onClick={onBack || (() => window.history.back())}
+              className="flex items-center gap-2"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              Go Back
+            </Button>
+            <Button
+              onClick={() => window.location.href = '/dashboard'}
+              className="bg-blue-600 hover:bg-blue-700"
+            >
+              Go to Dashboard
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="min-h-screen bg-gray-50" data-testid="dealer-claim-request-detail-page">
+        <div className="max-w-7xl mx-auto">
+          {/* Header Section */}
+          <RequestDetailHeader
+            request={request}
+            refreshing={refreshing}
+            onBack={onBack || (() => window.history.back())}
+            onRefresh={handleRefresh}
+            onShareSummary={handleShareSummary}
+            isInitiator={isInitiator}
+            // Dealer-claim module: Business logic for preparing SLA data
+            slaData={request?.summary?.sla || request?.sla || null}
+            isPaused={request?.pauseInfo?.isPaused || false}
+          />
+
+          {/* Tabs */}
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" data-testid="dealer-claim-request-detail-tabs">
+            <div className="mb-4 sm:mb-6">
+              <TabsList className="grid grid-cols-3 sm:grid-cols-6 lg:flex lg:flex-row h-auto bg-gray-100 p-1.5 sm:p-1 rounded-lg gap-1.5 sm:gap-1">
+                <TabsTrigger
+                  value="overview"
+                  className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900"
+                  data-testid="tab-overview"
+                >
+                  <ClipboardList className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                  <span className="truncate">Overview</span>
+                </TabsTrigger>
+                {isClosed && summaryDetails && (
+                  <TabsTrigger
+                    value="summary"
+                    className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900"
+                    data-testid="tab-summary"
+                  >
+                    <FileCheck className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                    <span className="truncate">Summary</span>
+                  </TabsTrigger>
+                )}
+                <TabsTrigger
+                  value="workflow"
+                  className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900"
+                  data-testid="tab-workflow"
+                >
+                  <TrendingUp className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                  <span className="truncate">Workflow</span>
+                </TabsTrigger>
+                {showIOTab && (
+                  <TabsTrigger
+                    value="io"
+                    className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900"
+                    data-testid="tab-io"
+                  >
+                    <DollarSign className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                    <span className="truncate">IO</span>
+                  </TabsTrigger>
+                )}
+                <TabsTrigger
+                  value="documents"
+                  className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900"
+                  data-testid="tab-documents"
+                >
+                  <FileText className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                  <span className="truncate">Docs</span>
+                </TabsTrigger>
+                <TabsTrigger
+                  value="activity"
+                  className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900 col-span-1 sm:col-span-1"
+                  data-testid="tab-activity"
+                >
+                  <Activity className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                  <span className="truncate">Activity</span>
+                </TabsTrigger>
+                <TabsTrigger
+                  value="worknotes"
+                  className="flex items-center justify-center gap-1 sm:gap-1.5 rounded-md px-2 sm:px-3 py-2.5 sm:py-1.5 text-xs sm:text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-600 data-[state=active]:text-gray-900 relative col-span-2 sm:col-span-1"
+                  data-testid="tab-worknotes"
+                >
+                  <MessageSquare className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+                  <span className="truncate">Work Notes</span>
+                  {unreadWorkNotes > 0 && (
+                    <Badge
+                      className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-white text-[10px] flex items-center justify-center p-0"
+                      data-testid="worknotes-unread-badge"
+                    >
+                      {unreadWorkNotes > 9 ? '9+' : unreadWorkNotes}
+                    </Badge>
+                  )}
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            {/* Main Layout */}
+            <div className={activeTab === 'worknotes' ? '' : 'grid grid-cols-1 lg:grid-cols-3 gap-6'}>
+              {/* Left Column: Tab content */}
+              <div className={activeTab === 'worknotes' ? '' : 'lg:col-span-2'}>
+                <TabsContent value="overview" className="mt-0" data-testid="overview-tab-content">
+                  <DealerClaimOverviewTab
+                    request={request}
+                    apiRequest={apiRequest}
+                    currentUserId={currentUserId}
+                    isInitiator={isInitiator}
+                    needsClosure={needsClosure}
+                    conclusionRemark={conclusionRemark}
+                    setConclusionRemark={setConclusionRemark}
+                    conclusionLoading={conclusionLoading}
+                    conclusionSubmitting={conclusionSubmitting}
+                    aiGenerated={aiGenerated}
+                    handleGenerateConclusion={handleGenerateConclusion}
+                    handleFinalizeConclusion={handleFinalizeConclusion}
+                    generationAttempts={generationAttempts}
+                    generationFailed={generationFailed}
+                    maxAttemptsReached={maxAttemptsReached}
+                  />
+                </TabsContent>
+
+                {isClosed && (
+                  <TabsContent value="summary" className="mt-0" data-testid="summary-tab-content">
+                    <SummaryTab
+                      summary={summaryDetails}
+                      loading={loadingSummary}
+                      onShare={handleShareSummary}
+                      isInitiator={isInitiator}
+                    />
+                  </TabsContent>
+                )}
+
+                <TabsContent value="workflow" className="mt-0">
+                  <DealerClaimWorkflowTab
+                    request={request}
+                    user={user}
+                    isInitiator={isInitiator}
+                    onSkipApprover={(data) => {
+                      if (!data.levelId) {
+                        alert('Level ID not available');
+                        return;
+                      }
+                      setSkipApproverData(data);
+                      setShowSkipApproverModal(true);
+                    }}
+                    onRefresh={refreshDetails}
+                    documentPolicy={documentPolicy}
+                  />
+                </TabsContent>
+
+                {showIOTab && (
+                  <TabsContent value="io" className="mt-0">
+                    <IOTab
+                      request={request}
+                      apiRequest={apiRequest}
+                      onRefresh={refreshDetails}
+                    />
+                  </TabsContent>
+                )}
+
+                <TabsContent value="documents" className="mt-0">
+                  <DocumentsTab
+                    request={request}
+                    workNoteAttachments={workNoteAttachments}
+                    uploadingDocument={uploadingDocument}
+                    documentPolicy={documentPolicy}
+                    triggerFileInput={triggerFileInput}
+                    setPreviewDocument={setPreviewDocument}
+                    downloadDocument={downloadDocument}
+                  />
+                </TabsContent>
+
+                <TabsContent value="activity" className="mt-0">
+                  <ActivityTab request={request} />
+                </TabsContent>
+
+                <TabsContent value="worknotes" className="mt-0" forceMount={true} hidden={activeTab !== 'worknotes'}>
+                  <WorkNotesTab
+                    requestId={requestIdentifier}
+                    requestTitle={request.title}
+                    mergedMessages={mergedMessages}
+                    setWorkNoteAttachments={setWorkNoteAttachments}
+                    isInitiator={isInitiator}
+                    isSpectator={isSpectator}
+                    currentLevels={currentLevels}
+                    onAddApprover={handleAddApprover}
+                    maxApprovalLevels={systemPolicy.maxApprovalLevels}
+                    onPolicyViolation={(violations) => setPolicyViolationModal({ open: true, violations })}
+                  />
+                </TabsContent>
+              </div>
+
+              {/* Right Column: Quick Actions Sidebar */}
+              {activeTab !== 'worknotes' && (
+                <QuickActionsSidebar
+                  request={request}
+                  isInitiator={isInitiator}
+                  isSpectator={isSpectator}
+                  currentApprovalLevel={currentApprovalLevel}
+                  onAddApprover={() => setShowAddApproverModal(true)}
+                  onAddSpectator={() => setShowAddSpectatorModal(true)}
+                  onApprove={() => setShowApproveModal(true)}
+                  onReject={() => setShowRejectModal(true)}
+                  onPause={handlePause}
+                  onResume={handleResume}
+                  onRetrigger={handleRetrigger}
+                  summaryId={summaryId}
+                  refreshTrigger={sharedRecipientsRefreshTrigger}
+                  pausedByUserId={request?.pauseInfo?.pausedBy?.userId}
+                  currentUserId={currentUserId}
+                  apiRequest={apiRequest}
+                />
+              )}
+            </div>
+          </Tabs>
+        </div>
+      </div>
+
+      {/* Share Summary Modal */}
+      {showShareSummaryModal && summaryId && (
+        <ShareSummaryModal
+          isOpen={showShareSummaryModal}
+          onClose={() => setShowShareSummaryModal(false)}
+          summaryId={summaryId}
+          requestTitle={request?.title || 'N/A'}
+          onSuccess={() => {
+            refreshDetails();
+            setSharedRecipientsRefreshTrigger(prev => prev + 1);
+          }}
+        />
+      )}
+
+      {/* Pause Modals */}
+      {showPauseModal && apiRequest?.requestId && (
+        <PauseModal
+          isOpen={showPauseModal}
+          onClose={() => setShowPauseModal(false)}
+          requestId={apiRequest.requestId}
+          levelId={currentApprovalLevel?.levelId || null}
+          onSuccess={handlePauseSuccess}
+        />
+      )}
+
+      {showResumeModal && apiRequest?.requestId && (
+        <ResumeModal
+          isOpen={showResumeModal}
+          onClose={() => setShowResumeModal(false)}
+          requestId={apiRequest.requestId}
+          onSuccess={handleResumeSuccess}
+        />
+      )}
+
+      {showRetriggerModal && apiRequest?.requestId && (
+        <RetriggerPauseModal
+          isOpen={showRetriggerModal}
+          onClose={() => setShowRetriggerModal(false)}
+          requestId={apiRequest.requestId}
+          approverName={request?.pauseInfo?.pausedBy?.name}
+          onSuccess={handleRetriggerSuccess}
+        />
+      )}
+
+      {/* Modals */}
+      <RequestDetailModals
+        showApproveModal={showApproveModal}
+        showRejectModal={showRejectModal}
+        showAddApproverModal={showAddApproverModal}
+        showAddSpectatorModal={showAddSpectatorModal}
+        showSkipApproverModal={showSkipApproverModal}
+        showActionStatusModal={showActionStatusModal}
+        previewDocument={previewDocument}
+        documentError={documentError}
+        request={request}
+        skipApproverData={skipApproverData}
+        actionStatus={actionStatus}
+        existingParticipants={existingParticipants}
+        currentLevels={currentLevels}
+        maxApprovalLevels={systemPolicy.maxApprovalLevels}
+        onPolicyViolation={(violations) => setPolicyViolationModal({ open: true, violations })}
+        setShowApproveModal={setShowApproveModal}
+        setShowRejectModal={setShowRejectModal}
+        setShowAddApproverModal={setShowAddApproverModal}
+        setShowAddSpectatorModal={setShowAddSpectatorModal}
+        setShowSkipApproverModal={setShowSkipApproverModal}
+        setShowActionStatusModal={setShowActionStatusModal}
+        setPreviewDocument={setPreviewDocument}
+        setDocumentError={setDocumentError}
+        setSkipApproverData={setSkipApproverData}
+        setActionStatus={setActionStatus}
+        handleApproveConfirm={handleApproveConfirm}
+        handleRejectConfirm={handleRejectConfirm}
+        handleAddApprover={handleAddApprover}
+        handleAddSpectator={handleAddSpectator}
+        handleSkipApprover={handleSkipApprover}
+        downloadDocument={downloadDocument}
+        documentPolicy={documentPolicy}
+      />
+
+      {/* Policy Violation Modal */}
+      <PolicyViolationModal
+        open={policyViolationModal.open}
+        onClose={() => setPolicyViolationModal({ open: false, violations: [] })}
+        violations={policyViolationModal.violations}
+        policyDetails={{
+          maxApprovalLevels: systemPolicy.maxApprovalLevels,
+          maxParticipants: systemPolicy.maxParticipants,
+          allowSpectators: systemPolicy.allowSpectators,
+          maxSpectators: systemPolicy.maxSpectators,
+        }}
+      />
+    </>
+  );
+}
+
+/**
+ * Dealer Claim RequestDetail Component (Exported)
+ */
+export function DealerClaimRequestDetail(props: RequestDetailProps) {
+  return (
+    <RequestDetailErrorBoundary>
+      <DealerClaimRequestDetailInner {...props} />
+    </RequestDetailErrorBoundary>
+  );
+}

src/flows.ts

@@ -0,0 +1,167 @@
+/**
+ * Request Flow Registry
+ * 
+ * Central registry for all request flow types.
+ * This provides a single import point for flow-specific components.
+ * 
+ * LOCATION: src/flows.ts
+ * 
+ * This file imports from flow folders at src/ level:
+ * - src/custom/
+ * - src/dealer-claim/
+ * - src/shared/
+ */
+
+import { RequestFlowType } from '@/utils/requestTypeUtils';
+import { UserFilterType } from '@/utils/userFilterUtils';
+
+// Import flow modules from src/ level
+import * as CustomFlow from './custom';
+import * as DealerClaimFlow from './dealer-claim';
+import * as SharedComponents from './shared/components';
+
+/**
+ * Flow registry mapping
+ * Maps RequestFlowType to their respective flow modules
+ */
+export const FlowRegistry = {
+  CUSTOM: CustomFlow,
+  DEALER_CLAIM: DealerClaimFlow,
+} as const;
+
+/**
+ * Get flow module for a given flow type
+ */
+export function getFlowModule(flowType: RequestFlowType) {
+  return FlowRegistry[flowType];
+}
+
+/**
+ * Get overview tab component for a flow type
+ */
+export function getOverviewTab(flowType: RequestFlowType) {
+  switch (flowType) {
+    case 'DEALER_CLAIM':
+      return DealerClaimFlow.DealerClaimOverviewTab;
+    case 'CUSTOM':
+    default:
+      return CustomFlow.CustomOverviewTab;
+  }
+}
+
+/**
+ * Get workflow tab component for a flow type
+ */
+export function getWorkflowTab(flowType: RequestFlowType) {
+  switch (flowType) {
+    case 'DEALER_CLAIM':
+      return DealerClaimFlow.DealerClaimWorkflowTab;
+    case 'CUSTOM':
+    default:
+      return CustomFlow.CustomWorkflowTab;
+  }
+}
+
+/**
+ * Get create request component for a flow type
+ */
+export function getCreateRequestComponent(flowType: RequestFlowType) {
+  switch (flowType) {
+    case 'DEALER_CLAIM':
+      return DealerClaimFlow.ClaimManagementWizard;
+    case 'CUSTOM':
+    default:
+      return CustomFlow.CustomCreateRequest;
+  }
+}
+
+/**
+ * Get RequestDetail screen component for a flow type
+ * Each flow has its own complete RequestDetail screen
+ */
+export function getRequestDetailScreen(flowType: RequestFlowType) {
+  switch (flowType) {
+    case 'DEALER_CLAIM':
+      return DealerClaimFlow.DealerClaimRequestDetail;
+    case 'CUSTOM':
+    default:
+      return CustomFlow.CustomRequestDetail;
+  }
+}
+
+/**
+ * Get Requests Filters component for a user filter type
+ * Each user type can have its own filter component
+ * 
+ * This allows for plug-and-play filter components:
+ * - DEALER: Simplified filters (search + sort only)
+ * - STANDARD: Full filters (search + status + priority + template + sort)
+ * 
+ * To add a new user filter type:
+ * 1. Add the user filter type to UserFilterType in userFilterUtils.ts
+ * 2. Create a filter component in the appropriate flow folder
+ * 3. Export it from the flow's index.ts
+ * 4. Add a case here to return it
+ */
+export function getRequestsFilters(userFilterType: UserFilterType) {
+  switch (userFilterType) {
+    case 'DEALER':
+      return DealerClaimFlow.DealerRequestsFilters;
+    case 'STANDARD':
+    default:
+      return CustomFlow.StandardRequestsFilters;
+  }
+}
+
+/**
+ * Get Closed Requests Filters component for a user filter type
+ * Each user type can have its own filter component for closed requests
+ * 
+ * This allows for plug-and-play filter components:
+ * - DEALER: Simplified filters (search + status + sort only, no priority or template)
+ * - STANDARD: Full filters (search + priority + status + template + sort)
+ * 
+ * To add a new user filter type:
+ * 1. Add the user filter type to UserFilterType in userFilterUtils.ts
+ * 2. Create a closed requests filter component in the appropriate flow folder
+ * 3. Export it from the flow's index.ts
+ * 4. Add a case here to return it
+ */
+export function getClosedRequestsFilters(userFilterType: UserFilterType) {
+  switch (userFilterType) {
+    case 'DEALER':
+      return DealerClaimFlow.DealerClosedRequestsFilters;
+    case 'STANDARD':
+    default:
+      return CustomFlow.StandardClosedRequestsFilters;
+  }
+}
+
+/**
+ * Get User All Requests Filters component for a user filter type
+ * Each user type can have its own filter component for user all requests
+ * 
+ * This allows for plug-and-play filter components:
+ * - DEALER: Simplified filters (search + status + initiator + approver + date range, no priority/template/department/sla)
+ * - STANDARD: Full filters (all filters including priority, template, department, and SLA compliance)
+ * 
+ * To add a new user filter type:
+ * 1. Add the user filter type to UserFilterType in userFilterUtils.ts
+ * 2. Create a user all requests filter component in the appropriate flow folder
+ * 3. Export it from the flow's index.ts
+ * 4. Add a case here to return it
+ */
+export function getUserAllRequestsFilters(userFilterType: UserFilterType) {
+  switch (userFilterType) {
+    case 'DEALER':
+      return DealerClaimFlow.DealerUserAllRequestsFilters;
+    case 'STANDARD':
+    default:
+      return CustomFlow.StandardUserAllRequestsFilters;
+  }
+}
+
+// Re-export flow modules for direct access
+export { CustomFlow, DealerClaimFlow, SharedComponents };
+export type { RequestFlowType } from '@/utils/requestTypeUtils';
+export type { UserFilterType } from '@/utils/userFilterUtils';

src/hooks/useConclusionRemark.ts

@@ -42,6 +42,18 @@ export function useConclusionRemark(
   // State: Tracks if current conclusion was AI-generated (shows badge in UI)
   const [aiGenerated, setAiGenerated] = useState(false);
 
+  // State: Tracks number of AI generation attempts
+  const [generationAttempts, setGenerationAttempts] = useState(0);
+  
+  // State: Tracks if AI generation failed (unable to generate)
+  const [generationFailed, setGenerationFailed] = useState(false);
+  
+  // State: Tracks if max attempts (3 for success, 1 for fail) reached
+  const [maxAttemptsReached, setMaxAttemptsReached] = useState(false);
+
+  // State: Tracks number of AI generation failures
+  const [failureAttempts, setFailureAttempts] = useState(0);
+
   /**
    * Function: fetchExistingConclusion
    * 
@@ -50,26 +62,46 @@ export function useConclusionRemark(
    * Use Case: When request is approved, final approver generates conclusion.
    * Initiator needs to review and finalize it before closing request.
    * 
+   * Optimization: Check request object first before making API call
    * Process:
-   * 1. Dynamically import conclusion API service
-   * 2. Fetch conclusion by request ID
+   * 1. Check if conclusion data is already in request object
+   * 2. If not available, fetch from API
    * 3. Load into state if exists
    * 4. Mark as AI-generated if applicable
    */
   const fetchExistingConclusion = async () => {
+    // Optimization: Check if conclusion data is already in request object
+    // Request detail response includes conclusionRemark and aiGeneratedConclusion fields
+    const existingConclusion = request?.conclusionRemark || request?.conclusion_remark;
+    const existingAiConclusion = request?.aiGeneratedConclusion || request?.ai_generated_conclusion;
+    
+    if (existingConclusion || existingAiConclusion) {
+      // Use data from request object - no API call needed
+      setConclusionRemark(existingConclusion || existingAiConclusion);
+      setAiGenerated(!!existingAiConclusion);
+      return;
+    }
+    
+    // Only fetch from API if not available in request object
+    // This handles cases where request object might not have been refreshed yet
     try {
       // Lazy load: Import conclusion API only when needed
       const { getConclusion } = await import('@/services/conclusionApi');
       
-      // API Call: Fetch existing conclusion
+      // API Call: Fetch existing conclusion (returns null if not found)
       const result = await getConclusion(request.requestId || requestIdentifier);
       
-      if (result && result.aiGeneratedRemark) {
+      if (result && (result.aiGeneratedRemark || result.finalRemark)) {
         // Load: Set the AI-generated or final remark
-        setConclusionRemark(result.finalRemark || result.aiGeneratedRemark);
+        // Handle null values by providing empty string fallback
+        setConclusionRemark(result.finalRemark || result.aiGeneratedRemark || '');
         setAiGenerated(!!result.aiGeneratedRemark);
       }
     } catch (err) {
+      // Only log non-404 errors (404 is handled gracefully in API)
+      if ((err as any)?.response?.status !== 404) {
+        console.error('[useConclusionRemark] Error fetching conclusion:', err);
+      }
       // No conclusion yet - this is expected for newly approved requests
     }
   };
@@ -93,8 +125,12 @@ export function useConclusionRemark(
    * 5. Handle errors silently (user can type manually)
    */
   const handleGenerateConclusion = async () => {
+    // Safety check: Prevent generation if max attempts already reached
+    if (maxAttemptsReached) return;
+
     try {
       setConclusionLoading(true);
+      setGenerationFailed(false);
       
       // Lazy load: Import conclusion API
       const { generateConclusion } = await import('@/services/conclusionApi');
@@ -102,14 +138,74 @@ export function useConclusionRemark(
       // API Call: Generate AI conclusion based on request data
       const result = await generateConclusion(request.requestId || requestIdentifier);
       
+      const newAttempts = generationAttempts + 1;
+      setGenerationAttempts(newAttempts);
+
+      // Check for "unable to generate" or similar keywords in proper response
+      const isUnableToGenerate = !result?.aiGeneratedRemark || 
+        result.aiGeneratedRemark.toLowerCase().includes('unable to generate') ||
+        result.aiGeneratedRemark.toLowerCase().includes('sorry');
+
+      if (isUnableToGenerate) {
+        const newFailures = failureAttempts + 1;
+        setFailureAttempts(newFailures);
+        
+        if (newFailures >= 2) {
+          setMaxAttemptsReached(true);
+          setActionStatus?.({
+            success: false,
+            title: 'AI Generation Limit Reached',
+            message: "We're unable to process a conclusion remark at this time after 2 attempts. Please proceed with a manual approach using the editor below."
+          });
+        } else {
+          setActionStatus?.({
+            success: false,
+            title: 'System Note',
+            message: "We're unable to process a conclusion remark at the moment. You have one more attempt remaining, or you can proceed manually."
+          });
+        }
+        setShowActionStatusModal?.(true);
+        setConclusionRemark(result?.aiGeneratedRemark || '');
+        setAiGenerated(false);
+        return;
+      }
+
       // Success: Load AI-generated remark
       setConclusionRemark(result.aiGeneratedRemark);
       setAiGenerated(true);
+      setFailureAttempts(0); // Reset failures on success
+
+      // Limit to 2 successful attempts
+      if (newAttempts >= 2) {
+        setMaxAttemptsReached(true);
+        setActionStatus?.({
+          success: true,
+          title: 'Maximum Attempts Reached',
+          message: "You've reached the maximum of 2 regeneration attempts. Feel free to manually edit the current suggestion to fit your specific needs."
+        });
+        setShowActionStatusModal?.(true);
+      }
     } catch (err) {
-      // Fail silently: User can write conclusion manually
       console.error('[useConclusionRemark] AI generation failed:', err);
-      setConclusionRemark('');
+      const newFailures = failureAttempts + 1;
+      setFailureAttempts(newFailures);
       setAiGenerated(false);
+
+      if (newFailures >= 2) {
+        setMaxAttemptsReached(true);
+        setActionStatus?.({
+          success: false,
+          title: 'System Note',
+          message: "We're unable to process your request at the moment. Since the maximum of 2 attempts is reached, please proceed with a manual approach."
+        });
+      } else {
+        setActionStatus?.({
+          success: false,
+          title: 'System Note',
+          message: "We're unable to process your request at the moment. You have one more attempt remaining, or you can proceed manually."
+        });
+      }
+      setShowActionStatusModal?.(true);
     } finally {
       setConclusionLoading(false);
     }
@@ -218,16 +314,36 @@ export function useConclusionRemark(
   };
 
   /**
-   * Effect: Auto-fetch existing conclusion when request becomes approved or rejected
+   * Effect: Auto-load existing conclusion when request becomes approved, rejected, or closed
    * 
-   * Trigger: When request status changes to "approved" or "rejected" and user is initiator
+   * Trigger: When request status changes to "approved", "rejected", or "closed" and user is initiator
    * Purpose: Load any conclusion generated by final approver (for approved) or AI (for rejected)
+   * 
+   * Optimization: 
+   * 1. First check if conclusion data is already in request object (no API call needed)
+   * 2. Only fetch from API if not available in request object
    */
   useEffect(() => {
-    if ((request?.status === 'approved' || request?.status === 'rejected') && isInitiator && !conclusionRemark) {
+    const status = request?.status?.toLowerCase();
+    const shouldLoad = (status === 'approved' || status === 'rejected' || status === 'closed') 
+      && isInitiator 
+      && !conclusionRemark;
+    
+    if (!shouldLoad) return;
+    
+    // Check if conclusion data is already in request object
+    const existingConclusion = request?.conclusionRemark || request?.conclusion_remark;
+    const existingAiConclusion = request?.aiGeneratedConclusion || request?.ai_generated_conclusion;
+    
+    if (existingConclusion || existingAiConclusion) {
+      // Use data from request object - no API call needed
+      setConclusionRemark(existingConclusion || existingAiConclusion);
+      setAiGenerated(!!existingAiConclusion);
+    } else {
+      // Only fetch from API if not available in request object
       fetchExistingConclusion();
     }
-  }, [request?.status, isInitiator]);
+  }, [request?.status, request?.conclusionRemark, request?.aiGeneratedConclusion, isInitiator, conclusionRemark]);
 
   return {
     conclusionRemark,
@@ -236,7 +352,10 @@ export function useConclusionRemark(
     conclusionSubmitting,
     aiGenerated,
     handleGenerateConclusion,
-    handleFinalizeConclusion
+    handleFinalizeConclusion,
+    generationAttempts,
+    generationFailed,
+    maxAttemptsReached
   };
 }
 

src/hooks/useCreateRequestForm.ts

@@ -10,6 +10,7 @@ export interface RequestTemplate {
   icon: React.ComponentType<any>;
   estimatedTime: string;
   commonApprovers: string[];
+  workflowApprovers?: any[]; // Full approver objects for Admin Templates
   suggestedSLA: number;
   priority: 'high' | 'medium' | 'low';
   fields: {
@@ -162,9 +163,9 @@ export function useCreateRequestForm(
         });
 
         // Load system policy
-        const workflowConfigs = await getPublicConfigurations('WORKFLOW_SHARING');
-        const tatConfigs = await getPublicConfigurations('TAT_SETTINGS');
-        const allConfigs = [...workflowConfigs, ...tatConfigs];
+        const systemSettingsConfigs = await getPublicConfigurations('SYSTEM_SETTINGS');
+        const workflowSharingConfigs = await getPublicConfigurations('WORKFLOW_SHARING');
+        const allConfigs = [...systemSettingsConfigs, ...workflowSharingConfigs];
         const configMap: Record<string, string> = {};
         allConfigs.forEach((c: AdminConfiguration) => {
           configMap[c.configKey] = c.configValue;

src/hooks/useDocumentUpload.ts

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { uploadDocument } from '@/services/documentApi';
 import { getPublicConfigurations, AdminConfiguration } from '@/services/adminApi';
 import { toast } from 'sonner';
+import { handleSecurityError } from '@/utils/securityToast';
 
 /**
  * Custom Hook: useDocumentUpload
@@ -201,8 +202,10 @@ export function useDocumentUpload(
     } catch (error: any) {
       console.error('[useDocumentUpload] Upload error:', error);
 
-      // Error feedback with backend error message if available
-      toast.error(error?.response?.data?.error || 'Failed to upload document');
+      // Show security-specific red toast for scan errors, or generic error toast
+      if (!handleSecurityError(error)) {
+        toast.error(error?.response?.data?.message || 'Failed to upload document');
+      }
     } finally {
       setUploadingDocument(false);
 

src/hooks/useModalManager.ts

@@ -85,6 +85,10 @@ export function useModalManager(
     // API Call: Submit approval
     await approveLevel(requestIdentifier, levelId, description || '');
     
+    // Small delay to ensure backend has fully processed the approval and updated the status
+    // This is especially important for additional approvers where the workflow moves to the next step
+    await new Promise(resolve => setTimeout(resolve, 500));
+    
     // Refresh: Update UI with new approval status
     await refreshDetails();