first commit
This commit is contained in:
Your NamebaishaliHolocron
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { ColumnDef, DataTableLayout } from "ikoncomponents";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
import { getEmployees } from "@/app/utils/api/employeeDetails";
|
||||
|
||||
interface EmployeeResponseDto {
|
||||
accountId: string;
|
||||
empId: string;
|
||||
name: string;
|
||||
email: string;
|
||||
organizationEmail: string;
|
||||
role: string;
|
||||
grade: string;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
interface RoleDto {
|
||||
id: string;
|
||||
accountId: string;
|
||||
role: string;
|
||||
}
|
||||
|
||||
interface GradeDto {
|
||||
id: string;
|
||||
grade: string;
|
||||
}
|
||||
|
||||
interface ResolvedEmployee extends EmployeeResponseDto {
|
||||
roleName: string;
|
||||
gradeName: string;
|
||||
}
|
||||
|
||||
function EmployeePage({
|
||||
roleData,
|
||||
gradeData,
|
||||
}: {
|
||||
roleData: RoleDto[];
|
||||
gradeData: GradeDto[];
|
||||
}) {
|
||||
const [employees, setEmployees] = useState<ResolvedEmployee[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// This table is list-only, so hide DataTableLayout's built-in List/Grid toggle
|
||||
// (it has no prop to disable it). Once mounted we find the grid button and hide
|
||||
// the whole toggle group, so a lone list button isn't left dangling.
|
||||
const tableContainerRef = useRef<HTMLDivElement>(null);
|
||||
const hidGridToggle = useRef(false);
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const currentSearch = (searchParams.get("search") || "").toLowerCase().trim();
|
||||
|
||||
const fetchEmployees = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const data = await getEmployees();
|
||||
console.log("emp data", data);
|
||||
|
||||
const empList: EmployeeResponseDto[] = data || [];
|
||||
|
||||
const roleMap = new Map(
|
||||
roleData?.map((role) => [role.id, role.role]) || [],
|
||||
);
|
||||
|
||||
const gradeMap = new Map(
|
||||
gradeData?.map((grade) => [grade.id, grade.grade]) || [],
|
||||
);
|
||||
console.log("emp", empList, roleMap, gradeMap);
|
||||
|
||||
const resolved: ResolvedEmployee[] = empList.map((emp) => ({
|
||||
...emp,
|
||||
roleName: roleMap.get(emp.role) || "n/a",
|
||||
gradeName: gradeMap.get(emp.grade) || "n/a",
|
||||
}));
|
||||
console.log("emp data", resolved);
|
||||
setEmployees(resolved);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch employees:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [roleData, gradeData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (roleData && gradeData) {
|
||||
fetchEmployees();
|
||||
}
|
||||
}, [fetchEmployees, roleData, gradeData]);
|
||||
|
||||
// Hide the List/Grid toggle once the table has mounted.
|
||||
useEffect(() => {
|
||||
if (isLoading || hidGridToggle.current) return;
|
||||
const gridButton =
|
||||
tableContainerRef.current?.querySelector<HTMLButtonElement>(
|
||||
'button[title="Grid View"]',
|
||||
);
|
||||
if (gridButton?.parentElement) {
|
||||
gridButton.parentElement.style.display = "none";
|
||||
hidGridToggle.current = true;
|
||||
}
|
||||
}, [isLoading]);
|
||||
|
||||
const filteredEmployees = currentSearch
|
||||
? employees.filter(
|
||||
(emp) =>
|
||||
(emp.name || "").toLowerCase().includes(currentSearch) ||
|
||||
(emp.empId || "").toLowerCase().includes(currentSearch) ||
|
||||
(emp.email || "").toLowerCase().includes(currentSearch) ||
|
||||
(emp.roleName || "").toLowerCase().includes(currentSearch) ||
|
||||
(emp.gradeName || "").toLowerCase().includes(currentSearch),
|
||||
)
|
||||
: employees;
|
||||
|
||||
const columns: ColumnDef<ResolvedEmployee>[] = [
|
||||
{
|
||||
accessorKey: "empId",
|
||||
header: "Employee ID",
|
||||
cell: (row) => <span>{row.empId || "n/a"}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "Employee Name",
|
||||
cell: (row) => <span>{row.name || "n/a"}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "roleName",
|
||||
header: "Role",
|
||||
cell: (row) => <span>{row.roleName || "n/a"}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "gradeName",
|
||||
header: "Grade",
|
||||
cell: (row) => <span>{row.gradeName || "n/a"}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "email",
|
||||
header: "Email",
|
||||
cell: (row) => <span>{row.email || "n/a"}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "organizationEmail",
|
||||
header: "Organization Email",
|
||||
cell: (row) => <span>{row.organizationEmail || "n/a"}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "active",
|
||||
header: "Status",
|
||||
cell: (row) => <span>{row.active ? "Active" : "Inactive"}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div ref={tableContainerRef}>
|
||||
<DataTableLayout
|
||||
data={filteredEmployees}
|
||||
columns={columns}
|
||||
extraTools={{
|
||||
keyExtractor: (row: ResolvedEmployee) => row.empId,
|
||||
totalPages: 1,
|
||||
currentPage: 1,
|
||||
isLoading,
|
||||
onReload: fetchEmployees,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EmployeePage;
|
||||
@@ -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;
|
||||
21
frontend/app/main/configuration/employee-data/layout.tsx
Normal file
21
frontend/app/main/configuration/employee-data/layout.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
"use client";
|
||||
import { RenderAppBreadcrumb } from "ikoncomponents";
|
||||
|
||||
export default function EmployeeDataLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<>
|
||||
<RenderAppBreadcrumb
|
||||
breadcrumb={{
|
||||
level: 2,
|
||||
title: "Employee Data",
|
||||
href: "/configuration/employee-data",
|
||||
}}
|
||||
/>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
19
frontend/app/main/configuration/employee-data/page.tsx
Normal file
19
frontend/app/main/configuration/employee-data/page.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { getAllGrade } from "@/app/utils/api/companyData/gradeApi.ts";
|
||||
import EmployeeDataTable from "./components/employee-table";
|
||||
import { getAllRoles } from "@/app/utils/api/companyData/roleApi.ts";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function EmployeeData() {
|
||||
const gradeData = await getAllGrade();
|
||||
const roleData = await getAllRoles();
|
||||
|
||||
return (
|
||||
<div className="py-4 space-y-4 w-full h-full">
|
||||
<EmployeeDataTable
|
||||
roleData={roleData || []}
|
||||
gradeData={gradeData || []}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user