Semua tooltips di admin sudah dihilangkan

src/app/darmasaba/(tambahan)/sdgs-desa/page.tsx

@@ -1,38 +1,91 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+import sdgsDesa from '@/app/admin/(dashboard)/_state/landing-page/sdgs-desa';
 import colors from '@/con/colors';
+import { BarChart } from '@mantine/charts';
 import { Box, Center, Container, Image, LoadingOverlay, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
-import { Prisma } from '@prisma/client';
 import { IconMoodSad } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
 
 function Page() {
-  const [sdgsDesa, setSdgsDesa] = useState<Prisma.SdgsDesaGetPayload<{ include: { image: true } }>[]>([]);
+  type SdgsDesa = {
+    id: string
+    name: string
+    jumlah: number
+  };
+  const [chartData, setChartData] = useState<SdgsDesa[]>([])
+  const [mounted, setMounted] = useState(false);
+  const state = useProxy(sdgsDesa.findManyAll)
   const [loading, setLoading] = useState(true);
 
+  // Definisikan urutan goal SDGs Desa (sesuai nomor 1-18)
+  const sdgsOrder = [
+    "Desa Tanpa Kemiskinan",
+    "Desa Tanpa Kelaparan",
+    "Desa Sehat dan Sejahtera",
+    "Pendidikan Desa Berkualitas",
+    "Keterlibatan Perempuan Desa",
+    "Desa Layak Air Bersih dan Sanitasi",
+    "Desa Berenergi Bersih dan Terbarukan",
+    "Pertumbuhan Ekonomi Desa Merata",
+    "Infrastruktur dan Inovasi Desa Sesuai Kebutuhan",
+    "Desa Tanpa Kesenjangan",
+    "Kawasan Permukiman Desa Aman dan Nyaman",
+    "Konsumsi dan Produksi Desa Sadar Lingkungan",
+    "Desa Tanggap Perubahan Iklim",
+    "Desa Peduli Lingkungan Laut",
+    "Desa Peduli Lingkungan Darat",
+    "Desa Damai Berkeadilan",
+    "Kemitraan untuk Pembangunan Desa",
+    "Kelembagaan Desa Dinamis dan Budaya Desa Adaptif"
+  ];
+
+
   useEffect(() => {
-    const fetchSdgsDesa = async () => {
+    if (state.data) {
+      // Urutkan data sesuai urutan goal 1-18
+      const sortedData = [...state.data].sort((a, b) => {
+        const indexA = sdgsOrder.indexOf(a.name);
+        const indexB = sdgsOrder.indexOf(b.name);
+        return indexA - indexB;
+      });
+
+      setChartData(sortedData.map((item: any) => ({
+        id: item.id,
+        name: item.name,
+        jumlah: item.jumlah,
+      })));
+    }
+  }, [state.data]);
+
+  useEffect(() => {
+    const loadData = async () => {
       try {
-        const response = await fetch('/api/landingpage/sdgsdesa/findMany?limit=50&page=1');
-        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-        const result = await response.json();
-        let data = [];
-        if (Array.isArray(result.data)) {
-          data = result.data;
-        } else if (Array.isArray(result)) {
-          data = result;
-        } else {
-          console.error('Format data tidak valid:', result);
-        }
-        setSdgsDesa(data);
+        setMounted(true);
+        setLoading(true)
+        await state.load()
       } catch (error) {
-        console.error('Gagal mengambil data sdgs desa:', error);
+        console.error('Error loading data:', error)
       } finally {
-        setLoading(false);
+        setLoading(false)
       }
-    };
-    fetchSdgsDesa();
-  }, []);
+    }
+    loadData()
+  }, [])
+
+  const averageScore = useMemo(() => {
+    if (!state.data?.length) return 0;
+    const total = state.data.reduce((sum: number, item: any) => {
+      const val = typeof item.jumlah === 'string'
+        ? parseFloat(item.jumlah.replace(',', '.'))
+        : Number(item.jumlah);
+      return isNaN(val) ? sum : sum + val;
+    }, 0);
+    return parseFloat((total / state.data.length).toFixed(2));
+  }, [state.data]);
 
   return (
     <Stack pos="relative" py="xl" gap={32}>
@@ -53,13 +106,13 @@ function Page() {
 
       <Box px={{ base: 'md', md: 100 }}>
         <Text py={10} ta="justify" fz="md" lh={1.7}>
-          SDGs Desa adalah upaya terpadu pemerintah dalam percepatan pencapaian tujuan pembangunan berkelanjutan di tingkat desa. 
-          Ini merupakan adaptasi dari SDGs global dalam konteks pembangunan desa di Indonesia, yang bertujuan menciptakan desa 
+          SDGs Desa adalah upaya terpadu pemerintah dalam percepatan pencapaian tujuan pembangunan berkelanjutan di tingkat desa.
+          Ini merupakan adaptasi dari SDGs global dalam konteks pembangunan desa di Indonesia, yang bertujuan menciptakan desa
           inklusif, berkelanjutan, dan tangguh menghadapi tantangan masa depan.
         </Text>
         <Text ta="justify" pb={20} fz="md" lh={1.7}>
-          Berdasarkan Permendesa Nomor 21 Tahun 2020, SDGs Desa mencakup 18 tujuan yang harus dicapai pada tahun 2030. 
-          Tujuan-tujuan tersebut meliputi pengentasan kemiskinan, peningkatan kesehatan dan pendidikan, kesetaraan gender, 
+          Berdasarkan Permendesa Nomor 21 Tahun 2020, SDGs Desa mencakup 18 tujuan yang harus dicapai pada tahun 2030.
+          Tujuan-tujuan tersebut meliputi pengentasan kemiskinan, peningkatan kesehatan dan pendidikan, kesetaraan gender,
           pertumbuhan ekonomi, pembangunan infrastruktur, hingga pelestarian lingkungan.
         </Text>
       </Box>
@@ -67,9 +120,24 @@ function Page() {
       <Box py={20} px={{ base: 'md', md: 100 }}>
         <Box pos="relative" style={{ minHeight: 200 }}>
           <LoadingOverlay visible={loading} overlayProps={{ blur: 2 }} />
-          {!loading && sdgsDesa.length > 0 ? (
+
+          {!loading && state.data && state.data.length > 0 && (
+            <Center mb="xl">
+              <Box ta="center">
+                <Title order={2} c={colors['blue-button']}>Rata-Rata SDGs Desa : </Title>
+                <Text fw={700} c={colors['blue-button']} fz="2rem" style={{ minHeight: '4rem' }}>
+                  {averageScore} %
+                </Text>
+                <Text fs={"italic"} ta="center" fz="lg">
+                  Diambil dari rata-rata 18 Goals SDGs Desa dari Desa Darmasaba
+                </Text>
+              </Box>
+            </Center>
+          )}
+
+          {!loading && state.data && state.data.length > 0 ? (
             <SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="xl" verticalSpacing="xl">
-              {sdgsDesa.map((item) => (
+              {state.data?.map((item) => (
                 <Paper
                   key={item.id}
                   p="lg"
@@ -114,9 +182,9 @@ function Page() {
                     />
                   </Box>
                   <Stack gap="xs" align="center" style={{ width: '100%' }}>
-                      <Title order={4} ta="center" c="dark" fw={600} lineClamp={2} style={{ minHeight: '3rem' }}>
-                        {item.name}
-                      </Title>
+                    <Title order={4} ta="center" c="dark" fw={600} lineClamp={2} style={{ minHeight: '3rem' }}>
+                      {item.name}
+                    </Title>
                     <Text
                       ta="center"
                       fw={700}
@@ -139,6 +207,59 @@ function Page() {
               </Text>
             </Center>
           ) : null}
+
+          {/* Chart */}
+          <Box mt={30} style={{ width: '100%', minHeight: 400 }}>
+            <Paper bg={colors['white-1']} pt={50} pb={170} px={90} mb={"xl"} radius="md" withBorder>
+              <Stack gap={"xs"}>
+                <Title ta={"center"} pb={10} order={2}>
+                  Grafik APBDes
+                </Title>
+                {mounted && chartData.length > 0 ? (
+                  <Box style={{ padding: '0 30px' }}> {/* Tambahkan padding horizontal agar label tidak keluar */}
+                    <BarChart
+                      h={500}
+                      data={chartData}
+                      dataKey="name"
+                      type="stacked"
+                      withBarValueLabel
+                      series={[
+                        {
+                          name: 'jumlah',
+                          color: colors['blue-button'],
+                          // label: 'Jumlah', → HAPUS INI AGAR LEGEND TIDAK MUNCUL
+                        },
+                      ]}
+                      withTooltip
+                      tooltipProps={{
+                        labelFormatter: (value) => value,
+                        formatter: (value) => `${value}%`,
+                      }}
+                      xAxisProps={{
+                        angle: -45,
+                        textAnchor: 'end',
+                        interval: 0,
+                        fontSize: 12,
+                        dy: 10,
+                      }}
+                      yAxisProps={{
+                        domain: [0, 100],
+                        tickCount: 6,
+                      }}
+                      style={{
+                        overflowX: 'visible',
+                        paddingBottom: 40, // Tambahkan ruang di bawah untuk label
+                      }}
+                      // Hilangkan legend secara eksplisit
+                      withLegend={false} // ⭐ Ini yang menghilangkan kotak biru + teks "Jumlah"
+                    />
+                  </Box>
+                ) : (
+                  <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
+                )}
+              </Stack>
+            </Paper>
+          </Box>
         </Box>
       </Box>
     </Stack>