fix(apbdes): integrate new APBDes API with admin UI

- Update API schema to support name, deskripsi, and jumlah fields
- Enhance state management with additional form fields
- Add input fields for name, description, and total amount in create/edit pages
- Display description and total amount in detail page
- Fix APBDes component order in landing page
- Update TypeScript types and Prisma schema integration

API Changes:
- POST /api/landingpage/apbdes/create: Added optional fields (name, deskripsi, jumlah)
- PUT /api/landingpage/apbdes/🆔 Added optional fields (name, deskripsi, jumlah)

Admin UI Changes:
- create/page.tsx: Add TextInput for name, deskripsi, and jumlah
- edit/page.tsx: Add TextInput for name, deskripsi, and jumlah; improve reset functionality
- [id]/page.tsx: Display deskripsi and jumlah if available
- page.tsx: Minor formatting fix
- _state/apbdes.ts: Update Zod schema and default form with new fields

Landing Page:
- Move Apbdes component to top of stack for better visibility

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
2026-03-03 10:56:30 +08:00
parent a5bd91b580
commit 0a8a026b94
11 changed files with 127 additions and 14 deletions

View File

@@ -19,6 +19,9 @@ const ApbdesItemSchema = z.object({
const ApbdesFormSchema = z.object({
tahun: z.number().int().min(2000, "Tahun tidak valid"),
name: z.string().optional(),
deskripsi: z.string().optional(),
jumlah: z.string().optional(),
imageId: z.string().min(1, "Gambar wajib diunggah"),
fileId: z.string().min(1, "File wajib diunggah"),
items: z.array(ApbdesItemSchema).min(1, "Minimal ada 1 item"),
@@ -27,6 +30,9 @@ const ApbdesFormSchema = z.object({
// --- Default Form ---
const defaultApbdesForm = {
tahun: new Date().getFullYear(),
name: "",
deskripsi: "",
jumlah: "",
imageId: "",
fileId: "",
items: [] as z.infer<typeof ApbdesItemSchema>[],
@@ -244,6 +250,9 @@ const apbdes = proxy({
this.id = data.id;
this.form = {
tahun: data.tahun || new Date().getFullYear(),
name: data.name || "",
deskripsi: data.deskripsi || "",
jumlah: data.jumlah || "",
imageId: data.imageId || "",
fileId: data.fileId || "",
items: (data.items || []).map((item: any) => ({

View File

@@ -79,6 +79,9 @@ function EditAPBDes() {
// Simpan data original untuk reset form
const [originalData, setOriginalData] = useState({
tahun: 0,
name: '',
deskripsi: '',
jumlah: '',
imageId: '',
fileId: '',
imageUrl: '',
@@ -103,6 +106,9 @@ function EditAPBDes() {
// Simpan data original untuk reset
setOriginalData({
tahun: data.tahun || new Date().getFullYear(),
name: data.name || '',
deskripsi: data.deskripsi || '',
jumlah: data.jumlah || '',
imageId: data.imageId || '',
fileId: data.fileId || '',
imageUrl: data.image?.link || '',
@@ -112,6 +118,9 @@ function EditAPBDes() {
// Set form dengan data lama (termasuk imageId dan fileId)
apbdesState.edit.form = {
tahun: data.tahun || new Date().getFullYear(),
name: data.name || '',
deskripsi: data.deskripsi || '',
jumlah: data.jumlah || '',
imageId: data.imageId || '',
fileId: data.fileId || '',
items: (data.items || []).map((item: any) => ({
@@ -238,9 +247,12 @@ function EditAPBDes() {
};
const handleReset = () => {
// Reset ke data original (tahun, imageId, fileId)
// Reset ke data original (tahun, name, deskripsi, jumlah, imageId, fileId)
apbdesState.edit.form = {
tahun: originalData.tahun,
name: originalData.name,
deskripsi: originalData.deskripsi,
jumlah: originalData.jumlah,
imageId: originalData.imageId,
fileId: originalData.fileId,
items: [...apbdesState.edit.form.items], // keep existing items
@@ -249,11 +261,11 @@ function EditAPBDes() {
// Reset preview ke data original
setPreviewImage(originalData.imageUrl || null);
setPreviewDoc(originalData.fileUrl || null);
// Reset file uploads
setImageFile(null);
setDocFile(null);
// Reset new item form
setNewItem({
kode: '',
@@ -263,7 +275,7 @@ function EditAPBDes() {
level: 1,
tipe: 'pendapatan',
});
toast.info('Form dikembalikan ke data awal');
};
@@ -288,6 +300,33 @@ function EditAPBDes() {
>
<Stack gap="md">
{/* Header Form */}
<TextInput
label="Nama APBDes"
placeholder="Contoh: APBDes Tahun 2025"
value={apbdesState.edit.form.name}
onChange={(e) =>
(apbdesState.edit.form.name = e.target.value)
}
description="Opsional - akan diisi otomatis jika kosong"
/>
<TextInput
label="Deskripsi"
placeholder="Deskripsi APBDes (opsional)"
value={apbdesState.edit.form.deskripsi}
onChange={(e) =>
(apbdesState.edit.form.deskripsi = e.target.value)
}
description="Opsional"
/>
<TextInput
label="Jumlah Total"
placeholder="Contoh: Rp 1.000.000.000"
value={apbdesState.edit.form.jumlah}
onChange={(e) =>
(apbdesState.edit.form.jumlah = e.target.value)
}
description="Opsional - total keseluruhan anggaran"
/>
<NumberInput
label="Tahun"
value={apbdesState.edit.form.tahun || new Date().getFullYear()}

View File

@@ -94,7 +94,7 @@ function DetailAPBDes() {
<Box>
<Text fz="lg" fw="bold">Nama APBDes</Text>
<Text fz="md" c="dimmed">
{data.name || '-'}
{data.name || `APBDes Tahun ${data.tahun}`}
</Text>
</Box>
@@ -105,6 +105,24 @@ function DetailAPBDes() {
</Text>
</Box>
{data.deskripsi && (
<Box>
<Text fz="lg" fw="bold">Deskripsi</Text>
<Text fz="md" c="dimmed">
{data.deskripsi}
</Text>
</Box>
)}
{data.jumlah && (
<Box>
<Text fz="lg" fw="bold">Jumlah Total</Text>
<Text fz="md" c="dimmed">
{data.jumlah}
</Text>
</Box>
)}
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
{data.image?.link ? (

View File

@@ -117,9 +117,9 @@ function CreateAPBDes() {
toast.success("Berhasil menambahkan APBDes");
resetForm();
router.push("/admin/landing-page/apbdes");
} catch (error) {
} catch (error: any) {
console.error("Gagal submit:", error);
toast.error("Gagal menyimpan data");
toast.error(error?.message || "Gagal menyimpan data");
} finally {
setIsSubmitting(false);
}
@@ -334,6 +334,27 @@ function CreateAPBDes() {
</Stack>
{/* Form Header */}
<TextInput
label="Nama APBDes"
placeholder="Contoh: APBDes Tahun 2025"
value={stateAPBDes.create.form.name}
onChange={(e) => (stateAPBDes.create.form.name = e.target.value)}
description="Opsional - akan diisi otomatis jika kosong"
/>
<TextInput
label="Deskripsi"
placeholder="Deskripsi APBDes (opsional)"
value={stateAPBDes.create.form.deskripsi}
onChange={(e) => (stateAPBDes.create.form.deskripsi = e.target.value)}
description="Opsional"
/>
<TextInput
label="Jumlah Total"
placeholder="Contoh: Rp 1.000.000.000"
value={stateAPBDes.create.form.jumlah}
onChange={(e) => (stateAPBDes.create.form.jumlah = e.target.value)}
description="Opsional - total keseluruhan anggaran"
/>
<NumberInput
label="Tahun"
value={stateAPBDes.create.form.tahun || new Date().getFullYear()}

View File

@@ -45,7 +45,7 @@ function APBDes() {
function ListAPBDes({ search }: { search: string }) {
const listState = useProxy(apbdes);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000);
const [debouncedSearch] = useDebouncedValue(search, 1000);
const { data, page, totalPages, loading, load } = listState.findMany;

View File

@@ -17,6 +17,9 @@ type APBDesItemInput = {
type FormCreate = {
tahun: number;
name?: string;
deskripsi?: string;
jumlah?: string;
imageId: string;
fileId: string;
items: APBDesItemInput[];
@@ -48,7 +51,9 @@ export default async function apbdesCreate(context: Context) {
const apbdes = await prisma.aPBDes.create({
data: {
tahun: body.tahun,
name: `APBDes Tahun ${body.tahun}`,
name: body.name || `APBDes Tahun ${body.tahun}`,
deskripsi: body.deskripsi,
jumlah: body.jumlah,
imageId: body.imageId,
fileId: body.fileId,
},

View File

@@ -47,7 +47,13 @@ export default async function apbdesFindMany(context: Context) {
include: {
image: true,
file: true,
items: true,
items: {
where: { isActive: true },
orderBy: { kode: "asc" },
include: {
parent: true,
},
},
},
}),
prisma.aPBDes.count({ where }),

View File

@@ -48,11 +48,14 @@ export default async function apbdesFindUnique(context: Context) {
include: {
items: {
where: { isActive: true },
orderBy: { kode: 'asc' }
orderBy: { kode: 'asc' },
include: {
parent: true, // Include parent item for hierarchy
},
},
image: true,
file: true
}
file: true,
},
});
if (!result || !result.isActive) {

View File

@@ -33,6 +33,9 @@ const APBDes = new Elysia({
.post("/create", apbdesCreate, {
body: t.Object({
tahun: t.Number(),
name: t.Optional(t.String()),
deskripsi: t.Optional(t.String()),
jumlah: t.Optional(t.String()),
imageId: t.String(),
fileId: t.String(),
items: t.Array(ApbdesItemSchema),
@@ -44,6 +47,9 @@ const APBDes = new Elysia({
params: t.Object({ id: t.String() }),
body: t.Object({
tahun: t.Number(),
name: t.Optional(t.String()),
deskripsi: t.Optional(t.String()),
jumlah: t.Optional(t.String()),
imageId: t.String(),
fileId: t.String(),
items: t.Array(ApbdesItemSchema),

View File

@@ -15,6 +15,9 @@ type APBDesItemInput = {
type FormUpdateBody = {
tahun: number;
name?: string;
deskripsi?: string;
jumlah?: string;
imageId: string;
fileId: string;
items: APBDesItemInput[];
@@ -79,6 +82,9 @@ export default async function apbdesUpdate(context: Context) {
where: { id },
data: {
tahun: body.tahun,
name: body.name || `APBDes Tahun ${body.tahun}`,
deskripsi: body.deskripsi,
jumlah: body.jumlah,
imageId: body.imageId,
fileId: body.fileId,
},

View File

@@ -150,13 +150,13 @@ export default function Page() {
<Box id="page-root">
<Stack bg={colors.grey[1]} gap={0}>
<LandingPage />
<Apbdes />
<Penghargaan />
<Layanan />
<Potensi />
<DesaAntiKorupsi />
<Kepuasan />
<SDGS />
<Apbdes />
<Prestasi />
<ScrollToTopButton />
<NewsReaderLanding />