Fix QC Kak Inno Admin, Fix QC Keano UI User, Fix QC Pak jun tabel apbdes

2025-11-12 17:42:31 +08:00
parent 417a8937f5
commit 9622eb5a9a
354 changed files with 11444 additions and 4012 deletions
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx
@@ -8,6 +8,7 @@ import {
  Box,
  Button,
  Group,
+  Loader,
  Paper,
  Stack,
  Text,
@@ -24,6 +25,7 @@ function EditKontakItem() {
  const router = useRouter();
  const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
  const params = useParams();
+  const [isSubmitting, setIsSubmitting] = useState(false);

  const [formData, setFormData] = useState({
    name: '',
@@ -31,6 +33,12 @@ function EditKontakItem() {
    icon: '',
  });

+  const [originalData, setOriginalData] = useState({
+    name: '',
+    nomorTelepon: '',
+    icon: '',
+  });
+
  // Load data sekali dari global state
  useEffect(() => {
    const loadKontakDarurat = async () => {
@@ -45,6 +53,11 @@ function EditKontakItem() {
            nomorTelepon: data.nomorTelepon || '',
            icon: data.icon || '',
          });
+          setOriginalData({
+            name: data.nama || '',
+            nomorTelepon: data.nomorTelepon || '',
+            icon: data.icon || '',
+          });
        }
      } catch (error) {
        console.error('Error loading kontak darurat:', error);
@@ -62,8 +75,18 @@ function EditKontakItem() {
    }));
  };

+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+      nomorTelepon: originalData.nomorTelepon,
+      icon: originalData.icon,
+    });
+    toast.info('Form dikembalikan ke data awal');
+  };
+
  const handleSubmit = async () => {
    try {
+      setIsSubmitting(true);
      // Update global state sekali pas submit
      kontakState.update.form = {
        ...kontakState.update.form,
@@ -78,6 +101,8 @@ function EditKontakItem() {
    } catch (error) {
      console.error('Error updating kontak darurat:', error);
      toast.error('Terjadi kesalahan saat memperbarui kontak darurat');
+    } finally {
+      setIsSubmitting(false);
    }
  };

@@ -130,6 +155,17 @@ function EditKontakItem() {
          </Box>

          <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
            <Button
              onClick={handleSubmit}
              radius="md"
@@ -140,7 +176,7 @@ function EditKontakItem() {
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
            >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
            </Button>
          </Group>
        </Stack>
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/create/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/create/page.tsx
@@ -6,6 +6,7 @@ import {
  Box,
  Button,
  Group,
+  Loader,
  Paper,
  Stack,
  Text,
@@ -14,11 +15,14 @@ import {
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

 function CreateKontakItem() {
  const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
  const resetForm = () => {
    kontakState.create.form = {
      nama: '',
@@ -28,9 +32,17 @@ function CreateKontakItem() {
  };

  const handleSubmit = async () => {
-    await kontakState.create.create();
-    resetForm();
-    router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item');
+    try {
+      setIsSubmitting(true);
+      await kontakState.create.create();
+      resetForm();
+      router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item');
+    } catch (error) {
+      console.error("Error creating kontak darurat item:", error);
+      toast.error("Gagal menambahkan kontak darurat item");
+    } finally {
+      setIsSubmitting(false);
+    }
  };

  return (
@@ -62,7 +74,7 @@ function CreateKontakItem() {
        <Stack gap="md">
          {/* Input Nama Kategori */}
          <TextInput
-            defaultValue={kontakState.create.form.nama}
+            value={kontakState.create.form.nama}
            onChange={(val) => {
              kontakState.create.form.nama = val.target.value;
            }}
@@ -74,7 +86,7 @@ function CreateKontakItem() {
          <TextInput
            label={<Text fw="bold" fz="sm">Nomor Telepon Kontak</Text>}
            placeholder="Masukkan nomor telepon"
-            defaultValue={kontakState.create.form.nomorTelepon}
+            value={kontakState.create.form.nomorTelepon}
            onChange={(val) => {
              kontakState.create.form.nomorTelepon = val.target.value;
            }}
@@ -88,6 +100,17 @@ function CreateKontakItem() {

          {/* Tombol Submit */}
          <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
            <Button
              onClick={handleSubmit}
              radius="md"
@@ -98,7 +121,7 @@ function CreateKontakItem() {
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
            >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
            </Button>
          </Group>
        </Stack>
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx
@@ -1,72 +1,125 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-"use client";
+'use client';

-import { IconKey } from "@/app/admin/(dashboard)/_com/iconMap";
-import SelectIconProgramEdit from "@/app/admin/(dashboard)/_com/selectIconEdit";
-import kontakDarurat from "@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan";
-import colors from "@/con/colors";
+import { IconKey } from '@/app/admin/(dashboard)/_com/iconMap';
+import SelectIconProgramEdit from '@/app/admin/(dashboard)/_com/selectIconEdit';
+import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
+import colors from '@/con/colors';
 import {
  Box,
  Button,
  Group,
+  Loader,
  MultiSelect,
  Paper,
  Stack,
  Text,
  TextInput,
-  Title
-} from "@mantine/core";
-import { IconArrowBack } from "@tabler/icons-react";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { toast } from "react-toastify";
-import { useProxy } from "valtio/utils";
+  Title,
+} from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';

-function EditKontakDaruratKeamanan() {
+type FormData = {
+  name: string;
+  icon: IconKey | '';
+  kategoriId: string[];
+};
+
+export default function EditKontakDaruratKeamanan() {
  const router = useRouter();
-  const params = useParams();
+  const params = useParams<{ id: string }>();
  const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);

-  const [isLoading, setIsLoading] = useState(true);
-  // Remove the dependency on data in the initial state
-  const [formData, setFormData] = useState({
-    name: "",
-    icon: "" as IconKey | "",
-    kategoriId: [] as string[],  // Initialize as empty array
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState<FormData>({
+    name: '',
+    icon: '',
+    kategoriId: [],
+  });
+  const [originalData, setOriginalData] = useState<FormData>({
+    name: '',
+    icon: '',
+    kategoriId: [],
  });

-  // Load data dari backend
+  // 🔁 Load data saat ID berubah
  useEffect(() => {
-    const loadData = async () => {
+    const loadInitialData = async () => {
+      const id = params?.id;
+      if (!id) {
+        toast.error('ID tidak valid');
+        router.push('/admin/keamanan/kontak-darurat');
+        return;
+      }
+
      try {
-        setIsLoading(true);
+        // Load dropdown kategori
        await kontakDarurat.kontakDaruratItem.findMany.load();

-        const id = params?.id as string;
-        if (id) {
-          const data = await kontakState.update.load(id);
-          if (data) {
-            setFormData({
-              name: data.nama || "",
-              icon: (data.icon as IconKey) || "",
-              kategoriId: Array.isArray(data.kategoriId) ? data.kategoriId : [],
-            });
-          }
+        // Load data kontak darurat
+        const data = await kontakState.update.load(id);
+        if (!data) {
+          toast.error('Data tidak ditemukan');
+          router.push('/admin/keamanan/kontak-darurat');
+          return;
        }
-      } catch (error) {
-        console.error("Error loading data:", error);
-        toast.error("Gagal memuat data");
-      } finally {
-        setIsLoading(false);
+
+        const initial: FormData = {
+          name: data.nama || '',
+          icon: (data.icon as IconKey) || '',
+          kategoriId: Array.isArray(data.kategoriId) ? data.kategoriId : [],
+        };
+
+        setFormData(initial);
+        setOriginalData(initial);
+      } catch (err) {
+        console.error('Gagal memuat data:', err);
+        toast.error('Gagal memuat data kontak darurat');
+        router.push('/admin/keamanan/kontak-darurat');
      }
    };

-    loadData();
+    loadInitialData();
  }, [params?.id]);

-  // Handle submit
+  // Debug: Log the kontakDaruratItem data
+  useEffect(() => {
+    if (kontakDarurat.kontakDaruratItem.findMany.data) {
+      console.log('Kontak Item Data:', kontakDarurat.kontakDaruratItem.findMany.data);
+    }
+  }, [kontakDarurat.kontakDaruratItem.findMany.data]);
+
+  // 📝 Update field
+  const updateField = <K extends keyof FormData>(field: K, value: FormData[K]) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  // ↩️ Reset ke data awal
+  const handleResetForm = () => {
+    setFormData(originalData);
+    toast.info('Form dikembalikan ke data awal');
+  };
+
+  // 💾 Simpan
  const handleSubmit = async () => {
+    if (!formData.name.trim()) {
+      toast.error('Nama kontak darurat wajib diisi');
+      return;
+    }
+
+    if (formData.kategoriId.length === 0) {
+      toast.error('Pilih minimal satu kontak item');
+      return;
+    }
+
    try {
+      setIsSubmitting(true);
+
+      // Sinkronisasi ke Valtio state (jika digunakan di `update`)
      kontakState.update.form = {
        ...kontakState.update.form,
        nama: formData.name,
@@ -74,112 +127,103 @@ function EditKontakDaruratKeamanan() {
        kategoriId: formData.kategoriId,
      };

-      await kontakState.update.update();
-      toast.success("Kontak Darurat berhasil diperbarui!");
-      router.push("/admin/keamanan/kontak-darurat");
+      const success = await kontakState.update.update();
+      if (success) {
+        toast.success('Kontak Darurat berhasil diperbarui!');
+        router.push('/admin/keamanan/kontak-darurat');
+      }
    } catch (error) {
-      console.error("Error updating kontak darurat:", error);
-      toast.error("Terjadi kesalahan saat memperbarui kontak darurat");
+      console.error('Error saat menyimpan:', error);
+      toast.error('Terjadi kesalahan saat menyimpan data');
+    } finally {
+      setIsSubmitting(false);
    }
  };

+  // 📋 Daftar opsi kategori untuk MultiSelect
+  const kategoriOptions = (kontakDarurat.kontakDaruratItem.findMany.data || []).map((item: { id: string; nama: string }) => ({
+    value: item.id,
+    label: item.nama,
+  }));
+
  return (
-    <Box px={{ base: "sm", md: "lg" }} py="md">
-      {/* Header */}
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
      <Group mb="md">
-        <Button
-          variant="subtle"
-          onClick={() => router.back()}
-          p="xs"
-          radius="md"
-        >
-          <IconArrowBack color={colors["blue-button"]} size={24} />
+        <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <IconArrowBack color={colors['blue-button']} size={24} />
        </Button>
        <Title order={4} ml="sm" c="dark">
          Edit Kontak Darurat Keamanan
        </Title>
      </Group>

-      {/* Form */}
      <Paper
-        w={{ base: "100%", md: "50%" }}
-        bg={colors["white-1"]}
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
        p="lg"
        radius="md"
        shadow="sm"
-        style={{ border: "1px solid #e0e0e0" }}
+        style={{ border: '1px solid #e0e0e0' }}
      >
        <Stack gap="md">
-          {/* Nama Kontak */}
          <TextInput
-            value={formData.name}
-            onChange={(e) =>
-              setFormData((prev) => ({ ...prev, name: e.target.value }))
-            }
-            label="Nama Kontak Darurat"
+            label={<Text fw="bold">Nama Kontak Darurat</Text>}
            placeholder="Masukkan nama kontak darurat"
+            value={formData.name}
+            onChange={(e) => updateField('name', e.target.value)}
            required
          />

-          {/* MultiSelect */}
          <MultiSelect
+            label={<Text fw="bold" fz="sm">Kontak Item</Text>}
+            placeholder="Pilih kontak item"
+            data={kategoriOptions}
            value={formData.kategoriId}
-            onChange={(val) =>
-              setFormData((prev) => ({ ...prev, kategoriId: val }))
-            }
-            label={<Text fw={"bold"} fz={"sm"}>Kontak Item</Text>}
-            placeholder={isLoading ? "Memuat data..." : "Pilih kontak item"}
-            data={
-              Array.isArray(kontakDarurat.kontakDaruratItem.findMany.data)
-                ? kontakDarurat.kontakDaruratItem.findMany.data.map((v) => ({
-                  value: v.id,
-                  label: v.nama,
-                }))
-                : []
-            }
+            onChange={(values) => updateField('kategoriId', values)}
            clearable
            searchable
            required
-            error={
-              !formData.kategoriId.length
-                ? "Pilih minimal satu kategori"
-                : undefined
-            }
-            disabled={isLoading}
+            error={!formData.kategoriId.length ? 'Pilih minimal satu kategori' : undefined}
          />

-          {/* Icon Select */}
          <Box>
-            <Text fz={"sm"} fw={"bold"}>
+            <Text fz="sm" fw="bold" mb="xs">
              Ikon Program Kreatif Desa
            </Text>
            <SelectIconProgramEdit
-              value={formData.icon as IconKey}
-              onChange={(value) =>
-                setFormData((prev) => ({ ...prev, icon: value }))
-              }
+              value={formData.icon}
+              onChange={(icon) => updateField('icon', icon)}
            />
          </Box>

-          {/* Submit */}
          <Group justify="right">
+            {/* Tombol Batal */}
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
            <Button
              onClick={handleSubmit}
              radius="md"
              size="md"
              style={{
-                background: `linear-gradient(135deg, ${colors["blue-button"]}, #4facfe)`,
-                color: "#fff",
-                boxShadow: "0 4px 15px rgba(79, 172, 254, 0.4)",
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
            >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
            </Button>
          </Group>
        </Stack>
      </Paper>
    </Box>
  );
-}
-
-export default EditKontakDaruratKeamanan;
+}
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/create/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/create/page.tsx
@@ -6,6 +6,7 @@ import {
  Box,
  Button,
  Group,
+  Loader,
  MultiSelect,
  Paper,
  Stack,
@@ -16,11 +17,14 @@ import {
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

 function CreateKontakDaruratKeamanan() {
  const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);

  useShallowEffect(() => {
    kontakDarurat.kontakDaruratItem.findMany.load();
@@ -35,9 +39,17 @@ function CreateKontakDaruratKeamanan() {
  };

  const handleSubmit = async () => {
-    await kontakState.create.create();
-    resetForm();
-    router.push('/admin/keamanan/kontak-darurat/kontak-darurat-keamanan');
+    try {
+      setIsSubmitting(true);
+      await kontakState.create.create();
+      resetForm();
+      router.push('/admin/keamanan/kontak-darurat/kontak-darurat-keamanan');
+    } catch (error) {
+      console.error('Error creating kontak darurat:', error);
+      toast.error('Terjadi kesalahan saat menambah kontak darurat');
+    } finally {
+      setIsSubmitting(false);
+    }
  };

  return (
@@ -69,7 +81,7 @@ function CreateKontakDaruratKeamanan() {
        <Stack gap="md">
          {/* Input Nama Kategori */}
          <TextInput
-            defaultValue={kontakState.create.form.nama}
+            value={kontakState.create.form.nama}
            onChange={(val) => {
              kontakState.create.form.nama = val.target.value;
            }}
@@ -100,6 +112,17 @@ function CreateKontakDaruratKeamanan() {

          {/* Tombol Submit */}
          <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
            <Button
              onClick={handleSubmit}
              radius="md"
@@ -110,7 +133,7 @@ function CreateKontakDaruratKeamanan() {
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
              }}
            >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
            </Button>
          </Group>
        </Stack>