103 lines
2.7 KiB
TypeScript
103 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
Badge,
|
|
Avatar,
|
|
AvatarFallback,
|
|
Separator,
|
|
} from "ikoncomponents";
|
|
|
|
interface EmployeeResponseDto {
|
|
accountId: string;
|
|
empId: string;
|
|
name: string;
|
|
email: string;
|
|
organizationEmail: string;
|
|
role: string;
|
|
grade: string;
|
|
active: boolean;
|
|
}
|
|
|
|
const EmployeeCard = ({
|
|
empId,
|
|
name,
|
|
email,
|
|
organizationEmail,
|
|
role,
|
|
grade,
|
|
active,
|
|
}: EmployeeResponseDto) => {
|
|
const initials = name
|
|
?.split(" ")
|
|
.map((n: string) => n[0])
|
|
.join("")
|
|
.toUpperCase()
|
|
.slice(0, 2);
|
|
|
|
return (
|
|
<Card className="w-full shadow-md hover:shadow-lg transition-shadow duration-200">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="h-12 w-12">
|
|
<AvatarFallback className="bg-primary text-primary-foreground font-semibold text-sm">
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<p className="font-semibold text-base leading-tight">{name}</p>
|
|
<p className="text-xs text-muted-foreground mt-0.5">{empId}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant={active ? "default" : "secondary"}>
|
|
{active ? "Active" : "Inactive"}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<Separator />
|
|
|
|
<CardContent className="pt-4 space-y-3">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
|
|
Role
|
|
</p>
|
|
<p className="text-sm font-medium mt-0.5">{role || "n/a"}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
|
|
Grade
|
|
</p>
|
|
<p className="text-sm font-medium mt-0.5">{grade || "n/a"}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="space-y-2">
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
|
|
Personal Email
|
|
</p>
|
|
<p className="text-sm truncate mt-0.5">{email || "n/a"}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
|
|
Work Email
|
|
</p>
|
|
<p className="text-sm truncate mt-0.5">{organizationEmail || "n/a"}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default EmployeeCard; |