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,
  ProcessDetailsCard,
  RequestInitiatorCard,
} from '../claim-cards';
import {
  ClaimManagementRequest,
  RequestRole,
  getRoleBasedVisibility,
} from '../../types/claimManagement.types';
import {
  mapToClaimManagementRequest,
  determineUserRole,
  isClaimManagementRequest,
} 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) {
    return (
      <div className="text-center py-8 text-gray-500">
        <p>Unable to load claim management data.</p>
      </div>
    );
  }

  // Determine user's role
  const userRole: RequestRole = determineUserRole(apiRequest, currentUserId);
  
  // Get visibility settings based on role
  const visibility = getRoleBasedVisibility(userRole);

  // Extract initiator info from request
  const initiatorInfo = {
    name: apiRequest.requestedBy?.name || apiRequest.createdByName || 'Unknown',
    role: 'initiator',
    department: apiRequest.requestedBy?.department || apiRequest.department || '',
    email: apiRequest.requestedBy?.email || 'N/A',
    phone: apiRequest.requestedBy?.phone || apiRequest.requestedBy?.mobile,
  };

  return (
    <div className={`grid grid-cols-1 lg:grid-cols-3 gap-6 ${className}`}>
      {/* Left Column: Main Information Cards */}
      <div className="lg:col-span-2 space-y-6">
        {/* Activity Information - Always visible */}
        <ActivityInformationCard activityInfo={claimRequest.activityInfo} />

        {/* Dealer Information - Visible based on role */}
        {visibility.showDealerInfo && (
          <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>

      {/* Right Column: Process Details Sidebar */}
      <div className="space-y-6">
        <ProcessDetailsCard
          ioDetails={claimRequest.ioDetails}
          dmsDetails={claimRequest.dmsDetails}
          claimAmount={claimRequest.claimAmount}
          estimatedBudgetBreakdown={claimRequest.proposalDetails?.costBreakup}
          closedExpensesBreakdown={claimRequest.activityInfo.closedExpensesBreakdown}
          visibility={visibility}
          onEditClaimAmount={onEditClaimAmount}
        />
      </div>
    </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>
  );
}