gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #26 from digitalsolutiongroup/feat/assessment-request-management-frontend

Browse Source 
Slicing and Integration API Assessment Request Management
This commit is contained in:
Falendika Tegar 2024-10-10 08:20:39 +07:00 committed by GitHub
commit 7024e266ba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 594 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/backend/src/data/sidebarMenus.ts
View File

@ -35,6 +35,13 @@ const sidebarMenus: SidebarMenu[] = [
link: "/aspect",
color: "blue",
},
{
label: "Manajemen Permohonan Asesmen",
icon: { tb: "TbReport" },
allowedPermissions: ["permissions.read"],
link: "/assessmentRequestManagements",
color: "orange",
},
];
export default sidebarMenus;

82
apps/backend/src/routes/assessmentRequestManagement/route.ts
View File

@ -1,29 +1,29 @@
import { and, eq, ilike, or, sql } from "drizzle-orm";
import { Hono } from "hono";
import checkPermission from "../../middlewares/checkPermission";
import { z } from "zod";
import { HTTPException } from "hono/http-exception";
import db from "../../drizzle";
import { assessments } from "../../drizzle/schema/assessments";
import { respondents } from "../../drizzle/schema/respondents";
import { users } from "../../drizzle/schema/users";
import HonoEnv from "../../types/HonoEnv";
import requestValidator from "../../utils/requestValidator";
import authInfo from "../../middlewares/authInfo";
import { and, eq, ilike, or, sql, desc } from "drizzle-orm";
import { Hono } from "hono";
import checkPermission from "../../middlewares/checkPermission";
import { z } from "zod";
import { HTTPException } from "hono/http-exception";
import db from "../../drizzle";
import { assessments } from "../../drizzle/schema/assessments";
import { respondents } from "../../drizzle/schema/respondents";
import { users } from "../../drizzle/schema/users";
import HonoEnv from "../../types/HonoEnv";
import requestValidator from "../../utils/requestValidator";
import authInfo from "../../middlewares/authInfo";
export const assessmentFormSchema = z.object({
export const assessmentFormSchema = z.object({
respondentId: z.string().min(1),
status: z.enum(["menunggu konfirmasi", "diterima", "ditolak", "selesai"]),
reviewedBy: z.string().min(1),
validatedBy: z.string().min(1),
validatedAt: z.string().optional(),
});
});
export const assessmentUpdateSchema = assessmentFormSchema.extend({
export const assessmentUpdateSchema = assessmentFormSchema.extend({
validatedAt: z.string().optional().or(z.literal("")),
});
});
const assessmentsRequestManagementRoutes = new Hono<HonoEnv>()
const assessmentsRequestManagementRoutes = new Hono<HonoEnv>()
.use(authInfo)
/**
* Get All Assessments (With Metadata)
@ -49,16 +49,10 @@
async (c) => {
const { page, limit, q } = c.req.valid("query");
const totalCountQuery = sql<number>`(SELECT count(*) FROM ${assessments})`;
const result = await db
// Query untuk menghitung total jumlah item (totalCountQuery)
const assessmentCountQuery = await db
.select({
idPermohonan: assessments.id,
namaResponden: users.name,
namaPerusahaan: respondents.companyName,
status: assessments.status,
tanggal: assessments.createdAt,
fullCount: totalCountQuery,
count: sql<number>`count(*)`,
})
.from(assessments)
.leftJoin(respondents, eq(assessments.respondentId, respondents.id))
@ -68,10 +62,37 @@
? or(
ilike(users.name, `%${q}%`),
ilike(respondents.companyName, `%${q}%`),
sql`CAST(${assessments.status} AS TEXT) ILIKE ${'%' + q + '%'}`,
eq(assessments.id, q)
)
: undefined
);
const totalItems = Number(assessmentCountQuery[0]?.count) || 0;
// Query utama untuk mendapatkan data permohonan assessment
const result = await db
.select({
idPermohonan: assessments.id,
namaResponden: users.name,
namaPerusahaan: respondents.companyName,
status: assessments.status,
tanggal: assessments.createdAt,
})
.from(assessments)
.leftJoin(respondents, eq(assessments.respondentId, respondents.id))
.leftJoin(users, eq(respondents.userId, users.id))
.where(
q
? or(
ilike(users.name, `%${q}%`),
ilike(respondents.companyName, `%${q}%`),
sql`CAST(${assessments.status} AS TEXT) ILIKE ${'%' + q + '%'}`,
eq(assessments.id, q)
)
: undefined
)
.orderBy(desc(assessments.createdAt))
.offset(page * limit)
.limit(limit);
@ -85,10 +106,8 @@
})),
_metadata: {
currentPage: page,
totalPages: Math.ceil(
(Number(result[0]?.fullCount) ?? 0) / limit
),
totalItems: Number(result[0]?.fullCount) ?? 0,
totalPages: Math.ceil(totalItems / limit),
totalItems,
perPage: limit,
},
});
@ -104,7 +123,6 @@
const queryResult = await db
.select({
// id: assessments.id,
tanggal: assessments.createdAt,
nama: users.name,
posisi: respondents.position,
@ -170,4 +188,4 @@
export default assessmentsRequestManagementRoutes;
export default assessmentsRequestManagementRoutes;

2
apps/frontend/src/components/NavbarMenuItem.tsx
View File

@ -86,7 +86,7 @@ export default function MenuItem({ menu, isActive, onClick }: Props) {
<Icon className="w-4 h-4" />
</span>
{/* Label */}
<span className="text-xs font-bold">{menu.label}</span>
<span className="text-xs font-bold whitespace-normal">{menu.label}</span>
</div>
{/* Chevron Icon */}
{hasChildren && (

214
apps/frontend/src/modules/assessmentRequestManagement/modals/AssessmentRequestManagementFormModal.tsx Normal file
View File

@ -0,0 +1,214 @@
import { Button, Flex, Modal, ScrollArea } from "@mantine/core";
import { useForm } from "@mantine/form";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getRouteApi } from "@tanstack/react-router";
import { notifications } from "@mantine/notifications";
import { fetchAssessmentRequestManagementById, updateAssessmentRequestManagementStatus } from "../queries/assessmentRequestManagementQueries";
import createInputComponents from "@/utils/createInputComponents"; // Assuming you have this utility
import { useEffect } from "react";
// Define the API route for navigation
const routeApi = getRouteApi("/_dashboardLayout/assessmentRequestManagements/");
// Define allowed status values
type AssessmentStatus = "menunggu konfirmasi" | "diterima" | "ditolak" | "selesai";
interface AssessmentRequestManagementFormModalProps {
assessmentId: string | null;
isOpen: boolean;
onClose: () => void;
}
export default function AssessmentRequestManagementFormModal({
assessmentId,
isOpen,
onClose,
}: AssessmentRequestManagementFormModalProps) {
const queryClient = useQueryClient();
const navigate = routeApi.useNavigate();
const AssessmentRequestManagementQuery = useQuery({
queryKey: ["assessmentRequestManagements", assessmentId],
queryFn: async () => {
if (!assessmentId) return null;
return await fetchAssessmentRequestManagementById(assessmentId);
},
});
const form = useForm({
initialValues: {
tanggal: "",
nama: "",
posisi: "",
pengalamanKerja: "",
email: "",
namaPerusahaan: "",
alamat: "",
nomorTelepon: "",
username: "",
status: "menunggu konfirmasi" as AssessmentStatus,
},
});
// Populate the form once data is available
useEffect(() => {
if (AssessmentRequestManagementQuery.data) {
form.setValues({
tanggal: formatDate(AssessmentRequestManagementQuery.data.tanggal || "Data Kosong"),
nama: AssessmentRequestManagementQuery.data.nama || "Data Kosong",
posisi: AssessmentRequestManagementQuery.data.posisi || "Data Kosong",
pengalamanKerja: AssessmentRequestManagementQuery.data.pengalamanKerja || "Data Kosong",
email: AssessmentRequestManagementQuery.data.email || "Data Kosong",
namaPerusahaan: AssessmentRequestManagementQuery.data.namaPerusahaan || "Data Kosong",
alamat: AssessmentRequestManagementQuery.data.alamat || "Data Kosong",
nomorTelepon: AssessmentRequestManagementQuery.data.nomorTelepon || "Data Kosong",
username: AssessmentRequestManagementQuery.data.username || "Data Kosong",
status: AssessmentRequestManagementQuery.data.status || "menunggu konfirmasi",
});
}
}, [AssessmentRequestManagementQuery.data, form]);
const mutation = useMutation({
mutationKey: ["updateAssessmentRequestManagementStatusMutation"],
mutationFn: async ({
id,
status,
}: {
id: string;
status: AssessmentStatus;
}) => {
return await updateAssessmentRequestManagementStatus(id, status);
},
onError: (error: unknown) => {
if (error instanceof Error) {
notifications.show({
message: error.message,
color: "red",
});
}
},
onSuccess: () => {
notifications.show({
message: "Status Permohonan Asesmen berhasil diperbarui.",
color: "green",
});
queryClient.invalidateQueries({
queryKey: ["assessmentRequestManagements", assessmentId],
});
onClose();
},
});
const handleStatusChange = (status: AssessmentStatus) => {
if (assessmentId) {
mutation.mutate({ id: assessmentId, status });
}
};
const formatDate = (dateString: string | null) => {
if (!dateString) return "Tanggal tidak tersedia";
const date = new Date(dateString);
if (isNaN(date.getTime())) return "Tanggal tidak valid";
return new Intl.DateTimeFormat("id-ID", {
hour12: true,
minute: "2-digit",
hour: "2-digit",
day: "2-digit",
month: "long",
year: "numeric",
}).format(date);
};
const { status } = form.values;
return (
<Modal opened={isOpen} onClose={onClose} title="Detail Permohonan Asesmen">
<ScrollArea style={{ height: "400px", paddingRight: "15px" }} scrollbarSize={8}>
{createInputComponents({
disableAll: mutation.isPending,
readonlyAll: true,
inputs: [
{
type: "text",
label: "Tanggal",
...form.getInputProps("tanggal"),
},
{
type: "text",
label: "Nama",
...form.getInputProps("nama"),
},
{
type: "text",
label: "Posisi",
...form.getInputProps("posisi"),
},
{
type: "text",
label: "Pengalaman Kerja",
...form.getInputProps("pengalamanKerja"),
},
{
type: "text",
label: "Email",
...form.getInputProps("email"),
},
{
type: "text",
label: "Nama Perusahaan",
...form.getInputProps("namaPerusahaan"),
},
{
type: "text",
label: "Alamat",
...form.getInputProps("alamat"),
},
{
type: "text",
label: "Nomor Telepon",
...form.getInputProps("nomorTelepon"),
},
{
type: "text",
label: "Username",
...form.getInputProps("username"),
},
{
type: "text",
label: "Status",
...form.getInputProps("status"),
},
],
})}
<Flex justify="flex-end" align="center" gap="lg" mt="lg">
<Button variant="outline" onClick={onClose} disabled={mutation.isPending}>
Tutup
</Button>
{status !== "selesai" && (
<>
<Button
variant="filled"
color="red"
onClick={() => handleStatusChange("ditolak")}
disabled={mutation.isPending}
>
Tolak
</Button>
<Button
variant="filled"
color="blue"
onClick={() => handleStatusChange("diterima")}
disabled={mutation.isPending}
>
Terima
</Button>
</>
)}
</Flex>
</ScrollArea>
</Modal>
);
}

38
apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestManagementQueries.ts Normal file
View File

@ -0,0 +1,38 @@
import client from "@/honoClient";
import fetchRPC from "@/utils/fetchRPC";
import { queryOptions } from "@tanstack/react-query";
// Define allowed status values
type AssessmentStatus = "menunggu konfirmasi" | "diterima" | "ditolak" | "selesai";
export const assessmentRequestManagementQueryOptions = (page: number, limit: number, q?: string) =>
queryOptions({
queryKey: ["assessmentRequestManagements", { page, limit, q }],
queryFn: () =>
fetchRPC(
client.assessmentRequestManagement.$get({
query: {
limit: String(limit),
page: String(page),
q,
},
})
),
});
export async function updateAssessmentRequestManagementStatus(id: string, status: AssessmentStatus) {
return await fetchRPC(
client.assessmentRequestManagement[":id"].$patch({
param: { id },
json: { status },
})
);
}
export async function fetchAssessmentRequestManagementById(id: string) {
return await fetchRPC(
client.assessmentRequestManagement[":id"].$get({
param: { id },
})
);
}

137
apps/frontend/src/routes/_dashboardLayout/assessmentRequestManagements/index.lazy.tsx Normal file
View File

@ -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>
),
}),
]}
/>
);
}

18
apps/frontend/src/routes/_dashboardLayout/assessmentRequestManagements/index.tsx Normal file
View File

@ -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));
},
});