fix(realisasi): add kode field to RealisasiItem and simplify table display

- Add kode field to RealisasiItem model in Prisma schema
- Update API endpoints (create, update) to accept kode parameter
- Update state management with proper type definitions
- Add kode input field in RealisasiManager component
- Simplify realisasiTable to show flat list (Kode, Uraian, Realisasi, %)
- Remove section grouping and expandable details
- Fix race condition in findUnique.load() with loading guard
- Fix linting errors across multiple files

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

prisma/schema.prisma

@@ -238,19 +238,21 @@ model APBDesItem {
 // Model baru untuk multiple realisasi per item
 model RealisasiItem {
   id           String     @id @default(cuid())
+  kode         String?     // Kode realisasi, mirip dengan APBDesItem
   apbdesItemId String
   apbdesItem   APBDesItem @relation(fields: [apbdesItemId], references: [id], onDelete: Cascade)
-  
+
   jumlah       Float      // Jumlah realisasi dalam Rupiah
   tanggal      DateTime   @db.Date // Tanggal realisasi
   keterangan   String?    @db.Text // Keterangan tambahan (opsional)
   buktiFileId  String?    // FileStorage ID untuk bukti/foto (opsional)
-  
+
   createdAt    DateTime   @default(now())
   updatedAt    DateTime   @updatedAt
   deletedAt    DateTime?
   isActive     Boolean    @default(true)
 
+  @@index([kode])
   @@index([apbdesItemId])
   @@index([tanggal])
 }

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

@@ -14,14 +14,6 @@ const ApbdesItemSchema = z.object({
   tipe: z.enum(['pendapatan', 'belanja', 'pembiayaan']).nullable().optional(),
 });
 
-// --- Zod Schema untuk Realisasi Item ---
-const RealisasiItemSchema = z.object({
-  jumlah: z.number().min(0, "Jumlah tidak boleh negatif"),
-  tanggal: z.string(),
-  keterangan: z.string().optional(),
-  buktiFileId: z.string().optional(),
-});
-
 const ApbdesFormSchema = z.object({
   tahun: z.number().int().min(2000, "Tahun tidak valid"),
   name: z.string().optional(),
@@ -157,33 +149,37 @@ const apbdes = proxy({
   findUnique: {
     data: null as
       | Prisma.APBDesGetPayload<{
-          include: { image: true; file: true; items: true };
+          include: { image: true; file: true; items: { include: { realisasiItems: true } } };
         }>
       | null,
     loading: false,
     error: null as string | null,
-  
+
     async load(id: string) {
       if (!id || id.trim() === '') {
         this.data = null;
         this.error = "ID tidak valid";
         return;
       }
-  
+
+      // Prevent multiple simultaneous loads
+      if (this.loading) {
+        console.log("⚠️ Already loading, skipping...");
+        return;
+      }
+
       this.loading = true;
       this.error = null;
-  
+
       try {
-        // Pastikan URL-nya benar
         const url = `/api/landingpage/apbdes/${id}`;
         console.log("🌐 Fetching:", url);
-  
-        // Gunakan fetch biasa atau ApiFetch dengan cara yang benar
+
         const response = await fetch(url);
         const res = await response.json();
-  
+
         console.log("📦 Response:", res);
-  
+
         if (res.success && res.data) {
           this.data = res.data;
         } else {
@@ -322,15 +318,16 @@ const apbdes = proxy({
   // =========================================
   realisasi: {
     // Create realisasi
-    async create(itemId: string, data: { jumlah: number; tanggal: string; keterangan?: string; buktiFileId?: string }) {
+    async create(itemId: string, data: { kode: string; jumlah: number; tanggal: string; keterangan?: string; buktiFileId?: string }) {
       try {
         const res = await (ApiFetch.api.landingpage.apbdes as any)[itemId].realisasi.post(data);
 
         if (res.data?.success) {
           toast.success("Realisasi berhasil ditambahkan");
           // Reload findUnique untuk update data
-          if (apbdes.findUnique.data) {
-            await apbdes.findUnique.load(apbdes.findUnique.data.id);
+          const currentId = apbdes.findUnique.data?.id;
+          if (currentId) {
+            await apbdes.findUnique.load(currentId);
           }
           return true;
         } else {
@@ -345,15 +342,16 @@ const apbdes = proxy({
     },
 
     // Update realisasi
-    async update(realisasiId: string, data: { jumlah?: number; tanggal?: string; keterangan?: string; buktiFileId?: string }) {
+    async update(realisasiId: string, data: { kode?: string; jumlah?: number; tanggal?: string; keterangan?: string; buktiFileId?: string }) {
       try {
         const res = await (ApiFetch.api.landingpage.apbdes as any).realisasi[realisasiId].put(data);
 
         if (res.data?.success) {
           toast.success("Realisasi berhasil diperbarui");
           // Reload findUnique untuk update data
-          if (apbdes.findUnique.data) {
-            await apbdes.findUnique.load(apbdes.findUnique.data.id);
+          const currentId = apbdes.findUnique.data?.id;
+          if (currentId) {
+            await apbdes.findUnique.load(currentId);
           }
           return true;
         } else {

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

@@ -3,6 +3,8 @@
 
 import { useProxy } from 'valtio/utils';
 import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
 import {
   Box,
   Button,
@@ -23,7 +25,6 @@ import {
   Badge,
   Modal,
   Divider,
-  Loader,
   Center,
 } from '@mantine/core';
 import {
@@ -33,9 +34,6 @@ import {
   IconCalendar,
   IconCoin,
 } from '@tabler/icons-react';
-import { useState } from 'react';
-import { toast } from 'react-toastify';
-import colors from '@/con/colors';
 
 interface RealisasiManagerProps {
   itemId: string;
@@ -63,6 +61,7 @@ export default function RealisasiManager({
 
   // Form state
   const [formData, setFormData] = useState({
+    kode: '',
     jumlah: 0,
     tanggal: new Date().toISOString().split('T')[0], // YYYY-MM-DD format for input
     keterangan: '',
@@ -70,6 +69,7 @@ export default function RealisasiManager({
 
   const resetForm = () => {
     setFormData({
+      kode: '',
       jumlah: 0,
       tanggal: new Date().toISOString().split('T')[0],
       keterangan: '',
@@ -85,8 +85,9 @@ export default function RealisasiManager({
   const handleOpenEdit = (realisasi: any) => {
     const tanggal = new Date(realisasi.tanggal);
     const tanggalStr = tanggal.toISOString().split('T')[0]; // YYYY-MM-DD
-    
+
     setFormData({
+      kode: realisasi.kode || '',
       jumlah: realisasi.jumlah,
       tanggal: tanggalStr,
       keterangan: realisasi.keterangan || '',
@@ -100,12 +101,17 @@ export default function RealisasiManager({
       return toast.warn('Jumlah realisasi harus lebih dari 0');
     }
 
+    if (!formData.kode || formData.kode.trim() === '') {
+      return toast.warn('Kode realisasi wajib diisi');
+    }
+
     try {
       setLoading(true);
 
       if (editingId) {
         // Update existing realisasi
         const success = await state.realisasi.update(editingId, {
+          kode: formData.kode,
           jumlah: formData.jumlah,
           tanggal: new Date(formData.tanggal).toISOString(),
           keterangan: formData.keterangan,
@@ -117,6 +123,7 @@ export default function RealisasiManager({
       } else {
         // Create new realisasi
         const success = await state.realisasi.create(itemId, {
+          kode: formData.kode,
           jumlah: formData.jumlah,
           tanggal: new Date(formData.tanggal).toISOString(),
           keterangan: formData.keterangan,
@@ -257,6 +264,7 @@ export default function RealisasiManager({
             <Table striped highlightOnHover fz="sm">
               <TableThead>
                 <TableTr>
+                  <TableTh>Kode</TableTh>
                   <TableTh>Tanggal</TableTh>
                   <TableTh>Uraian</TableTh>
                   <TableTh ta="right">Jumlah</TableTh>
@@ -266,6 +274,11 @@ export default function RealisasiManager({
               <TableTbody>
                 {realisasiItems.map((realisasi) => (
                   <TableTr key={realisasi.id}>
+                    <TableTd>
+                      <Badge variant="light" color="blue" size="sm">
+                        {realisasi.kode || '-'}
+                      </Badge>
+                    </TableTd>
                     <TableTd>
                       <Group gap="xs">
                         <IconCalendar size={16} />
@@ -314,7 +327,7 @@ export default function RealisasiManager({
               Belum ada realisasi untuk item ini
             </Text>
             <Text fz="xs" c="dimmed">
-              Klik tombol "Tambah Realisasi" untuk menambahkan
+              Klik tombol &quot;Tambah Realisasi&quot; untuk menambahkan
             </Text>
           </Stack>
         </Center>
@@ -349,6 +362,15 @@ export default function RealisasiManager({
             </Text>
           </Paper>
 
+          <TextInput
+            label="Kode Realisasi"
+            placeholder="Contoh: 4.1.1-R1"
+            value={formData.kode}
+            onChange={(e) => setFormData({ ...formData, kode: e.target.value })}
+            description="Kode unik untuk realisasi ini"
+            required
+          />
+
           <NumberInput
             label="Jumlah Realisasi (Rp)"
             value={formData.jumlah}

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

@@ -233,7 +233,7 @@ function DetailAPBDes() {
               </Table>
 
               {/* Realisasi Manager untuk setiap item */}
-              {data.items.map((item: any) => (
+              {data.items.map((item) => (
                 <RealisasiManager
                   key={item.id}
                   itemId={item.id}

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

@@ -69,6 +69,7 @@ const APBDes = new Elysia({
   .post("/:itemId/realisasi", realisasiCreate, {
     params: t.Object({ itemId: t.String() }),
     body: t.Object({
+      kode: t.String(),
       jumlah: t.Number(),
       tanggal: t.String(),
       keterangan: t.Optional(t.String()),
@@ -80,6 +81,7 @@ const APBDes = new Elysia({
   .put("/realisasi/:realisasiId", realisasiUpdate, {
     params: t.Object({ realisasiId: t.String() }),
     body: t.Object({
+      kode: t.Optional(t.String()),
       jumlah: t.Optional(t.Number()),
       tanggal: t.Optional(t.String()),
       keterangan: t.Optional(t.String()),

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

@@ -3,6 +3,7 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 type RealisasiCreateBody = {
+  kode: string;
   jumlah: number;
   tanggal: string; // ISO format
   keterangan?: string;
@@ -33,6 +34,7 @@ export default async function realisasiCreate(context: Context) {
     const realisasi = await prisma.realisasiItem.create({
       data: {
         apbdesItemId: itemId,
+        kode: body.kode,
         jumlah: body.jumlah,
         tanggal: new Date(body.tanggal),
         keterangan: body.keterangan,

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

@@ -3,6 +3,7 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 type RealisasiUpdateBody = {
+  kode?: string;
   jumlah?: number;
   tanggal?: string;
   keterangan?: string;
@@ -33,6 +34,7 @@ export default async function realisasiUpdate(context: Context) {
     const updated = await prisma.realisasiItem.update({
       where: { id: realisasiId },
       data: {
+        ...(body.kode !== undefined && { kode: body.kode }),
         ...(body.jumlah !== undefined && { jumlah: body.jumlah }),
         ...(body.tanggal !== undefined && { tanggal: new Date(body.tanggal) }),
         ...(body.keterangan !== undefined && { keterangan: body.keterangan }),

src/app/darmasaba/(pages)/musik/musik-desa/page.tsx

@@ -135,7 +135,7 @@ const MusicPlayer = () => {
       }
       // Jika bukan lagu baru, jangan reset currentTime (biar seek tidak kembali ke 0)
     }
-  }, [currentSong?.id]); // Intentional: hanya depend on song ID, bukan isPlaying
+  }, [currentSong?.id]); // eslint-disable-line react-hooks/exhaustive-deps -- Intentional: hanya depend on song ID, bukan isPlaying
 
   // Sync duration dari audio element jika berbeda signifikan (> 1 detik)
   useEffect(() => {
@@ -155,7 +155,7 @@ const MusicPlayer = () => {
 
     audio.addEventListener('loadedmetadata', handleLoadedMetadata);
     return () => audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
-  }, [currentSong?.id]); // Intentional: hanya depend on song ID
+  }, [currentSong?.id]); // eslint-disable-line react-hooks/exhaustive-deps -- Intentional: hanya depend on song ID
 
   const formatTime = (seconds: number) => {
     const mins = Math.floor(seconds / 60);

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

@@ -4,29 +4,25 @@
 import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes'
 import colors from '@/con/colors'
 import {
-  ActionIcon,
   Box,
   Button,
-  Center,
+  Divider,
   Group,
-  Loader,
   Select,
   SimpleGrid,
   Stack,
   Text,
-  Title,
+  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 GrafikRealisasi from './lib/grafikRealisasi'
 import PaguTable from './lib/paguTable'
 import RealisasiTable from './lib/realisasiTable'
-import GrafikRealisasi from './lib/grafikRealisasi'
 
 function Apbdes() {
   const state = useProxy(apbdes)
-  const [loading, setLoading] = useState(false)
   const [selectedYear, setSelectedYear] = useState<string | null>(null)
 
   const textHeading = {
@@ -37,12 +33,9 @@ function Apbdes() {
   useEffect(() => {
     const loadData = async () => {
       try {
-        setLoading(true)
         await state.findMany.load()
       } catch (error) {
         console.error('Error loading data:', error)
-      } finally {
-        setLoading(false)
       }
     }
     loadData()
@@ -73,10 +66,12 @@ function Apbdes() {
     ? dataAPBDes.find((item: any) => item?.tahun?.toString() === selectedYear) || dataAPBDes[0]
     : null
 
-  const data = (state.findMany.data || []).slice(0, 3)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const previewData = (state.findMany.data || []).slice(0, 3)
 
   return (
     <Stack p="sm" gap="xl" bg={colors.Bg}>
+      <Divider c="gray.3" size="sm" />
       {/* 📌 HEADING */}
       <Box mt="xl">
         <Stack gap="sm">
@@ -116,7 +111,7 @@ function Apbdes() {
       </Group>
 
       {/* COMBOBOX */}
-      <Box px={{ base: 'md', md: 100 }}>
+      <Box px={{ base: 'md', md: "sm" }}>
         <Select
           label={<Text fw={600} fz="sm">Pilih Tahun APBDes</Text>}
           placeholder="Pilih tahun"
@@ -132,7 +127,7 @@ function Apbdes() {
 
       {/* Tabel & Grafik - Hanya tampilkan jika ada data */}
       {currentApbdes && currentApbdes.items?.length > 0 ? (
-        <Box px={{ base: 'md', md: 100 }}>
+        <Box px={{ base: 'md', md: 'sm' }} mb="xl">
           <SimpleGrid cols={{ base: 1, sm: 3 }}>
             <PaguTable apbdesData={currentApbdes} />
             <RealisasiTable apbdesData={currentApbdes} />
@@ -140,19 +135,19 @@ function Apbdes() {
           </SimpleGrid>
         </Box>
       ) : currentApbdes ? (
-        <Box px={{ base: 'md', md: 100 }} py="md">
+        <Box px={{ base: 'md', md: 100 }} py="md" mb="xl">
           <Text fz="sm" c="dimmed" ta="center" lh={1.5}>
             Tidak ada data item untuk tahun yang dipilih.
           </Text>
         </Box>
       ) : null}
 
-      {/* GRID - Card Preview */}
-      {loading ? (
+      {/* GRID - Card Preview
+      {state.findMany.loading ? (
         <Center mx={{ base: 'md', md: 100 }} mih={200} pb="xl">
           <Loader size="lg" color="blue" />
         </Center>
-      ) : data.length === 0 ? (
+      ) : previewData.length === 0 ? (
         <Center mx={{ base: 'md', md: 100 }} mih={200} pb="xl">
           <Stack align="center" gap="xs">
             <Text fz="lg" c="dimmed" lh={1.4}>
@@ -170,7 +165,7 @@ function Apbdes() {
           spacing="lg"
           pb="xl"
         >
-          {data.map((v: any, k: number) => (
+          {previewData.map((v, k) => (
             <Box
               key={k}
               pos="relative"
@@ -224,7 +219,7 @@ function Apbdes() {
             </Box>
           ))}
         </SimpleGrid>
-      )}
+      )} */}
     </Stack>
   )
 }

src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx

@@ -5,7 +5,7 @@ function Summary({ title, data }: any) {
   if (!data || data.length === 0) return null;
 
   const totalAnggaran = data.reduce((s: number, i: any) => s + i.anggaran, 0);
-  const totalRealisasi = data.reduce((s: number, i: any) => s + i.realisasi, 0);
+  const totalRealisasi = data.reduce((s: number, i: any) => s + i.totalRealisasi, 0);
 
   const persen =
     totalAnggaran > 0 ? (totalRealisasi / totalAnggaran) * 100 : 0;
@@ -36,38 +36,38 @@ function Summary({ title, data }: any) {
           {persen.toFixed(2)}%
         </Text>
       </Group>
-      
+
       <Text fz="sm" c="dimmed" mb="xs">
         Realisasi: {formatRupiah(totalRealisasi)} / Anggaran: {formatRupiah(totalAnggaran)}
       </Text>
-      
-      <Progress 
-        value={persen} 
-        size="xl" 
+
+      <Progress
+        value={persen}
+        size="xl"
         radius="xl"
         color={getProgressColor(persen)}
         striped={persen < 100}
         animated={persen < 100}
       />
-      
+
       {persen >= 100 && (
         <Text fz="xs" c="teal" mt="xs" fw={500}>
           ✓ Realisasi mencapai 100% dari anggaran
         </Text>
       )}
-      
+
       {persen < 100 && persen >= 80 && (
         <Text fz="xs" c="blue" mt="xs" fw={500}>
           ⚡ Realisasi baik, mendekati target
         </Text>
       )}
-      
+
       {persen < 80 && persen >= 60 && (
         <Text fz="xs" c="yellow" mt="xs" fw={500}>
           ⚠️ Realisasi cukup, perlu ditingkatkan
         </Text>
       )}
-      
+
       {persen < 60 && (
         <Text fz="xs" c="red" mt="xs" fw={500}>
           ⚠️ Realisasi rendah, perlu perhatian khusus
@@ -87,7 +87,7 @@ export default function GrafikRealisasi({ apbdesData }: any) {
 
   // Hitung total keseluruhan
   const totalAnggaranSemua = items.reduce((s: number, i: any) => s + i.anggaran, 0);
-  const totalRealisasiSemua = items.reduce((s: number, i: any) => s + i.realisasi, 0);
+  const totalRealisasiSemua = items.reduce((s: number, i: any) => s + i.totalRealisasi, 0);
   const persenSemua = totalAnggaranSemua > 0 ? (totalRealisasiSemua / totalAnggaranSemua) * 100 : 0;
 
   const formatRupiah = (angka: number) => {
@@ -105,30 +105,32 @@ export default function GrafikRealisasi({ apbdesData }: any) {
         GRAFIK REALISASI APBDes {tahun}
       </Title>
 
+      {/* Summary Total Keseluruhan */}
+      <Box mb="lg" p="md" bg="gray.0">
+        <>
+          <Group justify="space-between" mb="xs">
+            <Text fw={700} fz="lg">TOTAL KESELURUHAN</Text>
+            <Text fw={700} fz="xl" c={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'}>
+              {persenSemua.toFixed(2)}%
+            </Text>
+          </Group>
+          <Text fz="sm" c="dimmed" mb="xs">
+            {formatRupiah(totalRealisasiSemua)} / {formatRupiah(totalAnggaranSemua)}
+          </Text>
+          <Progress
+            value={persenSemua}
+            size="lg"
+            radius="xl"
+            color={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'}
+          />
+        </>
+      </Box>
+
       <Stack gap="lg">
         <Summary title="💰 Pendapatan" data={pendapatan} />
         <Summary title="💸 Belanja" data={belanja} />
         <Summary title="📊 Pembiayaan" data={pembiayaan} />
       </Stack>
-
-       {/* Summary Total Keseluruhan */}
-      <Box mb="lg" p="md" bg="gray.0">
-        <Group justify="space-between" mb="xs">
-          <Text fw={700} fz="lg">TOTAL KESELURUHAN</Text>
-          <Text fw={700} fz="xl" c={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'}>
-            {persenSemua.toFixed(2)}%
-          </Text>
-        </Group>
-        <Text fz="sm" c="dimmed" mb="xs">
-          {formatRupiah(totalRealisasiSemua)} / {formatRupiah(totalAnggaranSemua)}
-        </Text>
-        <Progress 
-          value={persenSemua} 
-          size="lg" 
-          radius="xl"
-          color={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'}
-        />
-      </Box>
     </Paper>
   );
 }

src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx

@@ -1,43 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Paper, Table, Title, Badge } from '@mantine/core';
-
-function Section({ title, data }: any) {
-  if (!data || data.length === 0) return null;
-
-  return (
-    <>
-      <Table.Tr>
-        <Table.Td colSpan={3}>
-          <strong>{title}</strong>
-        </Table.Td>
-      </Table.Tr>
-
-      {data.map((item: any) => (
-        <Table.Tr key={item.id}>
-          <Table.Td>
-            {item.kode} - {item.uraian}
-          </Table.Td>
-          <Table.Td ta="right">
-            Rp {item.totalRealisasi.toLocaleString('id-ID')}
-          </Table.Td>
-          <Table.Td ta="center">
-            <Badge
-              color={
-                item.persentase >= 100
-                  ? 'teal'
-                  : item.persentase >= 60
-                  ? 'yellow'
-                  : 'red'
-              }
-            >
-              {item.persentase.toFixed(2)}%
-            </Badge>
-          </Table.Td>
-        </Table.Tr>
-      ))}
-    </>
-  );
-}
+import { Paper, Table, Title, Badge, Text } from '@mantine/core';
 
 export default function RealisasiTable({ apbdesData }: any) {
   const items = apbdesData.items || [];
@@ -47,28 +9,78 @@ export default function RealisasiTable({ apbdesData }: any) {
       ? `REALISASI APBDes Tahun ${apbdesData.tahun}`
       : 'REALISASI APBDes';
 
-  const pendapatan = items.filter((i: any) => i.tipe === 'pendapatan');
-  const belanja = items.filter((i: any) => i.tipe === 'belanja');
-  const pembiayaan = items.filter((i: any) => i.tipe === 'pembiayaan');
+  // Flatten: kumpulkan semua realisasi items
+  const allRealisasiRows: Array<{ realisasi: any; parentItem: any }> = [];
+  
+  items.forEach((item: any) => {
+    if (item.realisasiItems && item.realisasiItems.length > 0) {
+      item.realisasiItems.forEach((realisasi: any) => {
+        allRealisasiRows.push({ realisasi, parentItem: item });
+      });
+    }
+  });
+
+  const formatRupiah = (amount: number) => {
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(amount);
+  };
 
   return (
     <Paper withBorder p="md" radius="md">
       <Title order={5} mb="md">{title}</Title>
 
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Uraian</Table.Th>
-            <Table.Th ta="right">Realisasi (Rp)</Table.Th>
-            <Table.Th ta="center">%</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          <Section title="1) PENDAPATAN" data={pendapatan} />
-          <Section title="2) BELANJA" data={belanja} />
-          <Section title="3) PEMBIAYAAN" data={pembiayaan} />
-        </Table.Tbody>
-      </Table>
+      {allRealisasiRows.length === 0 ? (
+        <Text fz="sm" c="dimmed" ta="center" py="md">
+          Belum ada data realisasi
+        </Text>
+      ) : (
+        <Table>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Uraian</Table.Th>
+              <Table.Th ta="right">Realisasi (Rp)</Table.Th>
+              <Table.Th ta="center">%</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {allRealisasiRows.map(({ realisasi, parentItem }) => {
+              const persentase = parentItem.anggaran > 0 
+                ? (realisasi.jumlah / parentItem.anggaran) * 100 
+                : 0;
+
+              return (
+                <Table.Tr key={realisasi.id}>
+                  <Table.Td>
+                    <Text>{realisasi.kode} - {realisasi.keterangan}</Text>
+                  </Table.Td>
+                  <Table.Td ta="right">
+                    <Text fw={600} c="blue">
+                      {formatRupiah(realisasi.jumlah)}
+                    </Text>
+                  </Table.Td>
+                  <Table.Td ta="center">
+                    <Badge
+                      color={
+                        persentase >= 100
+                          ? 'teal'
+                          : persentase >= 60
+                          ? 'yellow'
+                          : 'red'
+                      }
+                    >
+                      {persentase.toFixed(2)}%
+                    </Badge>
+                  </Table.Td>
+                </Table.Tr>
+              );
+            })}
+          </Table.Tbody>
+        </Table>
+      )}
     </Paper>
   );
 }