first commit

frontend/app/main/configuration/employee-data/components/employeeCard/index.tsx

@@ -0,0 +1,103 @@
+"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;