99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
/**
|
|
* DealerInformationCard Component
|
|
* Displays dealer details for Claim Management requests
|
|
*/
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Building, Mail, Phone, MapPin } from 'lucide-react';
|
|
import { DealerInfo } from '@/pages/RequestDetail/types/claimManagement.types';
|
|
|
|
interface DealerInformationCardProps {
|
|
dealerInfo: DealerInfo;
|
|
className?: string;
|
|
}
|
|
|
|
export function DealerInformationCard({ dealerInfo, className }: DealerInformationCardProps) {
|
|
// Defensive check: Ensure dealerInfo exists
|
|
if (!dealerInfo) {
|
|
console.warn('[DealerInformationCard] dealerInfo is missing');
|
|
return (
|
|
<Card className={className}>
|
|
<CardContent className="py-8 text-center text-gray-500">
|
|
<p>Dealer information not available</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Check if essential fields are present
|
|
if (!dealerInfo.dealerCode && !dealerInfo.dealerName) {
|
|
console.warn('[DealerInformationCard] Dealer info missing essential fields:', dealerInfo);
|
|
return (
|
|
<Card className={className}>
|
|
<CardContent className="py-8 text-center text-gray-500">
|
|
<p>Dealer information incomplete</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className={className}>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Building className="w-5 h-5 text-purple-600" />
|
|
Dealer Information
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* Dealer Code and Name */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
|
|
Dealer Code
|
|
</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1">
|
|
{dealerInfo.dealerCode}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
|
|
Dealer Name
|
|
</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1">
|
|
{dealerInfo.dealerName}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Information */}
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
|
|
Contact Information
|
|
</label>
|
|
<div className="mt-2 space-y-2">
|
|
{/* Email */}
|
|
<div className="flex items-center gap-2 text-sm text-gray-700">
|
|
<Mail className="w-4 h-4 text-gray-400" />
|
|
<span>{dealerInfo.email}</span>
|
|
</div>
|
|
|
|
{/* Phone */}
|
|
<div className="flex items-center gap-2 text-sm text-gray-700">
|
|
<Phone className="w-4 h-4 text-gray-400" />
|
|
<span>{dealerInfo.phone}</span>
|
|
</div>
|
|
|
|
{/* Address */}
|
|
<div className="flex items-start gap-2 text-sm text-gray-700">
|
|
<MapPin className="w-4 h-4 text-gray-400 mt-0.5" />
|
|
<span>{dealerInfo.address}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|