85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
import { PlusIcon } from '@heroicons/react/24/solid'
|
|
import DT, { type ConfigColumns } from 'datatables.net-dt'
|
|
import DataTable, { type DataTableSlots } from 'datatables.net-react'
|
|
import { Link, useRouteLoaderData } from 'react-router'
|
|
|
|
import type { TStaffResponse } from '~/apis/admin/get-staffs'
|
|
import { Button } from '~/components/ui/button'
|
|
import { UiTable } from '~/components/ui/table'
|
|
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
|
import type { loader } from '~/routes/_admin.lg-admin._dashboard.staffs._index'
|
|
|
|
export const StaffsPage = () => {
|
|
const loaderData = useRouteLoaderData<typeof loader>(
|
|
'routes/_admin.lg-admin._dashboard.staffs._index',
|
|
)
|
|
|
|
DataTable.use(DT)
|
|
const { staffsData: dataTable } = loaderData || {}
|
|
|
|
const dataColumns: ConfigColumns[] = [
|
|
{
|
|
title: 'No',
|
|
render: (
|
|
_data: unknown,
|
|
_type: unknown,
|
|
_row: unknown,
|
|
meta: { row: number },
|
|
) => {
|
|
return meta.row + 1
|
|
},
|
|
},
|
|
{
|
|
title: 'Staf',
|
|
},
|
|
{
|
|
title: 'Email',
|
|
data: 'email',
|
|
},
|
|
]
|
|
const dataSlot: DataTableSlots = {
|
|
1: (_value: unknown, _type: unknown, data: TStaffResponse) => (
|
|
<div className="flex items-center gap-x-2">
|
|
<img
|
|
src={data?.profile_picture || '/images/profile-placeholder.svg'}
|
|
onError={(event) => {
|
|
event.currentTarget.src = '/images/profile-placeholder.svg'
|
|
}}
|
|
alt={data?.name}
|
|
className="size-8 rounded-full bg-[#C4C4C4] object-cover"
|
|
/>
|
|
<div>
|
|
<div>{data.name}</div>
|
|
<div className="text-xs text-[#7C7C7C]">
|
|
ID: {data.id.slice(0, 8)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
<TitleDashboard title="Staf" />
|
|
<div className="mb-8 flex items-end justify-between gap-5">
|
|
<div className="flex-1">{/* TODO: Filter */}</div>
|
|
<Button
|
|
as={Link}
|
|
to="/lg-admin/staffs/create"
|
|
size="lg"
|
|
className="text-md h-[42px] px-4"
|
|
>
|
|
<PlusIcon className="size-8" /> Buat Staf
|
|
</Button>
|
|
</div>
|
|
|
|
<UiTable
|
|
data={dataTable}
|
|
columns={dataColumns}
|
|
slots={dataSlot}
|
|
title="Daftar Staf"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|