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

UI & API Menu Keamanan, Kontak Darurat

Browse Source
This commit is contained in:
nico
2025-07-02 14:10:22 +08:00
parent 1c5e4410c4
commit 406c6f3c9f
13 changed files with 916 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

4
package.json
View File

@@ -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",

259
src/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan.ts Normal file
View File

@@ -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;

0
src/app/admin/(dashboard)/_state/keamanan/pencegahan-kriminalitas.ts Normal file
View File

269
src/app/admin/(dashboard)/keamanan/kontak-darurat/[id]/edit/page.tsx Normal file
View File

@@ -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;

117
src/app/admin/(dashboard)/keamanan/kontak-darurat/[id]/page.tsx Normal file
View File

@@ -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;

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

@@ -1,39 +1,232 @@
'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 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 { 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>
<TextInput
value={kontakState.create.form.nama}
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"}>Masukkan Image</Text>
<IconImageInPicture size={50} />
<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 Darurat</Text>}
placeholder='Masukkan nama Kontak Darurat'
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 fw={"bold"} fz={"sm"}>Deskripsi Kontak Darurat</Text>
<KeamananEditor
showSubmit={false}
<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>
</Paper>

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

@@ -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;

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

@@ -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;

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

@@ -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>Nomor Kontak Darurat</TableTh>
<TableTh>Deskripsi</TableTh>
<TableTh>Nama Kategori Darurat</TableTh>
<TableTh>Nama Kontak</TableTh>
<TableTh>Nomor Kontak</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
<TableTr>
<TableTd>Kontak Darurat 1</TableTd>
<TableTd>0896232831883</TableTd>
<TableTd>Kontak Darurat 1</TableTd>
{kontakState.findMany.data?.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.nama}</TableTd>
<TableTd>{item.kontakItems[0].nama}</TableTd>
<TableTd>{item.kontakItems[0].nomorTelepon}</TableTd>
<TableTd>
<Button onClick={() => router.push('/admin/keamanan/kontak-darurat/detail')}>
<Button onClick={() => router.push(`/admin/keamanan/kontak-darurat/${item.id}`)}>
<IconDeviceImac size={20} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Paper>

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

@@ -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",
};
}

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

@@ -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,
},
});

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

@@ -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)