From a1e7fddbed7ab8d39c53ae7e2363084fbb30e6ce Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Tue, 3 Jun 2025 17:42:34 +0800
Subject: [PATCH] UI Admin Revisi Baru Di Menu Ekonomi

---
 .../pasar-desa/create/createPasarDesa.tsx     | 36 --------
 .../ekonomi/pasar-desa/create/page.tsx        | 56 +++++++++++++
 .../ekonomi/pasar-desa/detail/page.tsx        | 74 +++++++++++++++++
 .../ekonomi/pasar-desa/edit/page.tsx          | 56 +++++++++++++
 .../ekonomi/pasar-desa/listData/page.tsx      | 32 --------
 .../(dashboard)/ekonomi/pasar-desa/page.tsx   | 79 ++++++++++++------
 .../create/page.tsx                           | 44 ++++++++++
 .../detail/page.tsx                           | 70 ++++++++++++++++
 .../edit/page.tsx                             | 44 ++++++++++
 .../page.tsx                                  | 78 +++++++++++-------
 .../ui/list_keamanan_lingkungan/page.tsx      | 33 --------
 .../ui/tambah_keamanan_lingkungan/page.tsx    | 46 -----------
 .../kontak-darurat/create/createKontak.tsx    | 28 -------
 .../keamanan/kontak-darurat/create/page.tsx   | 44 ++++++++++
 .../keamanan/kontak-darurat/detail/page.tsx   | 70 ++++++++++++++++
 .../keamanan/kontak-darurat/edit/page.tsx     | 44 ++++++++++
 .../keamanan/kontak-darurat/listData/page.tsx | 23 ------
 .../keamanan/kontak-darurat/page.tsx          | 77 +++++++++++------
 .../laporan-publik/create/createLaporan.tsx   | 27 ------
 .../keamanan/laporan-publik/create/page.tsx   | 48 +++++++++++
 .../keamanan/laporan-publik/detail/page.tsx   | 70 ++++++++++++++++
 .../keamanan/laporan-publik/edit/page.tsx     | 48 +++++++++++
 .../keamanan/laporan-publik/listData/page.tsx | 23 ------
 .../keamanan/laporan-publik/page.tsx          | 82 +++++++++++++------
 .../create/createPencegahan.tsx               | 25 ------
 .../pencegahan-kriminalitas/create/page.tsx   | 44 ++++++++++
 .../pencegahan-kriminalitas/detail/page.tsx   | 70 ++++++++++++++++
 .../pencegahan-kriminalitas/edit/page.tsx     | 44 ++++++++++
 .../pencegahan-kriminalitas/listData/page.tsx | 23 ------
 .../keamanan/pencegahan-kriminalitas/page.tsx | 78 ++++++++++++------
 .../keamanan/polsek-terdekat/create/page.tsx  | 44 ++++++++++
 .../keamanan/polsek-terdekat/detail/page.tsx  | 70 ++++++++++++++++
 .../keamanan/polsek-terdekat/edit/page.tsx    | 44 ++++++++++
 .../keamanan/polsek-terdekat/page.tsx         | 78 +++++++++++-------
 .../ui/list_polsek_terdekat/page.tsx          | 36 --------
 .../ui/tambah_polsek_terdekat/page.tsx        | 56 -------------
 .../tips-keamanan/create/createTips.tsx       | 27 ------
 .../keamanan/tips-keamanan/create/page.tsx    | 44 ++++++++++
 .../keamanan/tips-keamanan/detail/page.tsx    | 70 ++++++++++++++++
 .../keamanan/tips-keamanan/edit/page.tsx      | 44 ++++++++++
 .../keamanan/tips-keamanan/listData/page.tsx  | 24 ------
 .../keamanan/tips-keamanan/page.tsx           | 79 ++++++++++++------
 42 files changed, 1509 insertions(+), 623 deletions(-)
 delete mode 100644 src/app/admin/(dashboard)/ekonomi/pasar-desa/create/createPasarDesa.tsx
 create mode 100644 src/app/admin/(dashboard)/ekonomi/pasar-desa/create/page.tsx
 create mode 100644 src/app/admin/(dashboard)/ekonomi/pasar-desa/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/ekonomi/pasar-desa/edit/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/ekonomi/pasar-desa/listData/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/edit/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/ui/list_keamanan_lingkungan/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/ui/tambah_keamanan_lingkungan/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/keamanan/kontak-darurat/create/createKontak.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/kontak-darurat/create/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/kontak-darurat/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/kontak-darurat/edit/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/keamanan/kontak-darurat/listData/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/keamanan/laporan-publik/create/createLaporan.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/laporan-publik/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/laporan-publik/edit/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/keamanan/laporan-publik/listData/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/createPencegahan.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/edit/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/listData/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/polsek-terdekat/create/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/polsek-terdekat/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/polsek-terdekat/edit/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/keamanan/polsek-terdekat/ui/list_polsek_terdekat/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/keamanan/polsek-terdekat/ui/tambah_polsek_terdekat/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/keamanan/tips-keamanan/create/createTips.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/tips-keamanan/detail/page.tsx
 create mode 100644 src/app/admin/(dashboard)/keamanan/tips-keamanan/edit/page.tsx
 delete mode 100644 src/app/admin/(dashboard)/keamanan/tips-keamanan/listData/page.tsx

diff --git a/src/app/admin/(dashboard)/ekonomi/pasar-desa/create/createPasarDesa.tsx b/src/app/admin/(dashboard)/ekonomi/pasar-desa/create/createPasarDesa.tsx
deleted file mode 100644
index ca116352..00000000
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/create/createPasarDesa.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-
-function CreatePasarDesa() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <Title order={4}>Produk Pasar Desa</Title>
-        <Box>
-          <Text fz={"sm"} fw={"bold"}>Masukkan Foto Produk</Text>
-          <IconImageInPicture size={24} color={colors['blue-button']} />
-        </Box>
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Nama Produk</Text>}
-          placeholder="masukkan nama produk"
-        />
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Harga Produk</Text>}
-          placeholder="masukkan harga produk"
-        />
-         <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Rating Produk</Text>}
-          placeholder="masukkan rating produk"
-        />
-         <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Alamat Usaha</Text>}
-          placeholder="masukkan alamat usaha"
-        />
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreatePasarDesa;
diff --git a/src/app/admin/(dashboard)/ekonomi/pasar-desa/create/page.tsx b/src/app/admin/(dashboard)/ekonomi/pasar-desa/create/page.tsx
new file mode 100644
index 00000000..6c7a8f14
--- /dev/null
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/create/page.tsx
@@ -0,0 +1,56 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+function CreatePasarDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Pasar Desa</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Produk</Text>}
+          placeholder='Masukkan nama produk'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Harga Produk</Text>}
+          placeholder='Masukkan harga produk'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Rating Produk</Text>}
+          placeholder='Masukkan rating produk'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Alamat Usaha</Text>}
+          placeholder='Masukkan alamat usaha'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Produk</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreatePasarDesa;
diff --git a/src/app/admin/(dashboard)/ekonomi/pasar-desa/detail/page.tsx b/src/app/admin/(dashboard)/ekonomi/pasar-desa/detail/page.tsx
new file mode 100644
index 00000000..fac32b9f
--- /dev/null
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/detail/page.tsx
@@ -0,0 +1,74 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPasarDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Pasar Desa</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Produk</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Harga Produk</Text>
+                <Text fz={"lg"}>Rp. 20.000</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Rating Produk</Text>
+                <Text fz={"lg"}>5</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Alamat Usaha</Text>
+                <Text fz={"lg"}>Jalan In Aja</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Konten</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/pasar-desa/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailPasarDesa;
diff --git a/src/app/admin/(dashboard)/ekonomi/pasar-desa/edit/page.tsx b/src/app/admin/(dashboard)/ekonomi/pasar-desa/edit/page.tsx
new file mode 100644
index 00000000..92335984
--- /dev/null
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/edit/page.tsx
@@ -0,0 +1,56 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+function EditPasarDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Pasar Desa</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Produk</Text>}
+          placeholder='Masukkan nama produk'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Harga Produk</Text>}
+          placeholder='Masukkan harga produk'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Rating Produk</Text>}
+          placeholder='Masukkan rating produk'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Alamat Usaha</Text>}
+          placeholder='Masukkan alamat usaha'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Produk</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditPasarDesa;
diff --git a/src/app/admin/(dashboard)/ekonomi/pasar-desa/listData/page.tsx b/src/app/admin/(dashboard)/ekonomi/pasar-desa/listData/page.tsx
deleted file mode 100644
index 3809f2ad..00000000
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/listData/page.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Text, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-
-function ListDataUsaha() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p={'md'} radius={10}>
-          <Box>
-            <Title mb={10} order={4}>List Produk Pasar Desa</Title>
-            <Box>
-              <Text fz={"sm"} fw={"bold"}>Foto Produk</Text>
-              <IconImageInPicture size={24} color={colors['blue-button']} />
-            </Box>
-            <Text fz={"sm"} fw={"bold"}>Nama Produk</Text> 
-            <Text></Text>
-            <Text fz={"sm"} fw={"bold"}>Harga Produk</Text>
-            <Text></Text>
-            <Text fz={"sm"} fw={"bold"}>Rating Produk</Text>
-            <Text></Text>
-            <Text fz={"sm"} fw={"bold"}>Alamat Usaha</Text>
-            <Text></Text>
-          </Box>
-        </Paper>
-      </Stack>
-    </Box>
-  );
-}
-
-export default ListDataUsaha;
diff --git a/src/app/admin/(dashboard)/ekonomi/pasar-desa/page.tsx b/src/app/admin/(dashboard)/ekonomi/pasar-desa/page.tsx
index 95de3555..185e8f98 100644
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/page.tsx
@@ -1,31 +1,60 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Title } from '@mantine/core';
-import React from 'react';
-import CreatePasarDesa from './create/createPasarDesa';
-import ListDataUsaha from './listData/page';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function PasarDesa() {
   return (
-    <Stack gap={'xs'}>
-      <Box>
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'} radius={10}>
-          <Stack gap={'xs'}>
-            <Title order={3}>Pasar Desa</Title>
-            <CreatePasarDesa />
-            <Group>
-              <Button
-                mt={10}
-                bg={colors['blue-button']}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
-      <ListDataUsaha />
-    </Stack>
+    <Box>
+      <HeaderSearch
+        title='Pasar Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListPasarDesa/>
+    </Box>
   );
 }
 
-export default Page;
+function ListPasarDesa() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Pasar Desa'
+          href='/admin/ekonomi/pasar-desa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Produk</TableTh>
+              <TableTh>Harga Produk</TableTh>
+              <TableTh>Rating Produk</TableTh>
+              <TableTh>Alamat Usaha</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Produk 1</TableTd>
+              <TableTd>Harga Rp. 20.000</TableTd>
+              <TableTd>Rating 5</TableTd>
+              <TableTd>Jalan In Aja</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/pasar-desa/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default PasarDesa;
diff --git a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx
new file mode 100644
index 00000000..224b81fe
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function CreateKeamananLingkungan() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Keamanan Lingkungan</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Keamanan Lingkungan</Text>}
+          placeholder='Masukkan nama KeamananLingkungan'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi KeamananLingkungan</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateKeamananLingkungan;
diff --git a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/detail/page.tsx b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/detail/page.tsx
new file mode 100644
index 00000000..e7d52a38
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/detail/page.tsx
@@ -0,0 +1,70 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailKeamananLingkungan() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Keamanan Lingkungan</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Keamanan Lingkungan</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nomor Keamanan Lingkungan</Text>
+                <Text fz={"lg"}>Test Kategori</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"}>Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Konten</Text>
+                <Text fz={"lg"} >Test Konten</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/keamanan/keamanan-lingkungan-pecalang-patwal/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailKeamananLingkungan;
diff --git a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/edit/page.tsx
new file mode 100644
index 00000000..35be3435
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/edit/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function EditKeamananLingkungan() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Keamanan Lingkungan</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Keamanan Lingkungan</Text>}
+          placeholder='Masukkan nama Keamanan Lingkungan'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Keamanan Lingkungan</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditKeamananLingkungan;
diff --git a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx
index 7b7edc9f..7a6cefe7 100644
--- a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx
@@ -1,36 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import React from 'react';
-import CreateKeamananLingkungan from './ui/tambah_keamanan_lingkungan/page';
-import ListKeamananLingkungan from './ui/list_keamanan_lingkungan/page';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-
-function Page() {
+function KeamananLingkungan() {
   return (
     <Box>
-     <Stack gap={'xs'}>
-      <Title order={3}>Keamanan Lingkungan </Title>
-      <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
-        <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
-          <TabsTab value="create" >
-            Tambah Keamanan Lingkungan 
-          </TabsTab>
-          <TabsTab value="list" >
-            List Keamanan Lingkungan 
-          </TabsTab>
-        </TabsList>
-
-        <TabsPanel value="create">
-          <CreateKeamananLingkungan/>
-        </TabsPanel>
-
-        <TabsPanel value="list">
-          <ListKeamananLingkungan/>
-        </TabsPanel>
-      </Tabs>
-      </Stack>
+      <HeaderSearch
+        title='Keamanan Lingkungan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListKeamananLingkungan/>
     </Box>
   );
 }
 
-export default Page;
+function ListKeamananLingkungan() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Keamanan Lingkungan'
+          href='/admin/keamanan/keamanan-lingkungan-pecalang-patwal/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Keamanan Lingkungan</TableTh>
+              <TableTh>Nomor Keamanan Lingkungan</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Keamanan Lingkungan 1</TableTd>
+              <TableTd>0896232831883</TableTd>
+              <TableTd>Keamanan Lingkungan 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/keamanan/keamanan-lingkungan-pecalang-patwal/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default KeamananLingkungan;
diff --git a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/ui/list_keamanan_lingkungan/page.tsx b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/ui/list_keamanan_lingkungan/page.tsx
deleted file mode 100644
index df888243..00000000
--- a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/ui/list_keamanan_lingkungan/page.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Box, Paper, Stack, Table, TableTbody, TableTh, TableThead, TableTr, Title } from '@mantine/core';
-import colors from '@/con/colors';
-import React from 'react';
-
-function ListKeamananLingkungan() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'} radius={10}>
-        <Stack gap={'xs'}>
-          <Title order={3}>List Keamanan Lingkungan</Title>
-          <Box>
-            <Table striped withTableBorder withColumnBorders withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Image</TableTh>
-                  <TableTh>Nama Keamanan Lingkungan</TableTh>
-                  <TableTh>Deskripsi Keamanan Lingkungan</TableTh>
-                  <TableTh>Aksi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListKeamananLingkungan;
diff --git a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/ui/tambah_keamanan_lingkungan/page.tsx b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/ui/tambah_keamanan_lingkungan/page.tsx
deleted file mode 100644
index 1d556e92..00000000
--- a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/ui/tambah_keamanan_lingkungan/page.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-import { KeamananEditor } from '../../../_com/keamananEditor';
-
-
-function KeamananLingkungan() {
-  return (
-    <Box>
-      <Stack gap={'xs'}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={4}>Tambah Keamanan Lingkungan</Title>
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-                  <IconImageInPicture size={50} />
-                </Box>
-                <TextInput
-                  label={<Text fw={"bold"} fz={"sm"}>Nama Keamanan Lingkungan</Text>}
-                  placeholder='Masukkan nama keamanan lingkungan'
-                />
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Deskripsi Keamanan Lingkungan</Text>
-                  <KeamananEditor
-                    showSubmit={false}
-                  />
-                </Box>
-                <Group>
-                  <Button bg={colors['blue-button']}>Submit</Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-          <Box>
-
-          </Box>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default KeamananLingkungan;
diff --git a/src/app/admin/(dashboard)/keamanan/kontak-darurat/create/createKontak.tsx b/src/app/admin/(dashboard)/keamanan/kontak-darurat/create/createKontak.tsx
deleted file mode 100644
index 98ebd6ab..00000000
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/create/createKontak.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Stack, Text, TextInput } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-
-function CreateKontakDarurat() {
-  return (
-    <Box>
-     <Stack gap={"xs"}>
-      <TextInput 
-      label={<Text fz={"sm"} fw={"bold"}>Judul Kontak Darurat</Text>}
-      placeholder="masukkan judul kontak darurat"
-      />
-      <IconImageInPicture size={24} color={colors['blue-button']} />
-      <TextInput 
-      label={<Text fz={"sm"} fw={"bold"}>Nama Kontak Darurat</Text>}
-      placeholder="masukkan nama kontak darurat"
-      />
-      <IconImageInPicture size={24} color={colors['blue-button']} />
-      <TextInput 
-      label={<Text fz={"sm"} fw={"bold"}>Nomor Kontak Darurat</Text>}
-      placeholder="masukkan nomor kontak darurat"
-      />
-     </Stack>
-    </Box>
-  );
-}
-
-export default CreateKontakDarurat;
diff --git a/src/app/admin/(dashboard)/keamanan/kontak-darurat/create/page.tsx b/src/app/admin/(dashboard)/keamanan/kontak-darurat/create/page.tsx
new file mode 100644
index 00000000..b9b314ee
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/create/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function CreateKontakDarurat() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Kontak Darurat</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Kontak Darurat</Text>}
+          placeholder='Masukkan nama Kontak Darurat'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Kontak Darurat</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateKontakDarurat;
diff --git a/src/app/admin/(dashboard)/keamanan/kontak-darurat/detail/page.tsx b/src/app/admin/(dashboard)/keamanan/kontak-darurat/detail/page.tsx
new file mode 100644
index 00000000..e6473fe5
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/detail/page.tsx
@@ -0,0 +1,70 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailKontakDarurat() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Kontak Darurat</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Kontak Darurat</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nomor Kontak Darurat</Text>
+                <Text fz={"lg"}>Test Kategori</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"}>Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Konten</Text>
+                <Text fz={"lg"} >Test Konten</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/keamanan/kontak-darurat/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailKontakDarurat;
diff --git a/src/app/admin/(dashboard)/keamanan/kontak-darurat/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/kontak-darurat/edit/page.tsx
new file mode 100644
index 00000000..06b4bf60
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/edit/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function EditKontakDarurat() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Kontak Darurat</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Kontak Darurat</Text>}
+          placeholder='Masukkan nama Kontak Darurat'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Kontak Darurat</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditKontakDarurat;
diff --git a/src/app/admin/(dashboard)/keamanan/kontak-darurat/listData/page.tsx b/src/app/admin/(dashboard)/keamanan/kontak-darurat/listData/page.tsx
deleted file mode 100644
index 6de1176b..00000000
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/listData/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Text, Title } from '@mantine/core';
-import React from 'react';
-
-function ListDataKontakDarurat() {
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Data Kontak Darurat</Title>
-        <Box>
-          <Text fw={"bold"}>Judul Kontak Darurat</Text>
-          <Text> </Text>
-          <Text fw={"bold"}>Nama Kontak Darurat</Text>
-          <Text> </Text>
-          <Text fw={"bold"}>Nomor Kontak Darurat</Text>
-          <Text> </Text>
-        </Box>
-      </Stack>
-    </Paper>
-  );
-}
-
-export default ListDataKontakDarurat;
diff --git a/src/app/admin/(dashboard)/keamanan/kontak-darurat/page.tsx b/src/app/admin/(dashboard)/keamanan/kontak-darurat/page.tsx
index 10f224ff..4d424d7a 100644
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/page.tsx
@@ -1,31 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
-import React from 'react';
-import CreateKontakDarurat from './create/createKontak';
-import ListDataKontakDarurat from './listData/page';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function KontakDaurat() {
   return (
-    <Stack gap={"xs"}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10}>
-            <Title order={3}>Kontak Darurat</Title>
-          <CreateKontakDarurat/>
-          <Group>
-            <Button
-              mt={10}
-              bg={colors['blue-button']}
-            >
-              Submit
-            </Button>
-          </Group>
-          </Paper>
-        </Box>
-        <ListDataKontakDarurat/>
-      </SimpleGrid>
-    </Stack>
+    <Box>
+      <HeaderSearch
+        title='Kontak Darurat'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListKontakDaurat/>
+    </Box>
   );
 }
 
-export default Page;
+function ListKontakDaurat() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Kontak Darurat'
+          href='/admin/keamanan/kontak-darurat/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Kontak Darurat</TableTh>
+              <TableTh>Nomor Kontak Darurat</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Kontak Darurat 1</TableTd>
+              <TableTd>0896232831883</TableTd>
+              <TableTd>Kontak Darurat 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/keamanan/kontak-darurat/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default KontakDaurat;
diff --git a/src/app/admin/(dashboard)/keamanan/laporan-publik/create/createLaporan.tsx b/src/app/admin/(dashboard)/keamanan/laporan-publik/create/createLaporan.tsx
deleted file mode 100644
index 72943bb3..00000000
--- a/src/app/admin/(dashboard)/keamanan/laporan-publik/create/createLaporan.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Box, Stack, Text, TextInput } from '@mantine/core';
-import React from 'react';
-import { KeamananEditor } from '../../_com/keamananEditor';
-
-
-function CreateLaporanPublik() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Judul Laporan Publik</Text>}
-          placeholder="masukkan judul laporan publik"
-        />
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Tanggal Laporan Publik</Text>}
-          placeholder="masukkan tanggal laporan publik"
-        />
-        <Box>
-          <Text fz={"sm"} fw={"bold"}>Deskripsi Laporan Publik</Text>
-          <KeamananEditor showSubmit={false} />
-        </Box>
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreateLaporanPublik;
diff --git a/src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx b/src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx
new file mode 100644
index 00000000..0b0cdbe2
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx
@@ -0,0 +1,48 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function CreateLaporanPublik() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Laporan Publik</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Laporan Publik</Text>}
+          placeholder='Masukkan judul LaporanPublik'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal Laporan Publik</Text>}
+          placeholder='Masukkan tanggal LaporanPublik'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Laporan Publik</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateLaporanPublik;
diff --git a/src/app/admin/(dashboard)/keamanan/laporan-publik/detail/page.tsx b/src/app/admin/(dashboard)/keamanan/laporan-publik/detail/page.tsx
new file mode 100644
index 00000000..2283733d
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/laporan-publik/detail/page.tsx
@@ -0,0 +1,70 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailLaporanPublik() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Laporan Publik</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul Laporan Publik</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Tanggal Laporan Publik</Text>
+                <Text fz={"lg"}>Test Tanggal</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"}>Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Konten</Text>
+                <Text fz={"lg"} >Test Konten</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/keamanan/laporan-publik/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailLaporanPublik;
diff --git a/src/app/admin/(dashboard)/keamanan/laporan-publik/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/laporan-publik/edit/page.tsx
new file mode 100644
index 00000000..59408928
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/laporan-publik/edit/page.tsx
@@ -0,0 +1,48 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function EditLaporanPublik() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Laporan Publik</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Laporan Publik</Text>}
+          placeholder='Masukkan judul Laporan Publik'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal Laporan Publik</Text>}
+          placeholder='Masukkan tanggal Laporan Publik'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Laporan Publik</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditLaporanPublik;
diff --git a/src/app/admin/(dashboard)/keamanan/laporan-publik/listData/page.tsx b/src/app/admin/(dashboard)/keamanan/laporan-publik/listData/page.tsx
deleted file mode 100644
index 7acdb40b..00000000
--- a/src/app/admin/(dashboard)/keamanan/laporan-publik/listData/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { Box, Paper, Stack, Text, Title } from '@mantine/core';
-import colors from '@/con/colors';
-
-function ListDataLaporanPublik() {
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Data Laporan Publik</Title>
-        <Box>
-          <Text fw={"bold"}>Judul Laporan Publik</Text>
-          <Text></Text>
-          <Text fw={"bold"}>Tanggal Laporan Publik</Text>
-          <Text></Text>
-          <Text fw={"bold"}>Deskripsi Laporan Publik</Text>
-          <Text></Text>
-        </Box>
-      </Stack>
-    </Paper>
-  );
-}
-
-export default ListDataLaporanPublik;
diff --git a/src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx b/src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx
index 0dcd6de5..afd521cb 100644
--- a/src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx
@@ -1,28 +1,58 @@
-import colors from "@/con/colors";
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from "@mantine/core";
-import CreateLaporanPublik from "./create/createLaporan";
-import ListDataLaporanPublik from "./listData/page";
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-export default function Page() {
+function LaporanPublik() {
   return (
-    <Stack gap={"xs"}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>  
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10}>
-            <Title order={3}>Laporan Publik</Title>
-            <CreateLaporanPublik/>
-            <Group>
-              <Button
-              mt={10}
-              bg={colors['blue-button']}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Paper>
-        </Box>
-        <ListDataLaporanPublik/>
-      </SimpleGrid>
-    </Stack>
-  )
-}
\ No newline at end of file
+    <Box>
+      <HeaderSearch
+        title='Laporan Publik'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListLaporanPublik/>
+    </Box>
+  );
+}
+
+function ListLaporanPublik() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Laporan Publik'
+          href='/admin/keamanan/laporan-publik/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Judul Laporan Publik</TableTh>
+              <TableTh>Tanggal Laporan Publik</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Laporan Publik 1</TableTd>
+              <TableTd>0896232831883</TableTd>
+              <TableTd>Laporan Publik 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/keamanan/laporan-publik/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default LaporanPublik;
diff --git a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/createPencegahan.tsx b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/createPencegahan.tsx
deleted file mode 100644
index 3a7cf61b..00000000
--- a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/createPencegahan.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Stack, Text, TextInput } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-
-function CreatePencegahan() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Judul Pencegahan Kriminalitas</Text>}
-          placeholder="masukkan judul pencegahan kriminalitas"
-        />
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Deskripsi Pencegahan Kriminalitas</Text>}
-          placeholder="masukkan deskripsi pencegahan kriminalitas"
-        />
-        <Text fw={"bold"} fz={"sm"} >Gambar Pencegahan Kriminalitas</Text>
-        <IconImageInPicture size={24} color={colors['blue-button']} />
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreatePencegahan;
diff --git a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx
new file mode 100644
index 00000000..3d4445bc
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function CreatePencegahanKriminalitas() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Pencegahan Kriminalitas</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Pencegahan Kriminalitas</Text>}
+          placeholder='Masukkan nama Pencegahan Kriminalitas'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Pencegahan Kriminalitas</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreatePencegahanKriminalitas;
diff --git a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/detail/page.tsx b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/detail/page.tsx
new file mode 100644
index 00000000..4a052948
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/detail/page.tsx
@@ -0,0 +1,70 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPencegahanKriminalitas() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Pencegahan Kriminalitas</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Pencegahan Kriminalitas</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nomor Pencegahan Kriminalitas</Text>
+                <Text fz={"lg"}>Test Kategori</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"}>Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Konten</Text>
+                <Text fz={"lg"} >Test Konten</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/keamanan/pencegahan-kriminalitas/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailPencegahanKriminalitas;
diff --git a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/edit/page.tsx
new file mode 100644
index 00000000..dd1afee7
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/edit/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function EditPencegahanKriminalitas() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Pencegahan Kriminalitas</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Pencegahan Kriminalitas</Text>}
+          placeholder='Masukkan nama Pencegahan Kriminalitas'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Pencegahan Kriminalitas</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditPencegahanKriminalitas;
diff --git a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/listData/page.tsx b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/listData/page.tsx
deleted file mode 100644
index 4153abe6..00000000
--- a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/listData/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Text, Title } from '@mantine/core';
-import React from 'react';
-
-function ListDataPencegahan() {
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Data Pencegahan Kriminalitas</Title>
-        <Box>
-          <Text fw={"bold"}>Judul Pencegahan Kriminalitas</Text>
-          <Text> </Text>
-          <Text fw={"bold"}>Deskripsi Pencegahan Kriminalitas</Text>
-          <Text> </Text>
-          <Text fw={"bold"}>Gambar Pencegahan Kriminalitas</Text>
-          <Text> </Text>
-        </Box>
-      </Stack>
-    </Paper>
-  );
-}
-
-export default ListDataPencegahan;
diff --git a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx
index be34aed5..99816ed1 100644
--- a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx
@@ -1,32 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Stack, SimpleGrid, Box, Paper, Title, Group, Button } from '@mantine/core';
-import React from 'react';
-import CreatePencegahan from './create/createPencegahan';
-import ListDataPencegahan from './listData/page';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-
-function Page() {
+function PencegahanKriminalitas() {
   return (
-    <Stack gap={"xs"}>
-    <SimpleGrid cols={{ base: 1, md: 2 }}>
-      <Box>
-        <Paper bg={colors['white-1']} p={'md'} radius={10}>
-          <Title order={3}>Kontak Darurat</Title>
-        <CreatePencegahan/>
-        <Group>
-          <Button
-            mt={10}
-            bg={colors['blue-button']}
-          >
-            Submit
-          </Button>
-        </Group>
-        </Paper>
-      </Box>
-      <ListDataPencegahan/>
-    </SimpleGrid>
-  </Stack>
+    <Box>
+      <HeaderSearch
+        title='Pencegahan Kriminalitas'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListPencegahanKriminalitas/>
+    </Box>
   );
 }
 
-export default Page;
+function ListPencegahanKriminalitas() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Pencegahan Kriminalitas'
+          href='/admin/keamanan/pencegahan-kriminalitas/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Pencegahan Kriminalitas</TableTh>
+              <TableTh>Nomor Pencegahan Kriminalitas</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Pencegahan Kriminalitas 1</TableTd>
+              <TableTd>0896232831883</TableTd>
+              <TableTd>Pencegahan Kriminalitas 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/keamanan/pencegahan-kriminalitas/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default PencegahanKriminalitas;
diff --git a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/create/page.tsx b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/create/page.tsx
new file mode 100644
index 00000000..86e957a5
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/create/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function CreatePolsekTerdekat() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Polsek Terdekat</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
+          placeholder='Masukkan nama Polsek Terdekat'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Polsek Terdekat</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreatePolsekTerdekat;
diff --git a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/detail/page.tsx b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/detail/page.tsx
new file mode 100644
index 00000000..b981cb6f
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/detail/page.tsx
@@ -0,0 +1,70 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPolsekTerdekat() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Polsek Terdekat</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Polsek Terdekat</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nomor Polsek Terdekat</Text>
+                <Text fz={"lg"}>Test Kategori</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"}>Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Konten</Text>
+                <Text fz={"lg"} >Test Konten</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/keamanan/polsek-terdekat/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailPolsekTerdekat;
diff --git a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/edit/page.tsx
new file mode 100644
index 00000000..ef12dd43
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/edit/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function EditPolsekTerdekat() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Polsek Terdekat</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
+          placeholder='Masukkan nama Polsek Terdekat'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Polsek Terdekat</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditPolsekTerdekat;
diff --git a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx
index 92031007..7d8d8e51 100644
--- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx
@@ -1,36 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import React from 'react';
-import CreatePolsekTerdekat from './ui/tambah_polsek_terdekat/page';
-import ListPolsekTerdekat from './ui/list_polsek_terdekat/page';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-
-function Page() {
+function PolsekTerdekat() {
   return (
     <Box>
-     <Stack gap={'xs'}>
-      <Title order={3}>Polsek Terdekat</Title>
-      <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
-        <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
-          <TabsTab value="create" >
-            Tambah Polsek Terdekat
-          </TabsTab>
-          <TabsTab value="list" >
-            List Polsek Terdekat
-          </TabsTab>
-        </TabsList>
-
-        <TabsPanel value="create">
-          <CreatePolsekTerdekat/>
-        </TabsPanel>
-
-        <TabsPanel value="list">
-          <ListPolsekTerdekat/>
-        </TabsPanel>
-      </Tabs>
-      </Stack>
+      <HeaderSearch
+        title='Polsek Terdekat'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListPolsekTerdekat/>
     </Box>
   );
 }
 
-export default Page;
+function ListPolsekTerdekat() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Polsek Terdekat'
+          href='/admin/keamanan/polsek-terdekat/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Polsek Terdekat</TableTh>
+              <TableTh>Nomor Polsek Terdekat</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Polsek Terdekat 1</TableTd>
+              <TableTd>0896232831883</TableTd>
+              <TableTd>Polsek Terdekat 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/keamanan/polsek-terdekat/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default PolsekTerdekat;
diff --git a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/ui/list_polsek_terdekat/page.tsx b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/ui/list_polsek_terdekat/page.tsx
deleted file mode 100644
index 7c119c36..00000000
--- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/ui/list_polsek_terdekat/page.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Box, Paper, Stack, Table, TableTbody, TableTh, TableThead, TableTr, Title } from '@mantine/core';
-import colors from '@/con/colors';
-import React from 'react';
-
-function ListPolsekTerdekat() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'} radius={10}>
-        <Stack gap={'xs'}>
-          <Title order={3}>List Polsek Terdekat</Title>
-          <Box>
-            <Table striped withTableBorder withColumnBorders withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama Polsek Terdekat</TableTh>
-                  <TableTh>Jarak Polsek Terdekat</TableTh>
-                  <TableTh>Alamat Polsek Terdekat</TableTh>
-                  <TableTh>Nomor Telepon Polsek Terdekat</TableTh>
-                  <TableTh>Jam Aktif</TableTh>
-                  <TableTh>Deskripsi Polsek Terdekat</TableTh>
-                  <TableTh>Aksi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListPolsekTerdekat;
diff --git a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/ui/tambah_polsek_terdekat/page.tsx b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/ui/tambah_polsek_terdekat/page.tsx
deleted file mode 100644
index ba2a4c32..00000000
--- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/ui/tambah_polsek_terdekat/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import { KeamananEditor } from '../../../_com/keamananEditor';
-
-
-function CreatePolsekTerdekat() {
-  return (
-    <Box>
-      <Stack gap={'xs'}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={4}>Tambah Polsek Terdekat</Title>
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
-                placeholder='Masukkan nama polsek terdekat'
-                />
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Jarak Polsek Terdekat</Text>}
-                placeholder='Masukkan jarak polsek terdekat'
-                />
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Alamat Polsek Terdekat</Text>}
-                placeholder='Masukkan alamat polsek terdekat'
-                />
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Polsek Terdekat</Text>}
-                placeholder='Masukkan nomor telepon polsek terdekat'
-                />
-                <TextInput
-                label={<Text fw={"bold"} fz={"sm"}>Jam Aktif</Text>}
-                placeholder='Masukkan jam aktif polsek terdekat'
-                />
-                <Box>
-                  <Text fw={"bold"} fz={"sm"}>Deskripsi Polsek Terdekat</Text>
-                  <KeamananEditor
-                    showSubmit={false}
-                  />
-                </Box>
-                <Group>
-                  <Button bg={colors['blue-button']}>Submit</Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-          <Box>
-
-          </Box>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreatePolsekTerdekat;
diff --git a/src/app/admin/(dashboard)/keamanan/tips-keamanan/create/createTips.tsx b/src/app/admin/(dashboard)/keamanan/tips-keamanan/create/createTips.tsx
deleted file mode 100644
index 4fb1ada6..00000000
--- a/src/app/admin/(dashboard)/keamanan/tips-keamanan/create/createTips.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Stack, Text, TextInput } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-import { KeamananEditor } from '../../_com/keamananEditor';
-
-function CreateTipsKeamanan() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Judul Tips Keamanan</Text>}
-          placeholder="masukkan judul tips keamanan"
-        />
-        <Box>
-          <Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>
-          <IconImageInPicture size={24} color={colors['blue-button']} />
-        </Box>
-        <KeamananEditor
-          showSubmit={false}
-        />
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreateTipsKeamanan;
diff --git a/src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx b/src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx
new file mode 100644
index 00000000..7012f30a
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function CreateTipsKeamanan() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Tips Keamanan</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Tips Keamanan</Text>}
+          placeholder='Masukkan nama tips keamanan'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Tips Keamanan</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateTipsKeamanan;
diff --git a/src/app/admin/(dashboard)/keamanan/tips-keamanan/detail/page.tsx b/src/app/admin/(dashboard)/keamanan/tips-keamanan/detail/page.tsx
new file mode 100644
index 00000000..194c46aa
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/tips-keamanan/detail/page.tsx
@@ -0,0 +1,70 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailTipsKeamanan() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Tips Keamanan</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Tips Keamanan</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nomor Tips Keamanan</Text>
+                <Text fz={"lg"}>Test Kategori</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"}>Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Konten</Text>
+                <Text fz={"lg"} >Test Konten</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/keamanan/tips-keamanan/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailTipsKeamanan;
diff --git a/src/app/admin/(dashboard)/keamanan/tips-keamanan/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/tips-keamanan/edit/page.tsx
new file mode 100644
index 00000000..fe6d6a9f
--- /dev/null
+++ b/src/app/admin/(dashboard)/keamanan/tips-keamanan/edit/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function EditTipsKeamanan() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Tips Keamanan</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Tips Keamanan</Text>}
+          placeholder='Masukkan nama Tips Keamanan'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Tips Keamanan</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditTipsKeamanan;
diff --git a/src/app/admin/(dashboard)/keamanan/tips-keamanan/listData/page.tsx b/src/app/admin/(dashboard)/keamanan/tips-keamanan/listData/page.tsx
deleted file mode 100644
index 4bead65a..00000000
--- a/src/app/admin/(dashboard)/keamanan/tips-keamanan/listData/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Text, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
-
-function ListDataTipsKeamanan() {
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Data Tips Keamanan</Title>
-        <Box>
-          <Text fw={"bold"}>Judul Tips Keamanan</Text>
-          <Text></Text>
-          <Text fw={"bold"}>Gambar Tips Keamanan</Text>
-          <IconImageInPicture size={24} color={colors['blue-button']} />
-          <Text fw={"bold"}>Deskripsi Tips Keamanan</Text>
-          <Text></Text>
-        </Box>
-      </Stack>
-    </Paper>
-  );
-}
-
-export default ListDataTipsKeamanan;
diff --git a/src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx b/src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx
index e1b672b8..995fba9d 100644
--- a/src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx
@@ -1,31 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
-import React from 'react';
-import CreateTipsKeamanan from './create/createTips';
-import ListDataTipsKeamanan from './listData/page';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function TipsKeamanan() {
   return (
-    <Stack gap={"xs"}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>  
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10}>
-            <Title order={3}>Tips Keamanan</Title>
-            <CreateTipsKeamanan/>
-            <Group>
-              <Button
-              mt={10}
-              bg={colors['blue-button']}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Paper>
-        </Box>
-        <ListDataTipsKeamanan/>
-      </SimpleGrid>
-    </Stack>
-  )
+    <Box>
+      <HeaderSearch
+        title='Tips Keamanan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListTipsKeamanan/>
+    </Box>
+  );
 }
 
-export default Page;
+function ListTipsKeamanan() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Tips Keamanan'
+          href='/admin/keamanan/tips-keamanan/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Tips Keamanan</TableTh>
+              <TableTh>Nomor Tips Keamanan</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Tips Keamanan 1</TableTd>
+              <TableTd>0896232831883</TableTd>
+              <TableTd>Tips Keamanan 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/keamanan/tips-keamanan/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default TipsKeamanan;