Fix Edit di Admin APbdes, dan fix data real di apbdes user

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

@@ -1,25 +1,15 @@
-/* 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 APBDesProgress from '@/app/darmasaba/(tambahan)/apbdes/lib/apbDesaProgress'
 import colors from '@/con/colors'
-import { BarChart } from '@mantine/charts'
-import { ActionIcon, BackgroundImage, Box, Button, Center, Flex, Group, Loader, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core'
+import { ActionIcon, BackgroundImage, Box, Button, Center, Flex, Group, Loader, SimpleGrid, Stack, Text } 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)
 
@@ -28,22 +18,9 @@ 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) {
@@ -70,56 +47,23 @@ 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>
+      <Group justify="center">
+        <Button
+          component={Link}
+          href="/darmasaba/apbdes"
+          radius="xl"
+          size="lg"
+          variant="gradient"
+          gradient={{ from: "#26667F", to: "#124170" }}
+        >
+          Lihat Semua Data
+        </Button>
+      </Group>
 
-      <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="lg">
+      {/* Chart */}
+      <APBDesProgress />
+
+      <SimpleGrid mx={{ base: 'md', md: 100 }} cols={{ base: 1, sm: 3 }} spacing="lg" pb={"xl"}>
         {loading ? (
           <Center mih={200}>
             <Loader size="lg" color="blue" />
@@ -185,18 +129,7 @@ function Apbdes() {
         )}
       </SimpleGrid>
 
-      <Group justify="center" pb={"xl"}>
-        <Button
-          component={Link}
-          href="/darmasaba/apbdes"
-          radius="xl"
-          size="lg"
-          variant="gradient"
-          gradient={{ from: "#26667F", to: "#124170" }}
-        >
-          Lihat Semua Data
-        </Button>
-      </Group>
+      
     </Stack>
   )
 }