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

QC ToolTip Admin Keano Masih di Menu Landing Page - Keamanan, QC Dari Darmasaba Pop Up Notifikasi

Browse Source
This commit is contained in:
nico
2025-11-05 14:32:38 +08:00
parent fb57698dc9
commit f66a46f645
195 changed files with 2819 additions and 3323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx
View File

@@ -10,8 +10,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from "@mantine/core";
import {
IconArrowBack,
@@ -116,16 +115,14 @@ function EditKeamananLingkungan() {
<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>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors["blue-button"]} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Keamanan Lingkungan
</Title>

56
src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { useProxy } from 'valtio/utils';
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
@@ -93,36 +93,32 @@ function DetailKeamananLingkungan() {
{/* Aksi */}
<Group gap="sm">
<Tooltip label="Hapus Data" withArrow position="top">
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
</Tooltip>
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
<Tooltip label="Edit Data" withArrow position="top">
<Button
color="green"
onClick={() =>
router.push(
`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${data.id}/edit`
)
}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Tooltip>
<Button
color="green"
onClick={() =>
router.push(
`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${data.id}/edit`
)
}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Group>
</Stack>
</Paper>

21
src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx
View File

@@ -10,8 +10,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import {
@@ -71,16 +70,14 @@ function CreateKeamananLingkungan() {
<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>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Data Keamanan Lingkungan
</Title>

25
src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx
View File

@@ -16,8 +16,7 @@ import {
TableThead,
TableTr,
Text,
Title,
Tooltip,
Title
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
@@ -78,18 +77,16 @@ function ListKeamananLingkungan({ search }: { search: string }) {
{/* Judul + Tombol Tambah */}
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Keamanan Lingkungan</Title>
<Tooltip label="Tambah Data Keamanan" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() =>
router.push('/admin/keamanan/keamanan-lingkungan-pecalang-patwal/create')
}
>
Tambah Baru
</Button>
</Tooltip>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() =>
router.push('/admin/keamanan/keamanan-lingkungan-pecalang-patwal/create')
}
>
Tambah Baru
</Button>
</Group>
{/* Tabel */}

33
src/app/admin/(dashboard)/keamanan/kontak-darurat/_lib/layoutTabs.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { IconPhone, IconTag } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
@@ -15,15 +15,13 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
label: "Kontak Darurat Keamanan",
value: "kontak-darurat-keamanan",
href: "/admin/keamanan/kontak-darurat/kontak-darurat-keamanan",
icon: <IconPhone size={18} stroke={1.8} />,
tooltip: "Lihat dan kelola kontak darurat keamanan",
icon: <IconPhone size={18} stroke={1.8} />
},
{
label: "Kontak Darurat Item",
value: "kontak-darurat-item",
href: "/admin/keamanan/kontak-darurat/kontak-darurat-item",
icon: <IconTag size={18} stroke={1.8} />,
tooltip: "Kelola data kontak darurat item",
icon: <IconTag size={18} stroke={1.8} />
}
];
@@ -73,19 +71,18 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
}}
>
{tabs.map((tab, i) => (
<Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
<TabsTab
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
>
{tab.label}
</TabsTab>
</Tooltip>
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>

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

@@ -12,8 +12,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
@@ -86,11 +85,9 @@ function EditKontakItem() {
<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>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Kontak Darurat Item
</Title>

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

@@ -3,7 +3,7 @@ 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 { Box, Button, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
@@ -92,32 +92,28 @@ function DetailKontakDarurat() {
{/* Aksi */}
<Group gap="sm">
<Tooltip label="Hapus Data" withArrow position="top">
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
</Tooltip>
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
<Tooltip label="Edit Data" withArrow position="top">
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-item/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Tooltip>
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-item/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Group>
</Stack>
</Paper>

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

@@ -10,8 +10,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip
Title
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
@@ -38,16 +37,14 @@ function CreateKontakItem() {
<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>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Kontak Darurat Item
</Title>

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

@@ -16,8 +16,7 @@ import {
TableThead,
TableTr,
Text,
Title,
Tooltip,
Title
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
@@ -79,16 +78,14 @@ function ListKontakItem({ search }: { search: string }) {
{/* Judul + Tombol Tambah */}
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Kontak Darurat Item</Title>
<Tooltip label="Tambah Kontak Item" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item/create')}
>
Tambah Baru
</Button>
</Tooltip>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item/create')}
>
Tambah Baru
</Button>
</Group>
{/* Tabel */}

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

@@ -14,8 +14,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from "@mantine/core";
import { IconArrowBack } from "@tabler/icons-react";
import { useParams, useRouter } from "next/navigation";
@@ -42,7 +41,7 @@ function EditKontakDaruratKeamanan() {
try {
setIsLoading(true);
await kontakDarurat.kontakDaruratItem.findMany.load();
const id = params?.id as string;
if (id) {
const data = await kontakState.update.load(id);
@@ -88,16 +87,14 @@ function EditKontakDaruratKeamanan() {
<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>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors["blue-button"]} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Kontak Darurat Keamanan
</Title>

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

@@ -3,7 +3,7 @@ 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 { Box, Button, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
@@ -108,32 +108,28 @@ function DetailKontakDaruratKeamanan() {
{/* Aksi */}
<Group gap="sm">
<Tooltip label="Hapus Data" withArrow position="top">
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
</Tooltip>
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
<Tooltip label="Edit Data" withArrow position="top">
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-keamanan/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Tooltip>
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-keamanan/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Group>
</Stack>
</Paper>

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

@@ -11,8 +11,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip
Title
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack } from '@tabler/icons-react';
@@ -45,16 +44,14 @@ function CreateKontakDaruratKeamanan() {
<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>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Kontak Darurat Keamanan
</Title>

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

@@ -16,8 +16,7 @@ import {
TableThead,
TableTr,
Text,
Title,
Tooltip,
Title
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
@@ -79,16 +78,14 @@ function ListKontakDaruratKeamanan({ search }: { search: string }) {
{/* Judul + Tombol Tambah */}
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Kontak Darurat Keamanan</Title>
<Tooltip label="Tambah Kontak Darurat Keamanan" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/kontak-darurat/kontak-darurat-keamanan/create')}
>
Tambah Baru
</Button>
</Tooltip>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/kontak-darurat/kontak-darurat-keamanan/create')}
>
Tambah Baru
</Button>
</Group>
{/* Tabel */}

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

@@ -12,8 +12,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { DateTimePicker } from '@mantine/dates';
import { IconArrowBack } from '@tabler/icons-react';
@@ -49,7 +48,7 @@ function EditLaporanPublik() {
const loadLaporanPublik = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await stateLaporan.edit.load(id);
if (data) {
@@ -67,11 +66,11 @@ function EditLaporanPublik() {
toast.error("Gagal mengambil data laporan publik");
}
};
loadLaporanPublik();
}, [params?.id]);
const handleChange = (field: string, value: string | Status) => {
setFormData((prev) => ({ ...prev, [field]: value }));
@@ -97,11 +96,9 @@ function EditLaporanPublik() {
<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>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Laporan Publik
</Title>

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

@@ -7,16 +7,15 @@ import {
Paper,
Skeleton,
Stack,
Text,
Tooltip,
Text
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import laporanPublikState from '../../../_state/keamanan/laporan-publik';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import laporanPublikState from '../../../_state/keamanan/laporan-publik';
function DetailLaporanPublik() {
const [modalHapus, setModalHapus] = useState(false);
@@ -102,12 +101,12 @@ function DetailLaporanPublik() {
padding: '4px 12px',
borderRadius: '16px',
backgroundColor:
data.status === 'Selesai' ? '#94EF95FF' :
data.status === 'Proses' ? '#F1D295FF' :
data.status === 'Selesai' ? '#94EF95FF' :
data.status === 'Proses' ? '#F1D295FF' :
'#F38E8EFF',
color:
data.status === 'Selesai' ? '#01BA01FF' :
data.status === 'Proses' ? '#B67A00FF' :
data.status === 'Selesai' ? '#01BA01FF' :
data.status === 'Proses' ? '#B67A00FF' :
'#AE1700FF',
fontWeight: 900,
fontSize: '0.75rem',
@@ -146,35 +145,31 @@ function DetailLaporanPublik() {
{/* Tombol Aksi */}
<Group gap="sm" mt="sm">
<Tooltip label="Hapus Laporan Publik" withArrow position="top">
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
disabled={stateLaporan.delete.loading}
>
<IconTrash size={20} />
</Button>
</Tooltip>
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
disabled={stateLaporan.delete.loading}
>
<IconTrash size={20} />
</Button>
<Tooltip label="Edit Laporan Publik" withArrow position="top">
<Button
color="green"
onClick={() =>
router.push(`/admin/keamanan/laporan-publik/${data.id}/edit`)
}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Tooltip>
<Button
color="green"
onClick={() =>
router.push(`/admin/keamanan/laporan-publik/${data.id}/edit`)
}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Group>
</Stack>
</Paper>

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

@@ -8,8 +8,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip
Title
} from '@mantine/core';
import { DateTimePicker } from '@mantine/dates';
import { IconArrowBack } from '@tabler/icons-react';
@@ -42,11 +41,9 @@ function CreateLaporanPublik() {
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header with Back Button */}
<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>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Laporan Publik
</Title>

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

@@ -5,8 +5,8 @@ import {
Button,
Center,
Group,
Paper,
Pagination,
Paper,
Skeleton,
Stack,
Table,
@@ -16,16 +16,15 @@ import {
TableThead,
TableTr,
Text,
Title,
Tooltip,
Title
} from '@mantine/core';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import HeaderSearch from '../../_com/header';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import laporanPublikState from '../../_state/keamanan/laporan-publik';
import { useShallowEffect } from '@mantine/hooks';
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 laporanPublikState from '../../_state/keamanan/laporan-publik';
function LaporanPublik() {
const [search, setSearch] = useState("");
@@ -74,16 +73,14 @@ function ListLaporanPublik({ search }: { search: string }) {
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Laporan Publik</Title>
<Tooltip label="Tambah Laporan Publik" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/laporan-publik/create')}
>
Tambah Baru
</Button>
</Tooltip>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/laporan-publik/create')}
>
Tambah Baru
</Button>
</Group>
<Box style={{ overflowX: "auto" }}>
<Table highlightOnHover>

21
src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/edit/page.tsx
View File

@@ -12,8 +12,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
@@ -96,16 +95,14 @@ function EditPencegahanKriminalitas() {
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Back button + Title */}
<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>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Pencegahan Kriminalitas
</Title>

54
src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/page.tsx
View File

@@ -1,10 +1,10 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Flex, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useRouter, useParams } from 'next/navigation';
import { useState } from 'react';
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } 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';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import pencegahanKriminalitasState from '../../../_state/keamanan/pencegahan-kriminalitas';
@@ -108,32 +108,28 @@ function DetailPencegahanKriminalitas() {
{/* Tombol Aksi */}
<Flex gap="sm" mt="sm">
<Tooltip label="Hapus" withArrow position="top">
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
</Tooltip>
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
<Tooltip label="Edit" withArrow position="top">
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/pencegahan-kriminalitas/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Tooltip>
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/pencegahan-kriminalitas/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Flex>
</Stack>
</Paper>

9
src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx
View File

@@ -9,17 +9,16 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
import CreateEditor from '../../../_com/createEditor';
import pencegahanKriminalitasState from '../../../_state/keamanan/pencegahan-kriminalitas';
import { useState } from 'react';
import { convertYoutubeUrlToEmbed } from '../../../desa/gallery/lib/youtube-utils';
import { toast } from 'react-toastify';
function CreatePencegahanKriminalitas() {
const router = useRouter();
@@ -53,7 +52,6 @@ function CreatePencegahanKriminalitas() {
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header Back Button + Title */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button
variant="subtle"
onClick={() => router.back()}
@@ -62,7 +60,6 @@ function CreatePencegahanKriminalitas() {
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Tambah Pencegahan Kriminalitas
</Title>

37
src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx
View File

@@ -16,16 +16,15 @@ import {
TableThead,
TableTr,
Text,
Title,
Tooltip,
Title
} from '@mantine/core';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import HeaderSearch from '../../_com/header';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import pencegahanKriminalitasState from '../../_state/keamanan/pencegahan-kriminalitas';
import { useShallowEffect } from '@mantine/hooks';
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 pencegahanKriminalitasState from '../../_state/keamanan/pencegahan-kriminalitas';
function PencegahanKriminalitas() {
const [search, setSearch] = useState("");
@@ -77,16 +76,14 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
{/* Judul + Tombol Tambah */}
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Pencegahan Kriminalitas</Title>
<Tooltip label="Tambah Program Pencegahan" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/pencegahan-kriminalitas/create')}
>
Tambah Baru
</Button>
</Tooltip>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/pencegahan-kriminalitas/create')}
>
Tambah Baru
</Button>
</Group>
{/* Tabel */}
@@ -106,9 +103,9 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
<TableTr key={item.id}>
<TableTd>
<Box w={200}>
<Text fw={500} truncate="end" lineClamp={1}>
{item.judul}
</Text>
<Text fw={500} truncate="end" lineClamp={1}>
{item.judul}
</Text>
</Box>
</TableTd>
<TableTd>

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

@@ -2,6 +2,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";
import polsekTerdekat from "@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat";
import colors from "@/con/colors";
import {
Box,
@@ -14,15 +15,13 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from "@mantine/core";
import { IconArrowBack } from "@tabler/icons-react";
import { useParams, useRouter } from "next/navigation";
import { useProxy } from "valtio/utils";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import polsekTerdekat from "@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat";
import { useProxy } from "valtio/utils";
function EditPolsekTerdekat() {
const polsekState = useProxy(polsekTerdekat);
@@ -52,36 +51,36 @@ function EditPolsekTerdekat() {
layananPolsekId: "",
});
// load data untuk form edit
useEffect(() => {
const loadPolsekTerdekat = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await polsekState.edit.load(id);
if (data) {
setFormData({
nama: data.nama || "",
jarakKeDesa: data.jarakKeDesa || "",
alamat: data.alamat || "",
nomorTelepon: data.nomorTelepon || "",
jamOperasional: data.jamOperasional || "",
embedMapUrl: data.embedMapUrl || "",
namaTempatMaps: data.namaTempatMaps || "",
alamatMaps: data.alamatMaps || "",
linkPetunjukArah: data.linkPetunjukArah || "",
layananPolsekId: data.layananPolsekId || "",
});
}
} catch (error) {
console.error("Error loading polsek terdekat:", error);
toast.error("Gagal memuat data polsek terdekat");
// load data untuk form edit
useEffect(() => {
const loadPolsekTerdekat = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await polsekState.edit.load(id);
if (data) {
setFormData({
nama: data.nama || "",
jarakKeDesa: data.jarakKeDesa || "",
alamat: data.alamat || "",
nomorTelepon: data.nomorTelepon || "",
jamOperasional: data.jamOperasional || "",
embedMapUrl: data.embedMapUrl || "",
namaTempatMaps: data.namaTempatMaps || "",
alamatMaps: data.alamatMaps || "",
linkPetunjukArah: data.linkPetunjukArah || "",
layananPolsekId: data.layananPolsekId || "",
});
}
};
loadPolsekTerdekat();
}, [params?.id]);
} catch (error) {
console.error("Error loading polsek terdekat:", error);
toast.error("Gagal memuat data polsek terdekat");
}
};
loadPolsekTerdekat();
}, [params?.id]);
const fetchLayanan = async () => {
try {
@@ -248,16 +247,14 @@ function EditPolsekTerdekat() {
{/* 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>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors["blue-button"]} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Polsek Terdekat
</Title>

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

@@ -1,13 +1,13 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { Box, Button, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
function DetailPolsekTerdekat() {
const router = useRouter();
@@ -157,32 +157,28 @@ function DetailPolsekTerdekat() {
{/* Aksi */}
<Group gap="sm">
<Tooltip label="Hapus Data" withArrow position="top">
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
</Tooltip>
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
<Tooltip label="Edit Data" withArrow position="top">
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Tooltip>
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Group>
</Stack>
</Paper>

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

@@ -11,15 +11,14 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
import polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
function CreatePolsekTerdekat() {
const polsekState = useProxy(polsekTerdekat);
@@ -122,16 +121,14 @@ function CreatePolsekTerdekat() {
{/* 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>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Polsek Terdekat
</Title>

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

@@ -16,8 +16,7 @@ import {
TableThead,
TableTr,
Text,
Title,
Tooltip,
Title
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
@@ -76,16 +75,14 @@ function ListPolsekTerdekat({ search }: { search: string }) {
<Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Polsek Terdekat</Title>
<Tooltip label="Tambah Polsek" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/polsek-terdekat/create')}
>
Tambah Baru
</Button>
</Tooltip>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/polsek-terdekat/create')}
>
Tambah Baru
</Button>
</Group>
<Box style={{ overflowX: "auto" }}>
@@ -110,11 +107,11 @@ function ListPolsekTerdekat({ search }: { search: string }) {
</Box>
</TableTd>
<TableTd>{item.jarakKeDesa}</TableTd>
<TableTd>
<Box w={150}>
<TableTd>
<Box w={150}>
<Text truncate="end" lineClamp={1}>{item.alamat}</Text>
</Box>
</TableTd>
</Box>
</TableTd>
<TableTd>
<Button
variant="light"

21
src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/edit/page.tsx
View File

@@ -9,8 +9,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from "@mantine/core";
import {
IconArrowBack,
@@ -105,16 +104,14 @@ function EditTipsKeamanan() {
<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>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors["blue-button"]} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Tips Keamanan
</Title>

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

@@ -1,10 +1,10 @@
'use client'
import { useProxy } from 'valtio/utils';
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text } 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';
import colors from '@/con/colors';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
@@ -99,33 +99,29 @@ function DetailTipsKeamanan() {
</Box>
<Group gap="sm">
<Tooltip label="Hapus Tips Keamanan" withArrow position="top">
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
disabled={stateKeamanan.delete.loading}
>
<IconTrash size={20} />
</Button>
</Tooltip>
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
disabled={stateKeamanan.delete.loading}
>
<IconTrash size={20} />
</Button>
<Tooltip label="Edit Tips Keamanan" withArrow position="top">
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/tips-keamanan/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Tooltip>
<Button
color="green"
onClick={() => router.push(`/admin/keamanan/tips-keamanan/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Group>
</Stack>
</Paper>

11
src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx
View File

@@ -10,8 +10,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
@@ -66,11 +65,9 @@ function CreateKeamananLingkungan() {
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header Back + Title */}
<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>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Tips Keamanan
</Title>

23
src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx
View File

@@ -16,14 +16,13 @@ import {
TableThead,
TableTr,
Text,
Title,
Tooltip,
Title
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../_com/header';
import tipsKeamananState from '../../_state/keamanan/tips-keamanan';
@@ -74,16 +73,14 @@ function ListTipsKeamanan({ search }: { search: string }) {
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Tips Keamanan</Title>
<Tooltip label="Tambah Tips Keamanan" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/tips-keamanan/create')}
>
Tambah Baru
</Button>
</Tooltip>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/keamanan/tips-keamanan/create')}
>
Tambah Baru
</Button>
</Group>
<Box style={{ overflowX: "auto" }}>
<Table highlightOnHover>