API & UI Menu Ekonomi, Submenu Jumlah Pengangguran

2025-07-10 00:21:33 +08:00
parent d328f64d86
commit 7b2b306849
55 changed files with 205 additions and 1316 deletions
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/create/page.tsx
@@ -0,0 +1,139 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'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 { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function CreateJumlahPengangguran() {
+  const stateDetail = useProxy(jumlahPengangguranState.jumlahPengangguran)
+  const [chartData, setChartData] = useState<any[]>([]);
+  const router = useRouter();
+
+  const resetForm = () => {
+    stateDetail.create.form = {
+      month: "",
+      year: 0,
+      totalUnemployment: 0,
+      educatedUnemployment: 0,
+      uneducatedUnemployment: 0,
+      percentageChange: 0,
+    }
+  }
+
+  const calculateTotalAndChange = async () => {
+    const total =
+      stateDetail.create.form.educatedUnemployment +
+      stateDetail.create.form.uneducatedUnemployment;
+
+    stateDetail.create.form.totalUnemployment = total;
+
+    // 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() === stateDetail.create.form.month.toLowerCase()
+    );
+
+    if (currentIndex > 0) {
+      const prevMonth = monthOrder[currentIndex - 1];
+      const prev = await stateDetail.findByMonthYear.load({
+        month: prevMonth,
+        year: stateDetail.create.form.year,
+      });
+
+      if (prev?.totalUnemployment) {
+        const change = ((total - prev.totalUnemployment) / prev.totalUnemployment) * 100;
+        stateDetail.create.form.percentageChange = Number(change.toFixed(1));
+      } else {
+        stateDetail.create.form.percentageChange = 0;
+      }
+    } else {
+      stateDetail.create.form.percentageChange = 0;
+    }
+  };
+
+  const handleSubmit = async () => {
+    await calculateTotalAndChange();
+    const id = await stateDetail.create.create();
+    if (id) {
+      await stateDetail.findUnique.load(String(id));
+      if (stateDetail.findUnique.data) {
+        setChartData([stateDetail.findUnique.data]);
+      }
+      resetForm();
+      router.push('/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran');
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <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
+            label="Bulan"
+            value={stateDetail.create.form.month}
+            placeholder="Contoh: Jan, Feb, Mar"
+            onChange={(e) => (stateDetail.create.form.month = e.currentTarget.value)}
+          />
+          <TextInput
+            label="Tahun"
+            type="number"
+            value={stateDetail.create.form.year}
+            onChange={(e) =>
+              (stateDetail.create.form.year = Number(e.currentTarget.value))
+            }
+          />
+          <TextInput
+            label="Pengangguran Terdidik"
+            type="number"
+            value={stateDetail.create.form.educatedUnemployment}
+            onChange={(e) => {
+              stateDetail.create.form.educatedUnemployment = Number(
+                e.currentTarget.value,
+              );
+            }}
+          />
+          <TextInput
+            label="Pengangguran Tidak Terdidik"
+            type="number"
+            value={stateDetail.create.form.uneducatedUnemployment}
+            onChange={(e) => {
+              stateDetail.create.form.uneducatedUnemployment = Number(
+                e.currentTarget.value,
+              );
+            }}
+          />
+          <Text fz="sm" fw={500}>
+            Total Otomatis: {stateDetail.create.form.totalUnemployment}
+          </Text>
+          <Text fz="sm" fw={500}>
+            Perubahan Otomatis:{" "}
+            {stateDetail.create.form.percentageChange !== null
+              ? `${stateDetail.create.form.percentageChange}%`
+              : '-'}
+          </Text>
+          <Group>
+            <Button bg={colors['blue-button']} mt={10} onClick={handleSubmit}>
+              Submit
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateJumlahPengangguran;