Re_Figma_Code/src/pages/RequestDetail/components/tabs/ClaimManagementOverviewTab.tsx

/**
 * ClaimManagementOverviewTab Component
 * Specialized overview tab for Claim Management requests
 * Uses modular card components for flexible rendering based on role and request state
 */

import { useState } from 'react';
import {
  ActivityInformationCard,
  DealerInformationCard,
  ProposalDetailsCard,
  RequestInitiatorCard,
} from '../claim-cards';
import { isClaimManagementRequest } from '@/utils/claimRequestUtils';
import {
  mapToClaimManagementRequest,
  determineUserRole,
  getRoleBasedVisibility,
  type ClaimManagementRequest,
  type RequestRole,
} from '@/utils/claimDataMapper';

interface ClaimManagementOverviewTabProps {
  request: any; // Original request object
  apiRequest: any; // API request data
  currentUserId: string;
  isInitiator: boolean;
  onEditClaimAmount?: () => void;
  className?: string;
}

export function ClaimManagementOverviewTab({
  request,
  apiRequest,
  currentUserId,
  isInitiator,
  onEditClaimAmount,
  className = '',
}: ClaimManagementOverviewTabProps) {
  // Check if this is a claim management request
  if (!isClaimManagementRequest(apiRequest)) {
    return (
      <div className="text-center py-8 text-gray-500">
        <p>This is not a claim management request.</p>
      </div>
    );
  }

  // Map API data to claim management structure
  const claimRequest = mapToClaimManagementRequest(apiRequest, currentUserId);
  
  if (!claimRequest) {
    console.warn('[ClaimManagementOverviewTab] Failed to map claim data:', {
      apiRequest,
      hasClaimDetails: !!apiRequest?.claimDetails,
      hasProposalDetails: !!apiRequest?.proposalDetails,
      hasCompletionDetails: !!apiRequest?.completionDetails,
    });
    return (
      <div className="text-center py-8 text-gray-500">
        <p>Unable to load claim management data.</p>
        <p className="text-xs mt-2">Please ensure the request has been properly initialized.</p>
      </div>
    );
  }

  // Debug: Log mapped data for troubleshooting
  console.debug('[ClaimManagementOverviewTab] Mapped claim data:', {
    activityInfo: claimRequest.activityInfo,
    dealerInfo: claimRequest.dealerInfo,
    hasProposalDetails: !!claimRequest.proposalDetails,
    closedExpenses: claimRequest.activityInfo?.closedExpenses,
    closedExpensesBreakdown: claimRequest.activityInfo?.closedExpensesBreakdown,
    hasDealerCode: !!claimRequest.dealerInfo?.dealerCode,
    hasDealerName: !!claimRequest.dealerInfo?.dealerName,
  });

  // Determine user's role
  const userRole: RequestRole = determineUserRole(apiRequest, currentUserId);
  
  // Get visibility settings based on role
  const visibility = getRoleBasedVisibility(userRole);
  
  console.debug('[ClaimManagementOverviewTab] User role and visibility:', {
    userRole,
    visibility,
    currentUserId,
    showDealerInfo: visibility.showDealerInfo,
    dealerInfoPresent: !!(claimRequest.dealerInfo?.dealerCode || claimRequest.dealerInfo?.dealerName),
  });

  // Extract initiator info from request
  // The apiRequest has initiator object with displayName, email, department, phone, etc.
  const initiatorInfo = {
    name: apiRequest.initiator?.name || apiRequest.initiator?.displayName || apiRequest.initiator?.email || 'Unknown',
    role: apiRequest.initiator?.role || apiRequest.initiator?.designation || 'Initiator',
    department: apiRequest.initiator?.department || apiRequest.department || '',
    email: apiRequest.initiator?.email || 'N/A',
    phone: apiRequest.initiator?.phone || apiRequest.initiator?.mobile,
  };

  return (
    <div className={`space-y-6 ${className}`}>
      {/* Activity Information - Always visible */}
      <ActivityInformationCard activityInfo={claimRequest.activityInfo} />

      {/* Dealer Information - Always visible */}
      <DealerInformationCard dealerInfo={claimRequest.dealerInfo} />

      {/* Proposal Details - Only shown after dealer submits proposal */}
      {visibility.showProposalDetails && claimRequest.proposalDetails && (
        <ProposalDetailsCard proposalDetails={claimRequest.proposalDetails} />
      )}

      {/* Request Initiator */}
      <RequestInitiatorCard initiatorInfo={initiatorInfo} />
    </div>
  );
}

/**
 * Wrapper component that decides whether to show claim management or regular overview
 */
interface AdaptiveOverviewTabProps {
  request: any;
  apiRequest: any;
  currentUserId: string;
  isInitiator: boolean;
  onEditClaimAmount?: () => void;
  // Props for regular overview tab
  regularOverviewComponent?: React.ComponentType<any>;
  regularOverviewProps?: any;
}

export function AdaptiveOverviewTab({
  request,
  apiRequest,
  currentUserId,
  isInitiator,
  onEditClaimAmount,
  regularOverviewComponent: RegularOverview,
  regularOverviewProps,
}: AdaptiveOverviewTabProps) {
  // Determine if this is a claim management request
  const isClaim = isClaimManagementRequest(apiRequest);

  if (isClaim) {
    return (
      <ClaimManagementOverviewTab
        request={request}
        apiRequest={apiRequest}
        currentUserId={currentUserId}
        isInitiator={isInitiator}
        onEditClaimAmount={onEditClaimAmount}
      />
    );
  }

  // Render regular overview if provided
  if (RegularOverview) {
    return <RegularOverview {...regularOverviewProps} />;
  }

  // Fallback
  return (
    <div className="text-center py-8 text-gray-500">
      <p>No overview available for this request type.</p>
    </div>
  );
}