235 lines
8.4 KiB
Markdown
235 lines
8.4 KiB
Markdown
# 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.
|