78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
/**
|
|
* RequestInitiatorCard Component
|
|
* Displays initiator/requester details - can be used for both claim management and regular workflows
|
|
*/
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import { Mail, Phone } from 'lucide-react';
|
|
|
|
interface InitiatorInfo {
|
|
name: string;
|
|
role?: string;
|
|
department?: string;
|
|
email: string;
|
|
phone?: string;
|
|
}
|
|
|
|
interface RequestInitiatorCardProps {
|
|
initiatorInfo: InitiatorInfo;
|
|
className?: string;
|
|
}
|
|
|
|
export function RequestInitiatorCard({ initiatorInfo, className }: RequestInitiatorCardProps) {
|
|
// Generate initials from name
|
|
const getInitials = (name: string) => {
|
|
return name
|
|
.split(' ')
|
|
.map((n) => n[0])
|
|
.join('')
|
|
.toUpperCase()
|
|
.slice(0, 2);
|
|
};
|
|
|
|
return (
|
|
<Card className={className}>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Request Initiator</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-start gap-4">
|
|
<Avatar className="h-14 w-14 ring-2 ring-white shadow-md">
|
|
<AvatarFallback className="bg-gray-700 text-white font-semibold text-lg">
|
|
{getInitials(initiatorInfo.name)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-gray-900">{initiatorInfo.name}</h3>
|
|
{initiatorInfo.role && (
|
|
<p className="text-sm text-gray-600">{initiatorInfo.role}</p>
|
|
)}
|
|
{initiatorInfo.department && (
|
|
<p className="text-sm text-gray-500">{initiatorInfo.department}</p>
|
|
)}
|
|
|
|
<div className="mt-3 space-y-2">
|
|
{/* Email */}
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Mail className="w-4 h-4" />
|
|
<span>{initiatorInfo.email}</span>
|
|
</div>
|
|
|
|
{/* Phone */}
|
|
{initiatorInfo.phone && (
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Phone className="w-4 h-4" />
|
|
<span>{initiatorInfo.phone}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
|