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:

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

interface RequestDetailProps {
  requestId: string;
  onBack?: () => void;
  onOpenModal?: (modal: string) => void;
  dynamicRequests?: any[]; // NEW
}

ClaimManagementDetail.tsx

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:

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:

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

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

{
  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