From 84161db7f23e111e0ccb44efd5a55ebbe75fd9c6 Mon Sep 17 00:00:00 2001 From: amal Date: Wed, 17 Dec 2025 17:39:48 +0800 Subject: [PATCH] upd: form surat Deskripsi: - tambah form surat - update api - fungsi No Issues --- src/pages/darmasaba/surat.tsx | 574 +++++++++++---------- src/server/lib/slug_converter.ts | 18 + src/server/routes/pelayanan_surat_route.ts | 28 +- 3 files changed, 354 insertions(+), 266 deletions(-) create mode 100644 src/server/lib/slug_converter.ts diff --git a/src/pages/darmasaba/surat.tsx b/src/pages/darmasaba/surat.tsx index be6a19f..4a40569 100644 --- a/src/pages/darmasaba/surat.tsx +++ b/src/pages/darmasaba/surat.tsx @@ -1,4 +1,6 @@ +import notification from "@/components/notificationGlobal"; import apiFetch from "@/lib/apiFetch"; +import { capitalizeWords, fromSlug, toSlug } from "@/server/lib/slug_converter"; import { ActionIcon, Badge, @@ -7,28 +9,300 @@ import { Card, Container, Divider, + FileButton, Grid, Group, Select, Stack, Text, TextInput, - Textarea, Tooltip } from "@mantine/core"; import { useShallowEffect } from "@mantine/hooks"; import { IconBuildingCommunity, IconInfoCircle, - IconMapPin, + IconUpload, IconUser } from "@tabler/icons-react"; -import React from "react"; +import React, { useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; import useSWR from "swr"; -// ========================= -// Reusable UI components -// ========================= +type DataItem = { + jenis: string; + value: string; +}; + +type FormSurat = { + kategoryId: string; + nama: string; + phone: string; + dataText: DataItem[]; + syaratDokumen: DataItem[]; +}; + + +export default function FormSurat() { + const navigate = useNavigate(); + const { search } = useLocation(); + const query = new URLSearchParams(search); + const jenisSurat = query.get("jenis"); + const { data, mutate, isLoading } = useSWR("category-pelayanan-list", () => + apiFetch.api.pelayanan.category.get(), + ); + const [jenisSuratFix, setJenisSuratFix] = useState({ name: "", id: "" }); + const [dataSurat, setDataSurat] = useState({}) + const [formSurat, setFormSurat] = useState({ + nama: "", + phone: "", + kategoryId: "", + dataText: [], + syaratDokumen: [], + }) + + const listCategory = data?.data || []; + + function onGetJenisSurat() { + try { + if (!jenisSurat || jenisSurat == "null") { + setJenisSuratFix({ name: "", id: "" }); + } else { + const namaJenis = fromSlug(jenisSurat); + const data = listCategory.find((item: any) => item.name == namaJenis); + if (!data) return; + setJenisSuratFix(data); + } + + } catch (error) { + console.error(error); + } + } + + async function getDetailJenisSurat() { + try { + const get: any = await apiFetch.api.pelayanan.category.detail.get({ + query: { + id: jenisSuratFix.id, + }, + }) + setDataSurat(get.data) + setFormSurat({ + kategoryId: jenisSuratFix.id, + nama: "", + phone: "", + dataText: (get.data?.dataText || []).map((item: string) => ({ + jenis: item, + value: "", + })), + syaratDokumen: (get.data?.syaratDokumen || []).map( + (item: { name: string }) => ({ + jenis: item.name, + value: "", + }) + ), + }); + } catch (error) { + console.error(error); + } + } + + + useShallowEffect(() => { + mutate(); + }, []); + + + useShallowEffect(() => { + if (listCategory.length > 0) { + onGetJenisSurat(); + } + }, [jenisSurat, listCategory]); + + + useShallowEffect(() => { + if (jenisSuratFix.id != "") { + getDetailJenisSurat(); + } + }, [jenisSuratFix.id]); + + function onSubmit() { + const isFormKosong = Object.values(formSurat).some((value) => { + if (Array.isArray(value)) { + return ( + value.length === 0 || + value.some((item) => !item.value?.trim()) + ); + } + + if (typeof value === "string") { + return value.trim() === ""; + } + + return false; + }); + + if (isFormKosong) { + return notification({ + title: "Gagal", + message: "Silahkan lengkapi form surat", + type: "error", + }); + } + + console.log("READY SUBMIT", formSurat); + } + + + return ( + + + + + + +
+ + Surat Keterangan Tidak Mampu (SKTM) + + + Blangko resmi untuk pengajuan Surat Keterangan Tidak Mampu — + digunakan untuk keperluan pendidikan, kesehatan, atau + administrasi. + +
+ + + Form Length: 3 Sections + + + + {/* Header Section */} + } + description="Informasi identitas pemohon" + > + + + + } + placeholder="Budi Setiawan" + /> + + + + + } + placeholder="08123456789" + /> + + + + } - placeholder="Pilih jenis surat" - data={listCategory.map((item: any) => ({ - value: item.id, - label: item.name, - }))} - /> - - - - - - - - - } - placeholder="Nama lengkap" - /> - - - - - } - placeholder="3201xxxxxxxxxxxx" - /> - - - - - } - placeholder="Tempat, tanggal lahir" - /> - - - - } - placeholder="Pilih agama" - data={[ - "Islam", - "Kristen", - "Katolik", - "Hindu", - "Buddha", - "Konghucu", - "Lainnya", - ]} - /> - - - -