From 977d19d0d26e1407f016daf9dcc4488845d2906f Mon Sep 17 00:00:00 2001
From: falendikategar <falendikapratama@gmail.com>
Date: Wed, 9 Oct 2024 16:14:37 +0700
Subject: [PATCH] add: adding index and lazy index on dashboard layout

---
 .../index.lazy.tsx                            | 137 ++++++++++++++++++
 .../assessmentRequestManagements/index.tsx    |  18 +++
 2 files changed, 155 insertions(+)
 create mode 100644 apps/frontend/src/routes/_dashboardLayout/assessmentRequestManagements/index.lazy.tsx
 create mode 100644 apps/frontend/src/routes/_dashboardLayout/assessmentRequestManagements/index.tsx

diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentRequestManagements/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentRequestManagements/index.lazy.tsx
new file mode 100644
index 0000000..77f21a8
--- /dev/null
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentRequestManagements/index.lazy.tsx
@@ -0,0 +1,137 @@
+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 { Badge, Flex } from "@mantine/core";
+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);
+	};
+
+	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) => {
+						const status = props.row.original.status;
+						let statusLabel;
+						let color;
+					
+						switch (status) {
+							case "menunggu konfirmasi":
+								statusLabel = "Menunggu Konfirmasi";
+								color = "yellow";
+								break;
+							case "diterima":
+								statusLabel = "Diterima";
+								color = "green";
+								break;
+							case "ditolak":
+								statusLabel = "Ditolak";
+								color = "red";
+								break;
+							case "selesai":
+								statusLabel = "Selesai";
+								color = "blue";
+								break;
+							default:
+								statusLabel = "Tidak Diketahui";
+								color = "gray";
+								break;
+						}
+					
+						return <Badge color={color}>{statusLabel}</Badge>;
+					},
+				}),
+
+				columnHelper.display({
+					header: "Aksi",
+					cell: (props) => (
+						<Flex gap="xs">
+							{createActionButtons([
+								{
+									label: "Detail",
+									permission: true,
+									action: () => handleDetailClick(props.row.original.idPermohonan),
+									color: "green",
+									icon: <TbEye />,
+								},
+							])}
+						</Flex>
+					),
+				}),
+			]}
+		/>
+	);
+}
diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentRequestManagements/index.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentRequestManagements/index.tsx
new file mode 100644
index 0000000..426c086
--- /dev/null
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentRequestManagements/index.tsx
@@ -0,0 +1,18 @@
+import { assessmentRequestManagementQueryOptions } from "@/modules/assessmentRequestManagement/queries/assessmentRequestManagementQueries";
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+
+const searchParamSchema = z.object({
+	create: z.boolean().default(false).optional(),
+	edit: z.string().default("").optional(),
+	delete: z.string().default("").optional(),
+	detail: z.string().default("").optional(),
+});
+
+export const Route = createFileRoute("/_dashboardLayout/assessmentRequestManagements/")({
+	validateSearch: searchParamSchema,
+
+	loader: ({ context: { queryClient } }) => {
+		queryClient.ensureQueryData(assessmentRequestManagementQueryOptions(0, 10));
+	},
+});