Sinkronisasi UI & API Admin - User Submenu Data Kesehatan Warga

-Dibagian Tanggal Gak Auto Ngambil Tanggal Yang Udah Dipakai -Dibagian fasilitas kesehatan : data dokter dan tarif rencananya mau pakai select
2025-08-15 14:07:56 +08:00
parent d7a592c635
commit 8d15563f15
31 changed files with 1778 additions and 536 deletions
--- a/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/grafik-penyakit/page.tsx
+++ b/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/grafik-penyakit/page.tsx
@@ -0,0 +1,132 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import grafikkepuasan from "@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan";
+import colors from "@/con/colors";
+import { Box, Center, Paper, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
+import { useEffect, useState } from "react";
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from "recharts";
+import { useProxy } from "valtio/utils";
+
+
+
+function GrafikPenyakit() {
+  type PDKMGRAFIK = {
+    id: string;
+    nama: string;
+    tanggal: string | Date; // Allow both string and Date types
+    jenisKelamin: string;
+    alamat: string;
+    penyakit: string;
+    createdAt?: Date;     // Add optional fields that might come from the API
+    updatedAt?: Date;
+    deletedAt?: Date | null;
+  }
+  const statePenyakit = useProxy(grafikkepuasan)
+  const [chartData, setChartData] = useState<PDKMGRAFIK[]>([])
+  const [mounted, setMounted] = useState(false)
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  const {
+    data,
+    page,
+    loading,
+    load,
+  } = statePenyakit.findMany
+
+  useShallowEffect(() => {
+    setMounted(true)
+    load(page, 10)
+  }, [page])
+
+  useEffect(() => {
+    setMounted(true)
+    if (data) {
+      setChartData(data.map((item) => ({
+        id: item.id,
+        nama: item.nama,
+        tanggal: item.tanggal instanceof Date ? item.tanggal.toISOString() : item.tanggal,
+        jenisKelamin: item.jenisKelamin,
+        alamat: item.alamat,
+        penyakit: item.penyakit,
+      })))
+    }
+  }, [data])
+
+  const processDiseaseData = (data: PDKMGRAFIK[]) => {
+    const diseaseCount: Record<string, number> = {};
+
+    data.forEach(item => {
+      const penyakit = item.penyakit.trim();
+      if (penyakit) {
+        diseaseCount[penyakit] = (diseaseCount[penyakit] || 0) + 1;
+      }
+    });
+
+    return Object.entries(diseaseCount).map(([name, count]) => ({
+      name,
+      count
+    }));
+  };
+
+  // Add this state to store the processed chart data
+  const [diseaseChartData, setDiseaseChartData] = useState<{ name: string, count: number }[]>([]);
+
+  // Update the chart data when data changes
+  useEffect(() => {
+    if (data && data.length > 0) {
+      setDiseaseChartData(processDiseaseData(data));
+    }
+  }, [data]);
+
+  if (loading || !data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+
+  return (
+    <Box>
+      {!mounted && !chartData ? (
+        <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Center>
+              <Title pb={10} order={3}>Grafik Hasil Kepuasan Masyarakat</Title>
+              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+            </Center>
+          </Paper>
+        </Box>
+      ) : (
+        <Box style={{ width: '100%', minWidth: 300, height: 420, minHeight: 300 }}>
+          <Paper bg={colors["white-trans-1"]} p={'md'}>
+            <Title pb={10} order={4}>Grafik Hasil Kepuasan Masyarakat</Title>
+            {mounted && diseaseChartData.length > 0 && (
+              <Center>
+                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={diseaseChartData} >
+                  <XAxis
+                    dataKey="name"
+                    tick={{ fontSize: 12 }}
+                    interval={0}
+                    angle={-45}
+                    textAnchor="end"
+                    height={70}
+                  />
+                  <YAxis />
+                  <Tooltip />
+                  <Legend />
+                  <Bar dataKey="count" fill={colors['blue-button']} name="Jumlah Penderita" />
+                </BarChart>
+              </Center>
+            )}
+          </Paper>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default GrafikPenyakit;