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)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/[id]/page.tsx
@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'

 import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, TextInput, Title, Loader } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
@@ -14,71 +15,78 @@ export default function EditKategoriDesaAntiKorupsi() {
  const router = useRouter();
  const params = useParams();
  const id = params?.id as string;
-  const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi);

-  // state lokal untuk form
+  // 🧠 Ambil proxy asli (bisa ditulis) & snapshot (buat render)
+  const stateKategori = korupsiState.kategoriDesaAntiKorupsi;
+  const snapshotKategori = useProxy(stateKategori);
+
+  // 🧾 state lokal form
  const [formData, setFormData] = useState({ name: '' });
-  const [isLoading, setIsLoading] = useState(false);
+  const [originalData, setOriginalData] = useState({ name: '' });
+  const [isSubmitting, setIsSubmitting] = useState(false);

-  // load data kategori saat mount atau id berubah
+  // 📥 load data saat pertama kali dibuka
  useEffect(() => {
    if (!id) return;

    const loadKategori = async () => {
-      setIsLoading(true);
      try {
        const data = await stateKategori.edit.load(id);
        if (data) {
          stateKategori.edit.id = id;
-          setFormData({ name: data.name || '' });
+          const newForm = { name: data.name || '' };
+          setFormData(newForm);
+          setOriginalData(newForm);
        }
      } catch (err) {
        console.error(err);
        toast.error('Gagal memuat data kategori desa anti korupsi');
-      } finally {
-        setIsLoading(false);
      }
    };

    loadKategori();
  }, [id]);

-  // handler controlled input
-  const handleChange = useCallback(
-    (field: keyof typeof formData, value: string) => {
-      setFormData(prev => ({ ...prev, [field]: value }));
-    },
-    []
-  );
+  // ✍️ ubah value input form
+  const handleChange = (field: keyof typeof formData, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };

-  // submit form
+  // 🔁 reset ke data awal
+  const handleResetForm = () => {
+    setFormData({ ...originalData });
+    toast.info('Form dikembalikan ke data awal');
+  };
+
+  // 💾 submit update
  const handleSubmit = useCallback(async () => {
    if (!formData.name.trim()) return toast.error('Nama kategori tidak boleh kosong');

+    setIsSubmitting(true);
    try {
-      setIsLoading(true);
-
-      // update global state hanya saat submit
+      // isi form global dari local state
      stateKategori.edit.form = { name: formData.name.trim() };
-      if (!stateKategori.edit.id) stateKategori.edit.id = id;
+      stateKategori.edit.id = id;

      await stateKategori.edit.update();
+
      toast.success('Kategori berhasil diperbarui');
      router.push('/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi');
    } catch (err) {
      console.error(err);
      toast.error(err instanceof Error ? err.message : 'Gagal memperbarui kategori');
    } finally {
-      setIsLoading(false);
+      setIsSubmitting(false);
    }
-  }, [formData.name, id, router, stateKategori.edit]);
+  }, [formData.name, id, router]);

+  // 🧩 UI
  return (
    <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>
+        <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 Kategori Desa Anti Korupsi
        </Title>
@@ -96,25 +104,36 @@ export default function EditKategoriDesaAntiKorupsi() {
          <TextInput
            label="Nama Kategori"
            placeholder="Masukkan nama kategori"
-            value={formData.name} // controlled
+            value={formData.name}
            onChange={(e) => handleChange('name', e.currentTarget.value)}
            required
-            disabled={isLoading}
          />

-          <Group justify="right" mt="md">
+          <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"
-              loading={isLoading}
+              disabled={isSubmitting}
              style={{
                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>
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create/page.tsx
@@ -1,16 +1,18 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, TextInput, Title, Loader } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import korupsiState from '../../../../_state/landing-page/desa-anti-korupsi';
+import { toast } from 'react-toastify';

 export default function CreateKategoriDesaAntiKorupsi() {
  const router = useRouter();
  const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi);
+  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    stateKategori.findMany.load();
@@ -23,21 +25,29 @@ export default function CreateKategoriDesaAntiKorupsi() {
  };

  const handleSubmit = async () => {
-    if (!stateKategori.create.form.name) {
-      return alert('Nama kategori harus diisi');
+    setIsSubmitting(true);
+    try {
+      if (!stateKategori.create.form.name) {
+        return alert('Nama kategori harus diisi');
+      }
+
+      await stateKategori.create.create();
+      resetForm();
+      router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi");
+    } catch (error) {
+      console.error("Error creating kategori desa anti korupsi:", error);
+      toast.error("Gagal menambahkan kategori desa anti korupsi");
+    } finally {
+      setIsSubmitting(false);
    }
-    
-    await stateKategori.create.create();
-    resetForm();
-    router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi");
  };

  return (
    <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>
+        <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">
          Tambah Kategori Desa Anti Korupsi
        </Title>
@@ -55,12 +65,24 @@ export default function CreateKategoriDesaAntiKorupsi() {
          <TextInput
            label="Nama Kategori"
            placeholder="Masukkan nama kategori"
-            defaultValue={stateKategori.create.form.name || ''}
+            value={stateKategori.create.form.name || ''}
            onChange={(e) => (stateKategori.create.form.name = e.target.value)}
            required
          />

-          <Group justify="right" mt="md">
+          <Group justify="right">
+            {/* Tombol Batal */}
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
            <Button
              onClick={handleSubmit}
              radius="md"
@@ -71,7 +93,7 @@ export default function CreateKategoriDesaAntiKorupsi() {
                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)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/edit/page.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';

-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Loader, ActionIcon, Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack, IconFile, IconUpload, IconX } from '@tabler/icons-react';
@@ -34,9 +34,18 @@ export default function EditDesaAntiKorupsi() {
    fileId: '',
  });

+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    name: "",
+    deskripsi: "",
+    kategoriId: "",
+    fileId: "",
+    fileUrl: ""
+  });
+
  const [previewFile, setPreviewFile] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
-  const [isLoading, setIsLoading] = useState(false);

  // Load kategori
  useShallowEffect(() => {
@@ -63,6 +72,14 @@ export default function EditDesaAntiKorupsi() {
          fileId: data.fileId,
        });

+        setOriginalData({
+          name: data.name,
+          deskripsi: data.deskripsi,
+          kategoriId: data.kategoriId,
+          fileId: data.fileId,
+          fileUrl: data.file?.link || "",
+        });
+
        if (data.file?.link) setPreviewFile(data.file.link);
      } catch (err) {
        console.error(err);
@@ -91,12 +108,24 @@ export default function EditDesaAntiKorupsi() {
    setPreviewFile(URL.createObjectURL(selectedFile));
  };

+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+      deskripsi: originalData.deskripsi,
+      kategoriId: originalData.kategoriId,
+      fileId: originalData.fileId,
+    });
+    setPreviewFile(originalData.fileUrl || null);
+    setFile(null);
+    toast.info("Form dikembalikan ke data awal");
+  };
+
  const handleSubmit = async () => {
    if (!formData.name) return toast.warn('Masukkan judul dokumen');
    if (!formData.kategoriId) return toast.warn('Pilih kategori dokumen');

-    setIsLoading(true);
    try {
+      setIsSubmitting(true);
      // Update global state
      desaAntiKorupsiState.edit.form = { ...desaAntiKorupsiState.edit.form, ...formData };

@@ -116,16 +145,16 @@ export default function EditDesaAntiKorupsi() {
      console.error(err);
      toast.error('Terjadi kesalahan saat memperbarui data');
    } finally {
-      setIsLoading(false);
+      setIsSubmitting(false);
    }
  };

  return (
    <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>
+        <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 Desa Anti Korupsi
        </Title>
@@ -204,7 +233,7 @@ export default function EditDesaAntiKorupsi() {
            </Dropzone>

            {previewFile && (
-              <Box mt="md">
+              <Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
                <Text fw="bold" fz="sm" mb={6}>
                  Pratinjau Dokumen
                </Text>
@@ -219,23 +248,52 @@ export default function EditDesaAntiKorupsi() {
                >
                  <iframe src={previewFile} width="100%" height="100%" style={{ border: 'none' }} />
                </Box>
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewFile(null);
+                    setFile(null);
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
              </Box>
            )}
          </Box>

-          <Group justify="right" mt="xl">
+          <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"
-              loading={isLoading}
              style={{
                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>
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create/page.tsx
@@ -13,7 +13,9 @@ import {
  Stack,
  Text,
  TextInput,
-  Title
+  Title,
+  Loader,
+  ActionIcon,
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconFile, IconUpload, IconX } from '@tabler/icons-react';
@@ -27,7 +29,7 @@ export default function CreateDesaAntiKorupsi() {
  const stateKorupsi = useProxy(korupsiState.desaAntikorupsi);
  const [previewFile, setPreviewFile] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    stateKorupsi.findMany.load();
@@ -56,7 +58,7 @@ export default function CreateDesaAntiKorupsi() {
      return toast.warn('Pilih kategori dokumen');
    }

-    setIsLoading(true);
+    setIsSubmitting(true);
    try {
      const res = await ApiFetch.api.fileStorage.create.post({
        file,
@@ -71,7 +73,7 @@ export default function CreateDesaAntiKorupsi() {

      stateKorupsi.create.form.fileId = uploaded.id;
      await stateKorupsi.create.create();
-      
+
      toast.success('Data berhasil disimpan');
      resetForm();
      router.push('/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi');
@@ -79,15 +81,15 @@ export default function CreateDesaAntiKorupsi() {
      console.error('Error:', error);
      toast.error('Terjadi kesalahan saat menyimpan data');
    } finally {
-      setIsLoading(false);
+      setIsSubmitting(false);
    }
  };
  return (
    <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>
+        <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">
          Tambah Dokumen Desa Anti Korupsi
        </Title>
@@ -143,7 +145,7 @@ export default function CreateDesaAntiKorupsi() {
            </Dropzone>

            {previewFile && (
-              <Box mt="md" style={{ textAlign: 'center' }}>
+              <Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
                <iframe
                  src={previewFile}
                  width="100%"
@@ -154,6 +156,24 @@ export default function CreateDesaAntiKorupsi() {
                    maxWidth: '100%',
                  }}
                />
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewFile(null);
+                    setFile(null);
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
              </Box>
            )}
          </Box>
@@ -161,7 +181,7 @@ export default function CreateDesaAntiKorupsi() {
          <TextInput
            label="Judul Dokumen"
            placeholder="Masukkan judul dokumen"
-            defaultValue={stateKorupsi.create.form.name || ''}
+            value={stateKorupsi.create.form.name || ''}
            onChange={(e) => (stateKorupsi.create.form.name = e.target.value)}
            required
          />
@@ -179,32 +199,52 @@ export default function CreateDesaAntiKorupsi() {
          <Select
            label="Kategori"
            placeholder="Pilih kategori"
-            value={stateKorupsi.create.form.kategoriId || ''}
-            onChange={(val) => (stateKorupsi.create.form.kategoriId = val || '')}
-            data={
-              korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
-                value: v.id,
-                label: v.name,
-              })) || []
-            }
-            required
+            data={korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((item) => ({
+              label: item.name,
+              value: item.id,
+            })) || []}
+            value={stateKorupsi.create.form.kategoriId || null}
+            onChange={(val: string | null) => {
+              if (val) {
+                const selected = korupsiState.kategoriDesaAntiKorupsi.findMany.data?.find(
+                  (item) => item.id === val
+                );
+                if (selected) {
+                  stateKorupsi.create.form.kategoriId = selected.id;
+                }
+              } else {
+                stateKorupsi.create.form.kategoriId = '';
+              }
+            }}
            searchable
            clearable
+            nothingFoundMessage="Tidak ditemukan"
+            required
          />

-          <Group justify="right" mt="xl">
+          <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
            <Button
              onClick={handleSubmit}
              radius="md"
              size="md"
-              loading={isLoading}
              style={{
                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>