laxmanhalaki 9b3194d9ca main branch code pulled and folder strucure modified for plug & play

2025-12-13 13:32:20 +05:30

8.4 KiB

Raw Blame History

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

Complete Self-Containment: Each flow folder contains ALL its related code
Zero External Dependencies: Flow folders don't depend on each other
Single Point of Entry: Main RequestDetail routes to flow-specific screens
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:

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

# Delete the entire folder
rm -rf src/flows/dealer-claim/

Step 2: Update Flow Registry

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

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

True Modularity: Delete folder = Remove all functionality
No Orphaned Code: All related code is in one place
Easy Maintenance: Find everything for a flow in its folder
Independent Development: Work on flows without affecting others
Clear Boundaries: Know exactly what belongs to which flow
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

Create folder structure:

flows/vendor-payment/
├── components/
│   ├── request-detail/
│   └── request-creation/
├── pages/
│   └── RequestDetail.tsx  # Complete screen
└── index.ts

Update registry (flows/index.ts):

import * as VendorPaymentFlow from './vendor-payment';

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

That's it! The flow is now plug-and-play.

Example: Removing a Flow Type

Delete folder: rm -rf flows/dealer-claim/
Update registry: Remove from FlowRegistry and getRequestDetailScreen()
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.

8.4 KiB Raw Blame History