221 lines
8.0 KiB
Markdown
221 lines
8.0 KiB
Markdown
# Complete Flow Segregation - Implementation Summary
|
|
|
|
## Overview
|
|
|
|
This document describes the **complete segregation** of request flows into dedicated folders. Each flow type (CUSTOM, DEALER_CLAIM) now has ALL its related components, hooks, services, utilities, and types in its own folder. Only truly shared components remain in the `shared/` folder.
|
|
|
|
## What Was Done
|
|
|
|
### 1. Created Complete Folder Structure
|
|
|
|
#### Custom Flow (`src/flows/custom/`)
|
|
```
|
|
custom/
|
|
├── components/
|
|
│ ├── request-detail/
|
|
│ │ ├── OverviewTab.tsx # Custom request overview
|
|
│ │ └── WorkflowTab.tsx # Custom request workflow
|
|
│ └── request-creation/
|
|
│ └── CreateRequest.tsx # Custom request creation
|
|
└── index.ts # Exports all custom components
|
|
```
|
|
|
|
#### Dealer Claim Flow (`src/flows/dealer-claim/`)
|
|
```
|
|
dealer-claim/
|
|
├── components/
|
|
│ ├── request-detail/
|
|
│ │ ├── OverviewTab.tsx # Dealer claim overview
|
|
│ │ ├── WorkflowTab.tsx # Dealer claim workflow
|
|
│ │ ├── IOTab.tsx # IO management (dealer claim specific)
|
|
│ │ ├── 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 # Dealer claim creation
|
|
└── index.ts # Exports all dealer claim components
|
|
```
|
|
|
|
#### Shared Components (`src/flows/shared/`)
|
|
```
|
|
shared/
|
|
└── 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 # Used by all flows
|
|
├── QuickActionsSidebar.tsx # Used by all flows
|
|
└── RequestDetailModals.tsx # Used by all flows
|
|
```
|
|
|
|
### 2. Updated Flow Registry
|
|
|
|
The flow registry (`src/flows/index.ts`) now:
|
|
- Exports all flow modules
|
|
- Provides utility functions to get flow-specific components
|
|
- Includes `getCreateRequestComponent()` for request creation
|
|
- Exports `SharedComponents` for shared components
|
|
|
|
### 3. Updated RequestDetail Component
|
|
|
|
The `RequestDetail` component now:
|
|
- Uses flow registry to get flow-specific components
|
|
- Imports shared components from `SharedComponents`
|
|
- Dynamically loads appropriate tabs based on flow type
|
|
- Maintains backward compatibility
|
|
|
|
## File Organization Rules
|
|
|
|
### ✅ Flow-Specific Files → Flow Folders
|
|
|
|
**Custom Flow:**
|
|
- Custom request creation wizard
|
|
- Custom request detail tabs (Overview, Workflow)
|
|
- Custom request hooks (future)
|
|
- Custom request services (future)
|
|
- Custom request utilities (future)
|
|
- Custom request types (future)
|
|
|
|
**Dealer Claim Flow:**
|
|
- Dealer claim creation wizard
|
|
- Dealer claim detail tabs (Overview, Workflow, IO)
|
|
- Dealer claim cards (Activity, Dealer, Process, Proposal, Initiator)
|
|
- Dealer claim modals (all 7 modals)
|
|
- Dealer claim hooks (future)
|
|
- Dealer claim services (future)
|
|
- Dealer claim utilities (future)
|
|
- Dealer claim types (future)
|
|
|
|
### ✅ Shared Files → Shared Folder
|
|
|
|
**Shared Components:**
|
|
- DocumentsTab (used by all flows)
|
|
- ActivityTab (used by all flows)
|
|
- WorkNotesTab (used by all flows)
|
|
- SummaryTab (used by all flows)
|
|
- RequestDetailHeader (used by all flows)
|
|
- QuickActionsSidebar (used by all flows)
|
|
- RequestDetailModals (used by all flows)
|
|
|
|
## Usage Examples
|
|
|
|
### Getting Flow-Specific Components
|
|
|
|
```typescript
|
|
import { getOverviewTab, getWorkflowTab, getCreateRequestComponent } from '@/flows';
|
|
import { getRequestFlowType } from '@/utils/requestTypeUtils';
|
|
|
|
const flowType = getRequestFlowType(request);
|
|
const OverviewTab = getOverviewTab(flowType);
|
|
const WorkflowTab = getWorkflowTab(flowType);
|
|
const CreateRequest = getCreateRequestComponent(flowType);
|
|
```
|
|
|
|
### Using Shared Components
|
|
|
|
```typescript
|
|
import { SharedComponents } from '@/flows';
|
|
|
|
const { DocumentsTab, ActivityTab, WorkNotesTab, SummaryTab } = SharedComponents;
|
|
```
|
|
|
|
### Direct Access to Flow Components
|
|
|
|
```typescript
|
|
import { CustomFlow, DealerClaimFlow } from '@/flows';
|
|
|
|
// Custom flow
|
|
<CustomFlow.CustomOverviewTab {...props} />
|
|
<CustomFlow.CustomCreateRequest {...props} />
|
|
|
|
// Dealer claim flow
|
|
<DealerClaimFlow.DealerClaimOverviewTab {...props} />
|
|
<DealerClaimFlow.IOTab {...props} />
|
|
<DealerClaimFlow.ClaimManagementWizard {...props} />
|
|
```
|
|
|
|
## Benefits
|
|
|
|
1. **Complete Segregation**: Each flow is completely isolated
|
|
2. **Easy Navigation**: All files for a flow type are in one place
|
|
3. **Maintainability**: Changes to one flow don't affect others
|
|
4. **Scalability**: Easy to add new flow types
|
|
5. **Clarity**: Clear separation between flow-specific and shared code
|
|
6. **Type Safety**: TypeScript ensures correct usage
|
|
|
|
## Next Steps (Future Enhancements)
|
|
|
|
1. **Move Flow-Specific Hooks**
|
|
- Custom hooks → `flows/custom/hooks/`
|
|
- Dealer claim hooks → `flows/dealer-claim/hooks/`
|
|
|
|
2. **Move Flow-Specific Services**
|
|
- Custom services → `flows/custom/services/`
|
|
- Dealer claim services → `flows/dealer-claim/services/`
|
|
|
|
3. **Move Flow-Specific Utilities**
|
|
- Custom utilities → `flows/custom/utils/`
|
|
- Dealer claim utilities → `flows/dealer-claim/utils/`
|
|
|
|
4. **Move Flow-Specific Types**
|
|
- Custom types → `flows/custom/types/`
|
|
- Dealer claim types → `flows/dealer-claim/types/`
|
|
|
|
## Files Created
|
|
|
|
### Custom Flow
|
|
- `src/flows/custom/components/request-detail/OverviewTab.tsx`
|
|
- `src/flows/custom/components/request-detail/WorkflowTab.tsx`
|
|
- `src/flows/custom/components/request-creation/CreateRequest.tsx`
|
|
- `src/flows/custom/index.ts` (updated)
|
|
|
|
### Dealer Claim Flow
|
|
- `src/flows/dealer-claim/components/request-detail/OverviewTab.tsx`
|
|
- `src/flows/dealer-claim/components/request-detail/WorkflowTab.tsx`
|
|
- `src/flows/dealer-claim/components/request-detail/IOTab.tsx`
|
|
- `src/flows/dealer-claim/components/request-detail/claim-cards/index.ts`
|
|
- `src/flows/dealer-claim/components/request-detail/modals/index.ts`
|
|
- `src/flows/dealer-claim/components/request-creation/ClaimManagementWizard.tsx`
|
|
- `src/flows/dealer-claim/index.ts` (updated)
|
|
|
|
### Shared Components
|
|
- `src/flows/shared/components/request-detail/DocumentsTab.tsx`
|
|
- `src/flows/shared/components/request-detail/ActivityTab.tsx`
|
|
- `src/flows/shared/components/request-detail/WorkNotesTab.tsx`
|
|
- `src/flows/shared/components/request-detail/SummaryTab.tsx`
|
|
- `src/flows/shared/components/request-detail/RequestDetailHeader.tsx`
|
|
- `src/flows/shared/components/request-detail/QuickActionsSidebar.tsx`
|
|
- `src/flows/shared/components/request-detail/RequestDetailModals.tsx`
|
|
- `src/flows/shared/components/index.ts` (updated)
|
|
|
|
### Registry
|
|
- `src/flows/index.ts` (updated with new structure)
|
|
|
|
## Files Modified
|
|
|
|
- `src/pages/RequestDetail/RequestDetail.tsx` - Uses new flow structure
|
|
- `src/flows/README.md` - Updated with complete segregation documentation
|
|
|
|
## Conclusion
|
|
|
|
The complete segregation is now in place. Each flow type has its own dedicated folder with all related components. This makes it easy to:
|
|
- Find all files related to a specific flow type
|
|
- Maintain and update flow-specific code
|
|
- Add new flow types without affecting existing ones
|
|
- Understand what is shared vs. flow-specific
|
|
|
|
The architecture is now truly modular and plug-and-play!
|