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>
2026-03-04 11:51:58 +08:00
parent a791efe76c
commit 2d901912ea
11 changed files with 144 additions and 216 deletions
--- a/prisma/schema.prisma
+++ b/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])
 }
--- a/src/app/admin/(dashboard)/_state/landing-page/apbdes.ts
+++ b/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 {
--- a/src/app/admin/(dashboard)/landing-page/apbdes/[id]/RealisasiManager.tsx
+++ b/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}
--- a/src/app/admin/(dashboard)/landing-page/apbdes/[id]/page.tsx
+++ b/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}
--- a/src/app/api/[[...slugs]]/_lib/landing_page/apbdes/index.ts
+++ b/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()),
--- a/src/app/api/[[...slugs]]/_lib/landing_page/apbdes/realisasi/create.ts
+++ b/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,
--- a/src/app/api/[[...slugs]]/_lib/landing_page/apbdes/realisasi/update.ts
+++ b/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 }),
--- a/src/app/darmasaba/(pages)/musik/musik-desa/page.tsx
+++ b/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);
--- a/src/app/darmasaba/_com/main-page/apbdes/index.tsx
+++ b/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>
  )
 }
--- a/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx
+++ b/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx
@@ -106,7 +106,7 @@ export default function GrafikRealisasi({ apbdesData }: any) {
      </Title>

      {/* Summary Total Keseluruhan */}
-      <Box mb="lg" p="md" bg="gray.0" radius="md">
+      <Box mb="lg" p="md" bg="gray.0">
        <>
          <Group justify="space-between" mb="xs">
            <Text fw={700} fz="lg">TOTAL KESELURUHAN</Text>
--- a/src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx
+++ b/src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx
@@ -1,146 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Paper, Table, Title, Badge, Group, Text, Box, Collapse } from '@mantine/core';
-import { useState } from 'react';
-import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
-
-function RealisasiDetail({ realisasiItems }: { realisasiItems: any[] }) {
-  if (!realisasiItems || realisasiItems.length === 0) {
-    return (
-      <Text fz="xs" c="dimmed" py="xs">
-        Belum ada realisasi
-      </Text>
-    );
-  }
-
-  const formatRupiah = (amount: number) => {
-    return new Intl.NumberFormat('id-ID', {
-      style: 'currency',
-      currency: 'IDR',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }).format(amount);
-  };
-
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString('id-ID', {
-      day: 'numeric',
-      month: 'short',
-      year: 'numeric',
-    });
-  };
-
-  return (
-    <Box mt="xs" p="xs" bg="gray.0" radius="md">
-      <Text fz="xs" fw={600} mb="xs">
-        Rincian Realisasi ({realisasiItems.length}):
-      </Text>
-      <>
-        {realisasiItems.map((realisasi: any, idx: number) => (
-          <Box key={realisasi.id} mb={idx < realisasiItems.length - 1 ? 'xs' : 0}>
-            <Group justify="space-between" gap="xs" wrap="nowrap">
-              <Text fz="xs" style={{ flex: 1 }}>
-                {realisasi.keterangan || `Realisasi ${idx + 1}`}
-              </Text>
-              <Text fz="xs" fw={600} c="blue">
-                {formatRupiah(realisasi.jumlah)}
-              </Text>
-              <Text fz="xs" c="dimmed">
-                {formatDate(realisasi.tanggal)}
-              </Text>
-            </Group>
-          </Box>
-        ))}
-      </>
-    </Box>
-  );
-}
-
-function ItemRow({ item, expanded, onToggle }: any) {
-  const formatRupiah = (amount: number) => {
-    return new Intl.NumberFormat('id-ID', {
-      style: 'currency',
-      currency: 'IDR',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }).format(amount);
-  };
-
-  const hasRealisasi = item.realisasiItems && item.realisasiItems.length > 0;
-
-  return (
-    <>
-      <Table.Tr
-        onClick={onToggle}
-        style={{ cursor: 'pointer', '&:hover': { backgroundColor: 'var(--mantine-color-gray-0)' } }}
-      >
-        <Table.Td>
-          <Group gap="xs">
-            {hasRealisasi ? (
-              expanded ? (
-                <IconChevronDown size={16} />
-              ) : (
-                <IconChevronRight size={16} />
-              )
-            ) : (
-              <Box w={16} />
-            )}
-            <Text fw={500}>{item.kode} - {item.uraian}</Text>
-          </Group>
-        </Table.Td>
-        <Table.Td ta="right">
-          <Text fw={600} c="blue">
-            {formatRupiah(item.totalRealisasi)}
-          </Text>
-        </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>
-      <Table.Tr>
-        <Table.Td colSpan={3} p={0}>
-          <Collapse in={expanded}>
-            {hasRealisasi && <RealisasiDetail realisasiItems={item.realisasiItems} />}
-          </Collapse>
-        </Table.Td>
-      </Table.Tr>
-    </>
-  );
-}
-
-function Section({ title, data }: any) {
-  if (!data || data.length === 0) return null;
-
-  const [expandedId, setExpandedId] = useState<string | null>(null);
-
-  return (
-    <>
-      <Table.Tr>
-        <Table.Td colSpan={3}>
-          <Text fw={700} fz="sm">{title}</Text>
-        </Table.Td>
-      </Table.Tr>
-
-      {data.map((item: any) => (
-        <ItemRow
-          key={item.id}
-          item={item}
-          expanded={expandedId === item.id}
-          onToggle={() => setExpandedId(expandedId === item.id ? null : item.id)}
-        />
-      ))}
-    </>
-  );
-}
+import { Paper, Table, Title, Badge, Text } from '@mantine/core';

 export default function RealisasiTable({ apbdesData }: any) {
  const items = apbdesData.items || [];
@@ -150,32 +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>

-      <Text fz="xs" c="dimmed" mb="sm">
-        💡 Klik pada item untuk melihat detail realisasi
-      </Text>
+      {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;

-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Uraian</Table.Th>
-            <Table.Th ta="right">Total 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>
+              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>
  );
 }