Fix Admin - User Menu Keamanan, Submenu Laporan Kontak Darurat, Laporan Publik

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

@@ -1,35 +1,28 @@
 'use client'
+import SelectIconProgram from '@/app/admin/(dashboard)/_com/selectIcon';
 import kontakDarurat 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,
   MultiSelect,
   Paper,
   Stack,
   Text,
   TextInput,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
-import { Dropzone } from '@mantine/dropzone';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+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 [fileUtama, setFileUtama] = useState<File | null>(null);
-  const [previewUtama, setPreviewUtama] = useState<string | null>(null);
-
   useShallowEffect(() => {
     kontakDarurat.kontakDaruratItem.findMany.load();
   }, []);
@@ -37,29 +30,12 @@ function CreateKontakDaruratKeamanan() {
   const resetForm = () => {
     kontakState.create.form = {
       nama: '',
-      imageId: '',
+      icon: '',
       kategoriId: []
     };
-    setPreviewUtama(null);
-    setFileUtama(null);
   };
 
   const handleSubmit = async () => {
-    if (!fileUtama) {
-      return toast.warn('Pilih file gambar kategori 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 gambar kategori');
-    }
-    kontakState.create.form.imageId = uploaded.id;
-
     await kontakState.create.create();
     resetForm();
     router.push('/admin/keamanan/kontak-darurat/kontak-darurat-keamanan');
@@ -105,64 +81,9 @@ function CreateKontakDaruratKeamanan() {
             required
           />
 
-          {/* Upload Gambar Kategori */}
           <Box>
-            <Text fz="sm" fw="bold">
-              Masukkan Gambar
-            </Text>
-            <Dropzone
-              onDrop={(files) => {
-                const selectedFile = files[0];
-                if (selectedFile) {
-                  setFileUtama(selectedFile);
-                  setPreviewUtama(URL.createObjectURL(selectedFile));
-                }
-              }}
-              onReject={() => toast.error('File tidak valid.')}
-              maxSize={5 * 1024 ** 2}
-              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>
-            {previewUtama && (
-              <Box mt="sm">
-                <Image
-                  src={previewUtama}
-                  alt="Preview"
-                  style={{
-                    maxWidth: '100%',
-                    maxHeight: '200px',
-                    objectFit: 'contain',
-                    borderRadius: '8px',
-                    border: '1px solid #ddd',
-                  }}
-                />
-              </Box>
-            )}
+            <Text fz={"sm"} fw={"bold"}>Ikon Kontak Darurat</Text>
+            <SelectIconProgram onChange={(value) => kontakState.create.form.icon = value} />
           </Box>
 
           <MultiSelect