Re_Figma_Code/FLOW_STRUCTURE_AT_SRC_LEVEL.md

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

// 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:

const flowType = getRequestFlowType(apiRequest);
const RequestDetailScreen = getRequestDetailScreen(flowType);
return <RequestDetailScreen {...props} />;

Deleting a Flow

Step 1: Delete Folder

# Delete entire flow folder
rm -rf src/dealer-claim/

Step 2: Update Registry

// 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

// 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:

   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.