Fix Eror Grafik Realisasi-3

Problem:
- Saat user klik X button untuk hapus preview image/file
- Form state masih menyimpan imageId/fileId lama
- Saat submit, data lama tetap terkirim
- User tidak bisa benar-benar menghapus image/file

Solution:
- Clear apbdesState.edit.form.imageId saat hapus preview gambar
- Clear apbdesState.edit.form.fileId saat hapus preview dokumen
- Now user can truly make image/file empty

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

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

AUDIT_REPORT.md

@@ -0,0 +1,73 @@
+# Engineering Audit Report: Desa Darmasaba
+**Status:** Production Readiness Review (Critical)
+**Auditor:** Staff Technical Architect
+
+---
+
+## 📊 Executive Summary & Scores
+
+| Category | Score | Status |
+| :--- | :---: | :--- |
+| **Project Architecture** | 3/10 | 🔴 Critical Failure |
+| **Code Quality** | 4/10 | 🟠 Poor |
+| **Performance** | 5/10 | 🟡 Mediocre |
+| **Security** | 5/10 | 🟠 Risk Detected |
+| **Production Readiness** | 2/10 | 🔴 Not Ready |
+
+---
+
+## 🏗️ 1. Project Architecture
+The project suffers from a **"Frankenstein Architecture"**. It attempts to run a full Elysia.js instance inside a Next.js Catch-All route.
+- **Fractured Backend:** Logic is split between standard Next.js routes (`/api/auth`) and embedded Elysia modules.
+- **Stateful Dependency:** Reliance on local filesystem (`WIBU_UPLOAD_DIR`) makes the application impossible to deploy on modern serverless platforms like Vercel.
+- **Polluted Namespace:** Routing tree contains "test/coba" folders (`src/app/coba`, `src/app/percobaan`) that would be accessible in production.
+
+## ⚛️ 2. Frontend Engineering (React / Next.js)
+- **State Management Chaos:** Simultaneous use of `Valtio`, `Jotai`, `React Context`, and `localStorage`.
+- **Tight Coupling:** Public pages (`/darmasaba`) import state directly from Admin internal states (`/admin/(dashboard)/_state`).
+- **Heavy Client-Side Logic:** Logic that belongs in Server Actions or Hooks is embedded in presentational components (e.g., `Footer.tsx`).
+
+## 📡 3. Backend / API Design
+- **Framework Overhead:** Running Elysia inside Next.js adds unnecessary cold-boot overhead and complexity.
+- **Weak Validation:** Widespread use of `as Type` casting in API handlers instead of runtime validation (Zod/Schema).
+- **Service Integration:** OTP codes are sent via external `GET` requests with sensitive data in the query string—a major logging risk.
+
+## 🗄️ 4. Database & Data Modeling (Prisma)
+- **Schema Over-Normalization:** ~2000 lines of schema. Every minor content type (e.g., `LambangDesa`) is a separate table instead of a unified CMS model.
+- **Polymorphic Monolith:** `FileStorage` is a "god table" with optional relations to ~40 other tables, creating a massive bottleneck and data integrity risk.
+- **Connection Mismanagement:** Manual `prisma.$disconnect()` in API routes kills connection pooling performance.
+
+## 🚀 5. Performance Engineering
+- **Bypassing Optimization:** Custom `/api/utils/img` endpoint bypasses `next/image` optimization, serving uncompressed assets.
+- **Aggressive Polling:** Client-side 30s polling for notifications is battery-draining and inefficient compared to SSE or SWR.
+
+## 🔒 6. Security Audit
+- **Insecure OTP Delivery:** Credentials passed as URL parameters to the WhatsApp service.
+- **File Upload Risks:** Potential for Arbitrary File Upload due to direct local filesystem writes without rigorous sanitization.
+
+## 🧹 7. Code Quality
+- **Inconsistency:** Mixed English/Indonesian naming (e.g., `nomor` vs `createdAt`).
+- **Artifacts:** Root directory is littered with scratch files: `xcoba.ts`, `xx.ts`, `test.txt`.
+
+---
+
+## 🚩 Top 10 Critical Problems
+1. **Architectural Fracture:** Embedding Elysia inside Next.js creates a "split-brain" system.
+2. **Serverless Incompatibility:** Dependency on local disk storage for uploads.
+3. **Database Bloat:** Over-complicated schema with a fragile `FileStorage` monolith.
+4. **State Fragmentation:** Mixed usage of Jotai and Valtio without a clear standard.
+5. **Credential Leakage:** OTP codes sent via GET query parameters.
+6. **Poor Cleanup:** Trial/Test folders and files committed to the production source.
+7. **Asset Performance:** Bypassing Next.js image optimization.
+8. **Coupling:** High dependency between public UI and internal Admin state.
+9. **Type Safety:** Manual casting in APIs instead of runtime validation.
+10. **Connection Pooling:** Inefficient Prisma connection management.
+
+---
+
+## 🛠️ Tech Lead Refactoring Priorities
+1. **Unify the API:** Decommission the Elysia wrapper. Port all logic to standard Next.js Route Handlers with Zod validation.
+2. **Stateless Storage:** Implement an S3-compatible adapter for all file uploads. Remove `fs` usage.
+3. **Schema Consolidation:** Refactor the schema to use generic content models where possible.
+4. **Standardize State:** Choose one global state manager and migrate all components.
+5. **Project Sanitization:** Delete all `coba`, `percobaan`, and scratch files (`xcoba.ts`, etc.).

package.json

@@ -33,7 +33,7 @@
     "@mantine/modals": "^8.3.6",
     "@mantine/tiptap": "^7.17.4",
     "@paljs/types": "^8.1.0",
-    "@prisma/client": "^6.3.1",
+    "@prisma/client": "6.3.1",
     "@tabler/icons-react": "^3.30.0",
     "@tiptap/extension-highlight": "^2.11.7",
     "@tiptap/extension-link": "^2.11.7",
@@ -89,7 +89,7 @@
     "p-limit": "^6.2.0",
     "primeicons": "^7.0.0",
     "primereact": "^10.9.6",
-    "prisma": "^6.3.1",
+    "prisma": "6.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-exif-orientation-img": "^0.1.5",

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

@@ -23,8 +23,9 @@ const ApbdesFormSchema = z.object({
   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"),
+  // Image dan file opsional (bisa kosong)
+  imageId: z.string().optional(),
+  fileId: z.string().optional(),
   items: z.array(ApbdesItemSchema).min(1, "Minimal ada 1 item"),
 });
 

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

@@ -205,7 +205,6 @@ function EditAPBDes() {
 
       // Upload file baru jika ada perubahan
       if (imageFile) {
-        // Hapus file lama dari form jika ada file baru
         const res = await ApiFetch.api.fileStorage.create.post({
           file: imageFile,
           name: imageFile.name,
@@ -217,7 +216,6 @@ function EditAPBDes() {
       }
 
       if (docFile) {
-        // Hapus file lama dari form jika ada file baru
         const res = await ApiFetch.api.fileStorage.create.post({
           file: docFile,
           name: docFile.name,
@@ -228,15 +226,7 @@ function EditAPBDes() {
         }
       }
 
-      // Jika tidak ada file baru, gunakan ID lama (sudah ada di form)
-      // Pastikan imageId dan fileId tetap ada
-      if (!apbdesState.edit.form.imageId) {
-        return toast.warn('Gambar wajib diunggah');
-      }
-      if (!apbdesState.edit.form.fileId) {
-        return toast.warn('Dokumen wajib diunggah');
-      }
-
+      // Image dan file sekarang opsional, tidak perlu validasi
       const success = await apbdesState.edit.update();
       if (success) {
         router.push('/admin/landing-page/apbdes');
@@ -343,11 +333,11 @@ function EditAPBDes() {
             required
           />
 
-          {/* Gambar & Dokumen */}
+          {/* Gambar & Dokumen (Opsional) */}
           <Stack gap="xs">
             <Box>
               <Text fw="bold" fz="sm" mb={6}>
-                Gambar APBDes
+                Gambar APBDes (Opsional)
               </Text>
               <Dropzone
                 onDrop={handleDrop('image')}
@@ -387,6 +377,7 @@ function EditAPBDes() {
                     onClick={() => {
                       setPreviewImage(null);
                       setImageFile(null);
+                      apbdesState.edit.form.imageId = ''; // Clear imageId from form
                     }}
                   >
                     <IconX size={14} />
@@ -397,7 +388,7 @@ function EditAPBDes() {
 
             <Box>
               <Text fw="bold" fz="sm" mb={6}>
-                Dokumen APBDes
+                Dokumen APBDes (Opsional)
               </Text>
               <Dropzone
                 onDrop={handleDrop('doc')}
@@ -446,6 +437,7 @@ function EditAPBDes() {
                     onClick={() => {
                       setPreviewDoc(null);
                       setDocFile(null);
+                      apbdesState.edit.form.fileId = ''; // Clear fileId from form
                     }}
                   >
                     <IconX size={14} />

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

@@ -46,13 +46,9 @@ function CreateAPBDes() {
   const [docFile, setDocFile] = useState<File | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // Check if form is valid
+  // Check if form is valid - hanya cek items, gambar dan file opsional
   const isFormValid = () => {
-    return (
-      imageFile !== null &&
-      docFile !== null &&
-      stateAPBDes.create.form.items.length > 0
-    );
+    return stateAPBDes.create.form.items.length > 0;
   };
 
   // Form sementara untuk input item baru
@@ -84,28 +80,34 @@ function CreateAPBDes() {
   };
 
   const handleSubmit = async () => {
-    if (!imageFile || !docFile) {
-      return toast.warn("Pilih gambar dan dokumen terlebih dahulu");
-    }
     if (stateAPBDes.create.form.items.length === 0) {
       return toast.warn("Minimal tambahkan 1 item APBDes");
     }
 
     try {
       setIsSubmitting(true);
-      const [uploadImageRes, uploadDocRes] = await Promise.all([
-        ApiFetch.api.fileStorage.create.post({ file: imageFile, name: imageFile.name }),
-        ApiFetch.api.fileStorage.create.post({ file: docFile, name: docFile.name }),
-      ]);
 
-      const imageId = uploadImageRes?.data?.data?.id;
-      const fileId = uploadDocRes?.data?.data?.id;
+      // Upload files hanya jika ada file yang dipilih
+      let imageId = '';
+      let fileId = '';
 
-      if (!imageId || !fileId) {
-        return toast.error("Gagal mengupload file");
+      if (imageFile) {
+        const uploadImageRes = await ApiFetch.api.fileStorage.create.post({
+          file: imageFile,
+          name: imageFile.name,
+        });
+        imageId = uploadImageRes?.data?.data?.id || '';
       }
 
-      // Update form dengan ID file
+      if (docFile) {
+        const uploadDocRes = await ApiFetch.api.fileStorage.create.post({
+          file: docFile,
+          name: docFile.name,
+        });
+        fileId = uploadDocRes?.data?.data?.id || '';
+      }
+
+      // Update form dengan ID file (bisa kosong)
       stateAPBDes.create.form.imageId = imageId;
       stateAPBDes.create.form.fileId = fileId;
 
@@ -174,12 +176,16 @@ function CreateAPBDes() {
         style={{ border: '1px solid #e0e0e0' }}
       >
         <Stack gap="md">
-          {/* Gambar & Dokumen (dipendekkan untuk fokus pada items) */}
+          {/* Info: File opsional */}
+          <Text fz="sm" c="dimmed" mb="xs">
+            * Upload gambar dan dokumen bersifat opsional. Bisa dikosongkan jika belum ada.
+          </Text>
+
           <Stack gap={"xs"}>
             {/* Gambar APBDes */}
             <Box>
               <Text fw="bold" fz="sm" mb={6}>
-                Gambar APBDes
+                Gambar APBDes (Opsional)
               </Text>
               <Dropzone
                 onDrop={(files) => {
@@ -249,10 +255,10 @@ function CreateAPBDes() {
               )}
             </Box>
 
-            {/* Dokumen APBDes */}
+            {/* Dokumen APBDes (Opsional) */}
             <Box>
               <Text fw="bold" fz="sm" mb={6}>
-                Dokumen APBDes
+                Dokumen APBDes (Opsional)
               </Text>
               <Dropzone
                 onDrop={(files) => {

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

@@ -17,8 +17,8 @@ type FormCreate = {
   name?: string;
   deskripsi?: string;
   jumlah?: string;
-  imageId: string;
-  fileId: string;
+  imageId?: string | null; // Opsional
+  fileId?: string | null; // Opsional
   items: APBDesItemInput[];
 };
 
@@ -32,12 +32,7 @@ export default async function apbdesCreate(context: Context) {
     if (!body.tahun) {
       throw new Error('Tahun is required');
     }
-    if (!body.imageId) {
-      throw new Error('Image ID is required');
-    }
-    if (!body.fileId) {
-      throw new Error('File ID is required');
-    }
+    // Image dan file sekarang opsional
     if (!body.items || body.items.length === 0) {
       throw new Error('At least one item is required');
     }
@@ -50,8 +45,8 @@ export default async function apbdesCreate(context: Context) {
           name: body.name || `APBDes Tahun ${body.tahun}`,
           deskripsi: body.deskripsi,
           jumlah: body.jumlah,
-          imageId: body.imageId,
-          fileId: body.fileId,
+          imageId: body.imageId || null, // null jika tidak ada
+          fileId: body.fileId || null, // null jika tidak ada
         },
       });
 

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

@@ -36,8 +36,8 @@ const APBDes = new Elysia({
       name: t.Optional(t.String()),
       deskripsi: t.Optional(t.String()),
       jumlah: t.Optional(t.String()),
-      imageId: t.String(),
-      fileId: t.String(),
+      imageId: t.Optional(t.String()),
+      fileId: t.Optional(t.String()),
       items: t.Array(ApbdesItemSchema),
     }),
   })
@@ -50,8 +50,8 @@ const APBDes = new Elysia({
       name: t.Optional(t.String()),
       deskripsi: t.Optional(t.String()),
       jumlah: t.Optional(t.String()),
-      imageId: t.String(),
-      fileId: t.String(),
+      imageId: t.Optional(t.String()),
+      fileId: t.Optional(t.String()),
       items: t.Array(ApbdesItemSchema),
     }),
   })

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

@@ -1,6 +1,7 @@
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 import { assignParentIdsToApbdesItems } from "./lib/getParentsID";
+import { RealisasiItem } from "@prisma/client";
 
 type APBDesItemInput = {
   kode: string;
@@ -15,8 +16,8 @@ type FormUpdateBody = {
   name?: string;
   deskripsi?: string;
   jumlah?: string;
-  imageId: string;
-  fileId: string;
+  imageId?: string | null;
+  fileId?: string | null;
   items: APBDesItemInput[];
 };
 
@@ -49,9 +50,9 @@ export default async function apbdesUpdate(context: Context) {
     }
 
     // 2. Build map untuk preserve realisasiItems berdasarkan kode
-    const existingItemsMap = new Map<string, { 
-      id: string; 
-      realisasiItems: any[]; 
+    const existingItemsMap = new Map<string, {
+      id: string;
+      realisasiItems: RealisasiItem[];
     }>();
     
     existing.items.forEach(item => {
@@ -128,7 +129,7 @@ export default async function apbdesUpdate(context: Context) {
     }
 
     // 8. Recalculate totalRealisasi setelah re-create realisasiItems
-    for (const [kode, _] of existingItemsMap.entries()) {
+    for (const kode of existingItemsMap.keys()) {
       const newItemId = newItemIdsMap.get(kode);
       if (newItemId) {
         const realisasiItems = await prisma.realisasiItem.findMany({
@@ -168,8 +169,8 @@ export default async function apbdesUpdate(context: Context) {
         name: body.name || `APBDes Tahun ${body.tahun}`,
         deskripsi: body.deskripsi,
         jumlah: body.jumlah,
-        imageId: body.imageId,
-        fileId: body.fileId,
+        imageId: body.imageId === '' ? null : body.imageId,
+        fileId: body.fileId === '' ? null : body.fileId,
       },
     });
 

src/app/context/MusicContext.tsx

@@ -82,6 +82,12 @@ export function MusicProvider({ children }: { children: ReactNode }) {
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const isSeekingRef = useRef(false);
   const animationFrameRef = useRef<number | null>(null);
+  const isRepeatRef = useRef(false); // Ref untuk avoid stale closure
+
+  // Sync ref dengan state
+  useEffect(() => {
+    isRepeatRef.current = isRepeat;
+  }, [isRepeat]);
 
   // Load musik data
   const loadMusikData = useCallback(async () => {
@@ -111,7 +117,8 @@ export function MusicProvider({ children }: { children: ReactNode }) {
     });
 
     audioRef.current.addEventListener('ended', () => {
-      if (isRepeat) {
+      // Gunakan ref untuk avoid stale closure
+      if (isRepeatRef.current) {
         audioRef.current!.currentTime = 0;
         audioRef.current!.play();
       } else {
@@ -132,7 +139,7 @@ export function MusicProvider({ children }: { children: ReactNode }) {
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps -- playNext is intentionally not in deps to avoid circular dependency
-  }, [loadMusikData, isRepeat]);
+  }, [loadMusikData]); // Remove isRepeat dari deps karena sudah pakai ref
 
   // Update time with requestAnimationFrame for smooth progress
   const updateTime = useCallback(() => {

src/app/darmasaba/_com/FixedPlayerBar.tsx

@@ -3,6 +3,7 @@ import {
   ActionIcon,
   Avatar,
   Box,
+  Button,
   Flex,
   Group,
   Paper,
@@ -12,6 +13,7 @@ import {
 } from '@mantine/core';
 import {
   IconArrowsShuffle,
+  IconMusic,
   IconPlayerPauseFilled,
   IconPlayerPlayFilled,
   IconPlayerSkipBackFilled,
@@ -45,7 +47,7 @@ export default function FixedPlayerBar() {
   } = useMusic();
 
   const [showVolume, setShowVolume] = useState(false);
-  const [isPlayerVisible, setIsPlayerVisible] = useState(true);
+  const [isMinimized, setIsMinimized] = useState(false);
 
   // Format time
   const formatTime = (seconds: number) => {
@@ -69,12 +71,55 @@ export default function FixedPlayerBar() {
     toggleShuffle();
   };
 
-  // Handle close player
-  const handleClosePlayer = () => {
-    setIsPlayerVisible(false);
+  // Handle minimize player (show floating icon)
+  const handleMinimizePlayer = () => {
+    setIsMinimized(true);
   };
 
-  if (!currentSong || !isPlayerVisible) {
+  // Handle restore player from floating icon
+  const handleRestorePlayer = () => {
+    setIsMinimized(false);
+  };
+
+  // If minimized, show floating icon instead of player bar
+  if (isMinimized) {
+    return (
+      <>
+        {/* Floating Music Icon - Shows when player is minimized */}
+        <Button
+          color="#0B4F78"
+          variant="filled"
+          size="md"
+          mt="md"
+          style={{
+            position: 'fixed',
+            top: '50%', // Menempatkan titik atas ikon di tengah layar
+            left: '0px',
+            transform: 'translateY(-50%)', // Menggeser ikon ke atas sebesar setengah tingginya sendiri agar benar-benar di tengah
+            borderBottomRightRadius: '20px',
+            borderTopRightRadius: '20px',
+            cursor: 'pointer',
+            transition: 'transform 0.2s ease',
+            zIndex: 1
+          }}
+          onClick={handleRestorePlayer}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = 'translateY(-50%)';
+          }}
+        >
+          <IconMusic size={28} color="white" />
+        </Button>
+
+        {/* Spacer to prevent content from being hidden behind player */}
+        <Box h={20} />
+      </>
+    );
+  }
+
+  if (!currentSong) {
     return null;
   }
 
@@ -89,12 +134,12 @@ export default function FixedPlayerBar() {
         p="sm"
         shadow="lg"
         style={{
-          zIndex: 1000,
+          zIndex: 1,
           borderTop: '1px solid rgba(0,0,0,0.1)',
         }}
       >
         <Flex align="center" gap="md" justify="space-between">
-          {/* Song Info */}
+          {/* Song Info - Left */}
           <Group gap="sm" flex={1} style={{ minWidth: 0 }}>
             <Avatar
               src={currentSong.coverImage?.link || ''}
@@ -113,78 +158,81 @@ export default function FixedPlayerBar() {
             </Box>
           </Group>
 
-          {/* Controls */}
-          <Group gap="xs">
-            <ActionIcon
-              variant={isShuffle ? 'filled' : 'subtle'}
-              color={isShuffle ? 'blue' : 'gray'}
-              size="lg"
-              onClick={handleToggleShuffle}
-              title="Shuffle"
-            >
-              <IconArrowsShuffle size={18} />
-            </ActionIcon>
+          {/* Controls + Progress - Center */}
+          <Group gap="xs" flex={2} justify="center">
+            {/* Control Buttons */}
+            <Group gap="xs">
+              <ActionIcon
+                variant={isShuffle ? 'filled' : 'subtle'}
+                color={isShuffle ? 'blue' : 'gray'}
+                size="lg"
+                onClick={handleToggleShuffle}
+                title="Shuffle"
+              >
+                <IconArrowsShuffle size={18} />
+              </ActionIcon>
 
-            <ActionIcon
-              variant="subtle"
-              color="gray"
-              size="lg"
-              onClick={playPrev}
-              title="Previous"
-            >
-              <IconPlayerSkipBackFilled size={20} />
-            </ActionIcon>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                size="lg"
+                onClick={playPrev}
+                title="Previous"
+              >
+                <IconPlayerSkipBackFilled size={20} />
+              </ActionIcon>
 
-            <ActionIcon
-              variant="filled"
-              color={isPlaying ? 'blue' : 'gray'}
-              size="xl"
-              radius="xl"
-              onClick={togglePlayPause}
-              title={isPlaying ? 'Pause' : 'Play'}
-            >
-              {isPlaying ? (
-                <IconPlayerPauseFilled size={24} />
-              ) : (
-                <IconPlayerPlayFilled size={24} />
-              )}
-            </ActionIcon>
+              <ActionIcon
+                variant="filled"
+                color={isPlaying ? 'blue' : 'gray'}
+                size="xl"
+                radius="xl"
+                onClick={togglePlayPause}
+                title={isPlaying ? 'Pause' : 'Play'}
+              >
+                {isPlaying ? (
+                  <IconPlayerPauseFilled size={24} />
+                ) : (
+                  <IconPlayerPlayFilled size={24} />
+                )}
+              </ActionIcon>
 
-            <ActionIcon
-              variant="subtle"
-              color="gray"
-              size="lg"
-              onClick={playNext}
-              title="Next"
-            >
-              <IconPlayerSkipForwardFilled size={20} />
-            </ActionIcon>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                size="lg"
+                onClick={playNext}
+                title="Next"
+              >
+                <IconPlayerSkipForwardFilled size={20} />
+              </ActionIcon>
 
-            <ActionIcon
-              variant="subtle"
-              color={isRepeat ? 'blue' : 'gray'}
-              size="lg"
-              onClick={toggleRepeat}
-              title={isRepeat ? 'Repeat On' : 'Repeat Off'}
-            >
-              {isRepeat ? <IconRepeat size={18} /> : <IconRepeatOff size={18} />}
-            </ActionIcon>
+              <ActionIcon
+                variant="subtle"
+                color={isRepeat ? 'blue' : 'gray'}
+                size="lg"
+                onClick={toggleRepeat}
+                title={isRepeat ? 'Repeat On' : 'Repeat Off'}
+              >
+                {isRepeat ? <IconRepeat size={18} /> : <IconRepeatOff size={18} />}
+              </ActionIcon>
+            </Group>
+
+            {/* Progress Bar - Desktop */}
+            <Box w={200} display={{ base: 'none', md: 'block' }}>
+              <Slider
+                value={currentTime}
+                max={duration || 100}
+                onChange={handleSeek}
+                size="sm"
+                color="blue"
+                label={(value) => formatTime(value)}
+              />
+            </Box>
           </Group>
 
-          {/* Progress Bar - Desktop */}
-          <Box w={200} display={{ base: 'none', md: 'block' }}>
-            <Slider
-              value={currentTime}
-              max={duration || 100}
-              onChange={handleSeek}
-              size="sm"
-              color="blue"
-              label={(value) => formatTime(value)}
-            />
-          </Box>
-
-          {/* Right Controls */}
-          <Group gap="xs">
+          {/* Right Controls - Volume + Close */}
+          <Group gap="xs" flex={1} justify="flex-end">
             <Box
               onMouseEnter={() => setShowVolume(true)}
               onMouseLeave={() => setShowVolume(false)}
@@ -241,8 +289,8 @@ export default function FixedPlayerBar() {
               variant="subtle"
               color="gray"
               size="lg"
-              onClick={handleClosePlayer}
-              title="Close player"
+              onClick={handleMinimizePlayer}
+              title="Minimize player"
             >
               <IconX size={18} />
             </ActionIcon>

src/app/darmasaba/_com/NewsReaderalanding.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { Button } from '@mantine/core';
-import { IconMusic, IconMusicOff } from '@tabler/icons-react';
+import { IconDisabled, IconDisabledOff } from '@tabler/icons-react';
 import { useEffect, useRef, useState } from 'react';
 
 const NewsReaderLanding = () => {
@@ -95,15 +95,17 @@ const NewsReaderLanding = () => {
       mt="md"
       style={{
         position: 'fixed',
-        bottom: '350px',
+        top: '50%', // Menempatkan titik atas ikon di tengah layar
         left: '0px',
+        transform: 'translateY(80%)', // Menggeser ikon ke atas sebesar setengah tingginya sendiri agar benar-benar di tengah
         borderBottomRightRadius: '20px',
         borderTopRightRadius: '20px',
-        transition: 'all 0.3s ease',
+        cursor: 'pointer',
+        transition: 'transform 0.2s',
         zIndex: 1
       }}
     >
-      {isPointerMode ? <IconMusicOff /> : <IconMusic />}
+      {isPointerMode ? <IconDisabledOff /> : <IconDisabled />}
     </Button>
   );
 };

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

@@ -1,12 +1,27 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Paper, Title, Progress, Stack, Text, Group, Box } from '@mantine/core';
 
-function Summary({ title, data }: any) {
+interface APBDesItem {
+  tipe: string | null;
+  anggaran: number;
+  realisasi?: number;
+  totalRealisasi?: number;
+}
+
+interface SummaryProps {
+  title: string;
+  data: APBDesItem[];
+}
+
+function Summary({ title, data }: SummaryProps) {
   if (!data || data.length === 0) return null;
 
-  const totalAnggaran = data.reduce((s: number, i: any) => s + i.anggaran, 0);
+  const totalAnggaran = data.reduce((s: number, i: APBDesItem) => s + i.anggaran, 0);
   // Use realisasi field (already mapped from totalRealisasi in transformAPBDesData)
-  const totalRealisasi = data.reduce((s: number, i: any) => s + (i.realisasi || i.totalRealisasi || 0), 0);
+  const totalRealisasi = data.reduce(
+    (s: number, i: APBDesItem) => s + (i.realisasi || i.totalRealisasi || 0),
+    0
+  );
 
   const persen =
     totalAnggaran > 0 ? (totalRealisasi / totalAnggaran) * 100 : 0;
@@ -78,28 +93,21 @@ function Summary({ title, data }: any) {
   );
 }
 
-export default function GrafikRealisasi({ apbdesData }: any) {
-  const items = apbdesData.items || [];
-  const tahun = apbdesData.tahun || new Date().getFullYear();
-
-  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');
-
-  // Hitung total keseluruhan
-  const totalAnggaranSemua = items.reduce((s: number, i: any) => s + i.anggaran, 0);
-  // Use realisasi field (already mapped from totalRealisasi in transformAPBDesData)
-  const totalRealisasiSemua = items.reduce((s: number, i: any) => s + (i.realisasi || i.totalRealisasi || 0), 0);
-  const persenSemua = totalAnggaranSemua > 0 ? (totalRealisasiSemua / totalAnggaranSemua) * 100 : 0;
-
-  const formatRupiah = (angka: number) => {
-    return new Intl.NumberFormat('id-ID', {
-      style: 'currency',
-      currency: 'IDR',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }).format(angka);
+export default function GrafikRealisasi({
+  apbdesData,
+}: {
+  apbdesData: {
+    tahun?: number | null;
+    items?: APBDesItem[] | null;
+    [key: string]: any;
   };
+}) {
+  const items = apbdesData?.items || [];
+  const tahun = apbdesData?.tahun || new Date().getFullYear();
+
+  const pendapatan = items.filter((i: APBDesItem) => i.tipe === 'pendapatan');
+  const belanja = items.filter((i: APBDesItem) => i.tipe === 'belanja');
+  const pembiayaan = items.filter((i: APBDesItem) => i.tipe === 'pembiayaan');
 
   return (
     <Paper withBorder p="md" radius="md">
@@ -112,27 +120,6 @@ export default function GrafikRealisasi({ apbdesData }: any) {
         <Summary title="💸 Belanja" data={belanja} />
         <Summary title="📊 Pembiayaan" data={pembiayaan} />
       </Stack>
-
-      {/* Summary Total Keseluruhan */}
-      <Box 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>
   );
 }