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/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/edit/page.tsx
@@ -2,7 +2,7 @@
 'use client'
 import jumlahPengangguranState from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-pengangguran';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Select, NumberInput } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -14,45 +14,65 @@ function EditDetailDataPengangguran() {
  const router = useRouter();
  const params = useParams()

-  const [formData, setFormData] = useState({
-    month: stateDetail.update.form.month,
-    year: stateDetail.update.form.year,
-    totalUnemployment: stateDetail.update.form.totalUnemployment,
-    educatedUnemployment: stateDetail.update.form.educatedUnemployment,
-    uneducatedUnemployment: stateDetail.update.form.uneducatedUnemployment,
-    percentageChange: stateDetail.update.form.percentageChange || 0, // Ensure it's always a number
-  })
-
-  const calculateTotalAndChange = async () => {
-    const total = formData.educatedUnemployment + formData.uneducatedUnemployment;
-
-    // Ambil data bulan sebelumnya
-    const monthOrder = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
-    const currentIndex = monthOrder.findIndex(
-      (m) => m.toLowerCase() === formData.month.toLowerCase()
-    );
-
-    let percentageChange = 0;
-    if (currentIndex > 0) {
-      const prevMonth = monthOrder[currentIndex - 1];
-      const prev = await stateDetail.findByMonthYear.load({
-        month: prevMonth,
-        year: formData.year,
-      });
-
-      if (prev?.totalUnemployment) {
-        percentageChange = Number(
-          (((total - prev.totalUnemployment) / prev.totalUnemployment) * 100).toFixed(1)
-        );
-      }
-    }
+  const [formData, setFormData] = useState<{
+    month: string;
+    year: number;
+    educatedUnemployment: number;
+    uneducatedUnemployment: number;
+    totalUnemployment: number;
+    percentageChange: number | null;
+  }>({
+    month: "",
+    year: new Date().getFullYear(),
+    educatedUnemployment: 0,
+    uneducatedUnemployment: 0,
+    totalUnemployment: 0,
+    percentageChange: 0,
+  });

+  // Update form data and recalculate totals
+  const updateFormData = async (updates: Partial<typeof formData>) => {
+    const newData = { ...formData, ...updates };
+    const { total, percentageChange } = await calculateTotalAndChange();
+    
    setFormData({
-      ...formData,
+      ...newData,
      totalUnemployment: total,
      percentageChange,
    });
+  };

+  const calculateTotalAndChange = async () => {
+    const total = formData.educatedUnemployment + formData.uneducatedUnemployment;
+    
+    // Calculate percentage change based on previous month's data
+    let percentageChange = 0;
+    const monthOrder = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"];
+    const currentMonthIndex = monthOrder.indexOf(formData.month);
+    
+    if (currentMonthIndex !== -1) {
+      let prevMonthIndex = currentMonthIndex - 1;
+      let prevYear = formData.year;
+      
+      if (prevMonthIndex < 0) {
+        prevMonthIndex = 11;
+        prevYear--;
+      }
+      
+      const prevMonth = monthOrder[prevMonthIndex];
+      
+      // Get previous month's data
+      const prevData = await stateDetail.findByMonthYear.load({
+        month: prevMonth,
+        year: prevYear,
+      });
+
+      if (prevData && prevData.totalUnemployment > 0) {
+        const change = ((total - prevData.totalUnemployment) / prevData.totalUnemployment) * 100;
+        percentageChange = parseFloat(change.toFixed(1));
+      }
+    }
+    
    return { total, percentageChange };
  };

@@ -60,25 +80,28 @@ function EditDetailDataPengangguran() {
    const loadDetail = async () => {
      const id = params?.id as string;
      if (!id) return;
-  
+
      try {
        await stateDetail.findUnique.load(id); // ambil by ID
        const data = stateDetail.findUnique.data;
-  
+
        if (data) {
-          // Convert year from Date to number
-          const yearValue = data.year instanceof Date ? data.year.getFullYear() : data.year;
-          
+
+          // Convert year from Date to number if needed
+          const yearValue = data.year && typeof data.year === 'object' && 'getFullYear' in data.year
+            ? (data.year as Date).getFullYear()
+            : Number(data.year);
+
          // Set the ID for update
          stateDetail.update.id = id;
-          
+
          // Update Valtio state with converted year
-          stateDetail.update.form = { 
+          stateDetail.update.form = {
            ...data,
            year: yearValue,
            percentageChange: data.percentageChange || 0 // Ensure it's always a number
          };
-  
+
          // Update local formData with converted year
          setFormData({
            month: data.month,
@@ -94,10 +117,9 @@ function EditDetailDataPengangguran() {
        toast.error("Gagal memuat data detail");
      }
    };
-  
+
    loadDetail();
  }, [params?.id]);
-  

  const handleSubmit = async () => {
    const { total, percentageChange } = await calculateTotalAndChange();
@@ -107,11 +129,11 @@ function EditDetailDataPengangguran() {
        totalUnemployment: total,
        percentageChange,
      };
-  
+
      const success = await stateDetail.update.submit();
      if (success) {
        toast.success("Detail data pengangguran berhasil diperbarui!");
-        router.push("/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran");
+        router.push("/admin/ekonomi/jumlah-pengangguran");
      }
    } catch (error) {
      console.error("Error updating:", error);
@@ -130,41 +152,38 @@ function EditDetailDataPengangguran() {
      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
        <Title order={4}>Edit Detail Data Pengangguran</Title>
        <Stack gap="xs">
-          <TextInput
+          <Select
            label="Bulan"
+            data={["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"]}
            value={formData.month}
-            placeholder="Contoh: Jan, Feb, Mar"
-            onChange={(val) => (setFormData({
-              ...formData,
-              month: val.currentTarget.value
-            }))}
+            onChange={async (val) => {
+              await updateFormData({ month: val || "" });
+            }}
          />
-          <TextInput
+          <NumberInput
            label="Tahun"
-            type="number"
            value={formData.year}
-            onChange={(val) => (setFormData({
-              ...formData,
-              year: Number(val.currentTarget.value)
-            }))}
+            onChange={async (val) => {
+              await updateFormData({ year: Number(val) });
+            }}
          />
          <TextInput
            label="Pengangguran Terdidik"
            type="number"
            value={formData.educatedUnemployment}
-            onChange={(val) => (setFormData({
-              ...formData,
-              educatedUnemployment: Number(val.currentTarget.value)
-            }))}
+            onChange={async (val) => {
+              const value = Number(val.currentTarget.value) || 0;
+              await updateFormData({ educatedUnemployment: value });
+            }}
          />
          <TextInput
            label="Pengangguran Tidak Terdidik"
            type="number"
            value={formData.uneducatedUnemployment}
-            onChange={(val) => (setFormData({
-              ...formData,
-              uneducatedUnemployment: Number(val.currentTarget.value)
-            }))}
+            onChange={async (val) => {
+              const value = Number(val.currentTarget.value) || 0;
+              await updateFormData({ uneducatedUnemployment: value });
+            }}
          />
          <Text fz="sm" fw={500}>
            Total Otomatis: {formData.totalUnemployment}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/page.tsx
@@ -59,11 +59,16 @@ function DetailJumlahPengangguran() {
              </Box>
              <Box>
                <Text fw={"bold"}>Perubahan</Text>
-                <Text>{stateDetail.findUnique.data?.percentageChange}</Text>
+                <Text>
+                  {stateDetail.findUnique.data?.percentageChange !== null &&
+                    stateDetail.findUnique.data?.percentageChange !== undefined
+                    ? `${stateDetail.findUnique.data.percentageChange}%`
+                    : 'Tidak ada data perubahan'}
+                </Text>
              </Box>
              <Box>
                <Text fw={"bold"}>Tahun</Text>
-                <Text>{stateDetail.findUnique.data?.year ? new Date(stateDetail.findUnique.data.year).getFullYear() : ''}</Text>
+                <Text>{stateDetail.findUnique.data?.year || ''}</Text>
              </Box>
              <Box>
                <Text fw={"bold"}>Bulan</Text>
@@ -76,14 +81,14 @@ function DetailJumlahPengangguran() {
              <Box>
                <Flex gap={"xs"}>
                  <Button
-                  onClick={() => {
-                    if (stateDetail.findUnique.data) {
-                      setSelectedId(stateDetail.findUnique.data.id);
-                      setModalHapus(true);
-                    }
-                  }}
-                  disabled={stateDetail.delete.loading || !stateDetail.findUnique.data}
-                  color={"red"}>
+                    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={() => router.push(`/admin/ekonomi/jumlah-pengangguran/${stateDetail.findUnique.data?.id}/edit`)} color="green">
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/create/page.tsx
@@ -3,7 +3,7 @@
 'use client'
 import jumlahPengangguranState from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-pengangguran';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Select, NumberInput } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -14,10 +14,15 @@ function CreateJumlahPengangguran() {
  const [chartData, setChartData] = useState<any[]>([]);
  const router = useRouter();

+  const monthOptions = [
+    'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
+    'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'
+  ];
+
  const resetForm = () => {
    stateDetail.create.form = {
-      month: "",
-      year: 0,
+      month: monthOptions[new Date().getMonth()], // Default to current month
+      year: new Date().getFullYear(), // Default to current year
      totalUnemployment: 0,
      educatedUnemployment: 0,
      uneducatedUnemployment: 0,
@@ -68,7 +73,7 @@ function CreateJumlahPengangguran() {
        setChartData([stateDetail.findUnique.data]);
      }
      resetForm();
-      router.push('/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran');
+      router.push('/admin/ekonomi/jumlah-pengangguran');
    }
  };

@@ -76,58 +81,66 @@ function CreateJumlahPengangguran() {
    <Box>
      <Box mb={10}>
        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors['blue-button']} size={25} />
        </Button>
      </Box>
      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Title order={4}>Tambah Detail Data Pengangguran</Title>
-        <Stack gap="xs">
-          <TextInput
+        <Title order={4}>Tambah Data Pengangguran</Title>
+        <Stack gap="xs" mt="md">
+          <Select
            label="Bulan"
+            placeholder="Pilih bulan"
+            data={monthOptions}
            value={stateDetail.create.form.month}
-            placeholder="Contoh: Jan, Feb, Mar"
-            onChange={(e) => (stateDetail.create.form.month = e.currentTarget.value)}
+            onChange={(value) => {
+              stateDetail.create.form.month = value || '';
+              calculateTotalAndChange();
+            }}
+            required
          />
-          <TextInput
+          <NumberInput
            label="Tahun"
-            type="date"
            value={stateDetail.create.form.year}
-            onChange={(e) =>
-              (stateDetail.create.form.year = Number(e.currentTarget.value))
-            }
+            onChange={(value) => {
+              stateDetail.create.form.year = Number(value) || new Date().getFullYear();
+              calculateTotalAndChange();
+            }}
+            min={2000}
+            max={2100}
+            required
          />
-          <TextInput
+          <NumberInput
            label="Pengangguran Terdidik"
-            type="number"
            value={stateDetail.create.form.educatedUnemployment}
-            onChange={(e) => {
-              stateDetail.create.form.educatedUnemployment = Number(
-                e.currentTarget.value,
-              );
+            onChange={(value) => {
+              stateDetail.create.form.educatedUnemployment = Number(value) || 0;
+              calculateTotalAndChange();
            }}
+            min={0}
+            required
          />
-          <TextInput
+          <NumberInput
            label="Pengangguran Tidak Terdidik"
-            type="number"
            value={stateDetail.create.form.uneducatedUnemployment}
-            onChange={(e) => {
-              stateDetail.create.form.uneducatedUnemployment = Number(
-                e.currentTarget.value,
-              );
+            onChange={(value) => {
+              stateDetail.create.form.uneducatedUnemployment = Number(value) || 0;
+              calculateTotalAndChange();
            }}
+            min={0}
+            required
          />
          <Text fz="sm" fw={500}>
-            Total Otomatis: {stateDetail.create.form.totalUnemployment}
+            Total Otomatis: {stateDetail.create.form.totalUnemployment.toLocaleString()}
          </Text>
          <Text fz="sm" fw={500}>
-            Perubahan Otomatis:{" "}
-            {stateDetail.create.form.percentageChange !== null
-              ? `${stateDetail.create.form.percentageChange}%`
-              : '-'}
+            Perubahan Otomatis: {stateDetail.create.form.percentageChange.toFixed(1)}%
          </Text>
-          <Group>
-            <Button bg={colors['blue-button']} mt={10} onClick={handleSubmit}>
-              Submit
+          <Group mt="md">
+            <Button
+              onClick={handleSubmit}
+              disabled={!stateDetail.create.form.month || !stateDetail.create.form.year}
+            >
+              Simpan
            </Button>
          </Group>
        </Stack>
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/page.tsx
@@ -57,7 +57,7 @@ function ListDetailDataPengangguran({search}: {search: string}) {
      setChartData(stateDetail.findMany.data.map((item) => ({
        id: item.id,
        month: item.month,
-        year: item.year instanceof Date ? item.year.getFullYear() : Number(item.year),
+        year: item.year && typeof item.year === 'object' && 'getFullYear' in item.year ? (item.year as Date).getFullYear() : Number(item.year),
        educatedUnemployment: Number(item.educatedUnemployment),
        uneducatedUnemployment: Number(item.uneducatedUnemployment),
        percentageChange: Number(item.percentageChange),