upd : update pengajuan surat

deskripsi:
- update type form pada tambah dan update pengajuan surat
- tampilan klo tidak ada data yg dicari pada update pengajuan surat
- update seeder category pengajuan surat

No Issues
This commit is contained in:
2025-12-24 17:29:25 +08:00
parent bab832b87f
commit c074e2bc0a
9 changed files with 536 additions and 233 deletions

View File

@@ -22,13 +22,19 @@ import {
TextInput,
Tooltip,
} from "@mantine/core";
import { DateInput } from "@mantine/dates";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import {
IconBuildingCommunity,
IconCategory,
IconFiles,
IconInfoCircle,
IconUpload,
IconUser,
IconNotes,
IconPhone,
IconUpload
} from "@tabler/icons-react";
import dayjs from "dayjs";
import "dayjs/locale/id";
import React, { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import useSWR from "swr";
@@ -310,44 +316,15 @@ export default function FormSurat() {
</div>
</Group>
<Group>
<Badge radius="sm">Form Length: 3 Sections</Badge>
<Badge radius="sm">Form Length: 4 Sections</Badge>
</Group>
</Group>
<Stack gap="lg">
{/* Header Section */}
<FormSection
title="Pemohon"
icon={<IconUser size={16} />}
description="Informasi identitas pemohon"
title="Jenis Surat Pengajuan"
icon={<IconCategory size={16} />}
>
<Grid>
<Grid.Col span={6}>
<TextInput
label={<FieldLabel label="Nama" hint="Nama pemohon" />}
placeholder="Budi Setiawan"
value={formSurat.nama}
onChange={(e) =>
validationForm({ key: "nama", value: e.target.value })
}
/>
</Grid.Col>
<Grid.Col span={6}>
<TextInput
label={
<FieldLabel
label="Nomor Telephone"
hint="Nomor telephone yang dapat dihubungi / terhubung dengan whatsapp"
/>
}
placeholder="08123456789"
value={formSurat.phone}
onChange={(e) =>
validationForm({ key: "phone", value: e.target.value })
}
/>
</Grid.Col>
<Grid.Col span={12}>
<Select
label={
@@ -371,32 +348,110 @@ export default function FormSurat() {
</Grid>
</FormSection>
{/* Kontak Section */}
<FormSection
title="Kontak"
icon={<IconPhone size={16} />}
description="Informasi kontak yg dapat dihubungi"
>
<Grid>
<Grid.Col span={6}>
<TextInput
label={<FieldLabel label="Nama" hint="Nama kontak" />}
placeholder="Budi Setiawan"
value={formSurat.nama}
onChange={(e) =>
validationForm({ key: "nama", value: e.target.value })
}
/>
</Grid.Col>
<Grid.Col span={6}>
<TextInput
label={
<FieldLabel
label="Nomor Telephone"
hint="Nomor telephone yang dapat dihubungi / terhubung dengan whatsapp"
/>
}
placeholder="08123456789"
value={formSurat.phone}
onChange={(e) =>
validationForm({ key: "phone", value: e.target.value })
}
/>
</Grid.Col>
</Grid>
</FormSection>
{jenisSuratFix.id != "" && dataSurat && dataSurat.dataPelengkap && (
<>
<FormSection
title="Data Pelengkap"
description="Data pelengkap yang diperlukan"
title="Data Yang Diperlukan"
description="Data yang diperlukan untuk mengajukan surat"
icon={<IconNotes size={16} />}
>
<Grid>
{dataSurat.dataPelengkap.map((item: any, index: number) => (
<Grid.Col span={6} key={index}>
<TextInput
label={
<FieldLabel label={item.name} hint={item.desc} />
}
placeholder={item.name}
onChange={(e) =>
validationForm({
key: "dataPelengkap",
value: { key: item.key, value: e.target.value },
})
}
value={
formSurat.dataPelengkap.find(
(n: any) => n.key == item.key,
)?.value
}
/>
{
item.type == "enum"
?
<Select
label={
<FieldLabel label={item.name} hint={item.desc} />
}
data={item.options ?? []}
placeholder={item.name}
onChange={(e) => {
validationForm({
key: "dataPelengkap",
value: { key: item.key, value: e }
})
}}
value={formSurat.dataPelengkap.find((n: any) => n.key == item.key)?.value}
/>
: item.type == "date"
?
<DateInput
locale="id"
valueFormat="DD MMMM YYYY"
label={
<FieldLabel label={item.name} hint={item.desc} />
}
placeholder={item.name}
onChange={(e) => {
const formatted = e
? dayjs(e).locale("id").format("DD MMMM YYYY")
: "";
validationForm({
key: "dataPelengkap",
value: { key: item.key, value: formatted },
})
}}
/>
:
<TextInput
type={item.type}
label={
<FieldLabel label={item.name} hint={item.desc} />
}
placeholder={item.name}
onChange={(e) =>
validationForm({
key: "dataPelengkap",
value: { key: item.key, value: e.target.value },
})
}
value={
formSurat.dataPelengkap.find(
(n: any) => n.key == item.key,
)?.value
}
/>
}
</Grid.Col>
))}
</Grid>
@@ -405,6 +460,7 @@ export default function FormSurat() {
<FormSection
title="Syarat Dokumen"
description="Syarat dokumen yang diperlukan"
icon={<IconFiles size={16} />}
>
<Grid>
{dataSurat.syaratDokumen.map((item: any, index: number) => (