Re_Figma_Code/FLOW_DELETION_GUIDE.md

# Flow Deletion Guide - Complete Removal

## Overview

This guide explains how to completely remove a flow type from the application. The architecture ensures that **deleting a flow folder removes ALL related code** with zero dependencies remaining.

## Architecture Guarantee

✅ **Each flow folder is completely self-contained**
- All components, screens, hooks, services, utils, types are in the flow folder
- No dependencies on the flow folder from outside (except the registry)
- Deleting a folder = Removing all related functionality

## How to Delete a Flow Type

### Example: Removing Dealer Claim Flow

#### Step 1: Delete the Flow Folder
```bash
# Delete the entire dealer-claim folder
rm -rf src/flows/dealer-claim/
```

**What gets deleted:**
- ✅ `pages/RequestDetail.tsx` - Complete dealer claim detail screen
- ✅ All request detail components (OverviewTab, WorkflowTab, IOTab)
- ✅ All claim cards (5 cards)
- ✅ All modals (7 modals)
- ✅ Request creation wizard
- ✅ All future hooks, services, utils, types

#### Step 2: Update Flow Registry
```typescript
// src/flows/index.ts

// Remove import
// import * as DealerClaimFlow from './dealer-claim';

// Update FlowRegistry
export const FlowRegistry = {
  CUSTOM: CustomFlow,
  // DEALER_CLAIM: DealerClaimFlow,  // REMOVED
} as const;

// Update getRequestDetailScreen()
export function getRequestDetailScreen(flowType: RequestFlowType) {
  switch (flowType) {
    // case 'DEALER_CLAIM':           // REMOVED
    //   return DealerClaimFlow.DealerClaimRequestDetail;
    case 'CUSTOM':
    default:
      return CustomFlow.CustomRequestDetail;
  }
}

// Update other functions similarly
export function getOverviewTab(flowType: RequestFlowType) {
  switch (flowType) {
    // case 'DEALER_CLAIM':           // REMOVED
    //   return DealerClaimFlow.DealerClaimOverviewTab;
    case 'CUSTOM':
    default:
      return CustomFlow.CustomOverviewTab;
  }
}
```

#### Step 3: Update Type Definitions (Optional)
```typescript
// src/utils/requestTypeUtils.ts

// Remove from type union
export type RequestFlowType = 'CUSTOM'; // 'DEALER_CLAIM' removed

// Remove detection function (optional - can keep for backward compatibility)
// export function isDealerClaimRequest(request: any): boolean { ... }

// Update getRequestFlowType()
export function getRequestFlowType(request: any): RequestFlowType {
  // if (isDealerClaimRequest(request)) return 'DEALER_CLAIM';  // REMOVED
  return 'CUSTOM';
}
```

#### Step 4: Update Navigation (If Needed)
```typescript
// src/utils/requestNavigation.ts

export function navigateToCreateRequest(
  navigate: NavigateFunction,
  flowType: RequestFlowType = 'CUSTOM'
): void {
  // Remove dealer claim case
  // if (flowType === 'DEALER_CLAIM') {
  //   return '/claim-management';
  // }
  return '/new-request';
}
```

#### Step 5: Remove Routes (If Needed)
```typescript
// src/App.tsx

// Remove dealer claim route
// <Route 
//   path="/claim-management" 
//   element={<ClaimManagementWizard ... />} 
// />
```

**That's it!** All dealer claim code is completely removed.

## Verification Checklist

After deleting a flow, verify:

- [ ] Flow folder deleted
- [ ] FlowRegistry updated
- [ ] All `get*()` functions updated
- [ ] Type definitions updated (optional)
- [ ] Navigation updated (if needed)
- [ ] Routes removed (if needed)
- [ ] No broken imports
- [ ] Application compiles successfully
- [ ] No references to deleted flow in codebase

## What Happens When You Delete a Flow

### ✅ Removed
- Complete RequestDetail screen
- All flow-specific components
- All flow-specific modals
- All flow-specific cards
- Request creation wizard
- All flow-specific code

### ✅ Still Works
- Other flow types continue working
- Shared components remain
- Main RequestDetail router handles remaining flows
- Navigation for remaining flows

### ✅ No Orphaned Code
- No broken imports
- No dangling references
- No unused components
- Clean removal

## Current Flow Structure

### Custom Flow (`flows/custom/`)
**Contains:**
- `pages/RequestDetail.tsx` - Complete custom request detail screen
- `components/request-detail/` - Custom detail components
- `components/request-creation/` - Custom creation component

**To remove:** Delete `flows/custom/` folder and update registry

### Dealer Claim Flow (`flows/dealer-claim/`)
**Contains:**
- `pages/RequestDetail.tsx` - Complete dealer claim detail screen
- `components/request-detail/` - Dealer claim detail components
- `components/request-detail/claim-cards/` - 5 claim cards
- `components/request-detail/modals/` - 7 modals
- `components/request-creation/` - Claim management wizard

**To remove:** Delete `flows/dealer-claim/` folder and update registry

## Benefits of This Architecture

1. **True Modularity**: Each flow is independent
2. **Easy Removal**: Delete folder + update registry = Done
3. **No Side Effects**: Removing one flow doesn't affect others
4. **Clear Ownership**: Know exactly what belongs to which flow
5. **Maintainable**: All related code in one place
6. **Scalable**: Easy to add new flows

## Example: Complete Removal

```bash
# 1. Delete folder
rm -rf src/flows/dealer-claim/

# 2. Update registry (remove 3 lines)
# 3. Update type (remove 1 line)
# 4. Done! All dealer claim code is gone.
```

**Time to remove a flow:** ~2 minutes

## Conclusion

The architecture ensures that **deleting a flow folder removes ALL related code**. There are no dependencies, no orphaned files, and no cleanup needed. Each flow is a complete, self-contained module that can be added or removed independently.