Merge pull request 'Fix Route APBdes' (#12) from nico/18-nov-25 into staging

Reviewed-on: http://wibugit.wibudev.com/wibu/desa-darmasaba/pulls/12

src/app/admin/(dashboard)/_state/landing-page/apbdes.ts

@@ -7,14 +7,14 @@ import { z } from "zod";
 
 // --- Zod Schema ---
 const ApbdesItemSchema = z.object({
-  kode: z.string().min(1, "Kode wajib diisi"),
-  uraian: z.string().min(1, "Uraian wajib diisi"),
+  kode: z.string().min(1),
+  uraian: z.string().min(1),
   anggaran: z.number().min(0),
   realisasi: z.number().min(0),
   selisih: z.number(),
-  persentase: z.number(),
+  persentase: z.number().min(0).max(1000), // allow >100% if overbudget
   level: z.number().int().min(1).max(3),
-  tipe: z.enum(['pendapatan', 'belanja', 'pembiayaan']).nullable().optional(),
+  tipe: z.string().min(1), // "pendapatan" | "belanja"
 });
 
 const ApbdesFormSchema = z.object({
@@ -37,9 +37,6 @@ const defaultApbdesForm = {
 function normalizeItem(item: Partial<z.infer<typeof ApbdesItemSchema>>): z.infer<typeof ApbdesItemSchema> {
   const anggaran = item.anggaran ?? 0;
   const realisasi = item.realisasi ?? 0;
-
-  
-
   
   // ✅ Formula yang benar
   const selisih = anggaran - realisasi; // positif = sisa anggaran, negatif = over budget
@@ -53,12 +50,64 @@ function normalizeItem(item: Partial<z.infer<typeof ApbdesItemSchema>>): z.infer
     selisih,
     persentase,
     level: item.level || 1,
-    tipe: item.tipe, // biarkan null jika memang null
+    tipe: item.tipe || "pendapatan",
   };
 }
 
 // --- State Utama ---
 const apbdes = proxy({
+  // create: {
+  //   form: { ...defaultApbdesForm },
+  //   loading: false,
+
+  //   addItem(item: Partial<z.infer<typeof ApbdesItemSchema>>) {
+  //     const normalized = normalizeItem(item);
+  //     this.form.items.push(normalized);
+  //   },
+
+  //   removeItem(index: number) {
+  //     this.form.items.splice(index, 1);
+  //   },
+
+  //   updateItem(index: number, updates: Partial<z.infer<typeof ApbdesItemSchema>>) {
+  //     const current = this.form.items[index];
+  //     if (current) {
+  //       const updated = normalizeItem({ ...current, ...updates });
+  //       this.form.items[index] = updated;
+  //     }
+  //   },
+
+  //   reset() {
+  //     this.form = { ...defaultApbdesForm };
+  //   },
+
+  //   async create() {
+  //     const parsed = ApbdesFormSchema.safeParse(this.form);
+  //     if (!parsed.success) {
+  //       const errors = parsed.error.issues.map((issue) => `${issue.path.join(".")} - ${issue.message}`);
+  //       toast.error(`Validasi gagal:\n${errors.join("\n")}`);
+  //       return;
+  //     }
+
+  //     try {
+  //       this.loading = true;
+  //       const res = await ApiFetch.api.landingpage.apbdes["create"].post(parsed.data);
+
+  //       if (res.data?.success) {
+  //         toast.success("APBDes berhasil dibuat");
+  //         apbdes.findMany.load();
+  //         this.reset();
+  //       } else {
+  //         toast.error(res.data?.message || "Gagal membuat APBDes");
+  //       }
+  //     } catch (error: any) {
+  //       console.error("Create APBDes error:", error);
+  //       toast.error(error?.message || "Terjadi kesalahan saat membuat APBDes");
+  //     } finally {
+  //       this.loading = false;
+  //     }
+  //   },
+  // },
   create: {
     form: { ...defaultApbdesForm },
     loading: false,
@@ -256,7 +305,7 @@ const apbdes = proxy({
               selisih: item.selisih,
               persentase: item.persentase,
               level: item.level,
-              tipe: item.tipe || 'pendapatan',
+              tipe: item.tipe,
             })),
           };
           return data;

src/app/admin/(dashboard)/landing-page/apbdes/[id]/edit/page.tsx

@@ -116,7 +116,6 @@ function EditAPBDes() {
       return toast.warn('Kode dan uraian wajib diisi');
     }
 
-    const finalTipe = level === 1 ? null : tipe;
     const selisih = realisasi - anggaran;
     const persentase = anggaran > 0 ? (realisasi / anggaran) * 100 : 0;
 
@@ -128,10 +127,9 @@ function EditAPBDes() {
       selisih,
       persentase,
       level,
-      tipe: finalTipe, // ✅ Tidak akan undefined
+      tipe,
     });
 
-
     setNewItem({
       kode: '',
       uraian: '',
@@ -376,7 +374,6 @@ function EditAPBDes() {
                   data={[
                     { value: 'pendapatan', label: 'Pendapatan' },
                     { value: 'belanja', label: 'Belanja' },
-                    { value: 'pembiayaan', label: 'Pembiayaan' },
                   ]}
                   value={newItem.tipe}
                   onChange={(val) => setNewItem({ ...newItem, tipe: (val as any) || 'pendapatan' })}
@@ -450,13 +447,9 @@ function EditAPBDes() {
                         </Badge>
                       </td>
                       <td>
-                        {item.tipe ? (
-                          <Badge color={item.tipe === 'pendapatan' ? 'teal' : 'red'} size="sm">
-                            {item.tipe}
-                          </Badge>
-                        ) : (
-                          '-'
-                        )}
+                        <Badge size="sm" color={item.tipe === 'pendapatan' ? 'teal' : 'red'}>
+                          {item.tipe}
+                        </Badge>
                       </td>
                       <td>
                         <ActionIcon color="red" onClick={() => handleRemoveItem(idx)}>

src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx

@@ -123,7 +123,6 @@ function CreateAPBDes() {
       return toast.warn("Kode dan uraian wajib diisi");
     }
 
-    const finalTipe = level === 1 ? null : tipe;
     const selisih = realisasi - anggaran;
     const persentase = anggaran > 0 ? (realisasi / anggaran) * 100 : 0;
 
@@ -135,7 +134,7 @@ function CreateAPBDes() {
       selisih,
       persentase,
       level,
-      tipe: finalTipe,
+      tipe,
     });
 
     // Reset form input
@@ -362,9 +361,8 @@ function CreateAPBDes() {
                     { value: 'pendapatan', label: 'Pendapatan' },
                     { value: 'belanja', label: 'Belanja' },
                   ]}
-                  value={newItem.level === 1 ? null : newItem.tipe}
+                  value={newItem.tipe}
                   onChange={(val) => setNewItem({ ...newItem, tipe: val as any })}
-                  disabled={newItem.level === 1}
                 />
               </Group>
               <TextInput

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/create.ts

@@ -12,7 +12,7 @@ type APBDesItemInput = {
   selisih: number;
   persentase: number;
   level: number;
-  tipe?: string | null;
+  tipe: string;
 };
 
 type FormCreate = {
@@ -66,8 +66,8 @@ export default async function apbdesCreate(context: Context) {
             selisih: item.selisih,
             persentase: item.persentase,
             level: item.level,
-            tipe: item.tipe, // ✅ sertakan, biar null
             apbdesId: apbdes.id,
+            // Note: tipe field is not included as it doesn't exist in the model
           };
           
           return prisma.aPBDesItem.create({

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/index.ts

@@ -15,7 +15,7 @@ const ApbdesItemSchema = t.Object({
   selisih: t.Number(),
   persentase: t.Number(),
   level: t.Number(),
-  tipe: t.Optional(t.Union([t.String(), t.Null()])) // misal: "pendapatan" atau "belanja"
+  tipe: t.String(), // misal: "pendapatan" atau "belanja"
 });
 
 const APBDes = new Elysia({

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/updt.ts

@@ -10,7 +10,7 @@ type APBDesItemInput = {
   selisih: number;
   persentase: number;
   level: number;
-  tipe?: string | null;
+  tipe: string;
 };
 
 type FormUpdateBody = {
@@ -54,7 +54,7 @@ export default async function apbdesUpdate(context: Context) {
         selisih: item.anggaran - item.realisasi,
         persentase: item.anggaran > 0 ? (item.realisasi / item.anggaran) * 100 : 0,
         level: item.level,
-        tipe: item.tipe || null,
+        tipe: item.tipe,
         isActive: true,
       })),
     });

src/app/darmasaba/_com/main-page/apbdes/index.tsx

@@ -1,15 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes'
-import APBDesProgress from '@/app/darmasaba/(tambahan)/apbdes/lib/apbDesaProgress'
 import colors from '@/con/colors'
-import { ActionIcon, BackgroundImage, Box, Button, Center, Flex, Group, Loader, SimpleGrid, Stack, Text } from '@mantine/core'
+import { BarChart } from '@mantine/charts'
+import { ActionIcon, BackgroundImage, Box, Button, Center, Flex, Group, Loader, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core'
 import { IconDownload } from '@tabler/icons-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useProxy } from 'valtio/utils'
+import parseJumlah from './lib/convert'
 
 function Apbdes() {
+  type APBDes = {
+    id: string
+    name: string
+    jumlah: number
+  };
+
+  const [chartData, setChartData] = useState<APBDes[]>([])
+  const [mounted, setMounted] = useState(false);
   const state = useProxy(apbdes)
   const [loading, setLoading] = useState(false)
 
@@ -18,9 +28,22 @@ function Apbdes() {
     des: 'Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola desa yang bersih, terbuka, dan bertanggung jawab.'
   }
 
+  useEffect(() => {
+    if (state.findMany.data) {
+      setChartData(
+        state.findMany.data.map((item: any) => ({
+          id: item.id,
+          name: item.name,
+          jumlah: parseJumlah(item.jumlah),
+        }))
+      );
+    }
+  }, [state.findMany.data]);
+
   useEffect(() => {
     const loadData = async () => {
       try {
+        setMounted(true);
         setLoading(true)
         await state.findMany.load()
       } catch (error) {
@@ -47,23 +70,56 @@ function Apbdes() {
         </Stack>
       </Box>
 
-      <Group justify="center">
-        <Button
-          component={Link}
-          href="/darmasaba/apbdes"
-          radius="xl"
-          size="lg"
-          variant="gradient"
-          gradient={{ from: "#26667F", to: "#124170" }}
-        >
-          Lihat Semua Data
-        </Button>
-      </Group>
-
       {/* Chart */}
-      <APBDesProgress />
+      <Box mt={30} style={{ width: '100%', minHeight: 400 }}>
+        <Paper bg={colors['white-1']} py={50} px={90} mb={"xl"} radius="md" withBorder>
+          <Stack gap={"xs"}>
+            <Title ta={"center"} pb={10} order={2}>
+              Grafik APBDes
+            </Title>
+            {mounted && chartData.length > 0 ? (
+              <BarChart
+                orientation="vertical"
+                h={450}
+                barProps={{ radius: 50 }}
+                data={chartData}
+                dataKey="name"
+                type="stacked"
+                valueFormatter={(value: number) => {
+                  if (value >= 1_000_000_000_000)
+                    return `Rp ${(value / 1_000_000_000_000).toFixed(1)} T`;
+                  if (value >= 1_000_000_000)
+                    return `Rp ${(value / 1_000_000_000).toFixed(1)} M`;
+                  if (value >= 1_000_000)
+                    return `Rp ${(value / 1_000_000).toFixed(1)} JT`;
+                  if (value >= 1_000)
+                    return `Rp ${(value / 1_000).toFixed(1)} RB`;
+                  return `Rp ${value}`;
+                }}
+                series={[
+                  {
+                    name: 'jumlah',
+                    color: colors['blue-button'],
+                    label: 'Jumlah',
+                  },
+                ]}
+              />
+            ) : (
+              <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
+            )}
+            <Box py={10}>
+              <Group justify='center'>
+                <Flex align="center" gap={10}>
+                  <Box bg={colors['blue-button']} w={20} h={20} />
+                  <Text>Jumlah</Text>
+                </Flex>
+              </Group>
+            </Box>
+          </Stack>
+        </Paper>
+      </Box>
 
-      <SimpleGrid mx={{ base: 'md', md: 100 }} cols={{ base: 1, sm: 3 }} spacing="lg" pb={"xl"}>
+      <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="lg">
         {loading ? (
           <Center mih={200}>
             <Loader size="lg" color="blue" />
@@ -129,7 +185,18 @@ function Apbdes() {
         )}
       </SimpleGrid>
 
-      
+      <Group justify="center" pb={"xl"}>
+        <Button
+          component={Link}
+          href="/darmasaba/apbdes"
+          radius="xl"
+          size="lg"
+          variant="gradient"
+          gradient={{ from: "#26667F", to: "#124170" }}
+        >
+          Lihat Semua Data
+        </Button>
+      </Group>
     </Stack>
   )
 }