laxmanhalaki/Re_Figma_Code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
94b7c34a7a
Re_Figma_Code/FLOW_SEGREGATION_COMPLETE.md

8.0 KiB
Raw Blame History

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

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

import { SharedComponents } from '@/flows';

const { DocumentsTab, ActivityTab, WorkNotesTab, SummaryTab } = SharedComponents;

Direct Access to Flow Components

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!