import React, { useState } from "react"; import { Button } from "../ui/button"; import { Delete, Edit } from "lucide-react"; import { Staff } from "@repo/db/types"; interface StaffTableProps { staff: Staff[]; isLoading?: boolean; isError?: boolean; onAdd: () => void; onEdit: (staff: Staff) => void; onDelete: (staff: Staff) => void; onView: (staff: Staff) => void; } export function StaffTable({ staff, onEdit, onView, onDelete, onAdd, }: StaffTableProps) { const [currentPage, setCurrentPage] = useState(1); const staffPerPage = 5; const indexOfLastStaff = currentPage * staffPerPage; const indexOfFirstStaff = indexOfLastStaff - staffPerPage; const currentStaff = staff.slice(indexOfFirstStaff, indexOfLastStaff); const totalPages = Math.ceil(staff.length / staffPerPage); const getInitials = (name: string) => { return name .split(" ") .map((n: string) => n[0]) .join("") .toUpperCase(); }; const getAvatarColor = (id: number) => { const colors = [ "bg-blue-500", "bg-teal-500", "bg-amber-500", "bg-rose-500", "bg-indigo-500", "bg-green-500", "bg-purple-500", ]; return colors[id % colors.length]; }; const formatDate = (dateString: string) => { const date = new Date(dateString); return new Intl.DateTimeFormat("en-US", { day: "2-digit", month: "short", year: "numeric", }).format(date); }; return (

Staff Members

{currentStaff.length === 0 ? ( ) : ( currentStaff.map((staff: Staff) => { const avatarId = staff.id ?? 0; // fallback if undefined const formattedDate = staff.createdAt ? formatDate( typeof staff.createdAt === "string" ? staff.createdAt : staff.createdAt.toISOString() ) : "N/A"; return ( ); }) )}
Staff Email Role Phone Joined Actions
No staff found. Add new staff to get started.
{getInitials(staff.name)}
{staff.name}
{staff.email || "—"} {staff.role} {staff.phone || "—"} {formattedDate}
{staff.length > staffPerPage && (

Showing{" "} {indexOfFirstStaff + 1} to{" "} {Math.min(indexOfLastStaff, staff.length)} {" "} of {staff.length} results

)}
); }