wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Add Layanan Polsek submenu polsek terdekat

Browse Source 
Seeder menu keamanan -> menu ekonomi submenu : demografi pekerjaan, junlah pengangguran, lowongan kerja lokal, pasar desa, program kemiskinan, sektor unggulan, struktur organisasi
This commit is contained in:
nico
2026-01-17 10:32:48 +08:00
parent 184854d273
commit 17b20e0d40
67 changed files with 3238 additions and 1079 deletions
Download Patch File Download Diff File Expand all files Collapse all files

457
src/app/admin/(dashboard)/keamanan/polsek-terdekat/[id]/edit/page.tsx
View File

@@ -1,457 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";
import polsekTerdekat from "@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat";
import colors from "@/con/colors";
import {
Box,
Button,
Card,
Group,
Loader,
Modal,
Paper,
Select,
Stack,
Text,
TextInput,
Title
} from "@mantine/core";
import { IconArrowBack } 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 EditPolsekTerdekat() {
const polsekState = useProxy(polsekTerdekat);
const params = useParams();
const router = useRouter();
const [layananOptions, setLayananOptions] = useState<
{ value: string; label: string }[]
>([]);
const [modalOpen, setModalOpen] = useState(false);
const [modalUpdateOpen, setModalUpdateOpen] = useState(false);
const [namaLayananBaru, setNamaLayananBaru] = useState("");
const [selectedLayananId, setSelectedLayananId] = useState<string | null>(
null
);
const [namaLayananUpdate, setNamaLayananUpdate] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const [formData, setFormData] = useState({
nama: "",
jarakKeDesa: "",
alamat: "",
nomorTelepon: "",
jamOperasional: "",
embedMapUrl: "",
namaTempatMaps: "",
alamatMaps: "",
linkPetunjukArah: "",
layananPolsekId: "",
});
const [originalData, setOriginalData] = useState({
nama: "",
jarakKeDesa: "",
alamat: "",
nomorTelepon: "",
jamOperasional: "",
embedMapUrl: "",
namaTempatMaps: "",
alamatMaps: "",
linkPetunjukArah: "",
layananPolsekId: "",
});
// load data untuk form edit
useEffect(() => {
const loadPolsekTerdekat = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await polsekState.edit.load(id);
if (data) {
setFormData({
nama: data.nama || "",
jarakKeDesa: data.jarakKeDesa || "",
alamat: data.alamat || "",
nomorTelepon: data.nomorTelepon || "",
jamOperasional: data.jamOperasional || "",
embedMapUrl: data.embedMapUrl || "",
namaTempatMaps: data.namaTempatMaps || "",
alamatMaps: data.alamatMaps || "",
linkPetunjukArah: data.linkPetunjukArah || "",
layananPolsekId: data.layananPolsekId || "",
});
setOriginalData({
nama: data.nama || "",
jarakKeDesa: data.jarakKeDesa || "",
alamat: data.alamat || "",
nomorTelepon: data.nomorTelepon || "",
jamOperasional: data.jamOperasional || "",
embedMapUrl: data.embedMapUrl || "",
namaTempatMaps: data.namaTempatMaps || "",
alamatMaps: data.alamatMaps || "",
linkPetunjukArah: data.linkPetunjukArah || "",
layananPolsekId: data.layananPolsekId || "",
});
}
} catch (error) {
console.error("Error loading polsek terdekat:", error);
toast.error("Gagal memuat data polsek terdekat");
}
};
loadPolsekTerdekat();
}, [params?.id]);
const fetchLayanan = async () => {
try {
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) => ({
value: item.id,
label: item.nama,
}));
setLayananOptions(options);
}
} catch {
toast.error("Gagal memuat layanan polsek");
}
};
const handleTambahLayanan = async () => {
if (!namaLayananBaru.trim())
return toast.warn("Nama layanan tidak boleh kosong");
try {
const res = await fetch("/api/keamanan/layanan-polsek/create", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ nama: namaLayananBaru }),
});
const data = await res.json();
if (data.success) {
const newLayanan = {
value: data.data.id,
label: data.data.nama,
};
setLayananOptions((prev) => [...prev, newLayanan]);
await fetchLayanan();
polsekState.create.form.layananPolsekId = data.data.id;
toast.success("Layanan baru ditambahkan!");
setModalOpen(false);
setNamaLayananBaru("");
} else {
toast.error(data.message || "Gagal menambah layanan");
}
} catch {
toast.error("Error menambah layanan");
}
};
const handleUpdateLayanan = async (id: string, namaBaru: string) => {
if (!namaBaru.trim())
return toast.warn("Nama layanan tidak boleh kosong");
try {
const res = await fetch(`/api/keamanan/layanan-polsek/update/${id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ nama: namaBaru }),
});
const data = await res.json();
if (data.success) {
await fetchLayanan();
toast.success("Layanan berhasil diupdate!");
setModalUpdateOpen(false);
setNamaLayananUpdate("");
} else {
toast.error(data.message || "Gagal mengupdate layanan");
}
} catch {
toast.error("Error mengupdate layanan");
}
};
const handleDeleteLayanan = async (id: string) => {
const confirmDelete = confirm("Yakin ingin menghapus layanan ini?");
if (!confirmDelete) return;
try {
const res = await fetch(`/api/keamanan/layanan-polsek/del/${id}`, {
method: "DELETE",
});
const data = await res.json();
if (data.success) {
await fetchLayanan();
setLayananOptions((prev) =>
prev.filter((layanan) => layanan.value !== id)
);
toast.success("Layanan berhasil dihapus!");
} else {
toast.error(data.message || "Gagal menghapus layanan");
}
} catch {
toast.error("Error menghapus layanan");
}
};
useEffect(() => {
fetchLayanan();
}, []);
const handleChange = (field: string, value: string) => {
setFormData(prev => ({ ...prev, [field]: value }));
};
const handleResetForm = () => {
setFormData({
nama: originalData.nama,
jarakKeDesa: originalData.jarakKeDesa,
alamat: originalData.alamat,
nomorTelepon: originalData.nomorTelepon,
jamOperasional: originalData.jamOperasional,
embedMapUrl: originalData.embedMapUrl,
namaTempatMaps: originalData.namaTempatMaps,
alamatMaps: originalData.alamatMaps,
linkPetunjukArah: originalData.linkPetunjukArah,
layananPolsekId: originalData.layananPolsekId,
});
toast.info("Form dikembalikan ke data awal");
};
const handleSubmit = async () => {
try {
setIsSubmitting(true);
polsekState.edit.form = { ...formData }; // update global state hanya di sini
await polsekState.edit.update();
toast.success("Polsek terdekat berhasil diperbarui!");
router.push("/admin/keamanan/polsek-terdekat");
} catch (error) {
console.error("Error updating polsek terdekat:", error);
toast.error("Gagal memperbarui data polsek terdekat");
} finally {
setIsSubmitting(false);
}
};
return (
<Box px={{ base: 0, md: 'xs' }} py="xs">
{/* Modal Tambah */}
<Modal
opened={modalOpen}
onClose={() => setModalOpen(false)}
title="Tambah Layanan Polsek"
centered
>
<Stack>
<TextInput
label="Nama Layanan"
placeholder="Masukkan nama layanan"
value={namaLayananBaru}
onChange={(e) => setNamaLayananBaru(e.currentTarget.value)}
/>
<Button onClick={handleTambahLayanan}>Simpan</Button>
</Stack>
</Modal>
{/* Modal Update */}
<Modal
opened={modalUpdateOpen}
onClose={() => setModalUpdateOpen(false)}
title="Update Layanan Polsek"
centered
>
<Stack>
<TextInput
label="Nama Layanan"
placeholder="Masukkan nama layanan"
value={namaLayananUpdate}
onChange={(e) => setNamaLayananUpdate(e.currentTarget.value)}
/>
<Button
onClick={() => {
if (!selectedLayananId)
return toast.warn("ID layanan tidak ditemukan");
handleUpdateLayanan(selectedLayananId, namaLayananUpdate);
}}
>
Simpan
</Button>
</Stack>
</Modal>
{/* Header */}
<Group mb="md">
<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 Polsek Terdekat
</Title>
</Group>
{/* Form utama */}
<Paper
w={{ base: "100%", md: "50%" }}
bg={colors["white-1"]}
p="lg"
radius="md"
shadow="sm"
style={{ border: "1px solid #e0e0e0" }}
>
<Stack gap="md">
{/* Input fields */}
<TextInput
value={formData.nama}
onChange={(e) => handleChange("nama", e.currentTarget.value)}
label="Nama Polsek Terdekat"
placeholder="Masukkan nama Polsek Terdekat"
required
/>
<TextInput
value={formData.jarakKeDesa}
onChange={(e) => handleChange("jarakKeDesa", e.currentTarget.value)}
label="Jarak Polsek Terdekat"
/>
<TextInput
value={formData.alamat}
onChange={(e) => handleChange("alamat", e.currentTarget.value)}
label="Alamat Polsek Terdekat"
/>
<TextInput
value={formData.nomorTelepon}
onChange={(e) => handleChange("nomorTelepon", e.currentTarget.value)}
label="Nomor Telepon"
/>
<TextInput
value={formData.jamOperasional}
onChange={(e) => handleChange("jamOperasional", e.currentTarget.value)}
label="Jam Operasional"
/>
<TextInput
value={formData.embedMapUrl}
onChange={(e) => handleChange("embedMapUrl", e.currentTarget.value)}
label="Embed Map URL"
/>
<TextInput
value={formData.namaTempatMaps}
onChange={(e) => handleChange("namaTempatMaps", e.currentTarget.value)}
label="Nama Tempat Maps"
/>
<TextInput
value={formData.alamatMaps}
onChange={(e) => handleChange("alamatMaps", e.currentTarget.value)}
label="Alamat Maps"
/>
<TextInput
value={formData.linkPetunjukArah}
onChange={(e) => handleChange("linkPetunjukArah", e.currentTarget.value)}
label="Link Petunjuk Arah"
/>
<Select
label="Layanan Polsek"
placeholder="Pilih layanan polsek"
data={layananOptions}
value={formData.layananPolsekId}
onChange={(val) => handleChange("layananPolsekId", val || "")}
/>
<Button
variant="light"
size="xs"
onClick={() => setModalOpen(true)}
>
+ Tambah Layanan Baru
</Button>
{/* List layanan */}
<Text fw="bold" fz="sm">
Daftar Layanan Polsek
</Text>
{layananOptions.map((item) => (
<Card
key={item.value}
style={{ border: "1px solid #ccc" }}
bg={colors["white-1"]}
p="md"
radius="md"
shadow="sm"
>
<Group justify="space-between">
<Text>{item.label}</Text>
<Group>
<Button
variant="light"
size="xs"
onClick={() => {
setSelectedLayananId(item.value);
setNamaLayananUpdate(item.label);
setModalUpdateOpen(true);
}}
>
Edit
</Button>
<Button
variant="outline"
color="red"
size="xs"
onClick={() => handleDeleteLayanan(item.value)}
>
Hapus
</Button>
</Group>
</Group>
</Card>
))}
{/* Submit */}
<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"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default EditPolsekTerdekat;

150
src/app/admin/(dashboard)/keamanan/polsek-terdekat/_com/layoutPolsek.tsx Normal file
View File

@@ -0,0 +1,150 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { IconBuilding, IconTool } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
function LayoutPolsek({ children }: { children: React.ReactNode }) {
const router = useRouter();
const pathname = usePathname();
const tabs = [
{
label: "Daftar Polsek Terdekat",
value: "daftar-polsek-terdekat",
href: "/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat",
icon: <IconBuilding size={18} stroke={1.8} />
},
{
label: "Layanan Polsek",
value: "layanan-polsek",
href: "/admin/keamanan/polsek-terdekat/layanan-polsek",
icon: <IconTool size={18} stroke={1.8} />
}
];
const currentTab = tabs.find(tab => tab.href === pathname);
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
const handleTabChange = (value: string | null) => {
const tab = tabs.find(t => t.value === value);
if (tab) {
router.push(tab.href);
}
setActiveTab(value);
};
useEffect(() => {
const match = tabs.find(tab => tab.href === pathname);
if (match) {
setActiveTab(match.value);
}
}, [pathname]);
return (
<Stack gap="lg">
<Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
Polsek Terdekat
</Title>
<Tabs
color={colors["blue-button"]}
variant="pills"
value={activeTab}
onChange={handleTabChange}
radius="lg"
keepMounted={false}
>
{/* ✅ Scroll horizontal wrapper */}
<Box visibleFrom='md' pb={10}>
<ScrollArea type="auto" offsetScrollbars>
<TabsList
p="sm"
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
flexShrink: 0, // ✅ jangan mengecil aneh-aneh
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
</Box>
<Box hiddenFrom='md' pb={10}>
<ScrollArea
type="auto"
offsetScrollbars={false}
w="100%"
>
<TabsList
p="xs" // lebih kecil
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
width: "max-content", // ⬅️ kunci
maxWidth: "100%", // ⬅️ penting
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
paddingInline: "0.75rem", // ⬅️ lebih ramping
flexShrink: 0, // ✅ jangan mengecil aneh-aneh
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
</Box>
{tabs.map((tab, i) => (
<TabsPanel
key={i}
value={tab.value}
style={{
padding: "1.5rem",
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
borderRadius: "1rem",
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
}}
>
{children}
</TabsPanel>
))}
</Tabs>
</Stack>
);
}
export default LayoutPolsek;

279
src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/[id]/edit/page.tsx Normal file
View File

@@ -0,0 +1,279 @@
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";
import statePolsekTerdekat from "@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat";
import colors from "@/con/colors";
import {
Box,
Button,
Group,
Loader,
MultiSelect,
Paper,
Stack,
TextInput,
Title
} from "@mantine/core";
import { IconArrowBack } 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";
type FormData = {
nama: string;
jarakKeDesa: string;
alamat: string;
nomorTelepon: string;
jamOperasional: string;
embedMapUrl: string;
namaTempatMaps: string;
alamatMaps: string;
linkPetunjukArah: string;
layananPolsekId: string[];
};
function EditPolsekTerdekat() {
const polsekState = useProxy(statePolsekTerdekat.polsekTerdekatState);
const params = useParams();
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
const [formData, setFormData] = useState<FormData>({
nama: "",
jarakKeDesa: "",
alamat: "",
nomorTelepon: "",
jamOperasional: "",
embedMapUrl: "",
namaTempatMaps: "",
alamatMaps: "",
linkPetunjukArah: "",
layananPolsekId: []
});
const [originalData, setOriginalData] = useState({
nama: "",
jarakKeDesa: "",
alamat: "",
nomorTelepon: "",
jamOperasional: "",
embedMapUrl: "",
namaTempatMaps: "",
alamatMaps: "",
linkPetunjukArah: "",
layananPolsekId: []
});
useEffect(() => {
statePolsekTerdekat.layananPolsek.findManyAll.load();
}, []);
// load data untuk form edit
useEffect(() => {
const loadPolsekTerdekat = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await polsekState.edit.load(id);
if (data) {
setFormData({
nama: data.nama || "",
jarakKeDesa: data.jarakKeDesa || "",
alamat: data.alamat || "",
nomorTelepon: data.nomorTelepon || "",
jamOperasional: data.jamOperasional || "",
embedMapUrl: data.embedMapUrl || "",
namaTempatMaps: data.namaTempatMaps || "",
alamatMaps: data.alamatMaps || "",
linkPetunjukArah: data.linkPetunjukArah || "",
layananPolsekId: data.LayananToPolsek?.map((l: any) => l.layananId) || [],
});
setOriginalData({
nama: data.nama || "",
jarakKeDesa: data.jarakKeDesa || "",
alamat: data.alamat || "",
nomorTelepon: data.nomorTelepon || "",
jamOperasional: data.jamOperasional || "",
embedMapUrl: data.embedMapUrl || "",
namaTempatMaps: data.namaTempatMaps || "",
alamatMaps: data.alamatMaps || "",
linkPetunjukArah: data.linkPetunjukArah || "",
layananPolsekId: data.LayananToPolsek?.map((l: any) => l.layananId) || [],
});
}
} catch (error) {
console.error("Error loading polsek terdekat:", error);
toast.error("Gagal memuat data polsek terdekat");
}
};
loadPolsekTerdekat();
}, [params?.id]);
const handleChange = (key: keyof FormData, value: any) => {
setFormData((prev) => ({ ...prev, [key]: value }));
};
const handleResetForm = () => {
setFormData({
nama: originalData.nama,
jarakKeDesa: originalData.jarakKeDesa,
alamat: originalData.alamat,
nomorTelepon: originalData.nomorTelepon,
jamOperasional: originalData.jamOperasional,
embedMapUrl: originalData.embedMapUrl,
namaTempatMaps: originalData.namaTempatMaps,
alamatMaps: originalData.alamatMaps,
linkPetunjukArah: originalData.linkPetunjukArah,
layananPolsekId: (originalData as any)?.LayananToPolsek?.map((l: any) => l.layananId) || [],
});
toast.info("Form dikembalikan ke data awal");
};
const handleSubmit = async () => {
try {
setIsSubmitting(true);
await polsekState.edit.update();
toast.success("Polsek terdekat berhasil diperbarui!");
router.push("/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat");
} catch (error) {
console.error("Error updating polsek terdekat:", error);
toast.error("Gagal memperbarui data polsek terdekat");
} finally {
setIsSubmitting(false);
}
};
return (
<Box px={{ base: 0, md: 'xs' }} py="xs">
{/* Header */}
<Group mb="md">
<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 Polsek Terdekat
</Title>
</Group>
{/* Form utama */}
<Paper
w={{ base: "100%", md: "50%" }}
bg={colors["white-1"]}
p="lg"
radius="md"
shadow="sm"
style={{ border: "1px solid #e0e0e0" }}
>
<Stack gap="md">
{/* Input fields */}
<TextInput
value={formData.nama}
onChange={(e) => handleChange("nama", e.currentTarget.value)}
label="Nama Polsek Terdekat"
placeholder="Masukkan nama Polsek Terdekat"
required
/>
<TextInput
value={formData.jarakKeDesa}
onChange={(e) => handleChange("jarakKeDesa", e.currentTarget.value)}
label="Jarak Polsek Terdekat"
/>
<TextInput
value={formData.alamat}
onChange={(e) => handleChange("alamat", e.currentTarget.value)}
label="Alamat Polsek Terdekat"
/>
<TextInput
value={formData.nomorTelepon}
onChange={(e) => handleChange("nomorTelepon", e.currentTarget.value)}
label="Nomor Telepon"
/>
<TextInput
value={formData.jamOperasional}
onChange={(e) => handleChange("jamOperasional", e.currentTarget.value)}
label="Jam Operasional"
/>
<TextInput
value={formData.embedMapUrl}
onChange={(e) => handleChange("embedMapUrl", e.currentTarget.value)}
label="Embed Map URL"
/>
<TextInput
value={formData.namaTempatMaps}
onChange={(e) => handleChange("namaTempatMaps", e.currentTarget.value)}
label="Nama Tempat Maps"
/>
<TextInput
value={formData.alamatMaps}
onChange={(e) => handleChange("alamatMaps", e.currentTarget.value)}
label="Alamat Maps"
/>
<TextInput
value={formData.linkPetunjukArah}
onChange={(e) => handleChange("linkPetunjukArah", e.currentTarget.value)}
label="Link Petunjuk Arah"
/>
<MultiSelect
label="Layanan Polsekl"
placeholder="Pilih layanan polsek"
value={formData.layananPolsekId}
onChange={(val) => handleChange('layananPolsekId', val)}
data={
statePolsekTerdekat.layananPolsek.findManyAll.data?.map((v) => ({
value: v.id,
label: v.nama,
})) || []
}
clearable
searchable
required
error={!formData.layananPolsekId.length ? 'Pilih minimal satu layanan polsek' : undefined}
/>
{/* Submit */}
<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"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default EditPolsekTerdekat;

26
src/app/admin/(dashboard)/keamanan/polsek-terdekat/[id]/page.tsx → src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/[id]/page.tsx
View File

@@ -6,12 +6,12 @@ import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
import { ModalKonfirmasiHapus } from '../../../../_com/modalKonfirmasiHapus';
import statePolsekTerdekat from '../../../../_state/keamanan/polsek-terdekat';
function DetailPolsekTerdekat() {
const router = useRouter();
const polsekState = useProxy(polsekTerdekat);
const polsekState = useProxy(statePolsekTerdekat.polsekTerdekatState);
const [selectedId, setSelectedId] = useState<string | null>(null);
const [modalHapus, setModalHapus] = useState(false);
const params = useParams();
@@ -25,7 +25,7 @@ function DetailPolsekTerdekat() {
polsekState.delete.byId(selectedId);
setModalHapus(false);
setSelectedId(null);
router.push("/admin/keamanan/polsek-terdekat");
router.push("/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat");
}
};
@@ -40,7 +40,7 @@ function DetailPolsekTerdekat() {
const data = polsekState.findUnique.data;
return (
<Box px={{ base: 0, md: 'xs' }} py="xs">
<Box px={{ base: 0, md: 'xs' }} py="xs">
{/* Tombol Back */}
<Button
variant="subtle"
@@ -149,10 +149,20 @@ function DetailPolsekTerdekat() {
</Text>
</Box>
{/* Layanan Polsek */}
<Box>
<Text fz="lg" fw="bold">Layanan Polsek</Text>
<Text fz="md" c="dimmed">{data?.layananPolsek?.nama || "-"}</Text>
<Stack gap={4}>
{data.LayananToPolsek && data.LayananToPolsek.length > 0 ? (
data.LayananToPolsek.map((layanan) => (
<Text fz="md" c="dimmed" key={layanan.id}>
• {layanan.layanan.nama}
</Text>
))
) : (
<Text fz="sm" c="dimmed">Tidak ada layanan polsek</Text>
)}
</Stack>
</Box>
{/* Aksi */}
@@ -172,7 +182,7 @@ function DetailPolsekTerdekat() {
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${data.id}/edit`)}
onClick={() => router.push(`/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat/${data.id}/edit`)}
variant="light"
radius="md"
size="md"

181
src/app/admin/(dashboard)/keamanan/polsek-terdekat/create/page.tsx → src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/create/page.tsx
View File

@@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import colors from '@/con/colors';
import {
@@ -6,9 +5,8 @@ import {
Button,
Group,
Loader,
Modal,
MultiSelect,
Paper,
Select,
Stack,
Text,
TextInput,
@@ -19,16 +17,17 @@ import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
import polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
import statePolsekTerdekat from '../../../../_state/keamanan/polsek-terdekat';
function CreatePolsekTerdekat() {
const polsekState = useProxy(polsekTerdekat);
const polsekState = useProxy(statePolsekTerdekat.polsekTerdekatState);
const router = useRouter();
const [layananOptions, setLayananOptions] = useState<{ value: string; label: string }[]>([]);
const [modalOpen, setModalOpen] = useState(false);
const [namaLayananBaru, setNamaLayananBaru] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
statePolsekTerdekat.layananPolsek.findManyAll.load();
}, []);
const resetForm = () => {
polsekState.create.form = {
nama: "",
@@ -40,44 +39,44 @@ function CreatePolsekTerdekat() {
namaTempatMaps: "",
alamatMaps: "",
linkPetunjukArah: "",
layananPolsekId: "",
layananPolsekId: [],
};
};
const isValidGoogleMapsEmbed = (url: string): boolean => {
try {
const u = new URL(url);
return (
u.hostname === 'www.google.com' &&
u.pathname === '/maps/embed' &&
u.searchParams.has('pb')
);
} catch {
return false;
}
};
try {
const u = new URL(url);
return (
u.hostname === 'www.google.com' &&
u.pathname === '/maps/embed' &&
u.searchParams.has('pb')
);
} catch {
return false;
}
};
const handleSubmit = async () => {
const { embedMapUrl } = polsekState.create.form;
const { embedMapUrl } = polsekState.create.form;
// ✅ Validasi Google Maps Embed URL (jika diisi)
if (embedMapUrl && !isValidGoogleMapsEmbed(embedMapUrl)) {
toast.error("URL embed peta tidak valid. Harap paste iframe dari Google Maps.");
return;
}
// ✅ Validasi Google Maps Embed URL (jika diisi)
if (embedMapUrl && !isValidGoogleMapsEmbed(embedMapUrl)) {
toast.error("URL embed peta tidak valid. Harap paste iframe dari Google Maps.");
return;
}
try {
setIsSubmitting(true);
await polsekState.create.create();
resetForm();
router.push("/admin/keamanan/polsek-terdekat");
} catch (error) {
console.error(error);
toast.error("Gagal menambah polsek terdekat");
} finally {
setIsSubmitting(false);
}
};
try {
setIsSubmitting(true);
await polsekState.create.create();
resetForm();
router.push("/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat");
} catch (error) {
console.error(error);
toast.error("Gagal menambah polsek terdekat");
} finally {
setIsSubmitting(false);
}
};
const extractEmbedUrl = (input: string): string => {
// Jika sudah berupa URL embed yang valid
@@ -96,77 +95,8 @@ function CreatePolsekTerdekat() {
return input.trim();
};
const fetchLayanan = async () => {
try {
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) => ({
value: item.id,
label: item.nama,
}));
setLayananOptions(options);
}
} catch {
toast.error("Gagal memuat layanan polsek");
}
};
const handleTambahLayanan = async () => {
if (!namaLayananBaru.trim()) return toast.warn("Nama layanan tidak boleh kosong");
try {
const res = await fetch("/api/keamanan/layanan-polsek/create", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ nama: namaLayananBaru }),
});
const data = await res.json();
if (data.success) {
const newLayanan = {
value: data.data.id,
label: data.data.nama,
};
setLayananOptions((prev) => [...prev, newLayanan]);
await fetchLayanan();
polsekState.create.form.layananPolsekId = data.data.id;
toast.success("Layanan baru ditambahkan!");
setModalOpen(false);
setNamaLayananBaru("");
} else {
toast.error(data.message || "Gagal menambah layanan");
}
} catch {
toast.error("Error menambah layanan");
}
};
useEffect(() => {
fetchLayanan();
}, []);
return (
<Box px={{ base: 0, md: 'xs' }} py="xs">
{/* Modal Tambah Layanan */}
<Modal
opened={modalOpen}
onClose={() => setModalOpen(false)}
title="Tambah Layanan Polsek"
centered
>
<Stack>
<TextInput
label="Nama Layanan"
placeholder="Masukkan nama layanan"
value={namaLayananBaru}
onChange={(e) => setNamaLayananBaru(e.currentTarget.value)}
/>
<Button onClick={handleTambahLayanan}>Simpan</Button>
</Stack>
</Modal>
<Box px={{ base: 0, md: 'xs' }} py="xs">
{/* Header */}
<Group mb="md">
<Button
@@ -255,36 +185,23 @@ function CreatePolsekTerdekat() {
label={<Text fw="bold" fz="sm">Link Petunjuk Arah</Text>}
placeholder="Masukkan link petunjuk arah"
/>
<Select
<MultiSelect
label="Layanan Polsek"
placeholder="Pilih layanan polsek"
data={layananOptions}
value={polsekState.create.form.layananPolsekId || null}
onChange={(val: string | null) => {
if (val) {
const selected = layananOptions.find(
(item) => item.value === val
);
if (selected) {
polsekState.create.form.layananPolsekId = selected.value;
}
} else {
polsekState.create.form.layananPolsekId = '';
}
placeholder="Pilih layanan polsek (bisa lebih dari satu)"
data={statePolsekTerdekat.layananPolsek.findManyAll.data?.map((v) => ({
value: v.id,
label: v.nama,
})) || []}
value={polsekState.create.form.layananPolsekId}
onChange={(val) => {
polsekState.create.form.layananPolsekId = val;
}}
searchable
clearable
nothingFoundMessage="Tidak ditemukan"
nothingFoundMessage="Tidak ada layanan ditemukan"
required
error={polsekState.create.form.layananPolsekId?.length === 0 ? "Pilih minimal 1 layanan polsek" : undefined}
/>
<Button
variant="light"
size="xs"
onClick={() => setModalOpen(true)}
>
+ Tambah Layanan Baru
</Button>
{/* Tombol Submit */}
<Group justify="right">
<Button

13
src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx → src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/page.tsx
View File

@@ -23,8 +23,9 @@ import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../_com/header';
import polsekTerdekat from '../../_state/keamanan/polsek-terdekat';
import HeaderSearch from '../../../_com/header';
import statePolsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
function PolsekTerdekat() {
const [search, setSearch] = useState("");
@@ -45,7 +46,7 @@ function PolsekTerdekat() {
}
function ListPolsekTerdekat({ search }: { search: string }) {
const polsekState = useProxy(polsekTerdekat);
const polsekState = useProxy(statePolsekTerdekat.polsekTerdekatState);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000);
@@ -82,7 +83,7 @@ function ListPolsekTerdekat({ search }: { search: string }) {
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/polsek-terdekat/create')}
onClick={() => router.push('/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat/create')}
>
Tambah Baru
</Button>
@@ -145,7 +146,7 @@ function ListPolsekTerdekat({ search }: { search: string }) {
<Button
variant="light"
color="blue"
onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${item.id}`)}
onClick={() => router.push(`/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat/${item.id}`)}
w="100%"
>
<IconDeviceImac size={18} />
@@ -207,7 +208,7 @@ function ListPolsekTerdekat({ search }: { search: string }) {
variant="light"
color="blue"
fullWidth
onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${item.id}`)}
onClick={() => router.push(`/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat/${item.id}`)}
>
<IconDeviceImac size={18} />
<Text ml={5} fz="sm" fw={500} lh={1.4}>

161
src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/[id]/page.tsx Normal file
View File

@@ -0,0 +1,161 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import statePolsekTerdekat from '@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat';
import colors from '@/con/colors';
import {
Box,
Button,
Group,
Loader,
Paper,
Stack,
TextInput,
Title
} from '@mantine/core';
import { IconArrowBack } 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 EditLayananPolsek() {
const editState = useProxy(statePolsekTerdekat.layananPolsek);
const router = useRouter();
const params = useParams();
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState({
nama: '',
});
const [formData, setFormData] = useState({
nama: '',
});
useEffect(() => {
const loadLayananPolsek = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await editState.update.load(id);
if (data) {
setFormData({
nama: data.nama || '',
});
setOriginalData({
nama: data.nama || '',
});
}
} catch (error) {
console.error('Error loading layanan polsek:', error);
toast.error('Gagal memuat data layanan polsek');
}
};
loadLayananPolsek();
}, [params?.id]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData((prev) => ({
...prev,
[e.target.name]: e.target.value,
}));
};
const handleResetForm = () => {
setFormData({
nama: originalData.nama,
});
toast.info('Form dikembalikan ke data awal');
};
const handleSubmit = async () => {
try {
setIsSubmitting(true);
// update global state hanya saat submit
editState.update.form = {
...editState.update.form,
nama: formData.nama,
};
await editState.update.update();
toast.success('Layanan Polsek berhasil diperbarui!');
router.push('/admin/keamanan/polsek-terdekat/layanan-polsek');
} catch (error) {
console.error('Error updating layanan polsek:', error);
toast.error('Terjadi kesalahan saat memperbarui layanan polsek');
} finally {
setIsSubmitting(false);
}
};
return (
<Box px={{ base: 0, md: 'lg' }} py="xs">
{/* Back Button + Title */}
<Group mb="md">
<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 Layanan Polsek
</Title>
</Group>
{/* Form Wrapper */}
<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
name="nama"
label="Nama Layanan Polsek"
placeholder="Masukkan nama layanan polsek"
value={formData.nama}
onChange={handleChange}
required
/>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<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)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default EditLayananPolsek;

111
src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/create/page.tsx Normal file
View File

@@ -0,0 +1,111 @@
'use client';
import statePolsekTerdekat from '@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat';
import colors from '@/con/colors';
import {
Box,
Button,
Group,
Loader,
Paper,
Stack,
TextInput,
Title
} from '@mantine/core';
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 CreateLayananPolsek() {
const createState = useProxy(statePolsekTerdekat.layananPolsek);
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
const resetForm = () => {
createState.create.form = {
nama: '',
};
};
const handleSubmit = async () => {
setIsSubmitting(true);
try {
await createState.create.create();
resetForm();
router.push('/admin/keamanan/polsek-terdekat/layanan-polsek');
} catch (error) {
console.error('Error creating layanan polsek:', error);
toast.error('Gagal menambahkan layanan polsek');
} finally {
setIsSubmitting(false);
}
};
return (
<Box px={{ base: 0, md: 'lg' }} py="xs">
{/* Header dengan back button */}
<Group mb="md">
<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 Layanan Polsek
</Title>
</Group>
{/* Form utama */}
<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
label="Nama Layanan Polsek"
placeholder="Masukkan nama layanan polsek"
value={createState.create.form.nama || ''}
onChange={(e) => (createState.create.form.nama = e.target.value)}
required
/>
<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"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateLayananPolsek;

265
src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/page.tsx Normal file
View File

@@ -0,0 +1,265 @@
'use client'
import colors from '@/con/colors';
import {
Box,
Button,
Center,
Group,
Pagination,
Paper,
Skeleton,
Stack,
Table,
TableTbody,
TableTd,
TableTh,
TableThead,
TableTr,
Text,
Title,
} from '@mantine/core';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import statePolsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
function LayananPolsek() {
const [search, setSearch] = useState("");
return (
<Box>
<HeaderSearch
title='Layanan Polsek'
placeholder='Cari layanan polsek...'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListLayananPolsek search={search} />
</Box>
);
}
function ListLayananPolsek({ search }: { search: string }) {
const layananState = useProxy(statePolsekTerdekat.layananPolsek);
const [modalHapus, setModalHapus] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000);
const {
data,
page,
totalPages,
loading,
load,
} = layananState.findMany;
useShallowEffect(() => {
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
const handleDelete = () => {
if (selectedId) {
layananState.delete.delete(selectedId);
setModalHapus(false);
setSelectedId(null);
load(page, 10, search);
}
};
const filteredData = data || [];
if (loading || !data) {
return (
<Stack py={{ base: 'sm', md: 'lg' }}>
<Skeleton height={600} radius="md" />
</Stack>
);
}
return (
<Box py={{ base: 'sm', md: 'lg' }}>
<Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
<Group justify="space-between" mb={{ base: 'md', md: 'lg' }}>
<Title order={4} lh={{ base: 1.2, md: 1.2 }}>
Daftar Layanan Polsek
</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/polsek-terdekat/layanan-polsek/create')}
>
Tambah Baru
</Button>
</Group>
{/* Desktop Table */}
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Table
highlightOnHover
miw={0}
style={{
tableLayout: 'fixed',
width: '100%',
}}
>
<TableThead>
<TableTr>
<TableTh style={{ width: '25%' }}>
<Text fz="sm" fw={600} lh={1.4}>
Nama Layanan Polsek
</Text>
</TableTh>
<TableTh w="20%">
<Text fz="sm" fw={600} lh={1.4} ta="center">Edit</Text>
</TableTh>
<TableTh w="20%">
<Text fz="sm" fw={600} lh={1.4} ta="center">Hapus</Text>
</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fz="md" fw={500} lh={1.5} truncate="end">
{item.nama}
</Text>
</TableTd>
<TableTd ta="center">
<Button
variant="light"
color="green"
onClick={() =>
router.push(
`/admin/keamanan/polsek-terdekat/layanan-polsek/${item.id}`
)
}
size="compact-sm"
>
<IconEdit size={16} />
</Button>
</TableTd>
<TableTd ta="center">
<Button
variant="light"
color="red"
disabled={layananState.delete.loading}
onClick={() => {
setSelectedId(item.id);
setModalHapus(true);
}}
size="compact-sm"
>
<IconTrash size={16} />
</Button>
</TableTd>
</TableTr>
))
) : (
<TableTr>
<TableTd colSpan={4}>
<Center py={24}>
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data Polsek yang cocok
</Text>
</Center>
</TableTd>
</TableTr>
)}
</TableTbody>
</Table>
</Box>
{/* Mobile Cards */}
<Box hiddenFrom="md">
<Stack gap="sm">
{filteredData.length > 0 ? (
filteredData.map((item) => (
<Paper key={item.id} withBorder p="sm" radius="sm">
<Stack gap={"xs"}>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
Nama Layanan Polsek
</Text>
<Text fz="sm" fw={500} lh={1.45}>
{item.nama}
</Text>
</Box>
<Group mt="sm" justify="flex-end" gap="xs">
<Button
variant="light"
color="green"
size="compact-xs"
onClick={() =>
router.push(
`/admin/keamanan/polsek-terdekat/layanan-polsek/${item.id}`
)
}
>
<IconEdit size={14} />
</Button>
<Button
variant="light"
color="red"
size="compact-xs"
disabled={layananState.delete.loading}
onClick={() => {
setSelectedId(item.id);
setModalHapus(true);
}}
>
<IconTrash size={14} />
</Button>
</Group>
</Stack>
</Paper>
))
) : (
<Center py={24}>
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data Layanan Polsek yang cocok
</Text>
</Center>
)}
</Stack>
</Box>
</Paper>
{/* Pagination */}
<Center>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10, search);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt={{ base: 'lg', md: 'xl' }}
mb={{ base: 'lg', md: 'xl' }}
color="blue"
radius="md"
/>
</Center>
{/* Modal Konfirmasi Hapus */}
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleDelete}
text="Apakah anda yakin ingin menghapus layanan polsek ini?"
/>
</Box>
);
}
export default LayananPolsek;

34
src/app/admin/(dashboard)/keamanan/polsek-terdekat/layout.tsx Normal file
View File

@@ -0,0 +1,34 @@
'use client'
import React from 'react';
import LayoutPolsek from './_com/layoutPolsek';
import { usePathname } from 'next/navigation';
import { Box } from '@mantine/core';
function Layout({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
// Contoh path:
// - /darmasaba/desa/berita/semua → panjang 5 → list
// - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
// - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
const segments = pathname.split('/').filter(Boolean);
const isDetailPage = segments.length >= 5;
if (isDetailPage) {
// Tampilkan tanpa tab menu
return (
<Box>
{children}
</Box>
);
}
return (
<LayoutPolsek>
{children}
</LayoutPolsek>
);
}
export default Layout;