114 lines
3.8 KiB
TypeScript
114 lines
3.8 KiB
TypeScript
import { Eye, Pencil } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
import PageHeader from "@/components/common/pageheader"
|
|
import PaginationButtons from "@/components/common/pagination"
|
|
import { Button } from "@/components/ui/button"
|
|
import type { Person } from "@/generated/prisma/client"
|
|
import { getI18n } from "@/i18n/server"
|
|
import { PersonService } from "@/services/person.service"
|
|
|
|
import { formatPersonDepartment } from "./_components/person.copy"
|
|
|
|
export default async function PeoplePage(props: {
|
|
searchParams?: Promise<{
|
|
page?: string
|
|
search?: string
|
|
}>
|
|
}) {
|
|
const searchParams = await props.searchParams
|
|
const currentPage = searchParams?.page ? parseInt(searchParams.page, 10) : 1
|
|
const search = searchParams?.search || ""
|
|
const { data: people, totalPages } = await PersonService.findAllPaginated({
|
|
page: currentPage,
|
|
pageSize: 10,
|
|
search,
|
|
})
|
|
const { dictionary } = await getI18n()
|
|
const copy = dictionary.inventory.people
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<PageHeader
|
|
title={copy.list.title}
|
|
link="/people/new"
|
|
addLabel={copy.list.addLabel}
|
|
data={people}
|
|
search={search}
|
|
/>
|
|
{people.length === 0 && <div>{copy.list.empty}</div>}
|
|
{people.length > 0 && (
|
|
<div className="overflow-x-auto">
|
|
<table className="text-muted-foreground w-full text-left text-sm">
|
|
<thead className="border-b">
|
|
<tr>
|
|
<th scope="col" className="p-4">
|
|
{copy.list.columns.name}
|
|
</th>
|
|
<th scope="col" className="p-4">
|
|
{copy.list.columns.email}
|
|
</th>
|
|
<th scope="col" className="p-4">
|
|
{copy.list.columns.phone}
|
|
</th>
|
|
<th scope="col" className="p-4">
|
|
{copy.list.columns.department}
|
|
</th>
|
|
<th scope="col" className="p-4">
|
|
{copy.list.columns.actions}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{people.map((person: Person) => (
|
|
<tr key={person.id} className="border-b">
|
|
<td className="p-4">
|
|
{`${person.firstName} ${person.lastName}`}
|
|
</td>
|
|
<td className="p-4">{person.email}</td>
|
|
<td className="p-4">{person.phone}</td>
|
|
<td className="p-4">
|
|
{formatPersonDepartment(
|
|
person.department,
|
|
copy.departments,
|
|
copy.fallback,
|
|
)}
|
|
</td>
|
|
<td className="flex items-center gap-2 p-4">
|
|
<Link href={`/people/${person.id}`} passHref>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
aria-label={copy.list.actions.view}
|
|
>
|
|
<Eye />
|
|
</Button>
|
|
</Link>
|
|
<Link href={`/people/${person.id}/edit`} passHref>
|
|
<Button
|
|
className="btn btn-primary"
|
|
variant="outline"
|
|
size="icon"
|
|
aria-label={copy.list.actions.edit}
|
|
>
|
|
<Pencil />
|
|
</Button>
|
|
</Link>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
<tfoot className="border-t">
|
|
<tr>
|
|
<td colSpan={5} className="p-4 text-center text-sm">
|
|
<PaginationButtons totalPages={totalPages} />
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|