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

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

Browse Source
This commit is contained in:
nico
2025-09-17 14:59:46 +08:00
parent 39e1e7b575
commit 79ad39fc55
50 changed files with 1326 additions and 1021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,29 +1,36 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import { IconKey } from '@/app/admin/(dashboard)/_com/iconMap';
import SelectIconProgramEdit from '@/app/admin/(dashboard)/_com/selectIconEdit';
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, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import {
Box,
Button,
Group,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
} 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 EditKontakItem() {
const router = useRouter();
const kontakState = useProxy(kontakDarurat.kontakDaruratItem)
const params = useParams()
const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
const params = useParams();
const [previewUtama, setPreviewUtama] = useState<string | null>(null);
const [fileUtama, setFileUtama] = useState<File | null>(null);
const [formData, setFormData] = useState({
name: kontakState.update.form.nama || '',
imageId: kontakState.update.form.imageId || '',
nomorTelepon: kontakState.update.form.nomorTelepon || '',
})
icon: kontakState.update.form.icon || '',
});
useEffect(() => {
const loadKontakDarurat = async () => {
@@ -35,17 +42,13 @@ function EditKontakItem() {
if (data) {
setFormData({
name: data.nama || '',
imageId: data.imageId || '',
nomorTelepon: data.nomorTelepon || '',
icon: data.icon || '',
});
if (data?.image?.link) {
setPreviewUtama(data.image.link);
}
}
} catch (error) {
console.error("Error loading kontak darurat:", error);
toast.error("Gagal memuat data kontak darurat");
console.error('Error loading kontak darurat:', error);
toast.error('Gagal memuat data kontak darurat');
}
};
@@ -57,115 +60,84 @@ function EditKontakItem() {
kontakState.update.form = {
...kontakState.update.form,
nama: formData.name,
imageId: formData.imageId,
nomorTelepon: formData.nomorTelepon,
}
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;
}
icon: formData.icon,
};
await kontakState.update.update();
toast.success("Kontak Darurat berhasil diperbarui!");
router.push("/admin/keamanan/kontak-darurat/kontak-darurat-item");
toast.success('Kontak Darurat berhasil diperbarui!');
router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item');
} catch (error) {
console.error("Error updating kontak darurat:", error);
toast.error("Terjadi kesalahan saat memperbarui kontak darurat");
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>
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* 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">
Edit Kontak Darurat Item
</Title>
</Group>
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
<Stack gap={"xs"}>
<Title order={4}>Edit Kontak Darurat</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
label="Nama Kontak"
placeholder="Masukkan nama kontak"
value={formData.name}
onChange={(val) => {
setFormData({ ...formData, name: val.target.value });
}}
label={<Text fw={"bold"} fz={"sm"}>Nama Kontak</Text>}
placeholder='Masukkan nama Kontak'
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
required
/>
<TextInput
label="Nomor Telepon"
placeholder="Masukkan nomor telepon"
value={formData.nomorTelepon}
onChange={(val) => {
setFormData({ ...formData, nomorTelepon: val.target.value });
}}
label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon</Text>}
placeholder='Masukkan nomor telepon'
onChange={(e) => setFormData({ ...formData, nomorTelepon: e.target.value })}
required
/>
<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>
<Text fw="bold" fz="sm" mb={6}>
Ikon Program Kreatif Desa
</Text>
<SelectIconProgramEdit
value={formData.icon as IconKey}
onChange={(value) => {
setFormData((prev) => ({ ...prev, icon: value }));
kontakState.update.form.icon = value;
}}
/>
</Box>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
<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>
</Paper>

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

@@ -1,11 +1,12 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -62,48 +63,31 @@ function DetailKontakDarurat() {
>
<Stack gap="md">
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
Detail Kontak Darurat
Detail Kontak Darurat Item
</Text>
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
<Stack gap="sm">
{/* Judul */}
<Box>
<Text fz="lg" fw="bold">Judul Kontak Darurat</Text>
<Text fz="lg" fw="bold">Judul Kontak Darurat Item</Text>
<Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold">Judul Kontak Darurat</Text>
<Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
<Text fz="lg" fw="bold">Nomor Telepon Kontak Darurat Item</Text>
<Text fz="md" c="dimmed">{data?.nomorTelepon || '-'}</Text>
</Box>
{/* Gambar Utama */}
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
<Image
w={{ base: 150, md: 490 }}
src={data?.image?.link}
alt="gambar kontak darurat"
/>
</Box>
{/* Kontak Item */}
<Box>
<Text fz="lg" fw="bold">Kontak</Text>
<Stack>
<Box>
<Text fz="md" fw="bold">{data.nama}</Text>
<Text fz="md" c="dimmed">{data.nomorTelepon}</Text>
{data.image?.link && (
<Image
w={{ base: 120, md: 200 }}
src={data.image.link}
alt={`gambar kontak ${data.nama}`}
/>
)}
</Box>
</Stack>
<Text fz={"lg"} fw={"bold"}>Ikon Kontak Darurat</Text>
{data?.icon && (
<IconMapper
name={data?.icon as IconKey}
size={32}
color={colors['blue-button']}
/>
)}
</Box>
{/* Aksi */}
@@ -126,7 +110,7 @@ function DetailKontakDarurat() {
<Tooltip label="Edit Data" withArrow position="top">
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/kontak-darurat/${data.id}/edit`)}
onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-item/${data.id}/edit`)}
variant="light"
radius="md"
size="md"

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

@@ -1,59 +1,34 @@
'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,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
Tooltip
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
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 CreateKontakItem() {
const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
const router = useRouter();
const [fileUtama, setFileUtama] = useState<File | null>(null);
const [previewUtama, setPreviewUtama] = useState<string | null>(null);
const resetForm = () => {
kontakState.create.form = {
nama: '',
imageId: '',
icon: '',
nomorTelepon: '',
};
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-item');
@@ -109,67 +84,11 @@ function CreateKontakItem() {
required
/>
{/* Upload Gambar Kategori */}
<Box>
<Text fz="sm" fw="bold">
Gambar Kontak Darurat
</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 Item</Text>
<SelectIconProgram onChange={(value) => kontakState.create.form.icon = value} />
</Box>
{/* Tombol Submit */}
<Group justify="right">
<Button

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

@@ -1,30 +1,24 @@
/* eslint-disable react-hooks/exhaustive-deps */
"use client";
import { IconKey } from "@/app/admin/(dashboard)/_com/iconMap";
import SelectIconProgramEdit from "@/app/admin/(dashboard)/_com/selectIconEdit";
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,
Center,
Group,
Image,
MultiSelect,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
Tooltip
} from "@mantine/core";
import { Dropzone } from "@mantine/dropzone";
import {
IconArrowBack,
IconImageInPicture,
IconPhoto,
IconUpload,
IconX,
IconArrowBack
} from "@tabler/icons-react";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
@@ -35,12 +29,9 @@ function EditKontakDaruratKeamanan() {
const router = useRouter();
const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
const params = useParams();
const [previewUtama, setPreviewUtama] = useState<string | null>(null);
const [fileUtama, setFileUtama] = useState<File | null>(null);
const [formData, setFormData] = useState({
name: kontakState.update.form.nama || "",
imageId: kontakState.update.form.imageId || "",
icon: kontakState.update.form.icon || "",
kategoriId: kontakState.update.form.kategoriId || [],
});
@@ -56,11 +47,9 @@ function EditKontakDaruratKeamanan() {
if (data) {
setFormData({
name: data.nama || "",
imageId: data.imageId || "",
icon: data.icon || "",
kategoriId: data.kategoriId || [],
});
if (data?.image?.link) setPreviewUtama(data.image.link);
}
} catch (error) {
console.error("Error loading kontak darurat:", error);
@@ -77,20 +66,9 @@ function EditKontakDaruratKeamanan() {
kontakState.update.form = {
...kontakState.update.form,
nama: formData.name,
imageId: formData.imageId,
icon: formData.icon,
kategoriId: formData.kategoriId,
};
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 utama");
kontakState.update.form.imageId = uploaded.id;
}
await kontakState.update.update();
toast.success("Kontak Darurat berhasil diperbarui!");
router.push("/admin/keamanan/kontak-darurat");
@@ -155,52 +133,15 @@ function EditKontakDaruratKeamanan() {
error={!formData.kategoriId.length ? "Pilih minimal satu kategori" : undefined}
/>
{/* Gambar utama */}
<Box>
<Text fz="sm" fw="bold">
Masukkan Gambar
</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFileUtama(selectedFile);
setPreviewUtama(URL.createObjectURL(selectedFile));
}
<Text fz={"sm"} fw={"bold"}>Ikon Program Kreatif Desa</Text>
<SelectIconProgramEdit
value={formData.icon as IconKey}
onChange={(value) => {
setFormData((prev) => ({ ...prev, icon: value }));
kontakState.update.form.icon = value;
}}
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 ? (
<Image alt="" src={previewUtama} w={200} h={200} mt="sm" />
) : (
<Center w={200} h={200} bg={"gray"} mt="sm">
<IconImageInPicture />
</Center>
)}
/>
</Box>
{/* Submit */}

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

@@ -1,11 +1,12 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -17,7 +18,7 @@ function DetailKontakDaruratKeamanan() {
const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
useShallowEffect(() => {
kontakDarurat.kontakDaruratItem.findUnique.load(params?.id as string);
kontakDarurat.kontakDaruratItem.findMany.load();
kontakState.findUnique.load(params?.id as string);
}, []);
@@ -74,14 +75,15 @@ function DetailKontakDaruratKeamanan() {
<Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
</Box>
{/* Gambar Utama */}
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
<Image
w={{ base: 150, md: 490 }}
src={data?.image?.link}
alt="gambar kontak darurat"
/>
<Text fz={"lg"} fw={"bold"}>Ikon Program Kreatif Desa</Text>
{data?.icon && (
<IconMapper
name={data?.icon as IconKey}
size={32}
color={colors['blue-button']}
/>
)}
</Box>
{/* Kontak Items */}
@@ -92,11 +94,11 @@ function DetailKontakDaruratKeamanan() {
<Box key={index}>
<Text fz="md" fw="bold">{item.kontakItem.nama}</Text>
<Text fz="md" c="dimmed">{item.kontakItem.nomorTelepon}</Text>
{item.kontakItem.image?.link && (
<Image
w={{ base: 120, md: 200 }}
src={item.kontakItem.image.link}
alt={`gambar kontak`}
{item.kontakItem.icon && (
<IconMapper
name={item.kontakItem.icon as IconKey}
size={32}
color={colors['blue-button']}
/>
)}
</Box>

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

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

25
src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/page.tsx
View File

@@ -73,7 +73,7 @@ function DetailLaporanPublik() {
Detail Laporan Publik
</Text>
<Paper bg={colors['BG-trans']} p="md" radius="md" shadow="xs">
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
<Stack gap="sm">
<Box>
<Text fz="lg" fw="bold">Judul Laporan Publik</Text>
@@ -96,7 +96,27 @@ function DetailLaporanPublik() {
<Box>
<Text fz="lg" fw="bold">Status</Text>
<Text fz="md" c="dimmed">{data.status || '-'}</Text>
<Box
style={{
display: 'inline-block',
padding: '4px 12px',
borderRadius: '16px',
backgroundColor:
data.status === 'Selesai' ? '#94EF95FF' :
data.status === 'Proses' ? '#F1D295FF' :
'#F38E8EFF',
color:
data.status === 'Selesai' ? '#01BA01FF' :
data.status === 'Proses' ? '#B67A00FF' :
'#AE1700FF',
fontWeight: 900,
fontSize: '0.75rem',
textAlign: 'center',
minWidth: '80px',
}}
>
{data.status || '-'}
</Box>
</Box>
<Box>
@@ -109,7 +129,6 @@ function DetailLaporanPublik() {
{data.penanganan?.length ? (
data.penanganan.map((item, index) => (
<Box key={index} pl="sm">
<Text fz="md" fw="bold">Deskripsi Penanganan</Text>
<Text
fz="md"
c="dimmed"

28
src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx
View File

@@ -5,18 +5,16 @@ import {
Button,
Group,
Paper,
Select,
Stack,
Text,
TextInput,
Title,
Tooltip,
Tooltip
} from '@mantine/core';
import { DateTimePicker } from '@mantine/dates';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import CreateEditor from '../../../_com/createEditor';
import laporanPublikState from '../../../_state/keamanan/laporan-publik';
export type Status = 'Selesai' | 'Proses' | 'Gagal';
@@ -30,8 +28,6 @@ function CreateLaporanPublik() {
judul: '',
lokasi: '',
tanggalWaktu: '',
status: 'Proses' as Status,
penanganan: '',
kronologi: '',
};
};
@@ -94,18 +90,6 @@ function CreateLaporanPublik() {
}}
/>
<Select
value={stateLaporan.create.form.status}
onChange={(e) => (stateLaporan.create.form.status = e?.valueOf() as Status)}
label={<Text fw="bold" fz="sm">Status Laporan Publik</Text>}
placeholder="Pilih status laporan publik"
data={[
{ value: 'Selesai', label: 'Selesai' },
{ value: 'Proses', label: 'Proses' },
{ value: 'Gagal', label: 'Gagal' },
]}
/>
<TextInput
value={stateLaporan.create.form.kronologi}
onChange={(e) => (stateLaporan.create.form.kronologi = e.target.value)}
@@ -114,16 +98,6 @@ function CreateLaporanPublik() {
required
/>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Penanganan Laporan Publik
</Text>
<CreateEditor
value={stateLaporan.create.form.penanganan}
onChange={(e) => (stateLaporan.create.form.penanganan = e)}
/>
</Box>
<Group justify="right">
<Button
onClick={handleSubmit}

30
src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx
View File

@@ -111,12 +111,34 @@ function ListLaporanPublik({ search }: { search: string }) {
</Text>
</TableTd>
<TableTd>
<Text fz="sm">{item.status}</Text>
<Box
style={{
display: 'inline-block',
padding: '4px 12px',
borderRadius: '16px',
backgroundColor:
item.status === 'Selesai' ? '#94EF95FF' :
item.status === 'Proses' ? '#F1D295FF' :
'#F38E8EFF',
color:
item.status === 'Selesai' ? '#01BA01FF' :
item.status === 'Proses' ? '#B67A00FF' :
'#AE1700FF',
fontWeight: 900,
fontSize: '0.75rem',
textAlign: 'center',
minWidth: '80px',
}}
>
{item.status}
</Box>
</TableTd>
<TableTd>
<Text truncate fz="sm" c="dimmed" lineClamp={1}>
{item.kronologi}
</Text>
<Box w={200}>
<Text truncate fz="sm" c="dimmed" lineClamp={1}>
{item.kronologi}
</Text>
</Box>
</TableTd>
<TableTd>
<Button