Re_Figma_Code/docs/FRONTEND_CLAIM_MANAGEMENT_UPDATES.md

Frontend Updates for Dealer Claim Management

Overview

This document outlines the frontend changes needed to support the new backend structure with workflowType field for dealer claim management.

✅ Completed

1. Created utility function (src/utils/claimRequestUtils.ts)
   • isClaimManagementRequest() - Checks if request is claim management (supports both old and new formats)
   • getWorkflowType() - Gets workflow type from request
   • shouldUseClaimManagementUI() - Determines if claim-specific UI should be used

🔧 Required Updates

1. Update RequestDetail Component

File: src/pages/RequestDetail/RequestDetail.tsx

Changes Needed:

• Import isClaimManagementRequest from @/utils/claimRequestUtils
• Conditionally render ClaimManagementOverviewTab instead of OverviewTab when it's a claim management request
• Conditionally render DealerClaimWorkflowTab instead of WorkflowTab when it's a claim management request

Example:

import { isClaimManagementRequest } from '@/utils/claimRequestUtils';
import { ClaimManagementOverviewTab } from './components/tabs/ClaimManagementOverviewTab';
import { DealerClaimWorkflowTab } from './components/tabs/DealerClaimWorkflowTab';

// In the component:
const isClaimManagement = isClaimManagementRequest(apiRequest);

<TabsContent value="overview">
  {isClaimManagement ? (
    <ClaimManagementOverviewTab
      request={request}
      apiRequest={apiRequest}
      currentUserId={(user as any)?.userId}
      isInitiator={isInitiator}
    />
  ) : (
    <OverviewTab {...overviewProps} />
  )}
</TabsContent>

<TabsContent value="workflow">
  {isClaimManagement ? (
    <DealerClaimWorkflowTab
      request={request}
      user={user}
      isInitiator={isInitiator}
      onRefresh={refreshDetails}
    />
  ) : (
    <WorkflowTab {...workflowProps} />
  )}
</TabsContent>

2. Create Missing Utility Functions

File: src/pages/RequestDetail/utils/claimDataMapper.ts (NEW FILE)

Functions Needed:

• mapToClaimManagementRequest(apiRequest, userId) - Maps backend API response to claim management structure
• determineUserRole(apiRequest, userId) - Determines user's role (INITIATOR, DEALER, APPROVER, SPECTATOR)
• Helper functions to extract claim-specific data from API response

Structure:

export interface ClaimManagementRequest {
  activityInfo: {
    activityName: string;
    activityType: string;
    activityDate: string;
    location: string;
    periodStart?: string;
    periodEnd?: string;
    estimatedBudget?: number;
    closedExpensesBreakdown?: any[];
  };
  dealerInfo: {
    dealerCode: string;
    dealerName: string;
    dealerEmail?: string;
    dealerPhone?: string;
    dealerAddress?: string;
  };
  proposalDetails?: {
    costBreakup: any[];
    totalEstimatedBudget: number;
    timeline: string;
    dealerComments?: string;
  };
  ioDetails?: {
    ioNumber?: string;
    availableBalance?: number;
    blockedAmount?: number;
    remainingBalance?: number;
  };
  dmsDetails?: {
    dmsNumber?: string;
    eInvoiceNumber?: string;
    creditNoteNumber?: string;
  };
  claimAmount?: number;
}

export function mapToClaimManagementRequest(
  apiRequest: any,
  userId: string
): ClaimManagementRequest | null {
  // Extract data from apiRequest.claimDetails (from backend)
  // Map to ClaimManagementRequest structure
}

export function determineUserRole(
  apiRequest: any,
  userId: string
): 'INITIATOR' | 'DEALER' | 'APPROVER' | 'SPECTATOR' {
  // Check if user is initiator
  // Check if user is dealer (from participants or claimDetails)
  // Check if user is approver (from approval levels)
  // Check if user is spectator (from participants)
}

3. Update ClaimManagementOverviewTab

File: src/pages/RequestDetail/components/tabs/ClaimManagementOverviewTab.tsx

Changes Needed:

• Import the new utility functions from claimDataMapper.ts
• Remove TODO comments
• Ensure it properly handles both old and new API response formats

4. Update API Service

File: src/services/workflowApi.ts

Changes Needed:

• Add workflowType field to CreateWorkflowFromFormPayload interface
• Include workflowType: 'CLAIM_MANAGEMENT' when creating claim management requests
• Update response types to include workflowType field

Example:

export interface CreateWorkflowFromFormPayload {
  templateId?: string | null;
  templateType: 'CUSTOM' | 'TEMPLATE';
  workflowType?: string;  // NEW: 'CLAIM_MANAGEMENT' | 'NON_TEMPLATIZED' | etc.
  title: string;
  // ... rest of fields
}

5. Update ClaimManagementWizard

File: src/components/workflow/ClaimManagementWizard/ClaimManagementWizard.tsx

Changes Needed:

• When submitting, include workflowType: 'CLAIM_MANAGEMENT' in the payload
• Update to call the new backend API endpoint for creating claim requests

6. Update Request List Components

Files:

• src/pages/MyRequests/components/RequestCard.tsx
• src/pages/Requests/components/RequestCard.tsx
• src/pages/OpenRequests/components/RequestCard.tsx

Changes Needed:

• Display template/workflow type badge based on workflowType field
• Support both old (templateType) and new (workflowType) formats

Example:

const workflowType = request.workflowType || 
  (request.templateType === 'claim-management' ? 'CLAIM_MANAGEMENT' : 'NON_TEMPLATIZED');

{workflowType === 'CLAIM_MANAGEMENT' && (
  <Badge variant="secondary">Claim Management</Badge>
)}

7. Create API Service for Claim Management

File: src/services/dealerClaimApi.ts (NEW FILE)

Endpoints Needed:

• createClaimRequest(data) - POST /api/v1/dealer-claims
• getClaimDetails(requestId) - GET /api/v1/dealer-claims/:requestId
• submitProposal(requestId, data) - POST /api/v1/dealer-claims/:requestId/proposal
• submitCompletion(requestId, data) - POST /api/v1/dealer-claims/:requestId/completion
• updateIODetails(requestId, data) - PUT /api/v1/dealer-claims/:requestId/io

8. Update Type Definitions

File: src/types/index.ts

Changes Needed:

• Add workflowType?: string to request interfaces
• Update ClaimFormData interface to match backend structure

📋 Implementation Order

1. ✅ Create claimRequestUtils.ts (DONE)
2. ⏳ Create claimDataMapper.ts with mapping functions
3. ⏳ Update RequestDetail.tsx to conditionally render claim components
4. ⏳ Update workflowApi.ts to include workflowType
5. ⏳ Update ClaimManagementWizard.tsx to send workflowType
6. ⏳ Create dealerClaimApi.ts for claim-specific endpoints
7. ⏳ Update request card components to show workflow type
8. ⏳ Test end-to-end flow

🔄 Backward Compatibility

The frontend should support both:

• Old Format: templateType: 'claim-management'
• New Format: workflowType: 'CLAIM_MANAGEMENT'

The isClaimManagementRequest() utility function handles both formats automatically.

📝 Notes

• All existing claim management UI components are already created
• The main work is connecting them to the new backend API structure
• The workflowType field allows the system to support multiple template types in the future
• All requests (claim management, non-templatized, future templates) will appear in "My Requests" and "Open Requests" automatically