QC Admin - User Menu Ekonomi : Jumlah Pengangguran

2025-09-16 10:11:54 +08:00
parent a5d841bb6b
commit 4ceea5203f
97 changed files with 6023 additions and 3481 deletions
--- a/src/app/darmasaba/(pages)/desa/potensi/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/potensi/page.tsx
@@ -76,7 +76,7 @@ function Page() {
          </Paper>
        </Flex>

-        <SimpleGrid py={48} cols={{ base: 1, sm: 2, lg: 3 }} spacing="2xl">
+        <SimpleGrid py={48} cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
          {loading ? (
            Array.from({ length: 6 }).map((_, i) => (
              <Skeleton key={i} h={360} radius="xl" />
--- a/src/app/darmasaba/(pages)/desa/profile/ui/profileDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profile/ui/profileDesa.tsx
@@ -1,6 +1,5 @@
 import colors from '@/con/colors';
-import { Center, Paper, SimpleGrid, Box, Text } from '@mantine/core';
-import React from 'react';
+import { Box, Center, Paper } from '@mantine/core';

 function ProfileDesa() {
  return (
@@ -12,35 +11,6 @@ function ProfileDesa() {
            </Center>
          </Paper>
        </Center>
-        <Center>
-          <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-            <SimpleGrid
-              cols={{
-                base: 1,
-                sm: 3
-              }}
-            >
-              <Box>
-                <Paper p={"sm"} w={{ base: "100%", md: "100%" }}>
-                  <Text fz={50} c={colors['blue-button']} ta={"center"} fw={"bold"}>8</Text>
-                  <Text fz={{ base: "md", md: "h3"}} ta={"center"}>Tempat Wisata</Text>
-                </Paper>
-              </Box>
-              <Box>
-                <Paper p={"sm"} w={{ base: "100%", md: "100%" }}>
-                  <Text fz={50} c={colors['blue-button']} ta={"center"} fw={"bold"}>8</Text>
-                  <Text fz={{ base: "md", md: "h3"}} ta={"center"}>Tempat Wisata</Text>
-                </Paper>
-              </Box>
-              <Box>
-                <Paper p={"sm"} w={{ base: "100%", md: "100%" }}>
-                  <Text fz={50} c={colors['blue-button']} ta={"center"} fw={"bold"}>8</Text>
-                  <Text fz={{ base: "md", md: "h3"}} ta={"center"}>Tempat Wisata</Text>
-                </Paper>
-              </Box>
-            </SimpleGrid>
-          </Paper>
-        </Center>
    </Box>
  );
 }
--- a/src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx
+++ b/src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx
@@ -54,7 +54,7 @@ function SemuaPerbekel() {
          {data.map((v: any, k: number) => (
            <Paper
              key={k}
-              radius="2xl"
+              radius="xl"
              shadow="md"
              withBorder
              p="lg"
@@ -65,7 +65,7 @@ function SemuaPerbekel() {
              className="hover:shadow-xl hover:scale-[1.02]"
            >
              <Stack gap="md" align="center">
-                <Box w="100%" h={300} style={{ overflow: "hidden", borderRadius: "1rem" }}>
+                <Box w="100%" h={500} style={{ overflow: "hidden", borderRadius: "1rem" }}>
                  <Image
                    src={v.image?.link}
                    alt={v.nama || "Foto Perbekel"}
--- a/src/app/darmasaba/(pages)/ekonomi/jumlah-pengangguran/page.tsx
+++ b/src/app/darmasaba/(pages)/ekonomi/jumlah-pengangguran/page.tsx
@@ -19,8 +19,14 @@ type DataPengangguran = {
 function Page() {
  const [chartData, setChartData] = useState<DataPengangguran[]>([])
  const [mounted, setMounted] = useState(false)
+  const [yearlyData, setYearlyData] = useState<{
+    total: number;
+    educated: number;
+    uneducated: number;
+    year: number;
+  } | null>(null);
  const state = useProxy(jumlahPengangguranState.jumlahPengangguran)
-  // const [selectedYear, setSelectedYear] = useState<string | null>(null);
+  const currentYear = new Date().getFullYear();

  useShallowEffect(() => {
    setMounted(true)
@@ -30,14 +36,36 @@ function Page() {
  useEffect(() => {
    setMounted(true);
    if (state.findMany.data) {
+      // Set chart data
      setChartData(state.findMany.data.map((item) => ({
        id: item.id,
        bulan: item.month,
        berpendidikan: Number(item.educatedUnemployment),
        takberpendidikan: Number(item.uneducatedUnemployment),
      })));
+
+      // Calculate yearly totals
+      const currentYearData = state.findMany.data.filter(item => item.year === currentYear);
+      if (currentYearData.length > 0) {
+        const yearlyTotal = {
+          total: 0,
+          educated: 0,
+          uneducated: 0,
+          year: currentYear
+        };
+
+        currentYearData.forEach(item => {
+          yearlyTotal.total += Number(item.totalUnemployment) || 0;
+          yearlyTotal.educated += Number(item.educatedUnemployment) || 0;
+          yearlyTotal.uneducated += Number(item.uneducatedUnemployment) || 0;
+        });
+
+        setYearlyData(yearlyTotal);
+      } else {
+        setYearlyData(null);
+      }
    }
-  }, [state.findMany.data]);
+  }, [state.findMany.data, currentYear]);

  return (
    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -65,10 +93,10 @@ function Page() {
                  <IconUserOff size={35} color={colors['blue-button']} />
                  <Text fz="h4" fw={600}>Total Pengangguran</Text>
                  <Text fz="h2" fw={700} c={colors['blue-button']}>
-                    {state.findMany.data?.[0]?.totalUnemployment || 0} Orang
+                    {yearlyData?.total.toLocaleString() || 0} Orang
                  </Text>
                  <Text fz="sm" c="dimmed">
-                    Data tahun {state.findMany.data?.[0]?.year ? new Date(state.findMany.data[0].year).getFullYear() : ''}
+                    Total data tahun {currentYear}
                  </Text>
                </Flex>
              </Paper>
@@ -79,12 +107,14 @@ function Page() {
                  <IconSchool size={35} color="#5082EE" />
                  <Text fz="h4" fw={600}>Pengangguran Terdidik</Text>
                  <Text fz="h2" fw={700} c="#5082EE">
-                    {state.findMany.data?.[0]?.educatedUnemployment || 0} Orang
+                    {yearlyData?.educated.toLocaleString() || 0} Orang
                  </Text>
                  <Text fz="sm" c="dimmed">
-                    {state.findMany.data?.[0]?.totalUnemployment ?
-                      `${Math.round((state.findMany.data[0].educatedUnemployment / state.findMany.data[0].totalUnemployment) * 100)}% dari total` :
-                      '0% dari total'}
+                    {yearlyData ?
+                      <>
+                        {((yearlyData.educated / yearlyData.total) * 100).toFixed(1)}%
+                        dari total pengangguran
+                      </> : 'Tidak ada data'}
                  </Text>
                </Flex>
              </Paper>
@@ -95,12 +125,14 @@ function Page() {
                  <IconSchoolOff size={35} color="#DA524C" />
                  <Text fz="h4" fw={600}>Pengangguran Tidak Terdidik</Text>
                  <Text fz="h2" fw={700} c="#DA524C">
-                    {state.findMany.data?.[0]?.uneducatedUnemployment || 0} Orang
+                    {yearlyData?.uneducated.toLocaleString() || 0} Orang
                  </Text>
                  <Text fz="sm" c="dimmed">
-                    {state.findMany.data?.[0]?.totalUnemployment ?
-                      `${Math.round((state.findMany.data[0].uneducatedUnemployment / state.findMany.data[0].totalUnemployment) * 100)}% dari total` :
-                      '0% dari total'}
+                    {yearlyData ?
+                      <>
+                        {((yearlyData.uneducated / yearlyData.total) * 100).toFixed(1)}%
+                        dari total pengangguran
+                      </> : 'Tidak ada data'}
                  </Text>
                </Flex>
              </Paper>
--- a/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/[id]/page.tsx
+++ b/src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/[id]/page.tsx
@@ -54,7 +54,7 @@ function Page() {
  const tarif = (data?.tarifdanlayanan as TarifDanLayanan) || null;
  const kontak = (data?.kontak as Kontak) || { 
    telepon: '(0361) 123456', 
-    whatsapp: '081234567890', 
+    whatsapp: '6289647037426', 
    email: 'info@fasilitas-kesehatan.id' 
  };
  const lokasi = (data?.lokasi as Lokasi) || { 
--- a/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx
+++ b/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx
@@ -25,10 +25,12 @@ import { IconSearch, IconFileInfo, IconMail, IconBrandWhatsapp } from '@tabler/i
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useDebouncedValue } from '@mantine/hooks';

 function Page() {
  const listData = useProxy(daftarInformasiPublik)
  const [search, setSearch] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay

  const {
    data,
@@ -39,8 +41,8 @@ function Page() {
  } = listData.findMany

  useShallowEffect(() => {
-    load(page, 5, search)
-  }, [page, search])
+    load(page, 5, debouncedSearch)
+  }, [page, debouncedSearch])

  if (loading || !data) {
    return (