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