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

Pull Request branch dev-clone to main #1

Merged
gitea merged 429 commits from dev-clone into main 2024-12-23 09:31:34 +00:00
Conversation 0 Commits 429 Files Changed 142 +594 -162
7 changed files with 594 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7024e266ba - Show all commits

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

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

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

@ -1,173 +1,191 @@
import { and, eq, ilike, or, sql } from "drizzle-orm"; import { and, eq, ilike, or, sql, desc } from "drizzle-orm";
import { Hono } from "hono"; import { Hono } from "hono";
import checkPermission from "../../middlewares/checkPermission"; import checkPermission from "../../middlewares/checkPermission";
import { z } from "zod"; import { z } from "zod";
import { HTTPException } from "hono/http-exception"; import { HTTPException } from "hono/http-exception";
import db from "../../drizzle"; import db from "../../drizzle";
import { assessments } from "../../drizzle/schema/assessments"; import { assessments } from "../../drizzle/schema/assessments";
import { respondents } from "../../drizzle/schema/respondents"; import { respondents } from "../../drizzle/schema/respondents";
import { users } from "../../drizzle/schema/users"; import { users } from "../../drizzle/schema/users";
import HonoEnv from "../../types/HonoEnv"; import HonoEnv from "../../types/HonoEnv";
import requestValidator from "../../utils/requestValidator"; import requestValidator from "../../utils/requestValidator";
import authInfo from "../../middlewares/authInfo"; import authInfo from "../../middlewares/authInfo";
export const assessmentFormSchema = z.object({ export const assessmentFormSchema = z.object({
respondentId: z.string().min(1), respondentId: z.string().min(1),
status: z.enum(["menunggu konfirmasi", "diterima", "ditolak", "selesai"]), status: z.enum(["menunggu konfirmasi", "diterima", "ditolak", "selesai"]),
reviewedBy: z.string().min(1), reviewedBy: z.string().min(1),
validatedBy: z.string().min(1), validatedBy: z.string().min(1),
validatedAt: z.string().optional(), validatedAt: z.string().optional(),
}); });
export const assessmentUpdateSchema = assessmentFormSchema.extend({ export const assessmentUpdateSchema = assessmentFormSchema.extend({
validatedAt: z.string().optional().or(z.literal("")), validatedAt: z.string().optional().or(z.literal("")),
}); });
const assessmentsRequestManagementRoutes = new Hono<HonoEnv>() const assessmentsRequestManagementRoutes = new Hono<HonoEnv>()
.use(authInfo) .use(authInfo)
/** /**
* Get All Assessments (With Metadata) * Get All Assessments (With Metadata)
* *
* Query params: * Query params:
* - withMetadata: boolean * - withMetadata: boolean
*/ */
.get( .get(
"/", "/",
checkPermission("assessmentRequestManagement.readAll"), checkPermission("assessmentRequestManagement.readAll"),
requestValidator( requestValidator(
"query", "query",
z.object({ z.object({
withMetadata: z withMetadata: z
.string() .string()
.optional() .optional()
.transform((v) => v?.toLowerCase() === "true"), .transform((v) => v?.toLowerCase() === "true"),
page: z.coerce.number().int().min(0).default(0), page: z.coerce.number().int().min(0).default(0),
limit: z.coerce.number().int().min(1).max(1000).default(10), limit: z.coerce.number().int().min(1).max(1000).default(10),
q: z.string().default(""), q: z.string().default(""),
})
),
async (c) => {
const { page, limit, q } = c.req.valid("query");
// Query untuk menghitung total jumlah item (totalCountQuery)
const assessmentCountQuery = await db
.select({
count: sql<number>`count(*)`,
}) })
), .from(assessments)
async (c) => { .leftJoin(respondents, eq(assessments.respondentId, respondents.id))
const { page, limit, q } = c.req.valid("query"); .leftJoin(users, eq(respondents.userId, users.id))
.where(
const totalCountQuery = sql<number>`(SELECT count(*) FROM ${assessments})`; q
? or(
const result = await db ilike(users.name, `%${q}%`),
.select({ ilike(respondents.companyName, `%${q}%`),
idPermohonan: assessments.id, sql`CAST(${assessments.status} AS TEXT) ILIKE ${'%' + q + '%'}`,
namaResponden: users.name, eq(assessments.id, q)
namaPerusahaan: respondents.companyName,
status: assessments.status,
tanggal: assessments.createdAt,
fullCount: totalCountQuery,
})
.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}%`),
eq(assessments.id, q)
)
: undefined
) )
.offset(page * limit) : undefined
.limit(limit); );
return c.json({ const totalItems = Number(assessmentCountQuery[0]?.count) || 0;
data: result.map((d) => ({
idPermohonan: d.idPermohonan,
namaResponden: d.namaResponden,
namaPerusahaan: d.namaPerusahaan,
status: d.status,
tanggal: d.tanggal,
})),
_metadata: {
currentPage: page,
totalPages: Math.ceil(
(Number(result[0]?.fullCount) ?? 0) / limit
),
totalItems: Number(result[0]?.fullCount) ?? 0,
perPage: limit,
},
});
}
)
// Get assessment by id // Query utama untuk mendapatkan data permohonan assessment
.get( const result = await db
"/:id", .select({
checkPermission("assessmentRequestManagement.read"), idPermohonan: assessments.id,
async (c) => { namaResponden: users.name,
const assessmentId = c.req.param("id"); namaPerusahaan: respondents.companyName,
status: assessments.status,
const queryResult = await db tanggal: assessments.createdAt,
.select({
// id: assessments.id,
tanggal: assessments.createdAt,
nama: users.name,
posisi: respondents.position,
pengalamanKerja: respondents.workExperience,
email: users.email,
namaPerusahaan: respondents.companyName,
alamat: respondents.address,
nomorTelepon: respondents.phoneNumber,
username: users.username,
status: assessments.status,
})
.from(assessments)
.leftJoin(respondents, eq(assessments.respondentId, respondents.id))
.leftJoin(users, eq(respondents.userId, users.id))
.where(eq(assessments.id, assessmentId));
if (!queryResult.length)
throw new HTTPException(404, {
message: "The assessment does not exist",
});
const assessmentData = queryResult[0];
return c.json(assessmentData);
}
)
.patch(
"/:id",
checkPermission("assessmentRequestManagement.update"),
requestValidator(
"json",
z.object({
status: z.enum(["menunggu konfirmasi", "diterima", "ditolak", "selesai"]),
}) })
), .from(assessments)
async (c) => { .leftJoin(respondents, eq(assessments.respondentId, respondents.id))
const assessmentId = c.req.param("id"); .leftJoin(users, eq(respondents.userId, users.id))
const { status } = c.req.valid("json"); .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);
const assessment = await db return c.json({
.select() data: result.map((d) => ({
.from(assessments) idPermohonan: d.idPermohonan,
.where(and(eq(assessments.id, assessmentId),)); namaResponden: d.namaResponden,
namaPerusahaan: d.namaPerusahaan,
status: d.status,
tanggal: d.tanggal,
})),
_metadata: {
currentPage: page,
totalPages: Math.ceil(totalItems / limit),
totalItems,
perPage: limit,
},
});
}
)
if (!assessment[0]) throw new HTTPException(404, { // Get assessment by id
message: "Assessment tidak ditemukan.", .get(
"/:id",
checkPermission("assessmentRequestManagement.read"),
async (c) => {
const assessmentId = c.req.param("id");
const queryResult = await db
.select({
tanggal: assessments.createdAt,
nama: users.name,
posisi: respondents.position,
pengalamanKerja: respondents.workExperience,
email: users.email,
namaPerusahaan: respondents.companyName,
alamat: respondents.address,
nomorTelepon: respondents.phoneNumber,
username: users.username,
status: assessments.status,
})
.from(assessments)
.leftJoin(respondents, eq(assessments.respondentId, respondents.id))
.leftJoin(users, eq(respondents.userId, users.id))
.where(eq(assessments.id, assessmentId));
if (!queryResult.length)
throw new HTTPException(404, {
message: "The assessment does not exist",
}); });
await db const assessmentData = queryResult[0];
.update(assessments)
.set({
status,
})
.where(eq(assessments.id, assessmentId));
return c.json({ return c.json(assessmentData);
message: "Status assessment berhasil diperbarui.", }
}); )
}
) .patch(
"/:id",
checkPermission("assessmentRequestManagement.update"),
requestValidator(
"json",
z.object({
status: z.enum(["menunggu konfirmasi", "diterima", "ditolak", "selesai"]),
})
),
async (c) => {
const assessmentId = c.req.param("id");
const { status } = c.req.valid("json");
const assessment = await db
.select()
.from(assessments)
.where(and(eq(assessments.id, assessmentId),));
if (!assessment[0]) throw new HTTPException(404, {
message: "Assessment tidak ditemukan.",
});
await db
.update(assessments)
.set({
status,
})
.where(eq(assessments.id, assessmentId));
return c.json({
message: "Status assessment berhasil diperbarui.",
});
}
)
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" /> <Icon className="w-4 h-4" />
</span> </span>
{/* Label */} {/* Label */}
<span className="text-xs font-bold">{menu.label}</span> <span className="text-xs font-bold whitespace-normal">{menu.label}</span>
</div> </div>
{/* Chevron Icon */} {/* Chevron Icon */}
{hasChildren && ( {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));
},
});