Add Layout Kontak Darurat - Admin Menu Keamanan

src/app/admin/(dashboard)/keamanan/polsek-terdekat/create/page.tsx

@@ -1,7 +1,19 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Modal, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Modal,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -10,7 +22,7 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 function CreatePolsekTerdekat() {
-  const polsekState = useProxy(polsekTerdekat)
+  const polsekState = useProxy(polsekTerdekat);
   const router = useRouter();
   const [layananOptions, setLayananOptions] = useState<{ value: string; label: string }[]>([]);
   const [modalOpen, setModalOpen] = useState(false);
@@ -28,34 +40,31 @@ function CreatePolsekTerdekat() {
       alamatMaps: "",
       linkPetunjukArah: "",
       layananPolsekId: "",
-    }
-  }
+    };
+  };
 
   const handleSubmit = async () => {
-    await polsekState.create.create()
-    resetForm()
-    router.push("/admin/keamanan/polsek-terdekat")
-  }
+    await polsekState.create.create();
+    resetForm();
+    router.push("/admin/keamanan/polsek-terdekat");
+  };
 
   const fetchLayanan = async () => {
     try {
-      const res = await fetch("/api/keamanan/layanan-polsek/find-many")
-      const data = await res.json()
+      const res = await fetch("/api/keamanan/layanan-polsek/find-many");
+      const data = await res.json();
 
       if (data.success) {
-        const options = data.data.map((item: any) => {
-          return {
-            value: item.id,
-            label: item.nama
-          }
-        })
-        setLayananOptions(options)
+        const options = data.data.map((item: any) => ({
+          value: item.id,
+          label: item.nama,
+        }));
+        setLayananOptions(options);
       }
     } catch {
-      toast.error("Gagal memuat layanan polsek")
-    } 
-  }
-
+      toast.error("Gagal memuat layanan polsek");
+    }
+  };
 
   const handleTambahLayanan = async () => {
     if (!namaLayananBaru.trim()) return toast.warn("Nama layanan tidak boleh kosong");
@@ -67,7 +76,6 @@ function CreatePolsekTerdekat() {
         body: JSON.stringify({ nama: namaLayananBaru }),
       });
       const data = await res.json();
-      console.log("data setelah create:", data);
 
       if (data.success) {
         const newLayanan = {
@@ -83,7 +91,7 @@ function CreatePolsekTerdekat() {
       } else {
         toast.error(data.message || "Gagal menambah layanan");
       }
-    } catch  {
+    } catch {
       toast.error("Error menambah layanan");
     }
   };
@@ -93,8 +101,9 @@ function CreatePolsekTerdekat() {
   }, []);
 
   return (
-    <Box>
-       <Modal
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Modal Tambah Layanan */}
+      <Modal
         opened={modalOpen}
         onClose={() => setModalOpen(false)}
         title="Tambah Layanan Polsek"
@@ -111,112 +120,127 @@ function CreatePolsekTerdekat() {
         </Stack>
       </Modal>
 
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Polsek Terdekat
+        </Title>
+      </Group>
 
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Polsek Terdekat</Title>
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-          value={polsekState.create.form.nama}
-          onChange={(val) => {
-            polsekState.create.form.nama = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
-          placeholder='Masukkan nama Polsek Terdekat'
+            value={polsekState.create.form.nama}
+            onChange={(val) => (polsekState.create.form.nama = val.target.value)}
+            label={<Text fw="bold" fz="sm">Nama Polsek Terdekat</Text>}
+            placeholder="Masukkan nama Polsek Terdekat"
+            required
           />
           <TextInput
-          value={polsekState.create.form.jarakKeDesa}
-          onChange={(val) => {
-            polsekState.create.form.jarakKeDesa = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Jarak Polsek Terdekat</Text>}
-          placeholder='Masukkan jarak Polsek Terdekat'
-          />
-           <TextInput
-          value={polsekState.create.form.alamat}
-          onChange={(val) => {
-            polsekState.create.form.alamat = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Alamat Polsek Terdekat</Text>}
-          placeholder='Masukkan alamat Polsek Terdekat'
-          />
-           <TextInput
-          value={polsekState.create.form.nomorTelepon}
-          onChange={(val) => {
-            polsekState.create.form.nomorTelepon = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Polsek Terdekat</Text>}
-          placeholder='Masukkan nomor telepon Polsek Terdekat'
-          />
-           <TextInput
-          value={polsekState.create.form.jamOperasional}
-          onChange={(val) => {
-            polsekState.create.form.jamOperasional = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Jam Operasional Polsek Terdekat</Text>}
-          placeholder='Masukkan jam operasional Polsek Terdekat'
+            value={polsekState.create.form.jarakKeDesa}
+            onChange={(val) => (polsekState.create.form.jarakKeDesa = val.target.value)}
+            label={<Text fw="bold" fz="sm">Jarak Polsek Terdekat</Text>}
+            placeholder="Masukkan jarak Polsek Terdekat"
+            required
           />
           <TextInput
-          value={polsekState.create.form.embedMapUrl}
-          onChange={(val) => {
-            polsekState.create.form.embedMapUrl = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Embed Map URL Polsek Terdekat</Text>}
-          placeholder='Masukkan embed map url Polsek Terdekat'
+            value={polsekState.create.form.alamat}
+            onChange={(val) => (polsekState.create.form.alamat = val.target.value)}
+            label={<Text fw="bold" fz="sm">Alamat Polsek Terdekat</Text>}
+            placeholder="Masukkan alamat Polsek Terdekat"
+            required
           />
           <TextInput
-          value={polsekState.create.form.namaTempatMaps}
-          onChange={(val) => {
-            polsekState.create.form.namaTempatMaps = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Nama Tempat Maps Polsek Terdekat</Text>}
-          placeholder='Masukkan nama tempat maps Polsek Terdekat'
+            value={polsekState.create.form.nomorTelepon}
+            onChange={(val) => (polsekState.create.form.nomorTelepon = val.target.value)}
+            label={<Text fw="bold" fz="sm">Nomor Telepon Polsek Terdekat</Text>}
+            placeholder="Masukkan nomor telepon Polsek Terdekat"
+            required
           />
           <TextInput
-          value={polsekState.create.form.alamatMaps}
-          onChange={(val) => {
-            polsekState.create.form.alamatMaps = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Alamat Maps Polsek Terdekat</Text>}
-          placeholder='Masukkan alamat maps Polsek Terdekat'
+            value={polsekState.create.form.jamOperasional}
+            onChange={(val) => (polsekState.create.form.jamOperasional = val.target.value)}
+            label={<Text fw="bold" fz="sm">Jam Operasional Polsek Terdekat</Text>}
+            placeholder="Masukkan jam operasional Polsek Terdekat"
           />
           <TextInput
-          value={polsekState.create.form.linkPetunjukArah}
-          onChange={(val) => {
-            polsekState.create.form.linkPetunjukArah = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Link Petunjuk Arah Polsek Terdekat</Text>}
-          placeholder='Masukkan link petunjuk arah Polsek Terdekat'
+            value={polsekState.create.form.embedMapUrl}
+            onChange={(val) => (polsekState.create.form.embedMapUrl = val.target.value)}
+            label={<Text fw="bold" fz="sm">Embed Map URL</Text>}
+            placeholder="Masukkan embed map url"
           />
-         {/* Tambah Dropdown Select */}
+          <TextInput
+            value={polsekState.create.form.namaTempatMaps}
+            onChange={(val) => (polsekState.create.form.namaTempatMaps = val.target.value)}
+            label={<Text fw="bold" fz="sm">Nama Tempat Maps</Text>}
+            placeholder="Masukkan nama tempat maps"
+          />
+          <TextInput
+            value={polsekState.create.form.alamatMaps}
+            onChange={(val) => (polsekState.create.form.alamatMaps = val.target.value)}
+            label={<Text fw="bold" fz="sm">Alamat Maps</Text>}
+            placeholder="Masukkan alamat maps"
+          />
+          <TextInput
+            value={polsekState.create.form.linkPetunjukArah}
+            onChange={(val) => (polsekState.create.form.linkPetunjukArah = val.target.value)}
+            label={<Text fw="bold" fz="sm">Link Petunjuk Arah</Text>}
+            placeholder="Masukkan link petunjuk arah"
+          />
+
+          {/* Dropdown Select */}
           <Select
-          
-            label="Layanan Polsek"
+            label={<Text fw="bold" fz="sm">Layanan Polsek</Text>}
             placeholder="Pilih layanan polsek"
             data={layananOptions}
-            
             value={polsekState.create.form.layananPolsekId}
-            onChange={(val) => {
-              polsekState.create.form.layananPolsekId = val || "";
-            }}
+            onChange={(val) => (polsekState.create.form.layananPolsekId = val || "")}
           />
-          <Button variant="light" size="xs" onClick={() => setModalOpen(true)}>
+          <Button
+            variant="light"
+            size="xs"
+            onClick={() => setModalOpen(true)}
+          >
             + Tambah Layanan Baru
           </Button>
 
-          {/* Tambah field lainnya di sini... */}
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          {/* Tombol Submit */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
-
 }
 
 export default CreatePolsekTerdekat;