wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 2 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

18
prisma/schema.prisma
View File

@@ -81,8 +81,6 @@ model FileStorage {
PelayananSuratKeteranganImage PelayananSuratKeterangan[] @relation("PelayananSuratKeteranganImage")
PelayananSuratKeteranganImage2 PelayananSuratKeterangan[] @relation("PelayananSuratKeteranganImage2")
PasarDesa PasarDesa[]
KontakDaruratKeamanan KontakDaruratKeamanan[]
KontakItem KontakItem[]
Pegawai Pegawai[]
DesaDigital DesaDigital[]
InfoTekno InfoTekno[]
@@ -101,6 +99,8 @@ model FileStorage {
PerbekelDariMasaKeMasa PerbekelDariMasaKeMasa[]
MitraKolaborasi MitraKolaborasi[]
ArtikelKesehatan ArtikelKesehatan[]
}
//========================================= MENU LANDING PAGE ========================================= //
@@ -972,8 +972,10 @@ model ArtikelKesehatan {
id String @id @default(cuid())
title String
content String
introduction Introduction @relation(fields: [introductionId], references: [id])
image FileStorage? @relation(fields: [imageId], references: [id])
imageId String?
introductionId String
introduction Introduction @relation(fields: [introductionId], references: [id])
symptom Symptom @relation(fields: [symptomId], references: [id])
symptomId String
prevention Prevention @relation(fields: [preventionId], references: [id])
@@ -1218,8 +1220,7 @@ model LayananPolsek {
model KontakDaruratKeamanan {
id String @id @default(uuid())
nama String
image FileStorage? @relation(fields: [imageId], references: [id])
imageId String?
icon String
kategori KontakItem @relation(fields: [kategoriId], references: [id])
kategoriId String
kontakItems KontakDaruratToItem[]
@@ -1233,8 +1234,7 @@ model KontakItem {
id String @id @default(uuid())
nama String
nomorTelepon String
image FileStorage? @relation(fields: [imageId], references: [id])
imageId String?
icon String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
@@ -1304,11 +1304,13 @@ model LaporanPublik {
judul String
lokasi String
tanggalWaktu DateTime
status StatusLaporan
status StatusLaporan @default(Proses)
penanganan PenangananLaporanPublik[]
kronologi String? // Optional, bisa diisi detail kronologi
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
}
model PenangananLaporanPublik {

17
src/app/admin/(dashboard)/_com/iconMap.tsx
View File

@@ -23,6 +23,10 @@ import {
IconSchool,
IconShoppingCart,
IconHospital,
IconAmbulance,
IconFiretruck,
IconBuilding,
IconAlertTriangle,
} from '@tabler/icons-react'
export type IconKey =
@@ -46,6 +50,13 @@ export type IconKey =
| 'pelatihan'
| 'subsidi'
| 'layananKesehatan'
| 'polisi'
| 'ambulans'
| 'pemadam'
| 'rumahSakit'
| 'bangunan'
| 'darurat'
const iconMap: Record<IconKey, React.FC<any>> = {
ekowisata: IconLeaf,
@@ -68,6 +79,12 @@ const iconMap: Record<IconKey, React.FC<any>> = {
pelatihan: IconSchool,
subsidi: IconShoppingCart,
layananKesehatan: IconHospital,
polisi: IconShieldFilled,
ambulans: IconAmbulance,
pemadam: IconFiretruck,
rumahSakit: IconHospital,
bangunan: IconBuilding,
darurat: IconAlertTriangle
}
type Props = {

10
src/app/admin/(dashboard)/_com/selectIcon.tsx
View File

@@ -3,11 +3,15 @@
import { Box, rem, Select } from '@mantine/core';
import {
IconAlertTriangle,
IconAmbulance,
IconBuilding,
IconCash,
IconChartLine,
IconChristmasTreeFilled,
IconClipboardTextFilled,
IconDroplet,
IconFiretruck,
IconHome,
IconHomeEco,
IconHospital,
@@ -47,6 +51,12 @@ const iconMap = {
pelatihan: { label: 'Pelatihan', icon: IconSchool },
subsidi: { label: 'Subsidi', icon: IconShoppingCart },
layananKesehatan: { label: 'Layanan Kesehatan', icon: IconHospital },
polisi: { label: 'Polisi', icon: IconShieldFilled },
ambulans: { label: 'Ambulans', icon: IconAmbulance },
pemadam: { label: 'Pemadam', icon: IconFiretruck },
rumahSakit: { label: 'Rumah Sakit', icon: IconHospital },
bangunan: { label: 'Bangunan', icon: IconBuilding },
darurat: { label: 'Darurat', icon: IconAlertTriangle },
};

10
src/app/admin/(dashboard)/_com/selectIconEdit.tsx
View File

@@ -2,11 +2,13 @@
import { Box, rem, Select } from '@mantine/core';
import {
IconAmbulance,
IconCash,
IconChartLine,
IconChristmasTreeFilled,
IconClipboardTextFilled,
IconDroplet,
IconFiretruck,
IconHome,
IconHomeEco,
IconHospital,
@@ -22,6 +24,8 @@ import {
IconTrendingUp,
IconTrophy,
IconTruckFilled,
IconBuilding,
IconAlertTriangle
} from '@tabler/icons-react';
const iconMap = {
@@ -45,6 +49,12 @@ const iconMap = {
pelatihan: {label: 'Pelatihan', icon: IconSchool},
subsidi: {label: 'Subsidi', icon: IconShoppingCart},
layananKesehatan: {label: 'Layanan Kesehatan', icon: IconHospital},
polisi: {label: 'Polisi', icon: IconShieldFilled},
ambulans: {label: 'Ambulans', icon: IconAmbulance},
pemadam: {label: 'Pemadam', icon: IconFiretruck},
rumahSakit: {label: 'Rumah Sakit', icon: IconHospital},
bangunan: {label: 'Bangunan', icon: IconBuilding},
darurat: {label: 'Darurat', icon: IconAlertTriangle},
};
type IconKey = keyof typeof iconMap;

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

@@ -7,13 +7,13 @@ import { z } from "zod";
const templateForm = z.object({
nama: z.string().min(1, "Nama minimal 1 karakter"),
imageId: z.string().nonempty(),
icon: z.string().nonempty(),
kategoriId: z.array(z.string()).min(1, "Minimal pilih satu kategori"),
});
const defaultForm = {
nama: "",
imageId: "",
icon: "",
kategoriId: [] as string[],
};
@@ -54,7 +54,6 @@ const kontakDaruratKeamananState = proxy({
Prisma.KontakDaruratKeamananGetPayload<{
include: {
kategori: true;
image: true;
kontakItems: {
include: {
kontakItem: true;
@@ -102,14 +101,9 @@ const kontakDaruratKeamananState = proxy({
include: {
kontakItems: {
include: {
kontakItem: {
include: {
image: true;
}
};
kontakItem: true;
};
};
image: true;
kategori: true;
};
}> | null,
@@ -192,8 +186,9 @@ const kontakDaruratKeamananState = proxy({
this.id = data.id;
this.form = {
nama: data.nama,
imageId: data.imageId || '',
kategoriId: data.kontakItems?.map((item: any) => item.kontakItemId) || []
icon: data.icon || "",
kategoriId:
data.kontakItems?.map((item: any) => item.kontakItemId) || [],
};
return data;
} else {
@@ -230,7 +225,7 @@ const kontakDaruratKeamananState = proxy({
},
body: JSON.stringify({
nama: this.form.nama,
imageId: this.form.imageId,
icon: this.form.icon,
kategoriId: this.form.kategoriId,
}),
}
@@ -271,13 +266,13 @@ const kontakDaruratKeamananState = proxy({
const templateFormItem = 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(),
icon: z.string().nonempty(),
});
const defaultFormItem = {
nama: "",
nomorTelepon: "",
imageId: "",
icon: "",
};
const kontakDaruratItem = proxy({
@@ -285,9 +280,7 @@ const kontakDaruratItem = proxy({
form: { ...defaultFormItem },
loading: false,
async create() {
const cek = templateFormItem.safeParse(
kontakDaruratItem.create.form
);
const cek = templateFormItem.safeParse(kontakDaruratItem.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
@@ -296,9 +289,9 @@ const kontakDaruratItem = proxy({
}
try {
kontakDaruratItem.create.loading = true;
const res = await ApiFetch.api.keamanan.kontakitem[
"create"
].post(kontakDaruratItem.create.form);
const res = await ApiFetch.api.keamanan.kontakitem["create"].post(
kontakDaruratItem.create.form
);
if (res.status === 200) {
kontakDaruratItem.findMany.load();
return toast.success("success create");
@@ -315,8 +308,8 @@ const kontakDaruratItem = proxy({
findMany: {
data: null as Array<
Prisma.KontakItemGetPayload<{
include: {
image: true;
omit: {
isActive: true;
};
}>
> | null,
@@ -333,14 +326,13 @@ const kontakDaruratItem = proxy({
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.keamanan.kontakitem[
"find-many"
].get({ query });
const res = await ApiFetch.api.keamanan.kontakitem["find-many"].get({
query,
});
if (res.status === 200 && res.data?.success) {
kontakDaruratItem.findMany.data = res.data.data ?? [];
kontakDaruratItem.findMany.totalPages =
res.data.totalPages ?? 1;
kontakDaruratItem.findMany.totalPages = res.data.totalPages ?? 1;
} else {
kontakDaruratItem.findMany.data = [];
kontakDaruratItem.findMany.totalPages = 1;
@@ -356,9 +348,8 @@ const kontakDaruratItem = proxy({
},
findUnique: {
data: null as Prisma.KontakItemGetPayload<{
include: {
kategori: true;
image: true;
omit: {
isActive: true;
};
}> | null,
loading: false,
@@ -384,15 +375,12 @@ const kontakDaruratItem = proxy({
if (!id) return toast.warn("ID tidak valid");
try {
kontakDaruratItem.delete.loading = true;
const response = await fetch(
`/api/keamanan/kontakitem/del/${id}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}
);
const response = await fetch(`/api/keamanan/kontakitem/del/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
const result = await response.json();
@@ -422,15 +410,12 @@ const kontakDaruratItem = proxy({
}
try {
const response = await fetch(
`/api/keamanan/kontakitem/${id}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
const response = await fetch(`/api/keamanan/kontakitem/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@@ -441,7 +426,7 @@ const kontakDaruratItem = proxy({
this.form = {
nama: data.nama,
nomorTelepon: data.nomorTelepon,
imageId: data.imageId,
icon: data.icon,
};
return data;
} else {
@@ -457,9 +442,7 @@ const kontakDaruratItem = proxy({
},
async update() {
const cek = templateFormItem.safeParse(
kontakDaruratItem.update.form
);
const cek = templateFormItem.safeParse(kontakDaruratItem.update.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
@@ -469,20 +452,17 @@ const kontakDaruratItem = proxy({
try {
kontakDaruratItem.update.loading = true;
const response = await fetch(
`/api/keamanan/kontakitem/${this.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: this.form.nama,
nomorTelepon: this.form.nomorTelepon,
imageId: this.form.imageId,
}),
}
);
const response = await fetch(`/api/keamanan/kontakitem/${this.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: this.form.nama,
nomorTelepon: this.form.nomorTelepon,
icon: this.form.icon,
}),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
@@ -514,7 +494,7 @@ const kontakDaruratItem = proxy({
kontakDaruratItem.update.form = { ...defaultFormItem };
},
},
})
});
const kontakDarurat = proxy({
kontakDaruratKeamananState,

25
src/app/admin/(dashboard)/_state/keamanan/laporan-publik.ts
View File

@@ -11,12 +11,24 @@ const templateForm = z.object({
judul: z.string().min(3, "Judul minimal 3 karakter"),
lokasi: z.string().min(3, "Lokasi minimal 3 karakter"),
tanggalWaktu: z.string().min(3, "Tanggal Waktu minimal 3 karakter"),
status: z.enum(["Selesai", "Proses", "Gagal"]),
penanganan: z.string(),
kronologi: z.string().optional(),
});
interface FormData {
judul: string;
lokasi: string;
tanggalWaktu: string;
kronologi: string;
}
const defaultForm: FormData = {
judul: "",
lokasi: "",
tanggalWaktu: new Date().toISOString(),
kronologi: "",
};
interface FormEditData {
judul: string;
lokasi: string;
tanggalWaktu: string;
@@ -25,15 +37,16 @@ interface FormData {
kronologi: string;
}
const defaultForm: FormData = {
const editForm: FormEditData = {
judul: "",
lokasi: "",
tanggalWaktu: new Date().toISOString(),
kronologi: "",
status: "Proses",
penanganan: "",
kronologi: "",
};
const laporanPublikState = proxy({
create: {
form: { ...defaultForm },
@@ -185,7 +198,7 @@ const laporanPublikState = proxy({
},
edit: {
id: "",
form: { ...defaultForm },
form: { ...editForm },
loading: false,
async load(id: string) {
if (!id) {
@@ -291,7 +304,7 @@ const laporanPublikState = proxy({
},
reset() {
laporanPublikState.edit.id = "";
laporanPublikState.edit.form = { ...defaultForm };
laporanPublikState.edit.form = { ...editForm };
},
}
});

7
src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan.ts
View File

@@ -31,11 +31,13 @@ const templateForm = z.object({
doctorSign: z.object({
content: z.string().min(1, "Content harus diisi"),
}),
imageId: z.string().min(1, "Image ID harus diisi"),
});
const defaultForm = {
title: "",
content: "",
imageId: "",
introduction: {
content: "",
},
@@ -59,6 +61,7 @@ const defaultForm = {
doctorSign: {
content: "",
},
};
const artikelKesehatanState = proxy({
@@ -112,6 +115,7 @@ const artikelKesehatanState = proxy({
firstaid: true;
mythvsfact: true;
doctorsign: true;
image: true;
};
}>[]
| null,
@@ -159,6 +163,7 @@ const artikelKesehatanState = proxy({
firstaid: true;
mythvsfact: true;
doctorsign: true;
image: true;
};
}> | null,
loading: false,
@@ -213,6 +218,7 @@ const artikelKesehatanState = proxy({
doctorSign: {
content: data.doctorsign.content,
},
imageId: data.imageId,
};
},
async submit() {
@@ -253,6 +259,7 @@ const artikelKesehatanState = proxy({
doctorSign: {
content: artikelKesehatanState.edit.form.doctorSign.content,
},
imageId: artikelKesehatanState.edit.form.imageId,
};
const res = await fetch(

237
src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx
View File

@@ -1,7 +1,18 @@
'use client'
'use client';
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 {
Box,
Button,
Group,
Image,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
} from '@mantine/core';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
@@ -11,139 +22,167 @@ import CreateEditor from '../../../_com/createEditor';
import desaDigitalState from '../../../_state/inovasi/desa-digital';
import { Dropzone } from '@mantine/dropzone';
function CreateDesaDigital() {
const stateDesaDigital = useProxy(desaDigitalState)
const stateDesaDigital = useProxy(desaDigitalState);
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const router = useRouter()
const router = useRouter();
const resetForm = () => {
stateDesaDigital.create.form = {
name: "",
deskripsi: "",
imageId: "",
}
setPreviewImage(null)
setFile(null)
}
name: '',
deskripsi: '',
imageId: '',
};
setPreviewImage(null);
setFile(null);
};
const handleSubmit = async () => {
if (!file) {
return toast.error("Silahkan pilih file gambar terlebih dahulu")
return toast.warn('Silakan pilih file gambar terlebih dahulu');
}
try {
// Upload the image first
// Upload gambar dulu
const uploadRes = await ApiFetch.api.fileStorage.create.post({
file: file,
name: file.name
})
file,
name: file.name,
});
const uploaded = uploadRes.data?.data
const uploaded = uploadRes.data?.data;
if (!uploaded?.id) {
return toast.error("Gagal upload gambar")
return toast.error('Gagal mengunggah gambar');
}
// Set the image ID in the form
stateDesaDigital.create.form.imageId = uploaded.id
// Submit the form
const success = await stateDesaDigital.create.create()
// Set imageId ke form
stateDesaDigital.create.form.imageId = uploaded.id;
// Submit form
const success = await stateDesaDigital.create.create();
if (success) {
resetForm()
router.push("/admin/inovasi/desa-digital-smart-village")
resetForm();
router.push('/admin/inovasi/desa-digital-smart-village');
}
} catch (error) {
console.error("Error in handleSubmit:", error)
toast.error("Terjadi kesalahan saat menyimpan data")
console.error('Error in handleSubmit:', error);
toast.error('Terjadi kesalahan saat menyimpan data');
}
};
}
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"]} p={"md"} w={{ base: "100%", md: "50%" }}>
<Stack gap={"xs"}>
<Title order={3}>Create Desa Digital Smart Village</Title>
<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">
Tambah Desa Digital Smart Village
</Title>
</Group>
{/* Card */}
<Paper
w={{ base: '100%', md: '60%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
{/* Nama */}
<TextInput
label="Nama Desa Digital Smart Village"
placeholder="Masukkan nama desa digital smart village"
value={stateDesaDigital.create.form.name}
onChange={(val) => {
stateDesaDigital.create.form.name = val.target.value;
}}
label={<Text fz={"sm"} fw={"bold"}>Nama Desa Digital Smart Village</Text>}
placeholder="masukkan nama desa digital smart village"
onChange={(e) => (stateDesaDigital.create.form.name = e.target.value)}
required
/>
{/* Deskripsi */}
<Box>
<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
<Text fw="bold" fz="sm" mb={6}>
Deskripsi
</Text>
<CreateEditor
value={stateDesaDigital.create.form.deskripsi}
onChange={(htmlContent) => {
stateDesaDigital.create.form.deskripsi = htmlContent;
onChange={(val) => {
stateDesaDigital.create.form.deskripsi = val;
}}
/>
</Box>
{/* Upload Gambar */}
<Box>
<Text fz={"md"} fw={"bold"}>Gambar</Text>
<Box>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(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>
<Text fw="bold" fz="sm" mb={6}>
Gambar
</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
}
}}
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': [] }}
radius="md"
p="xl"
>
<Group justify="center" gap="xl" mih={180}>
<Dropzone.Accept>
<IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
</Group>
<Text ta="center" mt="sm" size="sm" color="dimmed">
Seret gambar atau klik untuk memilih file (maks 5MB)
</Text>
</Dropzone>
<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 */}
{previewImage && (
<Box mt="sm">
<Image
src={previewImage}
alt="Preview"
style={{
maxWidth: '100%',
maxHeight: '200px',
objectFit: 'contain',
borderRadius: '8px',
border: '1px solid #ddd',
}}
/>
</Box>
)}
</Box>
{/* Preview */}
{previewImage && (
<Box mt="sm" style={{ textAlign: 'center' }}>
<Image
src={previewImage}
alt="Preview"
radius="md"
style={{
maxHeight: 200,
objectFit: 'contain',
border: '1px solid #ddd',
}}
/>
</Box>
)}
</Box>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
{/* Tombol Submit */}
<Group justify="right">
<Button
onClick={handleSubmit}
radius="md"
size="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
</Button>
</Group>
</Stack>
</Paper>
</Box>

158
src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/page.tsx
View File

@@ -1,13 +1,30 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Pagination } from '@mantine/core';
import {
Box,
Button,
Center,
Group,
Pagination,
Paper,
Skeleton,
Stack,
Table,
TableTbody,
TableTd,
TableTh,
TableThead,
TableTr,
Text,
Title,
Tooltip
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
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 JudulList from '../../_com/judulList';
import desaDigitalState from '../../_state/inovasi/desa-digital';
function DesaDigitalSmartVillage() {
@@ -15,8 +32,8 @@ function DesaDigitalSmartVillage() {
return (
<Box>
<HeaderSearch
title='Desa Digital Smart Village'
placeholder='pencarian'
title="Desa Digital Smart Village"
placeholder="Cari inovasi digital desa..."
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,69 +44,114 @@ function DesaDigitalSmartVillage() {
}
function ListDesaDigitalSmartVillage({ search }: { search: string }) {
const state = useProxy(desaDigitalState)
const router = useRouter()
const state = useProxy(desaDigitalState);
const router = useRouter();
const {
data,
page,
totalPages,
loading,
load,
} = state.findMany
const { data, page, totalPages, loading, load } = state.findMany;
useShallowEffect(() => {
load(page, 10, search)
}, [page, search])
load(page, 10, search);
}, [page, search]);
const filteredData = data || []
const filteredData = data || [];
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton h={500} />
<Skeleton height={600} radius="md" />
</Stack>
)
);
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<JudulList
title='List Desa Digital Smart Village'
href='/admin/inovasi/desa-digital-smart-village/create'
/>
<Table striped withTableBorder withRowBorders>
<TableThead>
<TableTr>
<TableTh>Nama Inovasi</TableTh>
<TableTh>Deskripsi Singkat Inovasi</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.name}</TableTd>
<TableTd>
<Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/inovasi/desa-digital-smart-village/${item.id}`)}>
<IconDeviceImac size={20} />
</Button>
</TableTd>
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>List Desa Digital Smart Village</Title>
<Tooltip label="Tambah Inovasi" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() =>
router.push('/admin/inovasi/desa-digital-smart-village/create')
}
>
Tambah Baru
</Button>
</Tooltip>
</Group>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover>
<TableThead>
<TableTr>
<TableTh style={{ width: '30%' }}>Nama Inovasi</TableTh>
<TableTh style={{ width: '50%' }}>
Deskripsi Singkat Inovasi
</TableTh>
<TableTh style={{ width: '20%' }}>Aksi</TableTh>
</TableTr>
))}
</TableTbody>
</Table>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fw={500} truncate="end" lineClamp={1}>
{item.name}
</Text>
</TableTd>
<TableTd>
<Text
fz="sm"
c="dimmed"
lineClamp={2}
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
/>
</TableTd>
<TableTd>
<Button
variant="light"
color="blue"
onClick={() =>
router.push(
`/admin/inovasi/desa-digital-smart-village/${item.id}`
)
}
>
<IconDeviceImac size={20} />
<Text ml={5}>Detail</Text>
</Button>
</TableTd>
</TableTr>
))
) : (
<TableTr>
<TableTd colSpan={3}>
<Center py={20}>
<Text color="dimmed">
Tidak ada data inovasi digital yang cocok
</Text>
</Center>
</TableTd>
</TableTr>
)}
</TableTbody>
</Table>
</Box>
</Paper>
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)} // ini penting!
onChange={(newPage) => {
load(newPage, 10);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
</Center>
</Box>

12
src/app/admin/(dashboard)/inovasi/program-kreatif-desa/[id]/edit/page.tsx
View File

@@ -35,20 +35,20 @@ function EditProgramKreatifDesa() {
const loadProgramKreatif = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await stateProgramKreatif.update.load(id);
if (data) {
// ⬇️ FIX PENTING: tambahkan ini
stateProgramKreatif.update.id = id;
stateProgramKreatif.update.form = {
name: data.name,
slug: data.slug,
deskripsi: data.deskripsi,
icon: data.icon,
};
setFormData({
name: data.name,
slug: data.slug,
@@ -61,10 +61,10 @@ function EditProgramKreatifDesa() {
toast.error("Gagal memuat data program kreatif");
}
}
loadProgramKreatif();
}, [params?.id]);
const handleSubmit = async () => {
@@ -134,7 +134,7 @@ function EditProgramKreatifDesa() {
setFormData((prev) => ({ ...prev, icon: value }));
stateProgramKreatif.update.form.icon = value;
}}
/>
/>
</Box>

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

108
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/[id]/edit/page.tsx
View File

@@ -4,10 +4,12 @@
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import {
Box,
Button,
Group,
Image,
Paper,
Stack,
Text,
@@ -15,7 +17,8 @@ import {
Title,
Tooltip
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
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';
@@ -24,6 +27,7 @@ import { useProxy } from 'valtio/utils';
interface ArtikelKesehatanFormBase {
title: string;
content: string;
imageId: string;
introduction: { content: string };
symptom: { title: string; content: string };
prevention: { title: string; content: string };
@@ -37,29 +41,32 @@ function EditArtikelKesehatan() {
const router = useRouter();
const params = useParams();
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState<ArtikelKesehatanFormBase>({
title: stateArtikelKesehatan.edit.form.title || '',
content: stateArtikelKesehatan.edit.form.content || '',
introduction: { content: stateArtikelKesehatan.edit.form.introduction?.content || '' },
title: stateArtikelKesehatan.edit.form.title,
content: stateArtikelKesehatan.edit.form.content,
imageId: stateArtikelKesehatan.edit.form.imageId,
introduction: { content: stateArtikelKesehatan.edit.form.introduction?.content },
symptom: {
title: stateArtikelKesehatan.edit.form.symptom?.title || '',
content: stateArtikelKesehatan.edit.form.symptom?.content || ''
title: stateArtikelKesehatan.edit.form.symptom?.title,
content: stateArtikelKesehatan.edit.form.symptom?.content
},
prevention: {
title: stateArtikelKesehatan.edit.form.prevention?.title || '',
content: stateArtikelKesehatan.edit.form.prevention?.content || ''
title: stateArtikelKesehatan.edit.form.prevention?.title,
content: stateArtikelKesehatan.edit.form.prevention?.content
},
firstAid: {
title: stateArtikelKesehatan.edit.form.firstAid?.title || '',
content: stateArtikelKesehatan.edit.form.firstAid?.content || ''
title: stateArtikelKesehatan.edit.form.firstAid?.title,
content: stateArtikelKesehatan.edit.form.firstAid?.content
},
mythVsFact: {
title: stateArtikelKesehatan.edit.form.mythVsFact?.title || '',
mitos: stateArtikelKesehatan.edit.form.mythVsFact?.mitos || '',
fakta: stateArtikelKesehatan.edit.form.mythVsFact?.fakta || ''
title: stateArtikelKesehatan.edit.form.mythVsFact?.title,
mitos: stateArtikelKesehatan.edit.form.mythVsFact?.mitos,
fakta: stateArtikelKesehatan.edit.form.mythVsFact?.fakta
},
doctorSign: {
content: stateArtikelKesehatan.edit.form.doctorSign?.content || ''
content: stateArtikelKesehatan.edit.form.doctorSign?.content
}
});
@@ -76,6 +83,7 @@ function EditArtikelKesehatan() {
title: form.title,
content: form.content,
introduction: { content: form.introduction?.content || '' },
imageId: form.imageId,
symptom: {
title: form.symptom?.title || '',
content: form.symptom?.content || ''
@@ -97,6 +105,10 @@ function EditArtikelKesehatan() {
content: form.doctorSign?.content || ''
}
});
if (form?.imageId) {
setPreviewImage(`${process.env.NEXT_PUBLIC_API_URL}/file/${form.imageId}`);
}
}
} catch (error) {
console.error("Error loading artikel kesehatan:", error);
@@ -109,6 +121,20 @@ function EditArtikelKesehatan() {
const handleSubmit = async () => {
try {
stateArtikelKesehatan.edit.form = { ...formData };
if (file) {
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
});
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error("Gagal upload gambar");
}
stateArtikelKesehatan.edit.form.imageId = uploaded.id;
}
const success = await stateArtikelKesehatan.edit.submit();
if (success) {
toast.success("Artikel kesehatan berhasil diperbarui!");
@@ -151,6 +177,60 @@ function EditArtikelKesehatan() {
onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
required
/>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Gambar Berita
</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
}
}}
onReject={() => toast.error("File tidak valid, gunakan format gambar")}
maxSize={5 * 1024 ** 2}
accept={{ "image/*": [] }}
radius="md"
p="xl"
>
<Group justify="center" gap="xl" mih={180}>
<Dropzone.Accept>
<IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={48} color="red" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={48} color="#868e96" stroke={1.5} />
</Dropzone.Idle>
<Stack gap="xs" align="center">
<Text size="md" fw={500}>
Seret gambar atau klik untuk memilih file
</Text>
<Text size="sm" c="dimmed">
Maksimal 5MB, format gambar wajib
</Text>
</Stack>
</Group>
</Dropzone>
{previewImage && (
<Box mt="sm" style={{ display: "flex", justifyContent: "center" }}>
<Image
src={previewImage}
alt="Preview Gambar"
radius="md"
style={{
maxHeight: 220,
objectFit: "contain",
border: `1px solid ${colors["blue-button"]}`,
}}
/>
</Box>
)}
</Box>
<TextInput
label="Deskripsi"
placeholder="Masukkan deskripsi artikel"

17
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/[id]/page.tsx
View File

@@ -6,6 +6,7 @@ import {
Box,
Button,
Group,
Image,
Paper,
Skeleton,
Stack,
@@ -81,6 +82,22 @@ function DetailArtikelKesehatan() {
<Text fz="lg" fw="bold">Judul</Text>
<Text fz="md" c="dimmed">{data.title}</Text>
</Box>
{/* Gambar */}
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
{data.image?.link ? (
<Image
src={data.image.link}
alt={data.title || 'Gambar Berita'}
w={200}
h={200}
radius="md"
fit="cover"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>
)}
</Box>
{/* Deskripsi */}
<Box>

76
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/create/page.tsx
View File

@@ -2,10 +2,12 @@
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import {
Box,
Button,
Group,
Image,
Paper,
Stack,
Text,
@@ -13,19 +15,24 @@ import {
Title,
Tooltip,
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function CreateArtikelKesehatan() {
const stateArtikelKesehatan = useProxy(artikelKesehatanState);
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const router = useRouter();
const resetForm = () => {
stateArtikelKesehatan.create.form = {
title: '',
content: '',
imageId: '',
introduction: {
content: '',
},
@@ -50,10 +57,27 @@ function CreateArtikelKesehatan() {
content: '',
},
};
setPreviewImage(null);
setFile(null);
};
const handleSubmit = async (e?: React.FormEvent) => {
e?.preventDefault();
if (!file) {
return toast.warn('Silakan pilih file gambar terlebih dahulu');
}
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
});
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error('Gagal mengunggah gambar, silakan coba lagi');
}
stateArtikelKesehatan.create.form.imageId = uploaded.id;
await stateArtikelKesehatan.create.submit();
toast.success('Data berhasil disimpan');
resetForm();
@@ -89,6 +113,56 @@ function CreateArtikelKesehatan() {
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<Box>
<Text fw="bold" fz="sm" mb={6}>
Gambar Berita
</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
}
}}
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': [] }}
radius="md"
p="xl"
>
<Group justify="center" gap="xl" mih={180}>
<Dropzone.Accept>
<IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
</Group>
<Text ta="center" mt="sm" size="sm" color="dimmed">
Seret gambar atau klik untuk memilih file (maks 5MB)
</Text>
</Dropzone>
{previewImage && (
<Box mt="sm" style={{ textAlign: 'center' }}>
<Image
src={previewImage}
alt="Preview Gambar"
radius="md"
style={{
maxHeight: 200,
objectFit: 'contain',
border: '1px solid #ddd',
}}
/>
</Box>
)}
</Box>
<TextInput
label={"Judul"}
placeholder="Masukkan judul"

14
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/page.tsx
View File

@@ -5,8 +5,8 @@ import {
Button,
Center,
Group,
Paper,
Pagination,
Paper,
Skeleton,
Stack,
Table,
@@ -20,26 +20,18 @@ import {
Tooltip,
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, 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 artikelKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import { useState } from 'react';
function ArtikelKesehatan() {
const router = useRouter();
const [search, setSearch] = useState("");
return (
<Box>
{/* Tombol Back */}
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors["blue-button"]} size={25} />
</Button>
</Box>
{/* Header Search */}
<HeaderSearch
title='Artikel Kesehatan'

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

@@ -3,7 +3,7 @@ import { Context } from "elysia";
type FormCreate = {
nama: string;
imageId?: string;
icon: string;
kategoriId: string[];
};
export default async function kontakDaruratKeamananCreate(context: Context) {
@@ -18,7 +18,7 @@ export default async function kontakDaruratKeamananCreate(context: Context) {
const kontakDaruratKeamanan = await prisma.kontakDaruratKeamanan.create({
data: {
nama: body.nama,
imageId: body.imageId,
icon: body.icon,
kategoriId: body.kategoriId[0],
},
});
@@ -33,7 +33,6 @@ export default async function kontakDaruratKeamananCreate(context: Context) {
return await prisma.kontakDaruratKeamanan.findUnique({
where: { id: kontakDaruratKeamanan.id },
include: {
image: true,
kategori: true,
kontakItems: {
include: {

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

@@ -1,7 +1,5 @@
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 { params } = context;
@@ -19,9 +17,6 @@ export default async function kontakDaruratKeamananDelete(context: Context) {
const kontakDaruratKeamanan = await prisma.kontakDaruratKeamanan.findUnique({
where: { id },
include: {
image: true,
},
});
if (!kontakDaruratKeamanan) {
@@ -31,21 +26,6 @@ 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 },
});

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

@@ -14,7 +14,10 @@ export default async function kontakDaruratKeamananFindMany(context: Context) {
// Tambahkan pencarian (jika ada)
if (search) {
where.OR = [{ nama: { contains: search, mode: "insensitive" } }];
where.OR = [
{ nama: { contains: search, mode: "insensitive" } },
{ kontakItems: { some: { kontakItem: { nama: { contains: search, mode: "insensitive" } } } } },
];
}
try {
@@ -27,7 +30,6 @@ export default async function kontakDaruratKeamananFindMany(context: Context) {
},
},
image: true,
kategori: true,
},
skip,

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

@@ -16,15 +16,11 @@ export default async function kontakDaruratKeamananFindUnique(
include: {
kontakItems: {
include: {
kontakItem: {
include: {
image: true
}
},
kontakItem: true,
},
},
image: true,
kategori: true,
},
});

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

@@ -24,7 +24,7 @@ const KontakDaruratKeamanan = new Elysia({
.post("/create", kontakDaruratKeamananCreate, {
body: t.Object({
nama: t.String(),
imageId: t.Optional(t.String()),
icon: t.String(),
kategoriId: t.Array(t.String()),
}),
})
@@ -41,7 +41,7 @@ const KontakDaruratKeamanan = new Elysia({
}),
body: t.Object({
nama: t.String(),
imageId: t.Optional(t.String()),
icon: t.String(),
kategoriId: t.Array(t.String()),
}),
}

4
src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/kontak-item/create.ts
View File

@@ -4,7 +4,7 @@ import { Context } from "elysia";
type FormCreate = {
nama: string;
nomorTelepon: string;
imageId?: string;
icon: string;
};
export default async function kontakItemCreate(context: Context){
const body = context.body as FormCreate
@@ -13,7 +13,7 @@ export default async function kontakItemCreate(context: Context){
data: {
nama: body.nama,
nomorTelepon: body.nomorTelepon,
imageId: body.imageId,
icon: body.icon,
},
})
return {

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

@@ -1,7 +1,5 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
import fs from "fs/promises";
import path from "path";
export default async function kontakItemDelete(context: Context){
const id = context.params?.id as string;
@@ -15,9 +13,6 @@ export default async function kontakItemDelete(context: Context){
const kontakItem = await prisma.kontakItem.findUnique({
where: { id },
include: {
image: true
}
});
if (!kontakItem) {
@@ -27,18 +22,6 @@ export default async function kontakItemDelete(context: Context){
};
}
if (kontakItem.image) {
try {
const filePath = path.join(kontakItem.image.path, kontakItem.image.name);
await fs.unlink(filePath);
await prisma.fileStorage.delete({
where: { id: kontakItem.image.id },
});
} catch (err) {
console.error("Gagal hapus file image:", err);
}
}
await prisma.kontakItem.delete({
where: { id },
});

3
src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/kontak-item/findMany.ts
View File

@@ -22,9 +22,6 @@ export default async function kontakItemFindMany(context: Context) {
try {
const [data, total] = await Promise.all([
prisma.kontakItem.findMany({
include: {
image: true,
},
skip,
take: limit,
orderBy: { createdAt: "desc" },

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

@@ -30,9 +30,6 @@ export default async function kontakItemFindUnique(
const data = await prisma.kontakItem.findUnique({
where: { id },
include: {
image: true,
},
});
if (!data) {

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

@@ -17,7 +17,7 @@ const KontakItem = new Elysia({
.post("/create", kontakItemCreate, {
body: t.Object({
nama: t.String(),
imageId: t.Optional(t.String()),
icon: t.String(),
nomorTelepon: t.String(),
}),
})
@@ -31,7 +31,7 @@ const KontakItem = new Elysia({
{
body: t.Object({
nama: t.String(),
imageId: t.Optional(t.String()),
icon: t.String(),
nomorTelepon: t.String(),
}),

7
src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/kontak-item/updt.ts
View File

@@ -4,7 +4,7 @@ import { Context } from "elysia";
type FormUpdate = {
nama: string;
nomorTelepon: string;
imageId?: string;
icon: string;
};
export default async function kontakItemUpdate(context: Context){
@@ -18,10 +18,7 @@ export default async function kontakItemUpdate(context: Context){
data: {
nama: body.nama,
nomorTelepon: body.nomorTelepon,
imageId: body.imageId,
},
include: {
image: true,
icon: body.icon,
},
});

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

@@ -4,7 +4,7 @@ import { Context } from "elysia";
type FormUpdate = {
id: string;
nama: string;
imageId?: string;
icon: string;
kategoriId: string[];
};
@@ -23,7 +23,7 @@ export default async function kontakDaruratKeamananUpdate(context: Context) {
where: { id: body.id },
data: {
nama: body.nama,
imageId: body.imageId,
icon: body.icon,
kategoriId: body.kategoriId[0],
},
});
@@ -42,7 +42,6 @@ export default async function kontakDaruratKeamananUpdate(context: Context) {
const updated = await prisma.kontakDaruratKeamanan.findUnique({
where: { id: body.id },
include: {
image: true,
kategori: true,
kontakItems: {
include: {

13
src/app/api/[[...slugs]]/_lib/keamanan/laporan-publik/create.ts
View File

@@ -5,13 +5,11 @@ type LaporanPublikInput = {
judul: string;
lokasi: string;
tanggalWaktu: string;
status: "Selesai" | "Proses" | "Gagal";
penanganan: string;
kronologi?: string;
};
const laporanPublikCreate = async (context: Context) => {
const { judul, lokasi, tanggalWaktu, status, penanganan, kronologi } =
const { judul, lokasi, tanggalWaktu, kronologi } =
(await context.body) as LaporanPublikInput;
const createdLaporanPublik = await prisma.laporanPublik.create({
@@ -19,16 +17,7 @@ const laporanPublikCreate = async (context: Context) => {
judul,
lokasi,
tanggalWaktu: new Date(tanggalWaktu),
status,
penanganan: {
create: {
deskripsi: penanganan,
},
},
kronologi,
},
include: {
penanganan: true,
}
})

6
src/app/api/[[...slugs]]/_lib/keamanan/laporan-publik/index.ts
View File

@@ -14,12 +14,6 @@ const LaporanPublik = new Elysia({
judul: t.String(),
lokasi: t.String(),
tanggalWaktu: t.String(), // ISO string
status: t.Union([
t.Literal("Selesai"),
t.Literal("Proses"),
t.Literal("Gagal"),
]),
penanganan: t.String(), // 🛠️ ARRAY of strings
kronologi: t.Optional(t.String()),
}),
})

54
src/app/api/[[...slugs]]/_lib/keamanan/laporan-publik/updt.ts
View File

@@ -1,13 +1,14 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
type LaporanPublikUpdateInput = {
judul: string;
lokasi: string;
tanggalWaktu: string;
status: "Selesai" | "Proses" | "Gagal";
penanganan: string;
judul?: string;
lokasi?: string;
tanggalWaktu?: string;
status?: "Selesai" | "Proses" | "Gagal";
kronologi?: string;
penanganan?: string;
};
const LaporanPublikUpdate = async (context: Context) => {
@@ -15,28 +16,35 @@ const LaporanPublikUpdate = async (context: Context) => {
const { judul, lokasi, tanggalWaktu, status, penanganan, kronologi } =
(await context.body) as LaporanPublikUpdateInput;
await prisma.penangananLaporanPublik.deleteMany({
where: {
laporanId: id,
},
});
// Prepare update data with only provided fields
const updateData: any = {};
if (judul !== undefined) updateData.judul = judul;
if (lokasi !== undefined) updateData.lokasi = lokasi;
if (tanggalWaktu !== undefined) updateData.tanggalWaktu = new Date(tanggalWaktu);
if (status !== undefined) updateData.status = status;
if (kronologi !== undefined) updateData.kronologi = kronologi;
const updated = await prisma.laporanPublik.update({
where: {
id,
},
data: {
judul,
lokasi,
tanggalWaktu: new Date(tanggalWaktu),
status,
kronologi,
penanganan: {
// Handle penanganan update if provided
if (penanganan !== undefined) {
// Delete existing penanganan
await prisma.penangananLaporanPublik.deleteMany({
where: { laporanId: id },
});
// Add new penanganan if not empty
if (penanganan.trim()) {
updateData.penanganan = {
create: {
deskripsi: penanganan,
},
},
},
};
}
}
const updated = await prisma.laporanPublik.update({
where: { id },
data: updateData,
include: {
penanganan: true,
},

5
src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/create.ts
View File

@@ -4,6 +4,7 @@ import { Context } from "elysia";
type ArtikelKesehatanInput = {
title: string;
content: string;
imageId: string;
introduction: {content: string};
symptom: {title: string; content: string};
prevention: {title: string; content: string};
@@ -14,7 +15,7 @@ type ArtikelKesehatanInput = {
const artikelKesehatanCreate = async (context: Context) => {
const body = await context.body as ArtikelKesehatanInput;
const { title, content, introduction, symptom, prevention, firstAid, mythVsFact, doctorSign } = body;
const { title, content, introduction, symptom, prevention, firstAid, mythVsFact, doctorSign, imageId } = body;
const [createdIntroduction, createdSymptom, createdPrevention, createdFirstAid, createdMythVsFact, createdDoctorSign] = await Promise.all([
prisma.introduction.create({ data: introduction }),
@@ -29,6 +30,7 @@ const artikelKesehatanCreate = async (context: Context) => {
data: {
title,
content,
imageId,
introductionId: createdIntroduction.id,
symptomId: createdSymptom.id,
preventionId: createdPrevention.id,
@@ -37,6 +39,7 @@ const artikelKesehatanCreate = async (context: Context) => {
doctorSignId: createdDoctorSign.id,
},
include: {
image: true,
introduction: true,
symptom: true,
prevention: true,

1
src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/findMany.ts
View File

@@ -37,6 +37,7 @@ export default async function artikelKesehatanFindMany(context: Context) {
firstaid: true,
mythvsfact: true,
doctorsign: true,
image: true,
},
skip,
take: limit,

1
src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/findUnique.ts
View File

@@ -29,6 +29,7 @@ export async function artikelKesehatanFindUnique(request: Request) {
firstaid: true,
mythvsfact: true,
doctorsign: true,
image: true,
}
})
if (!data) {

2
src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/index.ts
View File

@@ -36,6 +36,7 @@ const ArtikelKesehatan = new Elysia({
doctorSign: t.Object({
content: t.String(),
}),
imageId: t.String(),
}),
})
.get("/find-many", artikelKesehatanFindMany)
@@ -79,6 +80,7 @@ const ArtikelKesehatan = new Elysia({
doctorSign: t.Object({
content: t.String(),
}),
imageId: t.String(),
}),
}
);

6
src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/updt.ts
View File

@@ -4,6 +4,7 @@ import { Context } from "elysia";
type ArtikelKesehatanInput = {
title: string;
content: string;
imageId: string;
introduction: { content: string };
symptom: { title: string; content: string };
prevention: { title: string; content: string };
@@ -51,6 +52,7 @@ const artikelKesehatanUpdate = async (context: Context) => {
firstAid,
mythVsFact,
doctorSign,
imageId,
} = body;
await Promise.all([
@@ -84,7 +86,8 @@ const artikelKesehatanUpdate = async (context: Context) => {
where: { id },
data: {
title,
content
content,
imageId,
},
include: {
introduction: true,
@@ -93,6 +96,7 @@ const artikelKesehatanUpdate = async (context: Context) => {
firstaid: true,
mythvsfact: true,
doctorsign: true,
image: true,
},
});

235
src/app/darmasaba/(pages)/keamanan/kontak-darurat/page.tsx
View File

@@ -1,72 +1,60 @@
'use client'
import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
import colors from '@/con/colors';
import { Avatar, Box, Flex, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconAmbulance, IconBadge, IconBuildingBank, IconBuildingSkyscraper, IconFiretruck, IconFirstAidKit, IconPhoneCall, IconUser } from '@tabler/icons-react';
import { Avatar, Box, Center, Flex, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconPhoneCall, IconSearch } from '@tabler/icons-react';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import BackButton from '../../desa/layanan/_com/BackButto';
import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
const emergencyServices = [
{
id: 1,
name: "Polisi",
icon: <IconBadge size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
},
{
id: 2,
name: "Ambulans",
icon: <IconAmbulance size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
},
{
id: 3,
name: "Pemadam Kebakaran",
icon: <IconFiretruck size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
}
];
const healthFacilities = [
{
id: 4,
name: "Puskesmas Darmasaba",
icon: <IconFirstAidKit size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
},
{
id: 5,
name: "UGD Terdekat",
icon: <IconAmbulance size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
}
];
const villageGovernment = [
{
id: 6,
name: "Kantor Desa Darmasaba",
icon: <IconBuildingSkyscraper size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
},
{
id: 7,
name: "Kepala Desa",
icon: <IconUser size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
}
];
function Page() {
const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
const [search, setSearch] = useState("");
const [debouncedSearch] = useDebouncedValue(search, 500);
const {
data,
page,
totalPages,
loading,
load,
} = kontakState.findMany;
useShallowEffect(() => {
load(page, 4, debouncedSearch);
kontakDarurat.kontakDaruratItem.findMany.load();
}, [page, debouncedSearch]);
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton height={600} radius="md" />
</Stack>
);
}
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Kontak Darurat
</Text>
<Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
</Text>
</Box>
<Group px={{ base: 'md', md: 100 }} justify={'space-between'} align='center'>
<Box>
<Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Kontak Darurat
</Text>
<Text fz={{ base: "h4", md: "h3" }} >
Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
</Text>
</Box>
<TextInput
placeholder='Cari kontak darurat, nama, atau nomor...'
leftSection={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
</Group>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
@@ -87,71 +75,74 @@ function Page() {
<Box px={{ base: "md", md: 100 }}>
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
{/* Layanan Darurat */}
<Paper p="lg" radius="md" bg={colors['white-trans-1']}>
<Group pb="md" align="center">
<Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
<IconFirstAidKit size={30} color={colors["blue-button"]} />
</Avatar>
<Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
Layanan Darurat
</Text>
</Group>
{emergencyServices.map((v, k) => (
<Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
<Group>
{v.icon}
<Text>{v.name}</Text>
</Group>
<Text>{v.nomor}</Text>
{data.map((item) => (
<Paper
key={item.id}
p="lg"
radius="md"
bg={colors['white-trans-1']}
>
<Group pb="md" align="center">
<Avatar radius="xl" size="lg" bg={colors['BG-trans']}>
{item.icon && (
<IconMapper
name={item.icon as IconKey}
size={32}
color={colors['blue-button']}
/>
)}
</Avatar>
<Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
{item.nama}
</Text>
</Group>
))}
</Paper>
{/* Fasilitas Kesehatan */}
<Paper p="lg" radius="md" bg={colors['white-trans-1']}>
<Group pb="md" align="center">
<Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
<IconBuildingSkyscraper size={30} color={colors["blue-button"]} />
</Avatar>
<Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
Fasilitas Kesehatan
</Text>
</Group>
{healthFacilities.map((v, k) => (
<Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
<Group>
{v.icon}
<Text>{v.name}</Text>
</Group>
<Text>{v.nomor}</Text>
</Group>
))}
</Paper>
{/* Pemerintah Desa */}
<Paper p="lg" radius="md" bg={colors['white-trans-1']}>
<Group pb="md" align="center">
<Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
<IconBuildingBank size={30} color={colors["blue-button"]} />
</Avatar>
<Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
Pemerintah Desa
</Text>
</Group>
{villageGovernment.map((v, k) => (
<Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
<Group>
{v.icon}
<Text>{v.name}</Text>
</Group>
<Text>{v.nomor}</Text>
</Group>
))}
</Paper>
{/* Kontak Items */}
{item.kontakItems?.map((kontak) => (
<Paper
key={kontak.id}
p="lg"
bg={colors['BG-trans']}
radius="md"
shadow="xs"
mt="sm"
>
<Group align="center" justify="space-between">
<Group align="center">
{kontak.kontakItem?.icon && (
<IconMapper
name={kontak.kontakItem.icon as IconKey}
size={24}
color={colors['blue-button']}
/>
)}
<Text fw="bold" fz={{ base: "sm", md: "md" }} c={colors["blue-button"]}>
{kontak.kontakItem?.nama}
</Text>
</Group>
<Text fw="bold" fz={{ base: "sm", md: "md" }} c={colors["blue-button"]}>
{kontak.kontakItem?.nomorTelepon}
</Text>
</Group>
</Paper>
))}
</Paper>
))}
</SimpleGrid>
<Center>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 4, search);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
</Center>
</Box>
</Stack>
);

163
src/app/darmasaba/(pages)/keamanan/laporan-publik/[id]/page.tsx Normal file
View File

@@ -0,0 +1,163 @@
'use client'
import laporanPublikState from '@/app/admin/(dashboard)/_state/keamanan/laporan-publik'
import colors from '@/con/colors'
import {
Box,
Button,
Card,
Divider,
Group,
Loader,
Paper,
Stack,
Text,
Title,
Tooltip
} from '@mantine/core'
import { useShallowEffect } from '@mantine/hooks'
import { IconArrowLeft } from '@tabler/icons-react'
import { useParams, useRouter } from 'next/navigation'
import { useProxy } from 'valtio/utils'
function Page() {
const stateLaporan = useProxy(laporanPublikState)
const params = useParams()
const router = useRouter()
useShallowEffect(() => {
stateLaporan.findUnique.load(params?.id as string)
}, [])
if (!stateLaporan.findUnique.data) {
return (
<Stack align="center" justify="center" h="70vh">
<Loader size="lg" color="blue" />
<Text c="dimmed">Memuat detail laporan publik...</Text>
</Stack>
)
}
const data = stateLaporan.findUnique.data
return (
<Box py="xl" px={{ base: 'md', md: 100 }}>
<Group mb="lg">
<Tooltip label="Kembali ke daftar laporan">
<Button
variant="light"
color="blue"
leftSection={<IconArrowLeft size={20} />}
onClick={() => router.back()}
radius="xl"
>
Kembali
</Button>
</Tooltip>
</Group>
<Paper
withBorder
p="xl"
radius="xl"
shadow="md"
bg={colors['white-1']}
>
<Stack gap="lg">
<Title order={2} >
Detail Laporan Publik
</Title>
<Card withBorder radius="md" shadow="sm" p="md" >
<Stack gap="md">
<Box>
<Text fw={600} fz="lg" >Judul</Text>
<Text fz="sm" c="dimmed">{data.judul || '-'}</Text>
</Box>
<Divider />
<Box>
<Text fw={600} fz="lg" >Tanggal</Text>
<Text fz="sm" c="dimmed">
{data.tanggalWaktu
? new Date(data.tanggalWaktu).toLocaleString('id-ID', { dateStyle: 'full', timeStyle: 'short' })
: '-'}
</Text>
</Box>
<Divider />
<Box>
<Text fw={600} fz="lg" >Lokasi</Text>
<Text fz="sm" c="dimmed">{data.lokasi || '-'}</Text>
</Box>
<Divider />
<Box>
<Text fw={600} fz="lg" >Status</Text>
<Box
style={{
display: 'inline-block',
padding: '6px 14px',
borderRadius: '20px',
backgroundColor:
data.status === 'Selesai' ? '#38d9a9' :
data.status === 'Proses' ? '#ffd43b' :
'#ff6b6b',
color: data.status === 'Proses' ? '#2e2e2e' : '#fff',
fontWeight: 600,
fontSize: '0.85rem',
textAlign: 'center',
minWidth: '90px',
}}
>
{data.status || '-'}
</Box>
</Box>
<Divider />
<Box>
<Text fw={600} fz="lg" >Kronologi</Text>
<Text fz="sm" c="dimmed">{data.kronologi || '-'}</Text>
</Box>
<Divider />
<Box>
<Text fw={600} fz="lg" >Penanganan</Text>
{data.penanganan?.length ? (
<Stack gap="sm" mt="xs">
{data.penanganan.map((item, index) => (
<Paper
key={index}
p="sm"
radius="md"
shadow="xs"
withBorder
bg="dark.5"
>
<Text
fz="sm"
c="dimmed"
dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }}
/>
</Paper>
))}
</Stack>
) : (
<Text fz="sm" c="dimmed" fs="italic">
Belum ada penanganan
</Text>
)}
</Box>
</Stack>
</Card>
</Stack>
</Paper>
</Box>
)
}
export default Page

239
src/app/darmasaba/(pages)/keamanan/laporan-publik/page.tsx
View File

@@ -1,56 +1,76 @@
'use client'
import laporanPublikState from '@/app/admin/(dashboard)/_state/keamanan/laporan-publik';
import colors from '@/con/colors';
import { Stack, Box, Text, Flex, ColorSwatch, SimpleGrid, List, ListItem, Button, Paper, Title } from '@mantine/core';
import React from 'react';
import { Box, Button, Center, ColorSwatch, Flex, Group, Modal, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
import { DateTimePicker } from '@mantine/dates';
import { useDebouncedValue, useDisclosure, useShallowEffect } from '@mantine/hooks';
import { IconArrowRight, IconPlus } from '@tabler/icons-react';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import BackButton from '../../desa/layanan/_com/BackButto';
import { IconArrowRight } from '@tabler/icons-react';
import { useTransitionRouter } from 'next-view-transitions';
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
const data = [
{
id: 1,
judul: 'Kasus Pencurian Banjar Tengah',
tanggal: '3 Februari 2025, 02:00 WITA',
deskripsi: <List>
<ListItem>Laporan ke Polsek setempat</ListItem>
<ListItem>Penyisiran area oleh Pecalang</ListItem>
<ListItem>Koordinasi dengan dealer motor</ListItem>
<ListItem>Penyebaran informasi ke grup keamanan</ListItem>
</List>,
button: <Button fz={'md'} fullWidth bg={'#2A742D'}>Terselesaikan</Button>
},
{
id: 2,
judul: 'Kasus Narkoba Banjar Kaja',
tanggal: '10 Februari 2025, 22:30 WITA',
deskripsi: <List>
<ListItem>Koordinasi dengan Satres Narkoba</ListItem>
<ListItem>Penggerebekan lokasi</ListItem>
<ListItem>Pengamanan barang bukti</ListItem>
<ListItem>Pemeriksaan saksi</ListItem>
</List>,
button: <Button fz={'md'} fullWidth bg={'#D1961F'}>Dalam Proses</Button>
},
{
id: 3,
judul: 'Kasus Tawuran Banjar Kaja',
tanggal: '15 Februari 2025, 22:30 WITA',
deskripsi: <List>
<ListItem>Laporan ke Polsek setempat</ListItem>
<ListItem>Penggerebekan lokasi</ListItem>
<ListItem>Pengamanan barang bukti</ListItem>
<ListItem>Pemeriksaan saksi</ListItem>
</List>,
button: <Button fz={'md'} fullWidth bg={'#2A742D'}>Terselesaikan</Button>
},
]
function Page() {
const [search, setSearch] = useState("");
const router = useTransitionRouter()
const [debouncedSearch] = useDebouncedValue(search, 500);
const [opened, { open, close }] = useDisclosure(false);
const stateLaporan = useProxy(laporanPublikState);
const {
data,
page,
totalPages,
loading,
load,
} = stateLaporan.findMany;
useShallowEffect(() => {
load(page, 6, debouncedSearch);
}, [page, debouncedSearch]);
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton height={600} radius="md" />
</Stack>
);
}
const resetForm = () => {
stateLaporan.create.form = {
judul: '',
lokasi: '',
tanggalWaktu: '',
kronologi: '',
};
};
const handleSubmit = async () => {
await stateLaporan.create.create();
resetForm();
};
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
<Flex justify="space-between" align="center">
<BackButton />
<Flex gap={"xs"} align={"center"}>
<TextInput
placeholder="Cari laporan"
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<Button
onClick={open}
bg={colors['blue-button']}
size="md"
radius="md"
>
<IconPlus size={20} />
</Button>
</Flex>
</Flex>
</Box>
<Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
@@ -88,29 +108,144 @@ function Page() {
cols={{
base: 1,
md: 3
}}
}}
>
{data.map((v, k) => {
return (
<Paper radius={'lg'} key={k} bg={colors['white-trans-1']} p={'xl'}>
<Stack>
<Title c={colors['blue-button']} order={1}>{v.judul}</Title>
<Text fs={'italic'} fz={'xl'}>{v.tanggal}</Text>
<Text fs={'italic'} fz={'xl'}>
{v.tanggalWaktu
? new Date(v.tanggalWaktu).toLocaleString('id-ID')
: '-'}
</Text>
<Box>
<Text fw={'bold'}>Penanganan:</Text>
{v.deskripsi}
{v.penanganan?.length ? (
v.penanganan.map((item, index) => (
<Box key={index}>
<Text
fz="md"
c="dimmed"
dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }}
/>
</Box>
))
) : (
<Text fz="sm" fs="italic" c="dimmed">
Belum ada penanganan
</Text>
)}
</Box>
<Box>
{v.button}
<Box
style={{
display: 'inline-block',
padding: '4px 12px',
borderRadius: '16px',
backgroundColor:
v.status === 'Selesai' ? '#94EF95FF' :
v.status === 'Proses' ? '#F1D295FF' :
'#F38E8EFF',
color:
v.status === 'Selesai' ? '#01BA01FF' :
v.status === 'Proses' ? '#B67A00FF' :
'#AE1700FF',
fontWeight: 900,
fontSize: '0.75rem',
textAlign: 'center',
minWidth: '80px',
}}
>
{v.status}
</Box>
<Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>Lihat Detail Kronologi</Button>
<Button
bg={colors['blue-button']}
rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
onClick={() => router.push(`/darmasaba/keamanan/laporan-publik/${v.id}`)}
>Lihat Detail Kronologi
</Button>
</Stack>
</Paper>
)
})}
</SimpleGrid>
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)}
total={totalPages}
my="md"
/>
</Center>
</Stack>
</Box>
<Modal opened={opened} onClose={close} title="Tambah Laporan Publik">
<Paper
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
value={stateLaporan.create.form.judul}
onChange={(e) => (stateLaporan.create.form.judul = e.target.value)}
label={<Text fw="bold" fz="sm">Judul Laporan Publik</Text>}
placeholder="Masukkan judul laporan publik"
required
/>
<TextInput
value={stateLaporan.create.form.lokasi}
onChange={(e) => (stateLaporan.create.form.lokasi = e.target.value)}
label={<Text fw="bold" fz="sm">Lokasi Laporan Publik</Text>}
placeholder="Masukkan lokasi laporan publik"
required
/>
<DateTimePicker
label={<Text fw="bold" fz="sm">Tanggal Laporan Publik</Text>}
value={
stateLaporan.create.form.tanggalWaktu
? new Date(stateLaporan.create.form.tanggalWaktu)
: null
}
onChange={(val) => {
stateLaporan.create.form.tanggalWaktu = val ? val.toString() : '';
}}
/>
<Box>
<Text fz="sm" fw="bold" mb={6}>
Kronologi
</Text>
<CreateEditor
value={stateLaporan.create.form.kronologi}
onChange={(htmlContent) => {
stateLaporan.create.form.kronologi = htmlContent;
}}
/>
</Box>
<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>
</Modal>
</Stack>
);
}

1
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/[id]/page.tsx
View File

@@ -56,6 +56,7 @@ function Page() {
</Group>
<Stack gap="lg">
<Box>
<Text fz="h4" fw="bold">Pendahuluan</Text>
<Divider my="xs" />

56
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/page.tsx
View File

@@ -11,11 +11,11 @@ function ArtikelKesehatanPage() {
const state = useProxy(artikelKesehatanState)
const router = useRouter()
useShallowEffect(()=> {
useShallowEffect(() => {
state.findMany.load()
}, [])
if(!state.findMany.data){
if (!state.findMany.data) {
return (
<Box py="xl" ta="center">
<Loader size="lg" color={colors['blue-button']} />
@@ -24,36 +24,34 @@ function ArtikelKesehatanPage() {
)
}
if(state.findMany.data.length === 0){
return (
<Box py="xl" ta="center">
<Image src="/empty-state.svg" alt="Tidak ada data" w={220} mx="auto" />
<Text mt="md" fw="bold" fz="lg">Belum ada artikel kesehatan</Text>
<Text c="dimmed" fz="sm">Artikel akan tampil di sini setelah tersedia.</Text>
</Box>
)
}
return (
<Box>
<Paper p="xl" bg={colors['white-trans-1']} radius="xl" shadow="md">
<Stack gap="xl">
<Title order={2} ta="center" c={colors['blue-button']}>Artikel Kesehatan</Title>
<Divider color={colors['blue-button']} />
<Stack gap="lg">
{state.findMany.data.map((item) => (
<Card
key={item.id}
withBorder
radius="lg"
shadow="sm"
p="lg"
<Stack gap="lg">
<Title order={2} ta="center" c={colors['blue-button']}>
Artikel Kesehatan
</Title>
<Divider size="sm" color={colors['blue-button']} />
{state.findMany.data.length === 0 ? (
<Box py="xl" ta="center">
<Text fz="lg" c="dimmed">
Belum ada artikel kesehatan yang tersedia
</Text>
</Box>
) : (
state.findMany.data.map((item) => (
<Card
key={item.id}
withBorder
radius="lg"
shadow="sm"
p="lg"
style={{ transition: 'transform 200ms ease' }}
onMouseEnter={(e) => (e.currentTarget.style.transform = 'translateY(-4px)')}
onMouseLeave={(e) => (e.currentTarget.style.transform = 'translateY(0)')}
>
<Card.Section>
<Image src={'/api/img/dbd.png'} alt={item.title} height={200} fit="cover" />
<Image src={item.image?.link} alt={item.title} height={200} fit="cover" />
</Card.Section>
<Stack gap="xs" mt="md">
<Text fw="bold" fz="xl" c="dark">{item.title}</Text>
@@ -67,9 +65,9 @@ function ArtikelKesehatanPage() {
{item.content}
</Text>
<Tooltip label="Baca artikel lengkap">
<Anchor
onClick={()=> router.push(`/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/${item.id}`)}
variant="light"
<Anchor
onClick={() => router.push(`/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/${item.id}`)}
variant="light"
c={colors['blue-button']}
>
<Group gap="xs">
@@ -80,8 +78,8 @@ function ArtikelKesehatanPage() {
</Tooltip>
</Stack>
</Card>
))}
</Stack>
))
)}
</Stack>
</Paper>
</Box>

14
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/page.tsx
View File

@@ -29,14 +29,21 @@ function FasilitasKesehatanPage() {
return (
<Box>
<Paper p="xl" radius="xl" shadow="md" h="100%" bg="white">
<Paper bg={colors['white-trans-1']} p="xl" radius="xl" shadow="md" h="100%">
<Stack gap="lg">
<Text ta="center" fw={700} fz="32px" c={colors['blue-button']}>
Fasilitas Kesehatan
</Text>
<Divider size="sm" color={colors['blue-button']} />
<Stack gap="lg">
{state.findMany.data.map((item) => (
{state.findMany.data.length === 0 ? (
<Box py="xl" ta="center">
<Text fz="lg" c="dimmed">
Belum ada fasilitas kesehatan yang tersedia
</Text>
</Box>
) : (
state.findMany.data.map((item) => (
<Card
key={item.id}
withBorder
@@ -93,7 +100,8 @@ function FasilitasKesehatanPage() {
</Anchor>
</Stack>
</Card>
))}
))
)}
</Stack>
</Stack>
</Paper>

4
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/jadwal-kegiatan-page/page.tsx
View File

@@ -25,12 +25,12 @@ function JadwalKegiatanPage() {
return (
<Box>
<Paper p="xl" bg={colors['white-trans-1']} radius="xl" shadow="md" h="auto" mih="100vh">
<Paper bg={colors['white-trans-1']} p="xl" radius="xl" shadow="md" h="auto" mih="100vh">
<Stack gap="lg">
<Text ta="center" fw={700} fz="32px" c={colors['blue-button']}>
Jadwal Kegiatan Warga
</Text>
<Divider size="sm" color={colors['blue-button']} />
{state.findMany.data.length === 0 ? (
<Box py="xl" ta="center">
<Text fz="lg" c="dimmed">