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