175 lines
5.6 KiB
Markdown
175 lines
5.6 KiB
Markdown
# 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
|
|
|
|
```typescript
|
|
// 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:
|
|
|
|
```typescript
|
|
const flowType = getRequestFlowType(apiRequest);
|
|
const RequestDetailScreen = getRequestDetailScreen(flowType);
|
|
return <RequestDetailScreen {...props} />;
|
|
```
|
|
|
|
## Deleting a Flow
|
|
|
|
### Step 1: Delete Folder
|
|
```bash
|
|
# Delete entire flow folder
|
|
rm -rf src/dealer-claim/
|
|
```
|
|
|
|
### Step 2: Update Registry
|
|
```typescript
|
|
// 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
|
|
|
|
```typescript
|
|
// 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`**:
|
|
```typescript
|
|
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.
|