Merge pull request 'Fix Text to Speech Menu Landing Page && Add barchart Landing Page APBDes' (#9) from nico/6-nov-25 into staging

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

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
 import { BarChart } from '@mantine/charts';
@@ -85,7 +86,7 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
   useEffect(() => {
     if (data) {
       setChartData(
-        data.map((item) => ({
+        data.map((item: any) => ({
           id: item.id,
           pekerjaan: item.pekerjaan,
           lakiLaki: Number(item.lakiLaki),

src/app/api/tts/route.ts

@@ -0,0 +1,35 @@
+// app/api/tts/route.ts
+import { NextRequest } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  const { text } = await req.json();
+
+  if (!text || text.length > 500) {
+    return new Response('Teks terlalu panjang atau kosong', { status: 400 });
+  }
+
+  const res = await fetch('https://api.elevenlabs.io/v1/text-to-speech/21m00Tcm4TlvDq8ikWAM', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'xi-api-key': process.env.ELEVENLABS_API_KEY!, // Simpan di .env.local
+    },
+    body: JSON.stringify({
+      text,
+      model_id: 'eleven_multilingual_v2',
+      voice_settings: {
+        stability: 0.7,
+        similarity_boost: 0.8,
+      },
+    }),
+  });
+
+  if (!res.ok) {
+    return new Response('Gagal generate suara', { status: 500 });
+  }
+
+  const audioBuffer = await res.arrayBuffer();
+  return new Response(audioBuffer, {
+    headers: { 'Content-Type': 'audio/mpeg' },
+  });
+}

src/app/darmasaba/(pages)/desa/berita/[kategori]/[id]/page.tsx

@@ -55,7 +55,7 @@ function Page() {
       </Group>
       <Container w={{ base: "100%", md: "50%" }} >
         <Box pb={20}>
-          <Text ta={"center"} fz={"2.4rem"} c={colors["blue-button"]} fw={"bold"}>
+          <Text id='news-title' ta={"center"} fz={"2.4rem"} c={colors["blue-button"]} fw={"bold"}>
             {state.findUnique.data?.judul}
           </Text>
           <Text

src/app/darmasaba/_com/ModernNeewsNotification.tsx

@@ -104,8 +104,7 @@ export default function ModernNewsNotification({
               ...transitionStyles,
               position: "fixed",
               bottom: "24px",
-              right: "24px",
+              right: "24px"
-              zIndex: 1000,
             }}
           >
             <ActionIcon
@@ -258,6 +257,7 @@ export default function ModernNewsNotification({
               overflow: "hidden",
               border: "1px solid #e9ecef",
             }}
+            onClick={handleLihatSemua}
           >
             <Box
               style={{

src/app/darmasaba/_com/NewsReader.tsx

@@ -1,82 +1,112 @@
 'use client';
 import { Button } from '@mantine/core';
+import { IconMusic, IconMusicOff } from '@tabler/icons-react';
 import { useEffect, useRef, useState } from 'react';
 
 const NewsReader = () => {
-  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [isPointerMode, setIsPointerMode] = useState(false);
-  const [isAllowed, setIsAllowed] = useState(false);
   const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null);
 
-  // Fungsi untuk membaca teks
+  const speakText = (text: string) => {
-  const speakText = () => {
+    if (!window.speechSynthesis || !text.trim()) return;
-    if (typeof window === 'undefined' || !window.speechSynthesis) {
-      console.warn('Browser tidak mendukung SpeechSynthesis.');
-      return;
-    }
 
-    const contentElement = document.getElementById('news-content');
+    window.speechSynthesis.cancel(); // hentikan sebelumnya
-    const rawText = contentElement?.innerText || '';
+    const utterance = new SpeechSynthesisUtterance(text);
-    if (!rawText.trim()) return;
-
-    // Hentikan semua suara sebelumnya
-    window.speechSynthesis.cancel();
-
-    const utterance = new SpeechSynthesisUtterance(rawText);
     utterance.lang = 'id-ID';
     utterance.rate = 1;
     utterance.pitch = 1;
-
-    utterance.onstart = () => setIsSpeaking(true);
-    utterance.onend = () => setIsSpeaking(false);
-
     utteranceRef.current = utterance;
-
+    window.speechSynthesis.speak(utterance);
-    try {
-      window.speechSynthesis.speak(utterance);
-    } catch (err) {
-      console.warn('Autoplay gagal karena kebijakan browser:', err);
-    }
   };
 
-  // Auto play jika sudah pernah diizinkan
+  // Tambahkan listener hover ke semua elemen teks
   useEffect(() => {
-    const hasPermission = localStorage.getItem('ttsAllowed') === 'true';
+    const content = document.getElementById('news-title');
-    setIsAllowed(hasPermission);
+    if (!content) return;
 
-    if (hasPermission) {
+    // Atur cursor saat mode aktif/nonaktif
-      const trySpeak = setInterval(() => {
+    if (isPointerMode) {
-        const contentElement = document.getElementById('news-content');
+      content.style.cursor = 'pointer';
-        if (contentElement && contentElement.innerText.trim()) {
+    } else {
-          speakText();
+      content.style.cursor = 'auto';
-          clearInterval(trySpeak);
-        }
-      }, 1000);
-      return () => clearInterval(trySpeak);
     }
-  }, []);
 
-  // Hentikan suara saat user keluar halaman / komponen unmount
+    if (!isPointerMode) return;
-  useEffect(() => {
+
-    return () => {
+    const handleMouseOver = (e: MouseEvent) => {
-      if (typeof window !== 'undefined' && window.speechSynthesis) {
+      const target = e.target as HTMLElement;
-        window.speechSynthesis.cancel();
+      // opsional: hanya baca teks dari elemen tertentu
-        setIsSpeaking(false);
+      if (target && target.innerText) {
+        speakText(target.innerText);
+        target.style.backgroundColor = '#eef6ff'; // highlight biar keliatan
       }
     };
-  }, []);
 
-  // Handle tombol manual
+    const handleMouseOut = (e: MouseEvent) => {
-  const handleToggle = () => {
+      const target = e.target as HTMLElement;
-    if (isSpeaking) {
+      if (target) target.style.backgroundColor = ''; // hilangkan highlight
       window.speechSynthesis.cancel();
-      setIsSpeaking(false);
+    };
+
+    content.addEventListener('mouseover', handleMouseOver);
+    content.addEventListener('mouseout', handleMouseOut);
+
+    return () => {
+      content.removeEventListener('mouseover', handleMouseOver);
+      content.removeEventListener('mouseout', handleMouseOut);
+      content.style.cursor = 'auto'; // reset cursor saat mode dimatikan
+      window.speechSynthesis.cancel();
+    };
+  }, [isPointerMode]);
+
+  useEffect(() => {
+    const content = document.getElementById('news-content');
+    if (!content) return;
+
+    // Atur cursor saat mode aktif/nonaktif
+    if (isPointerMode) {
+      content.style.cursor = 'pointer';
     } else {
-      if (!isAllowed) {
+      content.style.cursor = 'auto';
-        localStorage.setItem('ttsAllowed', 'true');
-        setIsAllowed(true);
-      }
-      speakText();
     }
+
+    if (!isPointerMode) return;
+
+    const handleMouseOver = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      // opsional: hanya baca teks dari elemen tertentu
+      if (target && target.innerText) {
+        speakText(target.innerText);
+        target.style.backgroundColor = '#eef6ff'; // highlight biar keliatan
+      }
+    };
+
+    const handleMouseOut = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target) target.style.backgroundColor = ''; // hilangkan highlight
+      window.speechSynthesis.cancel();
+    };
+
+    content.addEventListener('mouseover', handleMouseOver);
+    content.addEventListener('mouseout', handleMouseOut);
+
+    return () => {
+      content.removeEventListener('mouseover', handleMouseOver);
+      content.removeEventListener('mouseout', handleMouseOut);
+      content.style.cursor = 'auto'; // reset cursor saat mode dimatikan
+      window.speechSynthesis.cancel();
+    };
+  }, [isPointerMode]);
+
+ 
+
+  const handleToggle = () => {
+    setIsPointerMode((prev) => {
+      if (prev) {
+        window.speechSynthesis.cancel();
+      }
+      return !prev;
+    });
   };
 
   return (
@@ -84,11 +114,20 @@ const NewsReader = () => {
       onClick={handleToggle}
       color="#0B4F78"
       variant="filled"
-      radius="xl"
       size="md"
       mt="md"
+      style={{
+        zIndex: 500,
+        position: 'fixed',
+        bottom: '350px',
+        left: '0px',
+        borderBottomRightRadius: '20px',
+        borderTopRightRadius: '20px',
+        borderBottomLeftRadius: '0px',
+        borderTopLeftRadius: '0px',
+      }}
     >
-      {isSpeaking ? '🔇 Hentikan Suara' : '🔊 Dengarkan Berita'}
+      {isPointerMode ? <IconMusicOff /> : <IconMusic />}
     </Button>
   );
 };

src/app/darmasaba/_com/NewsReaderalanding.tsx

@@ -0,0 +1,110 @@
+'use client';
+import { Button } from '@mantine/core';
+import { IconMusic, IconMusicOff } from '@tabler/icons-react';
+import { useEffect, useRef, useState } from 'react';
+
+const NewsReaderLanding = () => {
+  const [isPointerMode, setIsPointerMode] = useState(false);
+  const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastTextRef = useRef<string>('');
+
+  const speakText = (text: string) => {
+    if (!window.speechSynthesis || !text.trim()) return;
+
+    // Jangan baca ulang kalau teksnya sama
+    if (lastTextRef.current === text) return;
+    lastTextRef.current = text;
+
+    window.speechSynthesis.cancel();
+
+    const utterance = new SpeechSynthesisUtterance(text);
+    utterance.lang = 'id-ID';
+    utterance.rate = 1;
+    utterance.pitch = 1;
+
+    utteranceRef.current = utterance;
+    window.speechSynthesis.speak(utterance);
+  };
+
+  useEffect(() => {
+    const root = document.getElementById('page-root');
+    if (!root) return;
+
+    root.style.cursor = isPointerMode ? 'pointer' : 'auto';
+    if (!isPointerMode) return;
+
+    const handleMouseOver = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (
+        !target ||
+        !target.innerText ||
+        target.tagName === 'BUTTON' ||
+        target.tagName === 'SVG' ||
+        target.closest('button')
+      )
+        return;
+
+      // Hapus timeout sebelumnya biar gak spam
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+      // Delay dikit biar smooth (hindari brebet)
+      timeoutRef.current = setTimeout(() => {
+        speakText(target.innerText);
+      }, 250); // 250ms delay kasih waktu pindah cursor
+    };
+
+    const handleMouseOut = () => {
+      // Delay kecil sebelum cancel supaya gak motong kasar
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        window.speechSynthesis.cancel();
+        lastTextRef.current = '';
+      }, 150);
+    };
+
+    root.addEventListener('mouseover', handleMouseOver);
+    root.addEventListener('mouseout', handleMouseOut);
+
+    return () => {
+      root.removeEventListener('mouseover', handleMouseOver);
+      root.removeEventListener('mouseout', handleMouseOut);
+      root.style.cursor = 'auto';
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      window.speechSynthesis.cancel();
+      lastTextRef.current = '';
+    };
+  }, [isPointerMode]);
+
+  const handleToggle = () => {
+    setIsPointerMode((prev) => {
+      if (prev) {
+        window.speechSynthesis.cancel();
+        lastTextRef.current = '';
+      }
+      return !prev;
+    });
+  };
+
+  return (
+    <Button
+      onClick={handleToggle}
+      color="#0B4F78"
+      variant="filled"
+      size="md"
+      mt="md"
+      style={{
+        position: 'fixed',
+        bottom: '350px',
+        left: '0px',
+        borderBottomRightRadius: '20px',
+        borderTopRightRadius: '20px',
+        transition: 'all 0.3s ease',
+      }}
+    >
+      {isPointerMode ? <IconMusicOff /> : <IconMusic />}
+    </Button>
+  );
+};
+
+export default NewsReaderLanding;

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

@@ -1,14 +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 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)
 
@@ -17,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) {
@@ -46,6 +70,55 @@ function Apbdes() {
         </Stack>
       </Box>
 
+      {/* Chart */}
+      <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 cols={{ base: 1, sm: 3 }} spacing="lg">
         {loading ? (
           <Center mih={200}>
@@ -72,7 +145,7 @@ function Apbdes() {
               pos="relative"
               style={{ overflow: 'hidden' }}
             >
-               <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 16 }} />
+              <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 16 }} />
               <Stack justify="space-between" h="100%" p="xl" pos="relative">
                 <Text
                   c="white"

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

@@ -0,0 +1,13 @@
+export default function parseJumlah(value: string): number {
+  if (!value) return 0;
+
+  const cleaned = value.toUpperCase().trim().replace(",", ".");
+  const num = parseFloat(cleaned);
+
+  if (cleaned.includes("T")) return num * 1_000_000_000_000;
+  if (cleaned.includes("M")) return num * 1_000_000_000;
+  if (cleaned.includes("JT")) return num * 1_000_000;
+  if (cleaned.includes("K")) return num * 1_000;
+
+  return num;
+}

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

@@ -51,10 +51,10 @@ function Potensi() {
   return (
     <Stack p="sm" gap="xl">
       <Container w={{ base: "100%", md: "80%" }} p={"md"} >
-       <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "1.8rem", md: "3.4rem" }}>
+       <Text id="news-title" ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "1.8rem", md: "3.4rem" }}>
           {textHeading.title}
         </Text>
-        <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>
+        <Text id="news-content" ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>
           {textHeading.des}
         </Text>
       </Container>

src/app/darmasaba/page.tsx

@@ -13,11 +13,12 @@ import Apbdes from "./_com/main-page/apbdes";
 import Prestasi from "./_com/main-page/prestasi";
 import ScrollToTopButton from "./_com/scrollToTopButton";
 
+import { useEffect, useMemo } from "react";
 import { useProxy } from "valtio/utils";
 import stateDashboardBerita from "../admin/(dashboard)/_state/desa/berita";
-import { useEffect, useMemo } from "react";
 import stateDesaPengumuman from "../admin/(dashboard)/_state/desa/pengumuman";
 import ModernNewsNotification from "./_com/ModernNeewsNotification";
+import NewsReaderLanding from "./_com/NewsReaderalanding";
 
 
 export default function Page() {
@@ -74,7 +75,7 @@ export default function Page() {
   }, [featured.data, pengumuman.data]);
 
   return (
-    <Box>
+    <Box id="page-root">
       <Stack 
         bg={colors.grey[1]} 
         gap={0}
@@ -99,6 +100,9 @@ export default function Page() {
         news={newsData}
         autoShowDelay={2000} // Muncul 2 detik setelah load
       />
+
+      <NewsReaderLanding/>
+      
     </Box>
   );
 }