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:
@@ -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) => (
|
||||
|
||||
Reference in New Issue
Block a user