UI Desa Gallery Done

API Desa Gallery Done

src/app/admin/(dashboard)/ppid/_com/layoutTabsGallery.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabsGallery({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "Foto",
+            value: "foto",
+            href: "/admin/desa/gallery/foto"
+        },
+        {
+            label: "Video",
+            value: "video",
+            href: "/admin/desa/gallery/video"
+        },
+        
+    ];
+    const curentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const handleTabChange = (value: string | null) => {
+        const tab = tabs.find(t => t.value === value)
+        if (tab) {
+            router.push(tab.href)
+        }
+        setActiveTab(value)
+    }
+
+    useEffect(() => {
+        const match = tabs.find(tab => tab.href === pathname)
+        if (match) {
+            setActiveTab(match.value)
+        }
+    }, [pathname])
+
+    return (
+        <Stack>
+            <Title order={3}>Gallery</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                    ))}
+                </TabsList>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabsGallery;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/create/page.tsx

@@ -55,7 +55,7 @@ function GrafikBerdasarkanJenisKelaminRespondenCreate() {
              }}
            />
            <TextInput
-             label="Baik"
+             label="Perempuan"
              type="number"
              placeholder="masukkan jumlah"
              value={stategrafikBerdasarkanJenisKelamin.create.form.perempuan}

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/page.tsx

@@ -7,14 +7,14 @@ import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Cell, Pie, PieChart } from 'recharts';
-import { useProxy } from 'valtio/utils';
+import { useSnapshot } from 'valtio';
 import JudulListTab from '../../../_com/jusulListTab';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikBerdasarkanResponden from '../../../_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
 
 function GrafikBerdasarkanResponden() {
 
-  const stategrafikBerdasarkanResponden = useProxy(grafikBerdasarkanResponden)
+  const stategrafikBerdasarkanResponden = useSnapshot(grafikBerdasarkanResponden)
   const [donutData, setDonutData] = useState<any[]>([]);
   const [mounted, setMounted] = useState(false);
   const [modalHapus, setModalHapus] = useState(false)
@@ -39,7 +39,7 @@ function GrafikBerdasarkanResponden() {
   }, [])
 
   useEffect(() => {
-    if (stategrafikBerdasarkanResponden.findMany.data && stategrafikBerdasarkanResponden.findMany.data.length > 0) {
+    if (stategrafikBerdasarkanResponden.findMany.data) {
       const totalSangatBaik = stategrafikBerdasarkanResponden.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.sangatbaik || 0), 0);
       const totalBaik = stategrafikBerdasarkanResponden.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.baik || 0), 0);
       const totalKurangBaik = stategrafikBerdasarkanResponden.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.kurangbaik || 0), 0);

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import JudulListTab from '@/app/admin/(dashboard)/_com/jusulListTab';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -30,30 +30,34 @@ function GrafikHasilKepuasanMasyarakat() {
   const router = useRouter();
 
 
-  
+
   const handleDelete = () => {
     if (selectedId) {
       stateGrafikHasilKepuasan.delete.byId(selectedId)
       setModalHapus(false)
       setSelectedId(null)
+
+      stateGrafikHasilKepuasan.findMany.load()
     }
   }
-  
+
   useShallowEffect(() => {
     setMounted(true)
     stateGrafikHasilKepuasan.findMany.load()
   }, [])
-  
+
   useEffect(() => {
-    if (stateGrafikHasilKepuasan.findMany.data && stateGrafikHasilKepuasan.findMany.data.length > 0) {
-      setChartData([...stateGrafikHasilKepuasan.findMany.data.map((item) => ({
-        id: item.id,
-        label: item.label,
-        kepuasan: Number(item.kepuasan),
-      }))]);
+    if (stateGrafikHasilKepuasan.findMany.data) {
+      setChartData(
+        stateGrafikHasilKepuasan.findMany.data.map((item) => ({
+          id: item.id,
+          label: item.label,
+          kepuasan: Number(item.kepuasan),
+        }))
+      );
     }
-  }, [stateGrafikHasilKepuasan.findMany.data])
-  
+  }, [stateGrafikHasilKepuasan.findMany.data]);
+
 
 
   if (!stateGrafikHasilKepuasan.findMany.data) {
@@ -114,7 +118,7 @@ function GrafikHasilKepuasanMasyarakat() {
           <Paper style={{ width: '100%', minWidth: 300, height: 500, minHeight: 300 }} bg={colors['white-1']} p={'md'}>
             <Stack gap={"xs"}>
               <Title pb={10} order={3}>Data Kepuasan Masyarakat</Title>
-              {mounted && chartData.length > 0 && (
+              {mounted && chartData.length > 0 ? (
                 <BarChart width={isMobile ? 300 : isTablet ? 300 : 300} height={380} data={chartData} >
                   <XAxis dataKey="label" />
                   <YAxis />
@@ -122,6 +126,8 @@ function GrafikHasilKepuasanMasyarakat() {
                   <Legend />
                   <Bar dataKey="kepuasan" fill={colors['blue-button']} name="Kepuasan" />
                 </BarChart>
+              ) : (
+                <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
               )}
             </Stack>
           </Paper>