131 lines
3.8 KiB
TypeScript
131 lines
3.8 KiB
TypeScript
import { assessmentRequestManagementQueryOptions } from "@/modules/assessmentRequestManagement/queries/assessmentRequestManagementQueries";
|
|
import PageTemplate from "@/components/PageTemplate";
|
|
import { createLazyFileRoute } from "@tanstack/react-router";
|
|
import ExtractQueryDataType from "@/types/ExtractQueryDataType";
|
|
import { createColumnHelper } from "@tanstack/react-table";
|
|
import { Flex } from "@mantine/core";
|
|
import { Badge } from "@/shadcn/components/ui/badge";
|
|
import createActionButtons from "@/utils/createActionButton";
|
|
import { TbEye } from "react-icons/tb";
|
|
import AssessmentRequestManagementFormModal from "@/modules/assessmentRequestManagement/modals/AssessmentRequestManagementFormModal";
|
|
import { useState } from "react";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
|
|
export const Route = createLazyFileRoute("/_dashboardLayout/assessmentRequestManagements/")({
|
|
component: AssessmentRequestManagementsPage,
|
|
});
|
|
|
|
type DataType = ExtractQueryDataType<typeof assessmentRequestManagementQueryOptions>;
|
|
|
|
const columnHelper = createColumnHelper<DataType>();
|
|
|
|
export default function AssessmentRequestManagementsPage() {
|
|
const [selectedId, setSelectedId] = useState<string | null>(null);
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const queryClient = useQueryClient();
|
|
|
|
const handleDetailClick = (id: string) => {
|
|
setSelectedId(id);
|
|
setModalOpen(true);
|
|
};
|
|
|
|
// Helper function to format the date
|
|
const formatDate = (dateString: string | null) => {
|
|
if (!dateString) {
|
|
return "Tanggal tidak tersedia";
|
|
}
|
|
const date = new Date(dateString);
|
|
return new Intl.DateTimeFormat("id-ID", {
|
|
hour12: true,
|
|
minute: "2-digit",
|
|
hour: "2-digit",
|
|
day: "2-digit",
|
|
month: "long",
|
|
year: "numeric",
|
|
})
|
|
.format(date)
|
|
.replace(/\./g, ':')
|
|
.replace('pukul ', '');
|
|
};
|
|
|
|
return (
|
|
<PageTemplate
|
|
title="Manajemen Permohonan Asesmen"
|
|
queryOptions={assessmentRequestManagementQueryOptions}
|
|
modals={[
|
|
<AssessmentRequestManagementFormModal
|
|
key="form-modal"
|
|
assessmentId={selectedId}
|
|
isOpen={modalOpen}
|
|
onClose={() => {
|
|
setModalOpen(false);
|
|
queryClient.invalidateQueries();
|
|
}}
|
|
/>,
|
|
]}
|
|
createButton={null}
|
|
columnDefs={[
|
|
columnHelper.display({
|
|
header: "#",
|
|
cell: (props) => props.row.index + 1,
|
|
}),
|
|
|
|
columnHelper.display({
|
|
header: "Tanggal",
|
|
cell: (props) => formatDate(props.row.original.tanggal),
|
|
}),
|
|
|
|
columnHelper.display({
|
|
header: "Nama Responden",
|
|
cell: (props) => props.row.original.namaResponden,
|
|
}),
|
|
|
|
columnHelper.display({
|
|
header: "Nama Perusahaan",
|
|
cell: (props) => props.row.original.namaPerusahaan,
|
|
}),
|
|
|
|
columnHelper.display({
|
|
header: "Status",
|
|
cell: (props) => (
|
|
<div className="flex items-center justify-center text-center">
|
|
{(() => {
|
|
const status = props.row.original.status;
|
|
switch (status) {
|
|
case "menunggu konfirmasi":
|
|
return <Badge variant={"waiting"}>Menunggu Konfirmasi</Badge>;
|
|
case "diterima":
|
|
return <Badge variant={"accepted"}>Diterima</Badge>;
|
|
case "dalam pengerjaan":
|
|
return <Badge variant={"inprogress"}>Dalam Pengerjaan</Badge>;
|
|
case "ditolak":
|
|
return <Badge variant={"rejected"}>Ditolak</Badge>;
|
|
default:
|
|
return <Badge variant={"outline"}>Tidak diketahui</Badge>;
|
|
}
|
|
})()}
|
|
</div>
|
|
),
|
|
}),
|
|
|
|
columnHelper.display({
|
|
header: "Aksi",
|
|
cell: (props) => (
|
|
<Flex gap="xs">
|
|
{createActionButtons([
|
|
{
|
|
label: "Detail",
|
|
permission: true,
|
|
action: () => handleDetailClick(props.row.original.idPermohonan),
|
|
color: "black",
|
|
icon: <TbEye />,
|
|
},
|
|
])}
|
|
</Flex>
|
|
),
|
|
}),
|
|
]}
|
|
/>
|
|
);
|
|
}
|