Re_Figma_Code/CUSTOM_REQUEST_FIX.md

# Custom Request Details Page Fix

## Problem
Custom requests created through the NewRequestWizard were not displaying in the detail page. Instead, users only saw a "Go Back" button.

## Root Cause
1. **Database Lookup Issue**: Dynamic requests created through wizards were only stored in `App.tsx` component state (`dynamicRequests`), not in the static `CUSTOM_REQUEST_DATABASE`
2. **Component Props**: `RequestDetail` and `ClaimManagementDetail` components weren't receiving the `dynamicRequests` prop
3. **Data Flow Gap**: No connection between newly created requests and the detail view components

## Solution Implemented

### 1. Enhanced Request Creation (`App.tsx`)

Updated `handleNewRequestSubmit` to properly create custom request objects:

```typescript
const newCustomRequest = {
  id: requestId,
  title: requestData.title,
  description: requestData.description,
  category: requestData.category,
  subcategory: requestData.subcategory,
  status: 'pending',
  priority: requestData.priority,
  amount: requestData.budget,
  template: 'custom',
  initiator: { ... },
  approvalFlow: [...], // Maps approvers from wizard
  spectators: [...],   // Maps spectators from wizard
  documents: [],
  auditTrail: [...],
  // ... complete request object
};

setDynamicRequests([...dynamicRequests, newCustomRequest]);
```

**Features**:
- Generates unique request ID: `RE-REQ-2024-XXX`
- Maps wizard data to proper request structure
- Creates approval flow from selected approvers
- Adds spectators from wizard
- Initializes audit trail
- Sets proper SLA dates
- Navigates to My Requests page after creation

### 2. Updated Component Props

#### RequestDetail.tsx
```typescript
interface RequestDetailProps {
  requestId: string;
  onBack?: () => void;
  onOpenModal?: (modal: string) => void;
  dynamicRequests?: any[]; // NEW
}
```

#### ClaimManagementDetail.tsx
```typescript
interface ClaimManagementDetailProps {
  requestId: string;
  onBack?: () => void;
  onOpenModal?: (modal: string) => void;
  dynamicRequests?: any[]; // NEW
}
```

### 3. Enhanced Request Lookup Logic

Both detail components now check both static databases AND dynamic requests:

```typescript
const request = useMemo(() => {
  // First check static database
  const staticRequest = CUSTOM_REQUEST_DATABASE[requestId];
  if (staticRequest) return staticRequest;
  
  // Then check dynamic requests
  const dynamicRequest = dynamicRequests.find((req: any) => req.id === requestId);
  if (dynamicRequest) return dynamicRequest;
  
  return null;
}, [requestId, dynamicRequests]);
```

### 4. Intelligent Routing (`App.tsx`)

Updated `renderCurrentPage` for `request-detail` case:

```typescript
case 'request-detail':
  // Check static databases
  const isClaimRequest = CLAIM_MANAGEMENT_DATABASE[selectedRequestId];
  const isCustomRequest = CUSTOM_REQUEST_DATABASE[selectedRequestId];
  
  // Check dynamic requests
  const dynamicRequest = dynamicRequests.find(...);
  const isDynamicClaim = dynamicRequest?.templateType === 'claim-management';
  const isDynamicCustom = dynamicRequest && !isDynamicClaim;
  
  // Route to appropriate component with dynamicRequests prop
  if (isClaimRequest || isDynamicClaim) {
    return <ClaimManagementDetail {...} dynamicRequests={dynamicRequests} />;
  } else {
    return <RequestDetail {...} dynamicRequests={dynamicRequests} />;
  }
```

### 5. Updated handleViewRequest

```typescript
const handleViewRequest = (requestId: string, requestTitle?: string) => {
  setSelectedRequestId(requestId);
  
  // Check all sources
  const isClaimRequest = CLAIM_MANAGEMENT_DATABASE[requestId];
  const isCustomRequest = CUSTOM_REQUEST_DATABASE[requestId];
  const dynamicRequest = dynamicRequests.find(...);
  
  const request = isClaimRequest || isCustomRequest || dynamicRequest;
  setSelectedRequestTitle(requestTitle || request?.title || 'Unknown Request');
  setCurrentPage('request-detail');
};
```

## Data Flow

### Creating a Custom Request

1. User clicks "Raise New Request" → "Custom Request"
2. Fills out NewRequestWizard form:
   - Title
   - Description
   - Category/Subcategory
   - Budget
   - Priority
   - Approvers (multiple)
   - Spectators (multiple)
   - Tagged Participants

3. On Submit:
   - `handleNewRequestSubmit` creates complete request object
   - Adds to `dynamicRequests` state
   - Navigates to My Requests page
   - Shows success toast

4. Viewing the Request:
   - User clicks on request in My Requests
   - `handleViewRequest` finds request in dynamicRequests
   - Routes to `request-detail` page
   - `RequestDetail` component receives `dynamicRequests` prop
   - Component finds request in dynamicRequests array
   - Displays complete request details

## Custom Request Details Page Features

### Header
- Back button
- Request ID with file icon
- Priority badge (urgent/standard)
- Status badge (pending/in-review/approved/rejected)
- Refresh button
- Title display

### SLA Progress Bar
- Color-coded (green/orange/red based on progress)
- Time remaining
- Progress percentage
- Due date

### Tabs
1. **Overview**
   - Request Initiator (with avatar, role, email, phone)
   - Request Details (description, category, subcategory, amount, dates)
   - Quick Actions sidebar
   - Spectators list

2. **Workflow**
   - Step-by-step approval flow
   - Color-coded status indicators
   - TAT and elapsed time
   - Comments from approvers

3. **Documents**
   - List of uploaded documents
   - Upload new document button
   - View and download actions

4. **Activity**
   - Complete audit trail
   - Action icons
   - User and timestamp for each action

### Quick Actions (Right Sidebar)
- Add Work Note (dark green button)
- Add Approver
- Add Spectator
- Modify SLA
- Approve Request (green)
- Reject Request (red)

## Testing Checklist

✅ **Request Creation**
- [ ] Create custom request through wizard
- [ ] Verify request appears in My Requests
- [ ] Check request ID is properly generated
- [ ] Verify all wizard data is captured

✅ **Request Detail Display**
- [ ] Click on custom request from My Requests
- [ ] Verify detail page loads (not "Go Back" button)
- [ ] Check all fields are populated correctly
- [ ] Verify initiator information displays
- [ ] Check description and category fields

✅ **Workflow Display**
- [ ] Verify approvers from wizard appear in workflow
- [ ] Check first approver is marked as "pending"
- [ ] Verify other approvers are "waiting"
- [ ] Check TAT hours are set

✅ **Spectators**
- [ ] Verify spectators from wizard appear
- [ ] Check avatar generation works
- [ ] Verify role display

✅ **Audit Trail**
- [ ] Check "Request Created" entry
- [ ] Check "Assigned to Approver" entry
- [ ] Verify timestamps are correct

✅ **Quick Actions**
- [ ] Test all quick action buttons
- [ ] Verify modals/toasts appear
- [ ] Check button styling

✅ **Claim Management Independence**
- [ ] Create claim request through ClaimManagementWizard
- [ ] Verify it routes to ClaimManagementDetail (purple theme)
- [ ] Verify custom requests route to RequestDetail (blue theme)
- [ ] Confirm no cross-contamination

## Sample Custom Request Data Structure

```typescript
{
  id: 'RE-REQ-2024-004',
  title: 'Marketing Campaign Budget Approval',
  description: 'Q4 marketing campaign budget request...',
  category: 'Marketing & Campaigns',
  subcategory: 'Digital Marketing',
  status: 'pending',
  priority: 'express',
  amount: '₹5,00,000',
  slaProgress: 0,
  slaRemaining: '5 days',
  slaEndDate: 'Oct 20, 2024 5:00 PM',
  currentStep: 1,
  totalSteps: 3,
  template: 'custom',
  initiator: {
    name: 'Current User',
    role: 'Employee',
    department: 'Marketing',
    email: 'current.user@royalenfield.com',
    phone: '+91 98765 43290',
    avatar: 'CU'
  },
  approvalFlow: [
    {
      step: 1,
      approver: 'Rajesh Kumar',
      role: 'Marketing Director',
      status: 'pending',
      tatHours: 48,
      elapsedHours: 0,
      assignedAt: '2024-10-15T...',
      comment: null,
      timestamp: null
    },
    // ... more approvers
  ],
  spectators: [
    {
      name: 'Finance Team',
      role: 'Budget Monitoring',
      avatar: 'FT'
    }
  ],
  documents: [],
  auditTrail: [
    {
      type: 'created',
      action: 'Request Created',
      details: 'Custom request "..." created',
      user: 'Current User',
      timestamp: 'Oct 15, 2024 10:30 AM'
    }
  ],
  tags: ['custom-request']
}
```

## Future Enhancements

1. **Persistence**: Add backend API integration to persist dynamic requests
2. **Real-time Updates**: WebSocket for live status updates
3. **Document Upload**: Implement actual file upload functionality
4. **Notifications**: Email/push notifications for approvers
5. **Search**: Add search functionality in My Requests
6. **Filters**: Advanced filtering by status, priority, date
7. **Export**: Export request details to PDF
8. **Comments**: Thread-based commenting system
9. **Attachments**: Support for multiple file types
10. **Permissions**: Role-based access control

## Known Limitations

1. Dynamic requests are in-memory only (lost on refresh)
2. No actual file upload (UI only)
3. No real approval actions (mocked)
4. No email notifications
5. No database persistence

## Next Steps

1. Implement backend API for request persistence
2. Add authentication and authorization
3. Implement real approval workflows
4. Add document upload functionality
5. Create notification system
6. Add reporting and analytics
7. Mobile responsive improvements
8. Accessibility enhancements