UI & API Menu Keamanan, Kontak Darurat

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@cubejs-client/core": "^0.31.0",
     "@elysiajs/cors": "^1.2.0",
-    "@elysiajs/eden": "^1.2.0",
+    "@elysiajs/eden": "^1.3.2",
     "@elysiajs/static": "^1.3.0",
     "@elysiajs/stream": "^1.1.0",
     "@elysiajs/swagger": "^1.2.0",
@@ -46,7 +46,7 @@
     "bun": "^1.2.2",
     "chart.js": "^4.4.8",
     "dayjs": "^1.11.13",
-    "elysia": "^1.2.12",
+    "elysia": "^1.3.5",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^7.1.0",
     "form-data": "^4.0.2",

src/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan.ts

@@ -0,0 +1,259 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  nama: z.string().min(1, "Nama minimal 1 karakter"),
+  imageId: z.string().nonempty(),
+  kontakItems: z.array(
+    z.object({
+      nama: z.string().min(1, "Nama minimal 1 karakter"),
+      nomorTelepon: z.string().min(1, "Nomor Telepon minimal 1 karakter"),
+      imageId: z.string().nonempty(),
+    })
+  ),
+});
+
+const defaultForm = {
+  nama: "",
+  imageId: "",
+  kontakItems: [
+    {
+      nama: "",
+      nomorTelepon: "",
+      imageId: "",
+    },
+  ],
+};
+
+const kontakDaruratKeamananState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(
+        kontakDaruratKeamananState.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        kontakDaruratKeamananState.create.loading = true;
+        const res = await ApiFetch.api.keamanan.kontakdaruratkeamanan[
+          "create"
+        ].post(kontakDaruratKeamananState.create.form);
+        if (res.status === 200) {
+          kontakDaruratKeamananState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        kontakDaruratKeamananState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.KontakDaruratKeamananGetPayload<{
+          include: {
+            kontakItems: true;
+            image: true;
+          };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.keamanan.kontakdaruratkeamanan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        kontakDaruratKeamananState.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KontakDaruratKeamananGetPayload<{
+      include: {
+        kontakItems: {
+          include: {
+            image: true;
+          };
+        };
+        image: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/keamanan/kontakdaruratkeamanan/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kontakDaruratKeamananState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kontakDaruratKeamananState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kontakDaruratKeamananState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        kontakDaruratKeamananState.delete.loading = true;
+        const response = await fetch(
+          `/api/keamanan/kontakdaruratkeamanan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kontak darurat berhasil dihapus");
+          await kontakDaruratKeamananState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kontak darurat");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kontak darurat");
+      } finally {
+        kontakDaruratKeamananState.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/keamanan/kontakdaruratkeamanan/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            imageId: data.imageId,
+            kontakItems: [
+              {
+                nama: data.kontakItems.nama,
+                nomorTelepon: data.kontakItems.nomorTelepon,
+                imageId: data.kontakItems.imageId,
+              },
+            ],
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kontak darurat:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateForm.safeParse(
+        kontakDaruratKeamananState.update.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kontakDaruratKeamananState.update.loading = true;
+        const response = await fetch(
+          `/api/keamanan/kontakdaruratkeamanan/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: this.form.nama,
+              imageId: this.form.imageId,
+              kontakItems: [
+                {
+                  nama: this.form.kontakItems[0].nama,
+                  nomorTelepon: this.form.kontakItems[0].nomorTelepon,
+                  imageId: this.form.kontakItems[0].imageId,
+                },
+              ],
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update kontak darurat");
+          await kontakDaruratKeamananState.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate kontak darurat");
+        }
+      } catch (error) {
+        console.error("Error updating kontak darurat:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate kontak darurat"
+        );
+        return false;
+      } finally {
+        kontakDaruratKeamananState.update.loading = false;
+      }
+    },
+    reset() {
+      kontakDaruratKeamananState.update.id = "";
+      kontakDaruratKeamananState.update.form = { ...defaultForm };
+    },
+  },
+});
+
+export default kontakDaruratKeamananState;

src/app/admin/(dashboard)/keamanan/kontak-darurat/[id]/edit/page.tsx

@@ -0,0 +1,269 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import kontakDaruratKeamananState from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } 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 EditKontakDarurat() {
+  const router = useRouter();
+  const kontakState = useProxy(kontakDaruratKeamananState)
+  const params = useParams()
+
+  const [previewUtama, setPreviewUtama] = useState<string | null>(null);
+  const [fileUtama, setFileUtama] = useState<File | null>(null);
+  const [previewItem, setPreviewItem] = useState<string | null>(null);
+  const [fileItem, setFileItem] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: kontakState.update.form.nama || '',
+    imageId: kontakState.update.form.imageId || '',
+    kontakItem: {
+      nama: kontakState.update.form.kontakItems[0].nama || '',
+      nomorTelepon: kontakState.update.form.kontakItems[0].nomorTelepon || '',
+      imageId: kontakState.update.form.kontakItems[0].imageId || '',
+    }
+  })
+
+  useEffect(() => {
+    const loadKontakDarurat = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await kontakState.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.nama || '',
+            imageId: data.imageId || '',
+            kontakItem: {
+              nama: data.kontakItems[0].nama || '',
+              nomorTelepon: data.kontakItems[0].nomorTelepon || '',
+              imageId: data.kontakItems[0].imageId || '',
+            },
+          });
+
+          if (data?.image?.link) {
+            setPreviewUtama(data.image.link);
+          }
+          if (data?.kontakItems[0].image?.link) {
+            setPreviewItem(data.kontakItems[0].image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading kontak darurat:", error);
+        toast.error("Gagal memuat data kontak darurat");
+      }
+    };
+
+    loadKontakDarurat();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      kontakState.update.form = {
+        ...kontakState.update.form,
+        nama: formData.name,
+        imageId: formData.imageId,
+        kontakItems: [
+          {
+            nama: formData.kontakItem.nama,
+            nomorTelepon: formData.kontakItem.nomorTelepon,
+            imageId: formData.kontakItem.imageId,
+          },
+        ],
+      }
+
+      if(fileUtama) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file: fileUtama, name: fileUtama.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        kontakState.update.form.imageId = uploaded.id;
+      }
+      if(fileItem) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file: fileItem, name: fileItem.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        kontakState.update.form.kontakItems[0].imageId = uploaded.id;
+      }
+
+      await kontakState.update.update();
+      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");
+    }
+  }
+
+  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'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Kontak Darurat</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(val) => {
+              setFormData({ ...formData, name: val.target.value });
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Darurat</Text>}
+            placeholder='Masukkan nama Kategori Darurat'
+          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFileUtama(selectedFile);
+                    setPreviewUtama(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewUtama && (
+                <Box mt="sm">
+                  <Image
+                    src={previewUtama}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kontak</Text>}
+            placeholder='Masukkan nama Kontak'
+            value={formData.kontakItem.nama}
+            onChange={(val) => {
+              setFormData({ ...formData, kontakItem: { ...formData.kontakItem, nama: val.target.value } });
+            }}
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Kontak</Text>}
+            placeholder='Masukkan nomor telepon Kontak'
+            value={formData.kontakItem.nomorTelepon}
+            onChange={(val) => {
+              setFormData({ ...formData, kontakItem: { ...formData.kontakItem, nomorTelepon: val.target.value } });
+            }}
+          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFileItem(selectedFile);
+                    setPreviewItem(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewItem && (
+                <Box mt="sm">
+                  <Image
+                    src={previewItem}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKontakDarurat;

src/app/admin/(dashboard)/keamanan/kontak-darurat/[id]/page.tsx

@@ -0,0 +1,117 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image, Skeleton } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter,useParams } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import { useProxy } from 'valtio/utils';
+import kontakDaruratKeamananState from '../../../_state/keamanan/kontak-darurat-keamanan';
+import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailKontakDarurat() {
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+  const params = useParams()
+  const kontakState = useProxy(kontakDaruratKeamananState)
+
+  useShallowEffect(() => {
+    kontakState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleDelete = () => {
+    if (selectedId) {
+      kontakState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/keamanan/kontak-darurat")
+    }
+  }
+
+  if (!kontakState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={40} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+    <Box mb={10}>
+      <Button variant="subtle" onClick={() => router.back()}>
+        <IconArrowBack color={colors['blue-button']} size={25} />
+      </Button>
+    </Box>
+    <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+      <Stack>
+        <Text fz={"xl"} fw={"bold"}>Detail Kontak Darurat</Text>
+        {kontakState.findUnique.data ? (
+          <Paper key={kontakState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Judul Kontak Darurat</Text>
+                <Text fz={"lg"}>{kontakState.findUnique.data?.nama}</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                <Image w={{ base: 150, md: 150, lg: 150 }} src={kontakState.findUnique.data?.image?.link} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Kontak</Text>
+                <Stack>
+                  {kontakState.findUnique.data?.kontakItems.map((item, index) => (
+                    <Box key={index}>
+                      <Text fz={"lg"}>{item.nama}</Text>
+                      <Text fz={"lg"}>{item.nomorTelepon}</Text>
+                      <Image w={{ base: 150, md: 150, lg: 150 }} src={item.image?.link} alt="gambar" />
+                    </Box>
+                  ))}
+                </Stack>
+              </Box>
+              <Flex gap={"xs"} mt={10}>
+                <Button
+                  onClick={() => {
+                    if (kontakState.findUnique.data) {
+                      setSelectedId(kontakState.findUnique.data.id);
+                      setModalHapus(true);
+                    }
+                  }}
+                  disabled={kontakState.delete.loading || !kontakState.findUnique.data}
+                  color={"red"}
+                >
+                  <IconX size={20} />
+                </Button>
+                <Button
+                  onClick={() => {
+                    if (kontakState.findUnique.data) {
+                      router.push(`/admin/keamanan/kontak-darurat/${kontakState.findUnique.data.id}/edit`);
+                    }
+                  }}
+                  disabled={!kontakState.findUnique.data}
+                  color={"green"}
+                >
+                  <IconEdit size={20} />
+                </Button>
+              </Flex>
+            </Stack>
+          </Paper>
+        ) : null}
+      </Stack>
+    </Paper>
+
+    {/* Modal Konfirmasi Hapus */}
+    <ModalKonfirmasiHapus
+      opened={modalHapus}
+      onClose={() => setModalHapus(false)}
+      onConfirm={handleDelete}
+      text='Apakah anda yakin ingin menghapus kontak darurat ini?'
+    />
+  </Box>
+  );
+}
+
+export default DetailKontakDarurat;

src/app/admin/(dashboard)/keamanan/kontak-darurat/create/page.tsx

@@ -1,43 +1,236 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import ApiFetch from '@/lib/api-fetch';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../_com/keamananEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import kontakDaruratKeamananState from '../../../_state/keamanan/kontak-darurat-keamanan';
+
 
 function CreateKontakDarurat() {
+  const kontakState = useProxy(kontakDaruratKeamananState)
   const router = useRouter();
+  const [fileUtama, setFileUtama] = useState<File | null>(null);
+  const [previewUtama, setPreviewUtama] = useState<string | null>(null);
+  const [fileItem, setFileItem] = useState<File | null>(null);
+  const [previewItem, setPreviewItem] = useState<string | null>(null);
+
+
+  const resetForm = () => {
+    kontakState.create.form = {
+      nama: "",
+      imageId: "",
+      kontakItems: [
+        {
+          nama: "",
+          nomorTelepon: "",
+          imageId: "",
+        },
+      ],
+    }
+    setPreviewUtama(null);
+    setFileUtama(null);
+    setPreviewItem(null);
+    setFileItem(null);
+  }
+
+  const handleSubmit = async () => {
+    if (!fileUtama) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file: fileUtama,
+      name: fileUtama.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    kontakState.create.form.imageId = uploaded.id;
+
+    if (!fileItem) {
+      return toast.error("Pilih file gambar terlebih dahulu");
+    }
+
+    const resItem = await ApiFetch.api.fileStorage.create.post({
+      file: fileItem,
+      name: fileItem.name,
+    })
+
+    const uploadedItem = resItem.data?.data;
+
+    if (!uploadedItem?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    kontakState.create.form.kontakItems[0].imageId = uploadedItem.id;
+
+    await kontakState.create.create();
+
+    resetForm();
+    router.push('/admin/keamanan/kontak-darurat');
+  }
   return (
     <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'}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Kontak Darurat</Title>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
-          </Box>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Kontak Darurat</Text>}
+            value={kontakState.create.form.nama}
-          placeholder='Masukkan nama Kontak Darurat'
+            onChange={(val) => {
+              kontakState.create.form.nama = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Darurat</Text>}
+            placeholder='Masukkan nama Kategori Darurat'
           />
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Kontak Darurat</Text>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <KeamananEditor
+            <Box>
-              showSubmit={false}
+              <Dropzone
-            />
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFileUtama(selectedFile);
+                    setPreviewUtama(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewUtama && (
+                <Box mt="sm">
+                  <Image
+                    src={previewUtama}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kontak</Text>}
+            placeholder='Masukkan nama Kontak'
+            value={kontakState.create.form.kontakItems[0].nama}
+            onChange={(val) => {
+              kontakState.create.form.kontakItems[0].nama = val.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Kontak</Text>}
+            placeholder='Masukkan nomor telepon Kontak'
+            value={kontakState.create.form.kontakItems[0].nomorTelepon}
+            onChange={(val) => {
+              kontakState.create.form.kontakItems[0].nomorTelepon = val.target.value;
+            }}
+          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFileItem(selectedFile);
+                    setPreviewItem(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewItem && (
+                <Box mt="sm">
+                  <Image
+                    src={previewItem}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
           </Box>
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/keamanan/kontak-darurat/detail/page.tsx

@@ -1,70 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailKontakDarurat() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Kontak Darurat</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Kontak Darurat</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nomor Kontak Darurat</Text>
-                <Text fz={"lg"}>Test Kategori</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"}>Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Konten</Text>
-                <Text fz={"lg"} >Test Konten</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/keamanan/kontak-darurat/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailKontakDarurat;

src/app/admin/(dashboard)/keamanan/kontak-darurat/edit/page.tsx

@@ -1,44 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../_com/keamananEditor';
-
-function EditKontakDarurat() {
-  const router = useRouter();
-  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'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Kontak Darurat</Title>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
-          </Box>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Kontak Darurat</Text>}
-          placeholder='Masukkan nama Kontak Darurat'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Kontak Darurat</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditKontakDarurat;

src/app/admin/(dashboard)/keamanan/kontak-darurat/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import kontakDaruratKeamananState from '../../_state/keamanan/kontak-darurat-keamanan';
+import { useShallowEffect } from '@mantine/hooks';
 
 function KontakDaurat() {
   return (
@@ -20,7 +23,20 @@ function KontakDaurat() {
 }
 
 function ListKontakDaurat() {
+  const kontakState = useProxy(kontakDaruratKeamananState)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    kontakState.findMany.load()
+  }, [])
+
+  if (!kontakState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -31,23 +47,25 @@ function ListKontakDaurat() {
         <Table striped withTableBorder withRowBorders>
           <TableThead>
             <TableTr>
-              <TableTh>Nama Kontak Darurat</TableTh>
+              <TableTh>Nama Kategori Darurat</TableTh>
-              <TableTh>Nomor Kontak Darurat</TableTh>
+              <TableTh>Nama Kontak</TableTh>
-              <TableTh>Deskripsi</TableTh>
+              <TableTh>Nomor Kontak</TableTh>
               <TableTh>Detail</TableTh>
               </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
+            {kontakState.findMany.data?.map((item) => (
-              <TableTd>Kontak Darurat 1</TableTd>
+              <TableTr key={item.id}>
-              <TableTd>0896232831883</TableTd>
+                <TableTd>{item.nama}</TableTd>
-              <TableTd>Kontak Darurat 1</TableTd>
+                <TableTd>{item.kontakItems[0].nama}</TableTd>
-              <TableTd>
+                <TableTd>{item.kontakItems[0].nomorTelepon}</TableTd>
-                <Button onClick={() => router.push('/admin/keamanan/kontak-darurat/detail')}>
+                <TableTd>
-                  <IconDeviceImac size={20} />
+                  <Button onClick={() => router.push(`/admin/keamanan/kontak-darurat/${item.id}`)}>
-                </Button>
+                    <IconDeviceImac size={20} />
-              </TableTd>
+                  </Button>
-            </TableTr>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
         </Table>  
       </Paper>

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/del.ts

@@ -1,5 +1,7 @@
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
 
 export default async function kontakDaruratKeamananDelete(context: Context){
     const id = context.params?.id as string;
@@ -19,6 +21,10 @@ export default async function kontakDaruratKeamananDelete(context: Context){
 
     const kontakDaruratKeamanan = await prisma.kontakDaruratKeamanan.findUnique({
         where: { id },
+        include: {
+            kontakItems: true,
+            image: true,
+        }
     });
 
     if (!kontakDaruratKeamanan) {
@@ -28,12 +34,25 @@ export default async function kontakDaruratKeamananDelete(context: Context){
         };
     }
 
+    if (kontakDaruratKeamanan.image) {
+        try {
+            const filePath = path.join(kontakDaruratKeamanan.image.path, kontakDaruratKeamanan.image.name);
+            await fs.unlink(filePath);
+            await prisma.fileStorage.delete({
+              where: { id: kontakDaruratKeamanan.image.id },
+            });
+          } catch (err) {
+            console.error("Gagal hapus file image:", err);
+          }
+    }
+
     await prisma.kontakDaruratKeamanan.delete({
         where: { id },
     });
 
     return {
         status: 200,
-        body: "Kontak darurat keamanan berhasil dihapus",
+        success: true,
+        message: "Kontak darurat keamanan berhasil dihapus",
     };
 }

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/findUnique.ts

@@ -31,7 +31,11 @@ export default async function kontakDaruratKeamananFindUnique(
     const data = await prisma.kontakDaruratKeamanan.findUnique({
       where: { id },
       include: {
-        kontakItems: true,
+        kontakItems: {
+          include: {
+            image: true,
+          },
+        },
         image: true,
       },
     });

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/index.ts

@@ -6,7 +6,7 @@ import kontakDaruratKeamananFindUnique from "./findUnique";
 import kontakDaruratKeamananUpdate from "./updt";
 
 const KontakDaruratKeamanan = new Elysia({
-  prefix: "/kontak-darurat-keamanan",
+  prefix: "/kontakdaruratkeamanan",
   tags: ["Keamanan/Kontak Darurat"],
 })
   .get("/find-many", kontakDaruratKeamananFindMany)