Fix Text to Speech Menu Landing Page && Add barchart Landing Page APBDes

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/layanan/index.tsx

@@ -72,14 +72,14 @@ function Slider() {
   const scrollPositionRef = useRef(0);
   const animationFrameRef = useRef<number>(0);
   const isHoveredRef = useRef(false);
-  
+
   // Refs for drag functionality
   const isDraggingRef = useRef(false);
   const startXRef = useRef(0);
   const scrollLeftRef = useRef(0);
   const velocityRef = useRef(0);
   const lastScrollTimeRef = useRef(0);
-  
+
   // Speed configuration
   const normalSpeed = 1.0; // pixels per frame
   const hoverSpeed = 0.3; // slower speed on hover
@@ -143,7 +143,7 @@ function Slider() {
       } else {
         // Sync scroll position when user is scrolling
         scrollPositionRef.current = container.scrollLeft;
-        
+
         // Apply momentum/velocity for smooth drag release
         if (!isDraggingRef.current && Math.abs(velocityRef.current) > 0.1) {
           scrollPositionRef.current += velocityRef.current;
@@ -176,26 +176,26 @@ function Slider() {
   // Mouse drag handlers
   const handleMouseDown = (e: React.MouseEvent) => {
     if (!containerRef.current) return;
-    
+
     isDraggingRef.current = true;
     startXRef.current = e.pageX - containerRef.current.offsetLeft;
     scrollLeftRef.current = containerRef.current.scrollLeft;
     velocityRef.current = 0;
-    
+
     containerRef.current.style.cursor = 'grabbing';
   };
 
   const handleMouseMove = (e: React.MouseEvent) => {
     if (!isDraggingRef.current || !containerRef.current) return;
-    
+
     e.preventDefault();
     const x = e.pageX - containerRef.current.offsetLeft;
     const walk = (x - startXRef.current) * 2; // Multiply for faster scroll
     const newScrollLeft = scrollLeftRef.current - walk;
-    
+
     // Calculate velocity for momentum
     velocityRef.current = containerRef.current.scrollLeft - newScrollLeft;
-    
+
     containerRef.current.scrollLeft = newScrollLeft;
     scrollPositionRef.current = newScrollLeft;
     lastScrollTimeRef.current = Date.now();
@@ -203,7 +203,7 @@ function Slider() {
 
   const handleMouseUp = () => {
     if (!containerRef.current) return;
-    
+
     isDraggingRef.current = false;
     containerRef.current.style.cursor = 'grab';
   };
@@ -211,7 +211,7 @@ function Slider() {
   // Wheel scroll handler
   const handleWheel = (e: React.WheelEvent) => {
     if (!containerRef.current) return;
-    
+
     e.preventDefault();
     containerRef.current.scrollLeft += e.deltaY;
     scrollPositionRef.current = containerRef.current.scrollLeft;

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>