90 lines
2.3 KiB
TypeScript

import { PlusIcon } from '@heroicons/react/24/solid'
import { Link } from 'react-router'
import { Button } from '~/components/ui/button'
import { TitleDashboard } from '~/components/ui/title-dashboard'
export const StaffsPage = () => {
// const loaderData = useRouteLoaderData<typeof loader>(
// 'routes/_admin.lg-admin._dashboard.staffs._index',
// )
// DataTable.use(DT)
// const dataTable =
// loaderData?.usersData?.sort(
// (a, b) =>
// new Date(b.subscribe.start_date).getTime() -
// new Date(a.subscribe.start_date).getTime(),
// ) || []
// const dataColumns: ConfigColumns[] = [
// {
// title: 'No',
// render: (
// _data: unknown,
// _type: unknown,
// _row: unknown,
// meta: { row: number },
// ) => {
// return meta.row + 1
// },
// },
// {
// title: 'Tanggal Daftar',
// data: 'created_at',
// },
// {
// title: 'User',
// },
// {
// title: 'Phone',
// data: 'phone',
// },
// {
// title: 'Status',
// data: 'subscribe.subscribe_plan.name',
// },
// ]
// const dataSlot: DataTableSlots = {
// 1: (value: string) => formatDate(value),
// 2: (_value: unknown, _type: unknown, data: TUserResponse) => (
// <div>
// <div>{data.email}</div>
// <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
// </div>
// ),
// 3: (value: string) => <span>{value}</span>,
// 4: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
// <span
// className={`rounded-lg px-2 text-sm ${getStatusBadge(data.subscribe.status as TColorBadge)}`}
// >
// {value}
// </span>
// ),
// }
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 Users"
/> */}
</div>
)
}