feat(admin): implement edit and delete functionality for UMKM and Produk modules

- Added update and del methods to UMKM Valtio state
- Wired up edit and delete buttons in UMKM and Produk list pages
- Integrated ModalKonfirmasiHapus for deletion safety
- Created UMKM and Produk edit pages with data loading and image previews
- Cleaned up unused imports and fixed useEffect dependencies
- Bumped version to 0.1.21

package.json

@@ -1,6 +1,6 @@
 {
   "name": "desa-darmasaba",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/admin/(dashboard)/_state/ekonomi/umkm/umkm.ts

@@ -124,6 +124,57 @@ export const umkmState = proxy({
         return false;
       }
     },
+    update: {
+      form: { ...defaultUmkmForm },
+      loading: false,
+      async submit(id: string) {
+        const cek = umkmFormSchema.safeParse(this.form);
+        if (!cek.success) return toast.error("Cek kembali form anda");
+        this.loading = true;
+        try {
+          const res = await fetch(`/api/ekonomi/umkm/update/${id}`, {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(this.form)
+          });
+          const result = await res.json();
+          if (result.success) {
+            toast.success("UMKM berhasil diperbarui");
+            umkmState.umkm.findMany.load();
+            return true;
+          }
+          toast.error(result.message);
+        } catch (e) {
+          toast.error("Gagal memperbarui UMKM");
+        } finally {
+          this.loading = false;
+        }
+        return false;
+      }
+    },
+    del: {
+      loading: false,
+      async submit(id: string) {
+        this.loading = true;
+        try {
+          const res = await fetch(`/api/ekonomi/umkm/delete/${id}`, {
+            method: "DELETE"
+          });
+          const result = await res.json();
+          if (result.success) {
+            toast.success("UMKM berhasil dihapus");
+            umkmState.umkm.findMany.load();
+            return true;
+          }
+          toast.error(result.message);
+        } catch (e) {
+          toast.error("Gagal menghapus UMKM");
+        } finally {
+          this.loading = false;
+        }
+        return false;
+      }
+    },
     findUnique: {
       data: null as any,
       loading: false,
@@ -203,6 +254,47 @@ export const umkmState = proxy({
         } catch (e) { toast.error("Gagal membuat produk"); } finally { this.loading = false; }
         return false;
       }
+    },
+    update: {
+      form: { ...defaultProdukForm },
+      loading: false,
+      async submit(id: string) {
+        const cek = produkFormSchema.safeParse(this.form);
+        if (!cek.success) return toast.error("Cek kembali form anda");
+        this.loading = true;
+        try {
+          const res = await fetch(`/api/ekonomi/umkm/produk/update/${id}`, {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(this.form)
+          });
+          const result = await res.json();
+          if (result.success) {
+            toast.success("Produk berhasil diperbarui");
+            umkmState.produk.findMany.load();
+            return true;
+          }
+        } catch (e) { toast.error("Gagal memperbarui produk"); } finally { this.loading = false; }
+        return false;
+      }
+    },
+    del: {
+      loading: false,
+      async submit(id: string) {
+        this.loading = true;
+        try {
+          const res = await fetch(`/api/ekonomi/umkm/produk/delete/${id}`, {
+            method: "DELETE"
+          });
+          const result = await res.json();
+          if (result.success) {
+            toast.success("Produk berhasil dihapus");
+            umkmState.produk.findMany.load();
+            return true;
+          }
+        } catch (e) { toast.error("Gagal menghapus produk"); } finally { this.loading = false; }
+        return false;
+      }
     }
   },
 

src/app/admin/(dashboard)/ekonomi/umkm/data-umkm/[id]/edit/page.tsx

@@ -0,0 +1,245 @@
+'use client';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Text,
+  Select,
+  ActionIcon,
+  Image,
+  Loader,
+  Center
+} from '@mantine/core';
+import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter, useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import umkmState from '../../../../../_state/ekonomi/umkm/umkm';
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import ApiFetch from '@/lib/api-fetch';
+
+export default function EditDataUmkm() {
+  const router = useRouter();
+  const params = useParams();
+  const id = params.id as string;
+  const state = useProxy(umkmState.umkm);
+  
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+
+  useEffect(() => {
+    const init = async () => {
+      await Promise.all([
+        umkmState.kategoriProduk.findManyAll.load(),
+        state.findUnique.load(id)
+      ]);
+
+      if (state.findUnique.data) {
+        const data = state.findUnique.data;
+        state.update.form = {
+          nama: data.nama || "",
+          pemilik: data.pemilik || "",
+          kategoriId: data.kategoriId || "",
+          deskripsi: data.deskripsi || "",
+          alamat: data.alamat || "",
+          kontak: data.kontak || "",
+          imageId: data.imageId || "",
+          isActive: data.isActive ?? true,
+        };
+        
+        if (data.image?.url) {
+          setPreviewImage(data.image.url);
+        }
+      }
+      setIsInitialLoading(false);
+    };
+    init();
+  }, [id, state.findUnique, state.update]);
+
+  const handleUpdate = async () => {
+    setIsSubmitting(true);
+    try {
+      // 1. Upload image if new file selected
+      let uploadedImageId = state.update.form.imageId;
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file,
+          name: file.name
+        });
+        
+        const uploaded = res.data?.data;
+        if (uploaded?.id) {
+          uploadedImageId = uploaded.id;
+        } else {
+          setIsSubmitting(false);
+          return toast.error("Gagal mengunggah logo UMKM");
+        }
+      }
+
+      // 2. Submit UMKM data
+      state.update.form.imageId = uploadedImageId;
+      const success = await state.update.submit(id);
+
+      if (success) {
+        router.push('/admin/ekonomi/umkm/data-umkm');
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Terjadi kesalahan sistem");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isInitialLoading) {
+    return (
+      <Center h={400}>
+        <Loader size="lg" />
+      </Center>
+    );
+  }
+
+  return (
+    <Box>
+      <Group mb="lg">
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          leftSection={<IconArrowBack size={20} />}
+        >
+          Kembali
+        </Button>
+        <Title order={3}>Edit Data UMKM</Title>
+      </Group>
+
+      <Paper withBorder p="xl" radius="md" shadow="sm">
+        <Stack gap="lg">
+          {/* Logo / Image UMKM */}
+          <Box>
+            <Text fw={500} size="sm" mb={4}>Logo / Foto UMKM</Text>
+            {!previewImage ? (
+              <Dropzone
+                onDrop={(files) => {
+                  const file = files[0];
+                  setFile(file);
+                  setPreviewImage(URL.createObjectURL(file));
+                }}
+                maxSize={3 * 1024 ** 2}
+                accept={IMAGE_MIME_TYPE}
+                radius="md"
+              >
+                <Group justify="center" gap="xl" mih={120} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={42} stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={42} stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={42} stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <Box>
+                    <Text size="xl" inline>
+                      Klik atau tarik gambar di sini
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 3MB
+                    </Text>
+                  </Box>
+                </Group>
+              </Dropzone>
+            ) : (
+              <Box pos="relative" w="fit-content">
+                <Image src={previewImage} h={200} radius="md" alt="Preview" />
+                <ActionIcon
+                  color="red"
+                  variant="filled"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewImage(null);
+                    setFile(null);
+                    state.update.form.imageId = "";
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
+              </Box>
+            )}
+          </Box>
+
+          <Group grow>
+            <TextInput
+              label="Nama UMKM / Bisnis"
+              placeholder="Contoh: Warung Sate Bu Komang"
+              required
+              value={state.update.form.nama}
+              onChange={(e) => (state.update.form.nama = e.target.value)}
+            />
+            <TextInput
+              label="Nama Pemilik"
+              placeholder="Masukkan nama lengkap pemilik"
+              required
+              value={state.update.form.pemilik}
+              onChange={(e) => (state.update.form.pemilik = e.target.value)}
+            />
+          </Group>
+
+          <Group grow>
+            <Select
+              label="Kategori Bisnis"
+              placeholder="Pilih kategori"
+              required
+              data={umkmState.kategoriProduk.findManyAll.data?.map(v => ({
+                value: v.id, label: v.nama
+              })) || []}
+              value={state.update.form.kategoriId}
+              onChange={(val) => (state.update.form.kategoriId = val || "")}
+            />
+            <TextInput
+              label="Nomor WA / Kontak"
+              placeholder="Contoh: 08123456789"
+              value={state.update.form.kontak}
+              onChange={(e) => (state.update.form.kontak = e.target.value)}
+            />
+          </Group>
+
+          <TextInput
+            label="Alamat Lengkap"
+            placeholder="Masukkan alamat fisik usaha"
+            value={state.update.form.alamat}
+            onChange={(e) => (state.update.form.alamat = e.target.value)}
+          />
+
+          <Box>
+            <Text fw={500} size="sm" mb={4}>Deskripsi UMKM</Text>
+            <CreateEditor
+              value={state.update.form.deskripsi || ""}
+              onChange={(val) => (state.update.form.deskripsi = val)}
+            />
+          </Box>
+
+          <Group justify="flex-end" mt="xl">
+            <Button 
+              color="blue" 
+              onClick={handleUpdate}
+              loading={isSubmitting}
+            >
+              Simpan Perubahan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}

src/app/admin/(dashboard)/ekonomi/umkm/data-umkm/page.tsx

@@ -1,5 +1,4 @@
 'use client'
-import colors from '@/con/colors';
 import {
   Box,
   Button,
@@ -15,7 +14,6 @@ import {
   TableTh,
   TableThead,
   TableTr,
-  Text,
   Title,
   TextInput
 } from '@mantine/core';
@@ -25,6 +23,7 @@ import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import umkmState from '../../../_state/ekonomi/umkm/umkm';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 
 function DataUmkm() {
   const router = useRouter();
@@ -32,10 +31,23 @@ function DataUmkm() {
   const state = useProxy(umkmState.umkm.findMany);
   const [debouncedSearch] = useDebouncedValue(search, 1000);
 
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
   useShallowEffect(() => {
     state.load(state.page, 10, debouncedSearch);
   }, [state.page, debouncedSearch]);
 
+  const handleHapus = async () => {
+    if (selectedId) {
+      const success = await umkmState.umkm.del.submit(selectedId);
+      if (success) {
+        setModalHapus(false);
+        setSelectedId(null);
+      }
+    }
+  };
+
   return (
     <Stack gap="lg">
       <Group justify="space-between">
@@ -81,10 +93,23 @@ function DataUmkm() {
                     <TableTd>{item.kontak || '-'}</TableTd>
                     <TableTd>
                       <Group gap="xs">
-                        <Button variant="subtle" color="blue" size="xs">
+                        <Button 
+                          variant="subtle" 
+                          color="blue" 
+                          size="xs"
+                          onClick={() => router.push(`/admin/ekonomi/umkm/data-umkm/${item.id}/edit`)}
+                        >
                           <IconEdit size={16} />
                         </Button>
-                        <Button variant="subtle" color="red" size="xs">
+                        <Button 
+                          variant="subtle" 
+                          color="red" 
+                          size="xs"
+                          onClick={() => {
+                            setSelectedId(item.id);
+                            setModalHapus(true);
+                          }}
+                        >
                           <IconTrash size={16} />
                         </Button>
                       </Group>
@@ -104,6 +129,13 @@ function DataUmkm() {
           />
         </Center>
       </Paper>
+
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah Anda yakin ingin menghapus UMKM ini? Menghapus UMKM juga akan berdampak pada produk dan penjualan yang terkait."
+      />
     </Stack>
   );
 }

src/app/admin/(dashboard)/ekonomi/umkm/produk/[id]/edit/page.tsx

@@ -0,0 +1,236 @@
+'use client';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Text,
+  Select,
+  ActionIcon,
+  Image,
+  NumberInput,
+  Center,
+  Loader
+} from '@mantine/core';
+import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter, useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import umkmState from '../../../../../_state/ekonomi/umkm/umkm';
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import ApiFetch from '@/lib/api-fetch';
+
+export default function EditProdukUmkm() {
+  const router = useRouter();
+  const params = useParams();
+  const id = params.id as string;
+  const state = useProxy(umkmState.produk);
+  
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+
+  useEffect(() => {
+    const init = async () => {
+      await Promise.all([
+        umkmState.umkm.findMany.load(1, 100),
+        umkmState.kategoriProduk.findManyAll.load(),
+        state.findUnique.load(id)
+      ]);
+
+      if (state.findUnique.data) {
+        const data = state.findUnique.data;
+        state.update.form = {
+          nama: data.nama || "",
+          harga: data.harga || 0,
+          stok: data.stok || 0,
+          umkmId: data.umkmId || "",
+          deskripsi: data.deskripsi || "",
+          imageId: data.imageId || "",
+          kategoriId: data.kategoriId || "",
+          isActive: data.isActive ?? true,
+        };
+
+        if (data.image?.url) {
+          setPreviewImage(data.image.url);
+        }
+      }
+      setIsInitialLoading(false);
+    };
+    init();
+  }, [id, state.findUnique, state.update]);
+
+  const handleUpdate = async () => {
+    setIsSubmitting(true);
+    try {
+      let uploadedImageId = state.update.form.imageId;
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file,
+          name: file.name
+        });
+        
+        const uploaded = res.data?.data;
+        if (uploaded?.id) {
+          uploadedImageId = uploaded.id;
+        } else {
+          setIsSubmitting(false);
+          return toast.error("Gagal mengunggah foto produk");
+        }
+      }
+
+      state.update.form.imageId = uploadedImageId;
+      const success = await state.update.submit(id);
+
+      if (success) {
+        router.push('/admin/ekonomi/umkm/produk');
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Terjadi kesalahan sistem");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isInitialLoading) {
+    return (
+      <Center h={400}>
+        <Loader size="lg" />
+      </Center>
+    );
+  }
+
+  return (
+    <Box>
+      <Group mb="lg">
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          leftSection={<IconArrowBack size={20} />}
+        >
+          Kembali
+        </Button>
+        <Title order={3}>Edit Produk UMKM</Title>
+      </Group>
+
+      <Paper withBorder p="xl" radius="md" shadow="sm">
+        <Stack gap="lg">
+          <Box>
+            <Text fw={500} size="sm" mb={4}>Foto Produk</Text>
+            {!previewImage ? (
+              <Dropzone
+                onDrop={(files) => {
+                  const file = files[0];
+                  setFile(file);
+                  setPreviewImage(URL.createObjectURL(file));
+                }}
+                maxSize={3 * 1024 ** 2}
+                accept={IMAGE_MIME_TYPE}
+                radius="md"
+              >
+                <Group justify="center" gap="xl" mih={120} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Idle>
+                    <IconPhoto size={42} stroke={1.5} />
+                  </Dropzone.Idle>
+                  <Box>
+                    <Text size="xl" inline>Pilih gambar produk</Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>Maksimal 3MB</Text>
+                  </Box>
+                </Group>
+              </Dropzone>
+            ) : (
+              <Box pos="relative" w="fit-content">
+                <Image src={previewImage} h={200} radius="md" alt="Preview" />
+                <ActionIcon 
+                  color="red" 
+                  variant="filled" 
+                  pos="absolute" 
+                  top={5} 
+                  right={5} 
+                  onClick={() => { 
+                    setPreviewImage(null); 
+                    setFile(null); 
+                    state.update.form.imageId = "";
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
+              </Box>
+            )}
+          </Box>
+
+          <Select
+            label="Pilih UMKM Pemilik"
+            placeholder="Siapa pemilik produk ini?"
+            required
+            searchable
+            data={umkmState.umkm.findMany.data?.map(v => ({
+              value: v.id, label: v.nama
+            })) || []}
+            value={state.update.form.umkmId}
+            onChange={(val) => (state.update.form.umkmId = val || "")}
+          />
+
+          <TextInput
+            label="Nama Produk"
+            placeholder="Contoh: Kripik Singkong Pedas"
+            required
+            value={state.update.form.nama}
+            onChange={(e) => (state.update.form.nama = e.target.value)}
+          />
+
+          <Group grow>
+            <NumberInput
+              label="Harga Produk (Rp)"
+              placeholder="0"
+              required
+              min={0}
+              thousandSeparator="."
+              decimalSeparator=","
+              value={state.update.form.harga}
+              onChange={(val) => (state.update.form.harga = Number(val))}
+            />
+            <NumberInput
+              label="Stok"
+              placeholder="0"
+              required
+              min={0}
+              value={state.update.form.stok}
+              onChange={(val) => (state.update.form.stok = Number(val))}
+            />
+          </Group>
+
+          <Select
+            label="Kategori Produk"
+            placeholder="Pilih kategori produk"
+            required
+            data={umkmState.kategoriProduk.findManyAll.data?.map(v => ({
+              value: v.id, label: v.nama
+            })) || []}
+            value={state.update.form.kategoriId}
+            onChange={(val) => (state.update.form.kategoriId = val || "")}
+          />
+
+          <Box>
+            <Text fw={500} size="sm" mb={4}>Deskripsi Produk</Text>
+            <CreateEditor
+              value={state.update.form.deskripsi || ""}
+              onChange={(val) => (state.update.form.deskripsi = val)}
+            />
+          </Box>
+
+          <Group justify="flex-end" mt="xl">
+            <Button color="blue" onClick={handleUpdate} loading={isSubmitting}>Simpan Perubahan</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}

src/app/admin/(dashboard)/ekonomi/umkm/produk/page.tsx

@@ -14,7 +14,6 @@ import {
   TableTh,
   TableThead,
   TableTr,
-  Text,
   Title,
   TextInput,
   Badge
@@ -25,6 +24,7 @@ import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import umkmState from '../../../_state/ekonomi/umkm/umkm';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 
 function ProdukUmkm() {
   const router = useRouter();
@@ -32,10 +32,23 @@ function ProdukUmkm() {
   const state = useProxy(umkmState.produk.findMany);
   const [debouncedSearch] = useDebouncedValue(search, 1000);
 
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
   useShallowEffect(() => {
     state.load(state.page, 10, debouncedSearch);
   }, [state.page, debouncedSearch]);
 
+  const handleHapus = async () => {
+    if (selectedId) {
+      const success = await umkmState.produk.del.submit(selectedId);
+      if (success) {
+        setModalHapus(false);
+        setSelectedId(null);
+      }
+    }
+  };
+
   return (
     <Stack gap="lg">
       <Group justify="space-between">
@@ -87,10 +100,23 @@ function ProdukUmkm() {
                     </TableTd>
                     <TableTd>
                       <Group gap="xs">
-                        <Button variant="subtle" color="blue" size="xs">
+                        <Button 
+                          variant="subtle" 
+                          color="blue" 
+                          size="xs"
+                          onClick={() => router.push(`/admin/ekonomi/umkm/produk/${item.id}/edit`)}
+                        >
                           <IconEdit size={16} />
                         </Button>
-                        <Button variant="subtle" color="red" size="xs">
+                        <Button 
+                          variant="subtle" 
+                          color="red" 
+                          size="xs"
+                          onClick={() => {
+                            setSelectedId(item.id);
+                            setModalHapus(true);
+                          }}
+                        >
                           <IconTrash size={16} />
                         </Button>
                       </Group>
@@ -110,6 +136,13 @@ function ProdukUmkm() {
           />
         </Center>
       </Paper>
+
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah Anda yakin ingin menghapus produk ini?"
+      />
     </Stack>
   );
 }