Re_Figma_Code/SRC_LEVEL_FLOW_STRUCTURE.md

# Source-Level Flow Structure - Complete Implementation

## Overview

Flow folders are now at the **`src/` level** for maximum visibility and easy removal. Each flow folder is completely self-contained - deleting a folder removes ALL related code.

## Directory Structure

```
src/
├── 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
│   │   │   │   ├── ActivityInformationCard.tsx
│   │   │   │   ├── DealerInformationCard.tsx
│   │   │   │   ├── ProcessDetailsCard.tsx
│   │   │   │   ├── ProposalDetailsCard.tsx
│   │   │   │   └── RequestInitiatorCard.tsx
│   │   │   └── modals/             # All dealer claim modals
│   │   │       ├── CreditNoteSAPModal.tsx
│   │   │       ├── DealerCompletionDocumentsModal.tsx
│   │   │       ├── DealerProposalSubmissionModal.tsx
│   │   │       ├── DeptLeadIOApprovalModal.tsx
│   │   │       ├── EditClaimAmountModal.tsx
│   │   │       ├── EmailNotificationTemplateModal.tsx
│   │   │       └── InitiatorProposalApprovalModal.tsx
│   │   └── 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
│
└── flows.ts                          # Flow registry and routing utilities
```

## Key Features

### ✅ Source-Level Visibility
- Flow folders are directly under `src/`
- Easy to see and navigate
- Clear separation from other code

### ✅ Complete Self-Containment
- Each flow folder contains ALL its code
- RequestDetail screens, components, modals, cards
- Future: hooks, services, utils, types

### ✅ Easy Removal
- Delete `src/custom/` → All custom code removed
- Delete `src/dealer-claim/` → All dealer claim code removed
- Update `src/flows.ts` → Done!

## How It Works

### Main RequestDetail Router

`src/pages/RequestDetail/RequestDetail.tsx` is a simple router:

```typescript
// 1. Fetches request to determine flow type
const flowType = getRequestFlowType(apiRequest);

// 2. Gets the appropriate RequestDetail screen from registry
const RequestDetailScreen = getRequestDetailScreen(flowType);

// 3. Renders the flow-specific screen
return <RequestDetailScreen {...props} />;
```

### Flow Registry

`src/flows.ts` contains the registry:

```typescript
import * as CustomFlow from './custom';
import * as DealerClaimFlow from './dealer-claim';
import * as SharedComponents from './shared/components';

export const FlowRegistry = {
  CUSTOM: CustomFlow,
  DEALER_CLAIM: DealerClaimFlow,
} as const;

export function getRequestDetailScreen(flowType: RequestFlowType) {
  switch (flowType) {
    case 'DEALER_CLAIM':
      return DealerClaimFlow.DealerClaimRequestDetail;
    case 'CUSTOM':
    default:
      return CustomFlow.CustomRequestDetail;
  }
}
```

## Deleting a Flow

### Example: Remove Dealer Claim

**Step 1:** Delete folder
```bash
rm -rf src/dealer-claim/
```

**Step 2:** Update `src/flows.ts`
```typescript
// Remove import
// import * as DealerClaimFlow from './dealer-claim';

// Update FlowRegistry
export const FlowRegistry = {
  CUSTOM: CustomFlow,
  // DEALER_CLAIM: DealerClaimFlow,  // REMOVED
} as const;

// Update getRequestDetailScreen()
export function getRequestDetailScreen(flowType: RequestFlowType) {
  switch (flowType) {
    // case 'DEALER_CLAIM':           // REMOVED
    //   return DealerClaimFlow.DealerClaimRequestDetail;
    case 'CUSTOM':
    default:
      return CustomFlow.CustomRequestDetail;
  }
}
```

**Done!** All dealer claim code is removed.

## Import Paths

### Flow-Specific Imports
```typescript
// Custom flow
import { CustomRequestDetail } from '@/custom';
import { CustomOverviewTab } from '@/custom';

// Dealer claim flow
import { DealerClaimRequestDetail } from '@/dealer-claim';
import { DealerClaimOverviewTab } from '@/dealer-claim';
```

### Shared Components
```typescript
import { SharedComponents } from '@/shared/components';
const { DocumentsTab, ActivityTab } = SharedComponents;
```

### Flow Registry
```typescript
import { getRequestDetailScreen, CustomFlow, DealerClaimFlow } from '@/flows';
```

## Benefits

1. **Maximum Visibility**: Flow folders at `src/` level are immediately visible
2. **Easy Navigation**: No nested paths - just `src/custom/` or `src/dealer-claim/`
3. **Simple Removal**: Delete folder + update `flows.ts` = Done
4. **Clear Ownership**: Know exactly what belongs to which flow
5. **Complete Isolation**: Each flow is independent
6. **Future-Proof**: Easy to add hooks, services, utils, types to each flow

## Current Structure

### `src/custom/`
- ✅ Complete RequestDetail screen
- ✅ Request detail components
- ✅ Request creation component
- 🔜 Hooks, services, utils, types

### `src/dealer-claim/`
- ✅ Complete RequestDetail screen
- ✅ Request detail components
- ✅ Request detail cards (5 cards)
- ✅ Request detail modals (7 modals)
- ✅ Request creation wizard
- 🔜 Hooks, services, utils, types

### `src/shared/`
- ✅ Shared components used by all flows

### `src/flows.ts`
- ✅ Flow registry
- ✅ Routing utilities
- ✅ Component getters

## Conclusion

The architecture is now **completely modular at the source level**. Flow folders are directly under `src/` for maximum visibility and easy removal. Deleting a folder removes all related code with zero dependencies remaining.