Admin Fix Chart Bar PerMonth Submenu IKM, Menu PPID

src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan.ts

@@ -117,8 +117,48 @@ const responden = proxy({
     id: "",
     form: { ...defaultFormResponden },
     loading: false,
-    async byId() {
-      // Method implementation if needed
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        responden.update.loading = true;
+
+        const response = await fetch(`/api/landingpage/responden/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            tanggal: data.tanggal,
+            jenisKelaminId: data.jenisKelaminId,
+            ratingId: data.ratingId,
+            kelompokUmurId: data.kelompokUmurId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading responden:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        responden.update.loading = false;
+      }
     },
     async submit() {
       const id = this.id;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/indeks-kepuasan-masyarakat/page.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
 import colors from '@/con/colors';
-import { PieChart } from '@mantine/charts'; // ✅ Ganti recharts dengan Mantine
+import { PieChart, BarChart } from '@mantine/charts'; // ✅ Ganti recharts dengan Mantine
 import {
   Box,
   Center,
@@ -25,12 +25,15 @@ interface ChartDataItem {
   label?: string;
 }
 
+
+
 function Page() {
   const state = useProxy(indeksKepuasanState.responden);
   const { data, loading } = state.findMany;
   const [donutDataJenisKelamin, setDonutDataJenisKelamin] = useState<ChartDataItem[]>([]);
   const [donutDataRating, setDonutDataRating] = useState<ChartDataItem[]>([]);
   const [donutDataKelompokUmur, setDonutDataKelompokUmur] = useState<ChartDataItem[]>([]);
+  const [barChartData, setBarChartData] = useState<Array<{ month: string; count: number }>>([]);
 
   useShallowEffect(() => {
     if (data) {
@@ -69,6 +72,41 @@ function Page() {
         { name: 'Dewasa', value: totalDewasa, color: '#10A85AFF' },
         { name: 'Lansia', value: totalLansia, color: '#FFA500' },
       ]);
+
+      // Process data for bar chart (group by month)
+      const monthYearMap = new Map<string, number>();
+
+      data.forEach((item: any) => {
+        // Try both createdAt and tanggal fields
+        const dateValue = item.tanggal || item.createdAt;
+        if (!dateValue) return;
+
+        const parsedDate = new Date(dateValue);
+        if (isNaN(parsedDate.getTime())) return;
+
+        const month = parsedDate.getMonth() + 1;
+        const year = parsedDate.getFullYear();
+        const monthYearKey = `${year}-${String(month).padStart(2, '0')}`;
+
+        monthYearMap.set(monthYearKey, (monthYearMap.get(monthYearKey) || 0) + 1);
+      });
+
+      // Convert map to array and sort by date
+      const barData = Array.from(monthYearMap.entries())
+        .map(([key, count]) => {
+          const [year, month] = key.split('-');
+          const monthName = new Date(Number(year), Number(month) - 1, 1)
+            .toLocaleString('id-ID', { month: 'long' });
+          return {
+            month: `${monthName} ${year}`,
+            count,
+            sortKey: parseInt(`${year}${String(month).padStart(2, '0')}`, 10)
+          };
+        })
+        .sort((a, b) => a.sortKey - b.sortKey)
+        .map(({ month, count }) => ({ month, count }));
+
+      setBarChartData(barData);
     }
   }, [data]);
 
@@ -92,105 +130,120 @@ function Page() {
 
   return (
     <Stack gap="xs">
-
-
+      {/* Bar Chart - Data per Tanggal */}
+      <Paper bg={colors['white-1']} p="md" radius="md" mb="md">
+        <Title order={4} mb="md" ta="center">Jumlah Responden per Bulan</Title>
+        <Box h={300}>
+          <BarChart
+            h={300}
+            data={barChartData}
+            dataKey="month"
+            series={[{ name: 'count', color: colors['blue-button'] }]}
+            tickLine="y"
+            xAxisLabel="Bulan"
+            yAxisLabel="Jumlah Responden"
+            withTooltip
+            tooltipAnimationDuration={200}
+          />
+        </Box>
+      </Paper>
 
       <SimpleGrid cols={{ base: 1, md: 3 }}>
-      {/* Chart Jenis Kelamin */}
-      <Paper bg={colors['white-1']} p="md" radius="md">
-        <Stack>
-          <Title order={4}>Jenis Kelamin</Title>
-          {donutDataJenisKelamin.every(item => item.value === 0) ? (
-            <Text c="dimmed" ta="center" my="md">
-              Belum ada data untuk ditampilkan dalam grafik
-            </Text>
-          ) : (
-            <Box>
-              <Center>
-                <PieChart
-                  withLabels
-                  withTooltip
-                  labelsType="percent"
-                  size={250}
-                  data={donutDataJenisKelamin}
-                />
-              </Center>
-              <Stack gap="sm" mt="md">
-                {donutDataJenisKelamin.map((entry) => (
-                  <Flex key={entry.name} gap="md" align="center">
-                    <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                    <Text size="sm">{entry.name}: {entry.value}</Text>
-                  </Flex>
-                ))}
-              </Stack>
-            </Box>
-          )}
-        </Stack>
-      </Paper>
+        {/* Chart Jenis Kelamin */}
+        <Paper bg={colors['white-1']} p="md" radius="md">
+          <Stack>
+            <Title order={4}>Jenis Kelamin</Title>
+            {donutDataJenisKelamin.every(item => item.value === 0) ? (
+              <Text c="dimmed" ta="center" my="md">
+                Belum ada data untuk ditampilkan dalam grafik
+              </Text>
+            ) : (
+              <Box>
+                <Center>
+                  <PieChart
+                    withLabels
+                    withTooltip
+                    labelsType="percent"
+                    size={250}
+                    data={donutDataJenisKelamin}
+                  />
+                </Center>
+                <Stack gap="sm" mt="md">
+                  {donutDataJenisKelamin.map((entry) => (
+                    <Flex key={entry.name} gap="md" align="center">
+                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    </Flex>
+                  ))}
+                </Stack>
+              </Box>
+            )}
+          </Stack>
+        </Paper>
 
-      {/* Chart Rating */}
-      <Paper bg={colors['white-1']} p="md" radius="md">
-        <Stack>
-          <Title order={4}>Pilihan</Title>
-          {donutDataRating.every(item => item.value === 0) ? (
-            <Text c="dimmed" ta="center" my="md">
-              Belum ada data untuk ditampilkan dalam grafik
-            </Text>
-          ) : (
-            <Box>
-              <Center>
-                <PieChart
-                  withLabels
-                  withTooltip
-                  labelsType="percent"
-                  size={250}
-                  data={donutDataRating}
-                />
-              </Center>
-              <Stack gap="sm" mt="md">
-                {donutDataRating.map((entry) => (
-                  <Flex key={entry.name} gap="md" align="center">
-                    <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                    <Text size="sm">{entry.name}: {entry.value}</Text>
-                  </Flex>
-                ))}
-              </Stack>
-            </Box>
-          )}
-        </Stack>
-      </Paper>
+        {/* Chart Rating */}
+        <Paper bg={colors['white-1']} p="md" radius="md">
+          <Stack>
+            <Title order={4}>Pilihan</Title>
+            {donutDataRating.every(item => item.value === 0) ? (
+              <Text c="dimmed" ta="center" my="md">
+                Belum ada data untuk ditampilkan dalam grafik
+              </Text>
+            ) : (
+              <Box>
+                <Center>
+                  <PieChart
+                    withLabels
+                    withTooltip
+                    labelsType="percent"
+                    size={250}
+                    data={donutDataRating}
+                  />
+                </Center>
+                <Stack gap="sm" mt="md">
+                  {donutDataRating.map((entry) => (
+                    <Flex key={entry.name} gap="md" align="center">
+                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    </Flex>
+                  ))}
+                </Stack>
+              </Box>
+            )}
+          </Stack>
+        </Paper>
 
-      {/* Chart Kelompok Umur */}
-      <Paper bg={colors['white-1']} p="md" radius="md">
-        <Stack>
-          <Title order={4}>Umur</Title>
-          {donutDataKelompokUmur.every(item => item.value === 0) ? (
-            <Text c="dimmed" ta="center" my="md">
-              Belum ada data untuk ditampilkan dalam grafik
-            </Text>
-          ) : (
-            <Box>
-              <Center>
-                <PieChart
-                  withLabels
-                  withTooltip
-                  labelsType="percent"
-                  size={250}
-                  data={donutDataKelompokUmur}
-                />
-              </Center>
-              <Stack gap="sm" mt="md">
-                {donutDataKelompokUmur.map((entry) => (
-                  <Flex key={entry.name} gap="md" align="center">
-                    <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                    <Text size="sm">{entry.name}: {entry.value}</Text>
-                  </Flex>
-                ))}
-              </Stack>
-            </Box>
-          )}
-        </Stack>
-      </Paper>
+        {/* Chart Kelompok Umur */}
+        <Paper bg={colors['white-1']} p="md" radius="md">
+          <Stack>
+            <Title order={4}>Umur</Title>
+            {donutDataKelompokUmur.every(item => item.value === 0) ? (
+              <Text c="dimmed" ta="center" my="md">
+                Belum ada data untuk ditampilkan dalam grafik
+              </Text>
+            ) : (
+              <Box>
+                <Center>
+                  <PieChart
+                    withLabels
+                    withTooltip
+                    labelsType="percent"
+                    size={250}
+                    data={donutDataKelompokUmur}
+                  />
+                </Center>
+                <Stack gap="sm" mt="md">
+                  {donutDataKelompokUmur.map((entry) => (
+                    <Flex key={entry.name} gap="md" align="center">
+                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    </Flex>
+                  ))}
+                </Stack>
+              </Box>
+            )}
+          </Stack>
+        </Paper>
       </SimpleGrid>
     </Stack>
   );

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/responden/[id]/edit/page.tsx

@@ -1,35 +1,78 @@
 'use client'
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import colors from '@/con/colors';
 import { Box, Button, Paper, Stack, Title, TextInput, Text, Select } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan';
+import { toast } from 'react-toastify';
+
+interface FormResponden {
+  name: string;
+  tanggal: string;
+  jenisKelaminId: string;
+  ratingId: string;
+  kelompokUmurId: string;
+}
 
 function EditResponden() {
   const router = useRouter()
   const params = useParams() as { id: string }
   const state = useProxy(indeksKepuasanState.responden)
   const id = params.id
-
+  const [formData, setFormData] = useState<FormResponden>({
+    name: '',
+    tanggal: '',
+    jenisKelaminId: '',
+    ratingId: '',
+    kelompokUmurId: '',
+  })
   useEffect(() => {
-    if (id) {
-      state.findUnique.load(id).then(() => {
-        const data = state.findUnique.data
+    indeksKepuasanState.jenisKelaminResponden.findMany.load();
+    indeksKepuasanState.pilihanRatingResponden.findMany.load();
+    indeksKepuasanState.kelompokUmurResponden.findMany.load();
+
+    const loadResponden = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await state.update.load(id);
         if (data) {
+          const formattedDate = data.tanggal && !isNaN(new Date(data.tanggal).getTime())
+            ? new Date(data.tanggal).toISOString().split('T')[0]
+            : '';
+          // ⬇️ FIX PENTING: tambahkan ini
+          state.update.id = id;
+
           state.update.form = {
-            name: data.name || '',
-            tanggal: data.tanggal ? new Date(data.tanggal).toISOString() : new Date().toISOString(),
-            jenisKelaminId: data.jenisKelaminId || '',
-            ratingId: data.ratingId || '',
-            kelompokUmurId: data.kelompokUmurId || '',
-          }
+            name: data.name,
+            tanggal: formattedDate,
+            jenisKelaminId: data.jenisKelaminId,
+            ratingId: data.ratingId,
+            kelompokUmurId: data.kelompokUmurId,
+          };
+
+          setFormData({
+            name: data.name,
+            tanggal: data.tanggal,
+            jenisKelaminId: data.jenisKelaminId,
+            ratingId: data.ratingId,
+            kelompokUmurId: data.kelompokUmurId,
+          });
+
+
         }
-      })
+      } catch (error) {
+        console.error("Error loading program penghijauan:", error);
+        toast.error("Gagal memuat data program penghijauan");
+      }
     }
-  }, [id])
+
+    loadResponden();
+  }, [params?.id]);
 
   const handleSubmit = async () => {
     state.update.id = id;
@@ -51,74 +94,84 @@ function EditResponden() {
             label="Nama"
             type='text'
             placeholder="masukkan nama"
-            value={state.update.form.name}
+            value={formData.name}
             onChange={(val) => {
-              state.update.form.name = val.currentTarget.value;
+              setFormData({
+                ...formData,
+                name: val.currentTarget.value
+              })
             }}
           />
           <TextInput
-            label="Tanggal"
             type="date"
-            placeholder="masukkan tanggal"
-            value={state.update.form.tanggal}
-            onChange={(val) => {
-              state.update.form.tanggal = val.currentTarget.value;
+            value={formData.tanggal}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                tanggal: e.currentTarget.value, // ✅ sudah format YYYY-MM-DD
+              });
             }}
           />
           <Select
-            value={state.update.form.jenisKelaminId}
-            onChange={(val) => {
-              state.update.form.jenisKelaminId = val || "";
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Jenis Kelamin</Text>}
-            placeholder='Pilih jenis kelamin'
+            key={"jenisKelamin"}
+            label={<Text fw="bold" fz="sm">Jenis Kelamin</Text>}
+            placeholder="Pilih jenis kelamin"
+            value={formData.jenisKelaminId}
+            onChange={(val) => setFormData({ ...formData, jenisKelaminId: val || "" })}
             data={
-              indeksKepuasanState.jenisKelaminResponden.findMany.data?.map((v) => ({
-                value: v.id,
-                label: v.nama
-              })) || []
+              (indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
+                .filter(Boolean) // Hapus null/undefined
+                .map((v) => ({
+                  value: v.id || '',
+                  label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
+                }))
             }
+            disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading} // ✅ disable saat loading
             clearable
             searchable
             required
-            error={!state.update.form.jenisKelaminId ? "Pilih jenis kelamin" : undefined}
+            error={!formData.jenisKelaminId ? "Pilih jenis kelamin" : undefined}
           />
-           <Select
-            value={state.update.form.ratingId}
-            onChange={(val) => {
-              state.update.form.ratingId = val || "";
-            }}
+          <Select
+            key={"rating"}
+            value={formData.ratingId}
+            onChange={(val) => setFormData({ ...formData, ratingId: val || "" })}
             label={<Text fw={"bold"} fz={"sm"}>Rating</Text>}
             placeholder='Pilih rating'
             data={
-              indeksKepuasanState.pilihanRatingResponden.findMany.data?.map((v) => ({
-                value: v.id,
-                label: v.nama
-              })) || []
+              (indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
+                .filter(Boolean)
+                .map((v) => ({
+                  value: v.id || '',
+                  label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
+                }))
             }
+            disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
             clearable
             searchable
             required
-            error={!state.update.form.ratingId ? "Pilih rating" : undefined}
+            error={!formData.ratingId ? "Pilih rating" : undefined}
           />
 
           <Select
-            value={state.update.form.kelompokUmurId}
-            onChange={(val) => {
-              state.update.form.kelompokUmurId = val || "";
-            }}
+            key={"kelompokUmur"}
+            value={formData.kelompokUmurId}
+            onChange={(val) => setFormData({ ...formData, kelompokUmurId: val || "" })}
             label={<Text fw={"bold"} fz={"sm"}>Kelompok Umur</Text>}
             placeholder='Pilih kelompok umur'
             data={
-              indeksKepuasanState.kelompokUmurResponden.findMany.data?.map((v) => ({
-                value: v.id,
-                label: v.nama
-              })) || []
+              (indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
+                .filter(Boolean)
+                .map((v) => ({
+                  value: v.id || '',
+                  label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
+                }))
             }
+            disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
             clearable
             searchable
             required
-            error={!state.update.form.kelompokUmurId ? "Pilih kelompok umur" : undefined}
+            error={!formData.kelompokUmurId ? "Pilih kelompok umur" : undefined}
           />
 
           <Button

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/responden/[id]/page.tsx

@@ -3,14 +3,14 @@
 import { ModalKonfirmasiHapus } from "@/app/admin/(dashboard)/_com/modalKonfirmasiHapus"
 import indeksKepuasanState from "@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan"
 import colors from "@/con/colors"
-import { Box, Button, Paper, Skeleton, Stack, Text } from "@mantine/core"
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
-import { IconArrowBack } from "@tabler/icons-react"
+import { IconArrowBack, IconEdit, IconX } from "@tabler/icons-react"
 import { useRouter, useParams } from "next/navigation"
 import { useState } from "react"
 import { useProxy } from "valtio/utils"
 
-export default function DetailResponden(){
+export default function DetailResponden() {
   const [modalHapus, setModalHapus] = useState(false)
   const stateDetail = useProxy(indeksKepuasanState.responden)
   const router = useRouter()
@@ -30,17 +30,17 @@ export default function DetailResponden(){
     }
   }
 
-  if(!stateDetail.findUnique.data){
-    return(
+  if (!stateDetail.findUnique.data) {
+    return (
       <Stack>
         <Skeleton h={500} />
       </Stack>
     )
   }
-  return(
+  return (
     <Box>
       <Box mb={10}>
-      <Button variant="subtle" onClick={() => router.back()}>
+        <Button variant="subtle" onClick={() => router.back()}>
           <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
@@ -74,6 +74,31 @@ export default function DetailResponden(){
                 <Text fz={"lg"} fw={"bold"}>Kelompok Umur</Text>
                 <Text fz={"lg"}>{stateDetail.findUnique.data?.kelompokUmur?.name}</Text>
               </Box>
+              <Flex gap={"xs"} mt={10}>
+                <Button
+                  onClick={() => {
+                    if (stateDetail.findUnique.data) {
+                      setSelectedId(stateDetail.findUnique.data.id);
+                      setModalHapus(true);
+                    }
+                  }}
+                  disabled={stateDetail.delete.loading || !stateDetail.findUnique.data}
+                  color={"red"}
+                >
+                  <IconX size={20} />
+                </Button>
+                <Button
+                  onClick={() => {
+                    if (stateDetail.findUnique.data) {
+                      router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${stateDetail.findUnique.data.id}/edit`);
+                    }
+                  }}
+                  disabled={!stateDetail.findUnique.data}
+                  color={"green"}
+                >
+                  <IconEdit size={20} />
+                </Button>
+              </Flex>
             </Stack>
           </Paper>
         </Stack>