Re_Figma_Code/REQUEST_DETAIL_ROUTING_FLOW.md

# 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!