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:

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

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

rm -rf src/dealer-claim/

Step 2: Update src/flows.ts

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

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

import { SharedComponents } from '@/shared/components';
const { DocumentsTab, ActivityTab } = SharedComponents;

Flow Registry

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.