UI admin bagian pengumuman dan backendnya

src/app/admin/(dashboard)/_state/desa/pengumuman.ts

@@ -1,83 +1,246 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import ApiFetch from "@/lib/api-fetch"
-import { Prisma } from "@prisma/client"
-import { toast } from "react-toastify"
-import { proxy } from "valtio"
-import { z } from "zod"
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
 
 const templateFormPengumuman = z.object({
-    judul: z.string().min(3, "Judul minimal 3 karakter"),
-    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
-    content: z.string().min(3, "Content minimal 3 karakter"),
-    categoryPengumumanId: z.string().nonempty(),
-})
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+  categoryPengumumanId: z.string().nonempty(),
+});
 
-const category = proxy ({
-    findMany: {
-        data: null as
-          | null
-          | Prisma.CategoryPengumumanGetPayload<{ omit: { isActive: true } }>[],
-          async load() {
-            const res = await ApiFetch.api.desa.pengumuman.category["find-many"].get();
-            if (res.status === 200) {
-                category.findMany.data = res.data?.data as any ?? [];
-            }
-          }
-    }
-})
+const category = proxy({
+  findMany: {
+    data: null as
+      | null
+      | Prisma.CategoryPengumumanGetPayload<{ omit: { isActive: true } }>[],
+    async load() {
+      const res = await ApiFetch.api.desa.pengumuman.category[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        category.findMany.data = (res.data?.data as any) ?? [];
+      }
+    },
+  },
+});
 
 type PengumumanForm = Prisma.PengumumanGetPayload<{
-    select: {
-        judul: true;
-        deskripsi: true;
-        content: true;
-        categoryPengumumanId: true;
-    }
-}>
+  select: {
+    judul: true;
+    deskripsi: true;
+    content: true;
+    categoryPengumumanId: true;
+  };
+}>;
 const pengumuman = proxy({
-create: {
+  create: {
     form: {} as PengumumanForm,
     loading: false,
     async create() {
-       const cek = templateFormPengumuman.safeParse(pengumuman.create.form);
-       if (!cek.success) {
+      const cek = templateFormPengumuman.safeParse(pengumuman.create.form);
+      if (!cek.success) {
         const err = `[${cek.error.issues
-        .map((v) => `${v.path.join(".")}`)
-        .join("\n")}] required`;
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
         return toast.error(err);
-       }
-       try {
+      }
+      try {
         pengumuman.create.loading = true;
-        const res = await ApiFetch.api.desa.pengumuman["create"].post(pengumuman.create.form)
+        const res = await ApiFetch.api.desa.pengumuman["create"].post(
+          pengumuman.create.form
+        );
         if (res.status === 200) {
-            pengumuman.findMany.load();
-            return toast.success("success create");
+          pengumuman.findMany.load();
+          return toast.success("success create");
         }
-        console.log(res)
+        console.log(res);
         return toast.error("failed create");
-       } catch (error) {
+      } catch (error) {
         console.log((error as Error).message);
-       } finally{
+      } finally {
         pengumuman.create.loading = false;
-       }
-    }
-},
-findMany: {
+      }
+    },
+  },
+  findMany: {
     data: null as
-    | Prisma.PengumumanGetPayload<{omit: {isActive: true}}>[]
-    | null,
-    async load () {
-        const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
-        console.log(res)
-        if (res.status === 200) {
-            pengumuman.findMany.data = res.data?.data ?? [];
+      | Prisma.PengumumanGetPayload<{ 
+        include: {
+            CategoryPengumuman: true;
         }
-    }
-}
-})
+       }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
+      console.log(res);
+      if (res.status === 200) {
+        pengumuman.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  // findUnique: {
+  //   data: null as
+  //   | Prisma.PengumumanGetPayload<{
+  //       include: {
+  //           CategoryPengumuman: true;
+  //       }
+  //   }>
+  //   | null,
+  //   async load(id: string) {
+  //     try {
+  //       const res = await fetch(`/api/desa/pengumuman/${id}`);
+  //       if (res.ok) {
+  //         const data = await res.json();
+  //         pengumuman.findUnique.data = data.data ?? null;
+  //       } else {
+  //         console.error('Failed to fetch pengumuman:', res.statusText);
+  //         pengumuman.findUnique.data = null;
+  //       }
+  //     } catch (error) {
+  //       console.error('Error fetching pengumuman:', error);
+  //       pengumuman.findUnique.data = null;
+  //     }
+  //   },
+  // },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        pengumuman.delete.loading = true;
+
+        const response = await fetch(`/api/desa/pengumuman/delete/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Pengumuman berhasil dihapus");
+          await pengumuman.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus pengumuman");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus pengumuman");
+      } finally {
+        pengumuman.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {} as PengumumanForm,
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/desa/pengumuman/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+            content: data.content,
+            categoryPengumumanId: data.categoryPengumumanId || "",
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data pengumuman");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data pengumuman");
+      } finally {
+        pengumuman.update.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateFormPengumuman.safeParse(pengumuman.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        pengumuman.update.loading = true;
+
+        const response = await fetch(`/api/desa/pengumuman/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            judul: this.form.judul,
+            deskripsi: this.form.deskripsi,
+            content: this.form.content,
+            categoryPengumumanId: this.form.categoryPengumumanId,
+          }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update pengumuman");
+          await pengumuman.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update pengumuman");
+        }
+      } catch (error) {
+        console.error("Error updating pengumuman:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update pengumuman"
+        );
+        return false;
+      } finally {
+        pengumuman.update.loading = false;
+      }
+    },
+  },
+});
 
 const stateDesaPengumuman = proxy({
-    category,
-    pengumuman
-})
-export default stateDesaPengumuman
+  category,
+  pengumuman,
+});
+export default stateDesaPengumuman;

src/app/admin/(dashboard)/desa/berita/page.tsx

@@ -32,72 +32,6 @@ function Page() {
   );
 }
 
-
-
-
-
-
-// function BeritaList() {
-//   const beritaState = useProxy(stateDashboardBerita)
-//   useShallowEffect(() => {
-//     beritaState.berita.findMany.load()
-//   }, [])
-
-
-
-//   const router = useRouter()
-
-//   if (!beritaState.berita.findMany.data) return <Stack py={10}>
-//     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-//   </Stack>
-//   return (
-//     <Box py={10}>
-//       <Paper bg={colors['white-1']} p={'md'}>
-//         <Stack>
-//           <Text fz={"xl"} fw={"bold"}>List Berita</Text>
-//           <SimpleGrid cols={{ base: 1, md: 4 }}>
-//             {beritaState.berita.findMany.data?.map((item) => (
-//               <Paper key={item.id} bg={colors['BG-trans']} p={'md'}>
-//                 <Box >
-//                   <Flex justify="flex-end" mt={10}>
-//                     <ActionIcon
-//                       onClick={() => beritaState.berita.delete.byId(item.id)}
-//                       disabled={beritaState.berita.delete.loading}
-//                       color={colors['blue-button']} variant='transparent'>
-//                       <IconX size={20} />
-//                     </ActionIcon>
-//                     <ActionIcon onClick={() => {
-//                       router.push("/desa/berita/edit");
-//                     }} color={colors['blue-button']} variant='transparent'>
-//                       <IconEdit size={20} />
-//                     </ActionIcon>
-//                   </Flex>
-//                   <Text fw={"bold"} fz={"sm"}>
-//                     Kategori
-//                   </Text>
-//                   <Text>{item.kategoriBerita?.name}</Text>
-//                   <Text fw={"bold"} fz={"sm"}>
-//                     Judul
-//                   </Text>
-//                   <Text>{item.judul}</Text>
-//                   <Text lineClamp={1} fw={"bold"} fz={"sm"}>
-//                     Deskripsi
-//                   </Text>
-//                   <Text size='sm' lineClamp={2}>{item.deskripsi}</Text>
-//                   <Text fw={"bold"} fz={"sm"}>
-//                     Gambar
-//                   </Text>
-//                   <Image w={{ base: 100, md: 150 }} src={item.image?.link} alt="gambar" />
-//                 </Box>
-//               </Paper>
-//             ))}
-//           </SimpleGrid>
-//         </Stack>
-//       </Paper>
-//     </Box>
-//   )
-// }
-
 function BeritaList() {
   const beritaState = useProxy(stateDashboardBerita)
   const [modalHapus, setModalHapus] = useState(false)

src/app/admin/(dashboard)/desa/gallery/foto/create/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function CreateFoto() {
+  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 Foto</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
+          placeholder='Masukkan judul foto'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal Foto</Text>}
+          placeholder='Masukkan tanggal foto'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Foto</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateFoto;

src/app/admin/(dashboard)/desa/gallery/foto/detail/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailFoto() {
+  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 Foto</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+             <Box>
+             <Text fw={"bold"}>Judul Foto</Text>
+             <Text>Foto 1</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Tanggal Foto</Text>
+             <Text>2022-01-01</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Deskripsi Foto</Text>
+             <Text>Deskripsi Foto 1</Text>
+             </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/desa/gallery/foto/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 DetailFoto;
+

src/app/admin/(dashboard)/desa/gallery/foto/edit/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function EditFoto() {
+  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 Foto</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
+          placeholder='Masukkan judul foto'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal Foto</Text>}
+          placeholder='Masukkan tanggal foto'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Foto</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditFoto;

src/app/admin/(dashboard)/desa/gallery/foto/page.tsx

@@ -0,0 +1,46 @@
+'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 { useRouter } from 'next/navigation';
+import JudulListTab from '../../../_com/jusulListTab';
+
+function Foto() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulListTab
+          title='List Foto'
+          href='/admin/desa/gallery/foto/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={16} />}
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Judul Foto</TableTh>
+              <TableTh>Tanggal Foto</TableTh>
+              <TableTh>Deskripsi Foto</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Foto 1</TableTd>
+              <TableTd>2022-01-01</TableTd>
+              <TableTd>Deskripsi Foto 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/desa/gallery/foto/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Foto;

src/app/admin/(dashboard)/desa/gallery/page.tsx

@@ -1,8 +1,8 @@
 import colors from '@/con/colors';
 import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconPhoto, IconVideo } from '@tabler/icons-react';
-import Foto from './ui/foto/page';
-import Video from './ui/video/page';
+import Foto from './foto/page';
+import Video from './video/page';
 
 function Gallery() {
   return (

src/app/admin/(dashboard)/desa/gallery/ui/foto/listPage.tsx

@@ -1,17 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListFoto() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={3}>List Foto</Title>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListFoto;

src/app/admin/(dashboard)/desa/gallery/ui/foto/page.tsx

@@ -1,52 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconUpload } from '@tabler/icons-react';
-import { DesaEditor } from '../../../_com/desaEditor';
-import ListFoto from './listPage';
-
-function Foto() {
-  return (
-    <Box py={10}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Foto</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Tanggal Foto</Text>}
-                placeholder="2022-01-01"
-              />
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul Foto</Text>}
-                placeholder="Judul Foto"
-              />
-              <Text fz={"sm"} fw={"bold"}>Upload Foto</Text>
-              <Box bg={colors['BG-trans']} p={"md"}>
-                <Center>
-                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                </Center>
-              </Box>
-              <Box>
-                <Text fz={"sm"} fw={"bold"}>Deskripsi Foto</Text>
-                <DesaEditor
-                  showSubmit={false}
-                />
-              </Box>
-              <Group>
-                <Button
-                  mt={10}
-                  bg={colors['blue-button']}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-        <ListFoto/>
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-export default Foto;

src/app/admin/(dashboard)/desa/gallery/ui/video/listPage.tsx

@@ -1,17 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListVideo() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={3}>List Video</Title>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListVideo;

src/app/admin/(dashboard)/desa/gallery/ui/video/page.tsx

@@ -1,52 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconUpload } from '@tabler/icons-react';
-import { DesaEditor } from '../../../_com/desaEditor';
-import ListVideo from './listPage';
-
-function Video() {
-  return (
-    <Box py={10}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Video</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Tanggal Video</Text>}
-                placeholder="2022-01-01"
-              />
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul Video</Text>}
-                placeholder="Judul Video"
-              />
-              <Text fz={"sm"} fw={"bold"}>Upload Video</Text>
-              <Box bg={colors['BG-trans']} p={"md"}>
-                <Center>
-                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                </Center>
-              </Box>
-              <Box>
-                <Text fz={"sm"} fw={"bold"}>Deskripsi Video</Text>
-                <DesaEditor
-                  showSubmit={false}
-                />
-              </Box>
-              <Group>
-                <Button
-                  mt={10}
-                  bg={colors['blue-button']}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-        <ListVideo/>
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-export default Video;

src/app/admin/(dashboard)/desa/gallery/video/create/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function CreateVideo() {
+  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 Video</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Video</Text>}
+          placeholder='Masukkan judul video'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal Video</Text>}
+          placeholder='Masukkan tanggal video'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateVideo;

src/app/admin/(dashboard)/desa/gallery/video/detail/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailVideo() {
+  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 Video</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+             <Box>
+             <Text fw={"bold"}>Judul Video</Text>
+             <Text>Video 1</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Tanggal Video</Text>
+             <Text>2022-01-01</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Deskripsi Video</Text>
+             <Text>Deskripsi Video 1</Text>
+             </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/desa/gallery/video/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 DetailVideo;
+

src/app/admin/(dashboard)/desa/gallery/video/edit/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function EditVideo() {
+  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 Video</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Video</Text>}
+          placeholder='Masukkan judul video'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal Video</Text>}
+          placeholder='Masukkan tanggal video'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditVideo;

src/app/admin/(dashboard)/desa/gallery/video/page.tsx

@@ -0,0 +1,46 @@
+'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 { useRouter } from 'next/navigation';
+import JudulListTab from '../../../_com/jusulListTab';
+
+function Video() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulListTab
+          title='List Video'
+          href='/admin/desa/gallery/video/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={16} />}
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Judul Video</TableTh>
+              <TableTh>Tanggal Video</TableTh>
+              <TableTh>Deskripsi Video</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Video 1</TableTd>
+              <TableTd>2022-01-01</TableTd>
+              <TableTd>Deskripsi Video 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/desa/gallery/video/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Video;

src/app/admin/(dashboard)/desa/pengumuman/[id]/edit/page.tsx

@@ -0,0 +1,53 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+
+function EditPengumuman() {
+  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 Pengumuman</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+          placeholder='Masukkan judul'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
+          placeholder='Masukkan deskripsi singkat'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
+          placeholder='Masukkan tanggal'
+          />
+           <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Waktu</Text>}
+          placeholder='Masukkan waktu'
+          />
+          <Box>
+          <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+          <KeamananEditor
+          showSubmit={false}
+          />
+          </Box>
+
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditPengumuman;

src/app/admin/(dashboard)/desa/pengumuman/[id]/page.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { Box, Button, Paper } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+import colors from '@/con/colors';
+
+
+function DetailPengumuman() {
+  // const pengumumanState = useProxy(stateDesaPengumuman)
+  // const [modalHapus, setModalHapus] = useState(false)
+  // const [selectedId, setSelectedId] = useState<string | null>(null)
+  // const params = useParams()
+  const router = useRouter()
+
+  // useShallowEffect(() => {
+  //   pengumumanState.pengumuman.findUnique.load(params?.id as string)
+  // }, [])
+
+
+  // const handleHapus = () => {
+  //   if (selectedId) {
+  //     pengumumanState.pengumuman.delete.byId(selectedId)
+  //     setModalHapus(false)
+  //     setSelectedId(null)
+  //     router.push("/admin/desa/pengumuman")
+  //   }
+  // }
+
+  // if (!pengumumanState.pengumuman.findUnique.data) {
+  //   return (
+  //     <Stack py={10}>
+  //         <Skeleton h={400} />
+  //     </Stack>
+  //   )
+  // }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        {/* <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Pengumuman</Text>
+          {pengumumanState.pengumuman.findUnique.data ? (
+            <Paper key={pengumumanState.pengumuman.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.CategoryPengumuman?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.judul}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.deskripsi}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Konten</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: pengumumanState.pengumuman.findUnique.data?.content }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (pengumumanState.pengumuman.findUnique.data) {
+                        setSelectedId(pengumumanState.pengumuman.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={pengumumanState.pengumuman.delete.loading || !pengumumanState.pengumuman.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                   onClick={() => {
+                    if (pengumumanState.pengumuman.findUnique.data) {
+                      router.push(`/admin/desa/pengumuman/${pengumumanState.pengumuman.findUnique.data.id}/edit`);
+                    }
+                   }}
+                    disabled={!pengumumanState.pengumuman.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack> */}
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailPengumuman;

src/app/admin/(dashboard)/desa/pengumuman/create/page.tsx

@@ -0,0 +1,110 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import stateDesaPengumuman from '../../../_state/desa/pengumuman';
+
+function CreatePengumuman() {
+  const pengumumanState = useProxy(stateDesaPengumuman)
+  const router = useRouter();
+
+  const handleSubmit = async () => {
+    await pengumumanState.pengumuman.create.create()
+    resetForm()
+    router.push("/admin/desa/pengumuman")
+  }
+
+  const resetForm = () => {
+    pengumumanState.pengumuman.create.form = {
+      judul: "",
+      deskripsi: "",
+      content: "",
+      categoryPengumumanId: "",
+    };
+  };
+  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 Pengumuman</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.judul = val.target.value
+            }}
+          />
+          <SelectCategory
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.categoryPengumumanId = val.id;
+            }}
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
+            placeholder='Masukkan deskripsi singkat'
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.deskripsi = val.target.value
+            }}
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <CreateEditor
+              value={pengumumanState.pengumuman.create.form.content}
+              onChange={(htmlContent) => {
+                pengumumanState.pengumuman.create.form.content = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+function SelectCategory({
+  onChange,
+}: {
+  onChange: (value: Prisma.CategoryPengumumanGetPayload<{ select: { name: true; id: true; } }>) => void;
+}) {
+  const categoryState = useProxy(stateDesaPengumuman.category);
+
+  useShallowEffect(() => {
+    categoryState.findMany.load();
+  }, []);
+
+  return (
+    <Select
+      label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+      placeholder='Pilih kategori'
+      data={categoryState.findMany.data?.map((item) => ({
+        label: item.name,
+        value: item.id,
+      }))}
+      onChange={(val) => {
+        const selected = categoryState.findMany.data?.find((item) => item.id === val);
+        if (selected) {
+          onChange(selected);
+        }
+      }}
+      searchable
+      nothingFoundMessage="Tidak ditemukan"
+    />
+  );
+}
+
+export default CreatePengumuman;

src/app/admin/(dashboard)/desa/pengumuman/page.tsx

@@ -1,102 +1,111 @@
 'use client'
-import { Box, Group, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import stateDesaPengumuman from '../../_state/desa/pengumuman';
-import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import { BeritaEditor } from '../berita/_com/BeritaEditor';
 import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
+import stateDesaPengumuman from '../../_state/desa/pengumuman';
+import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import { useState } from 'react';
+
 
 function Page() {
   return (
     <Box>
-      <Title order={3}>Pengumuman</Title>
-      <SimpleGrid cols={{
-        base: 1, md: 2
-      }}>
-        <PengumumanCreate />
-        <PengumumanList />
-      </SimpleGrid>
+      <HeaderSearch
+        title='Pengumuman'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <PengumumanList />
     </Box>
   );
 }
 
-function PengumumanCreate() {
-  const pengumumanState = useProxy(stateDesaPengumuman)
-
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <SelectCategory onChange={(val) => {
-            pengumumanState.pengumuman.create.form.categoryPengumumanId = val.id
-          }} />
-          <TextInput onChange={(val) => {
-            pengumumanState.pengumuman.create.form.judul = val.target.value
-          }} label={<Text fz={"sm"} fw={"bold"}>Judul</Text>} placeholder='masukkan judul' />
-          <TextInput onChange={(val) => {
-            pengumumanState.pengumuman.create.form.deskripsi = val.target.value
-          }} label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>} placeholder='masukkan deskripsi' />
-          <BeritaEditor onSubmit={(val) => {
-            pengumumanState.pengumuman.create.form.content = val
-            pengumumanState.pengumuman.create.create()
-          }} />
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
 function PengumumanList() {
   const pengumumanState = useProxy(stateDesaPengumuman)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
   useShallowEffect(() => {
     pengumumanState.pengumuman.findMany.load()
   }, [])
 
-  if (!pengumumanState.pengumuman.findMany.data) return <Stack py={10}>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
+  const router = useRouter()
+
+  const handleHapus = () => {
+    if (selectedId) {
+      pengumumanState.pengumuman.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+  if (!pengumumanState.pengumuman.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Text fz={"xl"} fw={"bold"}>List Pengumuman</Text>
-          {pengumumanState.pengumuman.findMany.data?.map((item) => (
-            <Text key={item.id}>{item.judul}</Text>
-          ))}
+        <Stack>
+          <Grid>
+            <GridCol span={{ base: 12, md: 11 }}>
+              <Text fz={"xl"} fw={"bold"}>List Pengumuman</Text>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 1 }}>
+              <Button onClick={() => router.push("/admin/desa/pengumuman/create")} bg={colors['blue-button']}>
+                <IconCircleDashedPlus size={25} />
+              </Button>
+            </GridCol>
+          </Grid>
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh w={250}>Judul</TableTh>
+                  <TableTh w={250}>Kategori</TableTh>
+                  <TableTh w={200}>Detail</TableTh>
+
+                </TableTr>
+              </TableThead>
+              <TableTbody >
+                {pengumumanState.pengumuman.findMany.data?.map((item) => (
+                  <TableTr key={item.id}>
+                  <TableTd >
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>{item.judul}</Text>
+                    </Box>  
+                  </TableTd>
+                  <TableTd >{item.CategoryPengumuman?.name}</TableTd>
+                  <TableTd>
+                    <Button bg={"green"} onClick={() => router.push(`/admin/desa/pengumuman/detail`)}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
         </Stack>
       </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      />
     </Box>
   )
 }
 
-function SelectCategory({ onChange }: {
-  onChange: (value: Prisma.CategoryPengumumanGetPayload<{
-    select: {
-      name: true,
-      id: true
-    }
-  }>) => void
-}) {
-  const pengumumanState = useProxy(stateDesaPengumuman)
-  useShallowEffect(() => {
-    pengumumanState.category.findMany.load()
-  }, [])
-
-  if (!pengumumanState.category.findMany.data) return <Skeleton h={40} />
-  return <Group>
-    {/* {JSON.stringify(pengumumanState.category.findMany.data)} */}
-    <Select placeholder='pilih kategori' label={<Text fz={"sm"} fw={"bold"}>Pilih Kategori</Text>} data={pengumumanState.category.findMany.data.map((item) => ({
-      value: item.id,
-      label: item.name
-    }))} onChange={(v) => {
-      const data = pengumumanState.category.findMany.data?.find((item) => item.id === v)
-      if (!data) return
-      onChange(data)
-    }}
-    />
-  </Group>
-}
 export default Page;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/create/page.tsx

@@ -0,0 +1,42 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function CreateDemografiPekerjaan() {
+  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 Demografi Pekerjaan</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pekerjaan</Text>}
+          placeholder='Masukkan pekerjaan'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Laki - Laki</Text>}
+          placeholder='Masukkan jumlah pekerja laki - laki'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Perempuan</Text>}
+          placeholder='Masukkan jumlah pekerja perempuan'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateDemografiPekerjaan;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/detail/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailDemografiPekerjaan() {
+  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 Demografi Pekerjaan</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fw={"bold"}>Pekerjaan</Text>
+                <Text>Karyawan</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Jumlah Pekerja Laki - Laki</Text>
+                <Text>200</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Jumlah Pekerja Perempuan</Text>
+                <Text>100</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/demografi-pekerjaan/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 DetailDemografiPekerjaan;
+

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/edit/page.tsx

@@ -0,0 +1,42 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function EditDemografiPekerjaan() {
+  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 Demografi Pekerjaan</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pekerjaan</Text>}
+          placeholder='Masukkan pekerjaan'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Laki - Laki</Text>}
+          placeholder='Masukkan jumlah pekerja laki - laki'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Perempuan</Text>}
+          placeholder='Masukkan jumlah pekerja perempuan'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditDemografiPekerjaan;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx

@@ -1,47 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
+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 DemografiPekerjaan() {
   return (
     <Box>
-      <Stack gap={"xs"}>
-        <Box>
-          <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={"md"}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Demografi Pekerjaan</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Jumlah Pekerja Laki - Laki</Text>}
-                placeholder="Masukkan jumlah pekerja laki - laki"
-              />
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Jumlah Pekerja Perempuan</Text>}
-                placeholder="Masukkan jumlah pekerja perempuan"
-              />
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Nama Pekerjaan</Text>}
-                placeholder="Masukkan nama pekerjaan"
-              />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={"md"}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Grafik Demografi Pekerjaan</Title>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
+      <HeaderSearch
+        title='Demografi Pekerjaan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListDemografiPekerjaan/>
     </Box>
   );
 }
 
-export default Page;
+function ListDemografiPekerjaan() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Demografi Pekerjaan'
+          href='/admin/ekonomi/demografi-pekerjaan/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Pekerjaan</TableTh>
+              <TableTh>Jumlah Pekerja Laki - Laki</TableTh>
+              <TableTh>Jumlah Pekerja Perempuan</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Karyawan</TableTd>
+              <TableTd>200</TableTd>
+              <TableTd>100</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/demografi-pekerjaan/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default DemografiPekerjaan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/create/page.tsx

@@ -0,0 +1,38 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function CreateJumlahPendudukMiskin() {
+  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 Jumlah Penduduk Miskin</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tahun</Text>}
+          placeholder='Masukkan tahun'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Penduduk Miskin</Text>}
+          placeholder='Masukkan jumlah penduduk miskin'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateJumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/detail/page.tsx

@@ -0,0 +1,58 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailJumlahPendudukMiskin() {
+  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 Jumlah Penduduk Miskin</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fw={"bold"}>Tahun</Text>
+                <Text>2024</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Jumlah Penduduk Miskin</Text>
+                <Text>100</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/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 DetailJumlahPendudukMiskin;
+

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/edit/page.tsx

@@ -0,0 +1,38 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function EditJumlahPendudukMiskin() {
+  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 Jumlah Penduduk Miskin</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Tahun</Text>}
+          placeholder='Masukkan tahun'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Penduduk Miskin</Text>}
+          placeholder='Masukkan jumlah penduduk miskin'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditJumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/page.tsx

@@ -1,43 +1,56 @@
-import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
+'use client'
 import colors from '@/con/colors';
-import React from 'react';
+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 JumlahPendudukMiskin() {
   return (
     <Box>
-      <Stack gap={"xs"}>
-        <Box>
-          <Paper p={"md"} bg={colors['white-1']} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Jumlah Penduduk Miskin 2024-2025</Title>
-              <TextInput
-                label="Tahun"
-                placeholder="masukkan tahun"
-              />
-              <TextInput
-                label="Jumlah Penduduk Miskin"
-                placeholder="masukkan jumlah penduduk miskin"
-              />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-        <Box>
-          <Paper p={"md"} bg={colors['white-1']} >
-            <Stack gap={"xs"}>
-              <Title order={3}>Grafik Jumlah Penduduk Miskin 2024-2025</Title>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
+      <HeaderSearch
+        title='Jumlah Penduduk Miskin'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListJumlahPendudukMiskin/>
     </Box>
   );
 }
 
-export default Page;
+function ListJumlahPendudukMiskin() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Jumlah Penduduk Miskin'
+          href='/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Tahun</TableTh>
+              <TableTh>Jumlah Penduduk Miskin</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>2024</TableTd>
+              <TableTd>100</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default JumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/page.tsx

@@ -1,27 +1,27 @@
 import colors from "@/con/colors";
 import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from "@mantine/core";
-import PengangguranBerdasarkanUsia from "./ui/pengangguranBerdasarkanUsia/page";
-import PengangguranBerdasarkanPendidikan from "./ui/pengangguranBerdasarkanPendidikan/page";
+import PengangguranBerdasarkanUsia from "./pengangguran_berdasarkan_usia/page";
+import PengangguranBerdasarkanPendidikan from "./pengangguran_berdasarkan_pendidikan/page";
 
 export default function Page() {
   return (
     <Box>
       <Stack gap={"xs"}>
         <Title order={3}>Jumlah Penduduk Usia Kerja yang Menganggur</Title>
-        <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Pengangguran Bredasarkan Usia"}>
+        <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Pengangguran Berdasarkan Usia"}>
           <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-            <TabsTab value={"Pengangguran Bredasarkan Usia"}>
-              Pengangguran Bredasarkan Usia
+            <TabsTab value={"Pengangguran Berdasarkan Usia"}>
+              Pengangguran Berdasarkan Usia
             </TabsTab>
-            <TabsTab value={"Pengangguran Bredasarkan Pendidikan"}>
-              Pengangguran Bredasarkan Pendidikan
+            <TabsTab value={"Pengangguran Berdasarkan Pendidikan"}>
+              Pengangguran Berdasarkan Pendidikan
             </TabsTab>
           </TabsList>
 
-          <TabsPanel value={"Pengangguran Bredasarkan Usia"}>
+          <TabsPanel value={"Pengangguran Berdasarkan Usia"}>
             <PengangguranBerdasarkanUsia />
           </TabsPanel>
-          <TabsPanel value={"Pengangguran Bredasarkan Pendidikan"}>
+          <TabsPanel value={"Pengangguran Berdasarkan Pendidikan"}>
             <PengangguranBerdasarkanPendidikan/>
           </TabsPanel>
         </Tabs>

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function CreatePengangguranBerdasarkanPendidikan() {
+  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 Pengangguran Berdasarkan Pendidikan</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SD</Text>}
+          placeholder='Masukkan pendidikan sd'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMP</Text>}
+          placeholder='Masukkan pendidikan smp'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMA</Text>}
+          placeholder='Masukkan pendidikan sma'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S1</Text>}
+          placeholder='Masukkan pendidikan s1'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S2</Text>}
+          placeholder='Masukkan pendidikan s2'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S3</Text>}
+          placeholder='Masukkan pendidikan s3'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreatePengangguranBerdasarkanPendidikan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/detail/page.tsx

@@ -0,0 +1,74 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPengangguranBerdasarkanPendidikan() {
+  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 Pengangguran Berdasarkan Pendidikan</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+             <Box>
+             <Text fw={"bold"}>Pendidikan SD</Text>
+             <Text>50</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Pendidikan SMP</Text>
+             <Text>60</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Pendidikan SMA</Text>
+             <Text>80</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Pendidikan S1</Text>
+             <Text>40</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Pendidikan S2</Text>
+             <Text>20</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Pendidikan S3</Text>
+             <Text>10</Text>
+             </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/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 DetailPengangguranBerdasarkanPendidikan;
+

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/edit/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function EditPengangguranBerdasarkanPendidikan() {
+  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 Pengangguran Berdasarkan Pendidikan</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SD</Text>}
+          placeholder='Masukkan pendidikan sd'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMP</Text>}
+          placeholder='Masukkan pendidikan smp'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan SMA</Text>}
+          placeholder='Masukkan pendidikan sma'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S1</Text>}
+          placeholder='Masukkan pendidikan s1'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S2</Text>}
+          placeholder='Masukkan pendidikan s2'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pendidikan S3</Text>}
+          placeholder='Masukkan pendidikan s3'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditPengangguranBerdasarkanPendidikan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/page.tsx

@@ -0,0 +1,49 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import JudulListTab from '../../../_com/jusulListTab';
+
+function PengangguranBerdasarkanPendidikan() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+       <Stack gap={"xs"}>
+       <JudulListTab
+          title='Pengangguran Berdasarkan Pendidikan'
+          href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={20} />}
+        />
+        <Title order={4}>List Pengangguran Berdasarkan Pendidikan</Title>
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Pendidikan SD</TableTh>
+              <TableTh>Pendidikan SMP</TableTh>
+              <TableTh>Pendidikan SMA</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>80</TableTd>
+              <TableTd>40</TableTd>
+              <TableTd>20</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+       </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default PengangguranBerdasarkanPendidikan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create/page.tsx

@@ -0,0 +1,45 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function CreatePengangguranBerdasarkanUsia() {
+  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 Pengangguran Berdasarkan Usia</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 18 - 25</Text>}
+          placeholder='Masukkan usia'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 26 - 35</Text>}
+          placeholder='Masukkan usia'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 36 - 45</Text>}
+          placeholder='Masukkan usia'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 46 +</Text>}
+          placeholder='Masukkan usia'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreatePengangguranBerdasarkanUsia;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/detail/page.tsx

@@ -0,0 +1,70 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPengangguranBerdasarkanUsia() {
+  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 Pengangguran Berdasarkan Usia</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fw={"bold"}>Usia 18 - 25</Text>
+                <Text>80</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Usia 26 - 35</Text>
+                <Text>40</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Usia 36 - 45</Text>
+                <Text>20</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Usia 46 +</Text>
+                <Text>10</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Total</Text>
+                <Text>150</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/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 DetailPengangguranBerdasarkanUsia;
+

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/edit/page.tsx

@@ -0,0 +1,47 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function EditPengangguranBerdasarkanUsia() {
+  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 Pengangguran Berdasarkan Usia</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 18 - 25</Text>}
+          placeholder='Masukkan usia'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 26 - 35</Text>}
+          placeholder='Masukkan usia'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 36 - 45</Text>}
+          placeholder='Masukkan usia'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia 46 +</Text>}
+          placeholder='Masukkan usia'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditPengangguranBerdasarkanUsia;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/page.tsx

@@ -0,0 +1,49 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import JudulListTab from '../../../_com/jusulListTab';
+
+function PengangguranBerdasarkanUsia() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+       <Stack gap={"xs"}>
+       <JudulListTab
+          title='Pengangguran Berdasarkan Usia'
+          href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={20} />}
+        />
+        <Title order={4}>List Pengangguran Berdasarkan Usia</Title>
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Usia 18 - 25</TableTh>
+              <TableTh>Usia 26 - 35</TableTh>
+              <TableTh>Usia 36 - 45</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>80</TableTd>
+              <TableTd>40</TableTd>
+              <TableTd>20</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+       </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default PengangguranBerdasarkanUsia;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/ui/pengangguranBerdasarkanPendidikan/page.tsx

@@ -1,47 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
-
-function PengangguranBerdasarkanPendidikan() {
-  return (
-    <Box>
-      <Box py={15}>
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'} radius={10}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Pengangguran Berdasarkan Pendidikan</Title>
-          <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Pendidikan SD</Text>}
-            placeholder="masukkan jumlah penduduk Pendidikan SD yang menganggur"
-          />
-          <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Pendidikan SMP</Text>}
-            placeholder="masukkan jumlah penduduk Pendidikan SMP yang menganggur"
-          />
-          <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Pendidikan SMA / SMK</Text>}
-            placeholder="masukkan jumlah penduduk Pendidikan SMA / SMK yang menganggur"
-          />
-          <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Pendidikan D1-D3 / S1</Text>}
-            placeholder="masukkan jumlah penduduk Pendidikan D1-D3 yang menganggur"
-          />
-          <Group>
-            <Button mt={10} bg={colors['blue-button']}>
-              Submit
-            </Button>
-          </Group>
-        </Stack>
-      </Paper>
-      </Box>
-      <Box>
-        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-          <Stack>
-            <Title pb={10} order={3}>Grafik Pengangguran Berdasarkan Pendidikan</Title>
-          </Stack>
-        </Paper>
-      </Box>
-    </Box>
-  );
-}
-
-export default PengangguranBerdasarkanPendidikan;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/ui/pengangguranBerdasarkanUsia/page.tsx

@@ -1,47 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
-
-function PengangguranBerdasarkanUsia() {
-  return (
-    <Box>
-      <Box py={15}>
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'} radius={10}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Pengangguran Berdasarkan Usia</Title>
-          <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Usia 18 - 25 tahun</Text>}
-            placeholder="masukkan jumlah penduduk usia 18 - 25 tahun yang menganggur"
-          />
-          <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Usia 26 - 35 tahun</Text>}
-            placeholder="masukkan jumlah penduduk usia 26 - 35 tahun yang menganggur"
-          />
-          <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Usia 36 - 45 tahun</Text>}
-            placeholder="masukkan jumlah penduduk usia 36 - 45 tahun yang menganggur"
-          />
-          <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Usia 46+</Text>}
-            placeholder="masukkan jumlah penduduk usia 46+ yang menganggur"
-          />
-          <Group>
-            <Button mt={10} bg={colors['blue-button']}>
-              Submit
-            </Button>
-          </Group>
-        </Stack>
-      </Paper>
-      </Box>
-      <Box>
-        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-          <Stack>
-            <Title pb={10} order={3}>Grafik Pengangguran Berdasarkan Usia</Title>
-          </Stack>
-        </Paper>
-      </Box>
-    </Box>
-  );
-}
-
-export default PengangguranBerdasarkanUsia;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/create/page.tsx

@@ -0,0 +1,45 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function CreateJumlahPengangguran() {
+  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 Jumlah Pengangguran</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pengangguran Terdidik</Text>}
+          placeholder='Masukkan pengangguran terdidik'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia Produktif</Text>}
+          placeholder='Masukkan usia produktif'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Sedang Mencari Kerja</Text>}
+          placeholder='Masukkan sedang mencari kerja'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pengangguran Tidak Terdidik</Text>}
+          placeholder='Masukkan pengangguran tidak terdidik'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateJumlahPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/detail/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailJumlahPengangguran() {
+  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 Jumlah Pengangguran</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+             <Box>
+             <Text fw={"bold"}>Pengangguran Terdidik</Text>
+             <Text>100</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Usia Produktif</Text>
+             <Text>200</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Sedang Mencari Kerja</Text>
+             <Text>300</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Pengangguran Tidak Terdidik</Text>
+             <Text>30</Text>
+             </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/jumlah-pengangguran-2024-2025/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 DetailJumlahPengangguran;
+

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/edit/page.tsx

@@ -0,0 +1,45 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function EditJumlahPengangguran() {
+  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 Jumlah Pengangguran</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pengangguran Terdidik</Text>}
+          placeholder='Masukkan pengangguran terdidik'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Usia Produktif</Text>}
+          placeholder='Masukkan usia produktif'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Sedang Mencari Kerja</Text>}
+          placeholder='Masukkan sedang mencari kerja'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pengangguran Tidak Terdidik</Text>}
+          placeholder='Masukkan pengangguran tidak terdidik'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditJumlahPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/page.tsx

@@ -1,37 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import DataPengangguran from './ui/dataPengangguran/page';
-import GrafikDataPengangguran from './ui/grafikDataPengangguran/page';
-import DetailDataPengangguran from './ui/detailDataPengangguran/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 JumlahPengangguran() {
   return (
-    <Stack>
-      <Title order={3}>Jumlah Pengangguran 2024-2025</Title>
-      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Data Pengangguran Desa"}>
-        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-          <TabsTab value="Data Pengangguran Desa">
-            Data Pengangguran Desa
-          </TabsTab>
-          <TabsTab value="Grafik Data Pengangguran Desa">
-            Grafik Data Pengangguran Desa
-          </TabsTab>
-          <TabsTab value="Detail Data Pengangguran Desa">
-            Detail Data Pengangguran Desa
-          </TabsTab>
-        </TabsList>
-        <TabsPanel value="Data Pengangguran Desa">
-          <DataPengangguran/>
-        </TabsPanel>
-        <TabsPanel value="Grafik Data Pengangguran Desa">
-          <GrafikDataPengangguran/>
-        </TabsPanel>
-        <TabsPanel value="Detail Data Pengangguran Desa">
-          <DetailDataPengangguran/>
-        </TabsPanel>
-      </Tabs>
-    </Stack>
-  )
+    <Box>
+      <HeaderSearch
+        title='Jumlah Pengangguran 2024-2025'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListJumlahPengangguran/>
+    </Box>
+  );
 }
 
-export default Page;
+function ListJumlahPengangguran() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Jumlah Pengangguran 2024-2025'
+          href='/admin/ekonomi/jumlah-pengangguran-2024-2025/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Pengangguran Terdidik</TableTh>
+              <TableTh>Usia Produktif</TableTh>
+              <TableTh>Sedang Mencari Kerja</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>100</TableTd>
+              <TableTd>200</TableTd>
+              <TableTd>300</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/jumlah-pengangguran-2024-2025/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default JumlahPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/ui/dataPengangguran/page.tsx

@@ -1,51 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-
-function DataPengangguran() {
-  return (
-    <Box>
-      <Box py={15}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={3}>Data Pengangguran</Title>
-                <TextInput
-                  label={<Text fz={"sm"} fw={"bold"}>Total Pengangguran</Text>}
-                  placeholder="masukkan total pengangguran"
-                />
-                <TextInput
-                  label={<Text fz={"sm"} fw={"bold"}>Pengangguran Terdidik</Text>}
-                  placeholder="masukkan pengangguran terdidik"
-                />
-                <TextInput
-                  label={<Text fz={"sm"} fw={"bold"}>Usia Produktif</Text>}
-                  placeholder="masukkan usia produktif"
-                />
-                <TextInput
-                  label={<Text fz={"sm"} fw={"bold"}>Sedang Mencari Kerja</Text>}
-                  placeholder="masukkan jumlah sedang mencari kerja"
-                />
-                <Group>
-                  <Button bg={colors['blue-button']}>
-                    Submit
-                  </Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={3}>List Data Pengangguran</Title>
-                
-              </Stack>
-            </Paper>
-          </Box>
-        </SimpleGrid>
-      </Box>
-    </Box>
-  );
-}
-
-export default DataPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/ui/detailDataPengangguran/page.tsx

@@ -1,18 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Title } from '@mantine/core';
-
-function DetailDataPengangguran() {
-  return (
-    <Box>
-      <Box py={15}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <Stack gap={"xs"}>
-            <Title order={3}>Detail Data Pengangguran</Title>
-          </Stack>
-        </Paper>
-      </Box>
-    </Box>
-  );
-}
-
-export default DetailDataPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/ui/grafikDataPengangguran/page.tsx

@@ -1,49 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-
-function GrafikDataPengangguran() {
-  return (
-    <Box>
-      <Box py={15}>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={3}>Data Pengangguran</Title>
-                <TextInput
-                  label={<Text fz={"sm"} fw={"bold"}>Total Pengangguran</Text>}
-                  placeholder="masukkan total pengangguran"
-                />
-                <TextInput
-                  label={<Text fz={"sm"} fw={"bold"}>Pengangguran Terdidik</Text>}
-                  placeholder="masukkan pengangguran terdidik"
-                />
-                <TextInput
-                  label={<Text fz={"sm"} fw={"bold"}>Usia Produktif</Text>}
-                  placeholder="masukkan usia produktif"
-                />
-                <TextInput
-                  label={<Text fz={"sm"} fw={"bold"}>Sedang Mencari Kerja</Text>}
-                  placeholder="masukkan jumlah sedang mencari kerja"
-                />
-                <Group>
-                  <Button bg={colors['blue-button']}>
-                    Submit
-                  </Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-          <Box py={10}>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={3}>List Data Pengangguran</Title>
-                
-              </Stack>
-            </Paper>
-          </Box>
-      </Box>
-    </Box>
-  );
-}
-
-export default GrafikDataPengangguran;

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/create/createLowongan.tsx

@@ -1,29 +0,0 @@
-import { Box, Stack, Text, TextInput, Title } from '@mantine/core';
-
-function CreateLowongan() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <Title order={4}>Lowongan Kerja Lokal</Title>
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Bekerja Sebagai</Text>}
-          placeholder="masukkan bekerja sebagai"
-        />
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Alamat Usaha</Text>}
-          placeholder="masukkan alamat usaha"
-        />
-         <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Waktu Kerja</Text>}
-          placeholder="masukkan waktu kerja"
-        />
-        <TextInput
-          label={<Text fz={"sm"} fw={"bold"}>Gaji selama 1 bulan</Text>}
-          placeholder="masukkan gaji selama 1 bulan"
-        />
-      </Stack>
-    </Box>
-  );
-}
-
-export default CreateLowongan;

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/create/page.tsx

@@ -0,0 +1,57 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+
+function CreateLowonganKerja() {
+  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 Lowongan Kerja Lokal</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pekerjaan</Text>}
+          placeholder='Masukkan pekerjaan'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Usaha</Text>}
+          placeholder='Masukkan nama usaha'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Alamat Usaha</Text>}
+          placeholder='Masukkan alamat usaha'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon</Text>}
+          placeholder='Masukkan nomor telepon'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Gaji selama 1 bulan</Text>}
+          placeholder='Masukkan gaji'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Lowongan Kerja</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateLowonganKerja;

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/detail/page.tsx

@@ -0,0 +1,78 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailLowonganKerjaLokal() {
+  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 Lowongan Kerja Lokal</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+             <Box>
+             <Text fw={"bold"}>Bekerja Sebagai</Text>
+             <Text>Karyawan</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Nama Usaha</Text>
+             <Text>BIBD</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Alamat Usaha</Text>
+             <Text>Jalan In Aja</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Nomor Telepon</Text>
+             <Text>0896232831883</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Waktu Kerja</Text>
+             <Text>Full Time</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Gaji selama 1 bulan</Text>
+             <Text>Rp. 3.000.000</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Deskripsi Lowongan Kerja</Text>
+             <Text> Pekerjaan dengan gaji Rp. 3.000.000</Text>
+             </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/lowongan-kerja-lokal/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 DetailLowonganKerjaLokal;
+

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/edit/page.tsx

@@ -0,0 +1,57 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+
+function EditLowonganKerja() {
+  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 Lowongan Kerja Lokal</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Pekerjaan</Text>}
+          placeholder='Masukkan pekerjaan'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Usaha</Text>}
+          placeholder='Masukkan nama usaha'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Alamat Usaha</Text>}
+          placeholder='Masukkan alamat usaha'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon</Text>}
+          placeholder='Masukkan nomor telepon'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Gaji selama 1 bulan</Text>}
+          placeholder='Masukkan gaji'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Lowongan Kerja</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditLowonganKerja;

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/listData/page.tsx

@@ -1,25 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Title, Text } from '@mantine/core';
-import React from 'react';
-
-function ListDataLowongan() {
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Data Lowongan Kerja Lokal</Title>
-        <Box>
-          <Text fw={"bold"}>Bekerja Sebagai</Text>
-          <Text> </Text>
-          <Text fw={"bold"}>Alamat Usaha</Text>
-          <Text> </Text>
-          <Text fw={"bold"}>Waktu Kerja</Text>
-          <Text> </Text>
-          <Text fw={"bold"}>Gaji selama 1 bulan</Text>
-          <Text> </Text>
-        </Box>
-      </Stack>
-    </Paper>
-  );
-}
-
-export default ListDataLowongan;

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/page.tsx

@@ -1,32 +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 CreateLowongan from './create/createLowongan';
-import ListDataLowongan 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 LowonganKerjaLokal() {
   return (
-    <Stack gap={"xs"}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10}>
-            <Title order={3}>Lowongan Kerja Lokal</Title>
-            <CreateLowongan/>
-            <Group>
-              <Button mt={10} bg={colors['blue-button']}>
-                Submit
-              </Button>
-            </Group>
-          </Paper>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10}>
-            <ListDataLowongan/>
-          </Paper>
-        </Box>
-      </SimpleGrid>
-    </Stack>
+    <Box>
+      <HeaderSearch
+        title='Lowongan Kerja Lokal'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListLowonganKerjaLokal/>
+    </Box>
   );
 }
 
-export default Page;
+function ListLowonganKerjaLokal() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Lowongan Kerja Lokal'
+          href='/admin/ekonomi/lowongan-kerja-lokal/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Bekerja Sebagai</TableTh>
+              <TableTh>Nama Usaha</TableTh>
+              <TableTh>Alamat Usaha</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Karyawan</TableTd>
+              <TableTd>BIBD</TableTd>
+              <TableTd>Jalan In Aja</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/lowongan-kerja-lokal/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default LowonganKerjaLokal;

src/app/admin/(dashboard)/ekonomi/pasar-desa/create/createPasarDesa.tsx

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

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;

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;

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;

src/app/admin/(dashboard)/ekonomi/pasar-desa/listData/page.tsx

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

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;

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/create/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function CreateProgramKemiskinan() {
+  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 Program Kemiskinan</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Program</Text>}
+          placeholder='Masukkan judul program'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
+          placeholder='Masukkan deskripsi'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Masyarakat Miskin</Text>}
+          placeholder='Masukkan jumlah masyarakat miskin'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi</Text>}
+          placeholder='Masukkan deskripsi'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateProgramKemiskinan;

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/detail/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailProgramKemiskinan() {
+  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 Program Kemiskinan</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+             <Box>
+             <Text fw={"bold"}>Judul Program</Text>
+             <Text>Program A</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Deskripsi Singkat</Text>
+             <Text>Deskripsi Program A</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Jumlah Masyarakat Miskin</Text>
+             <Text>100</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Deskripsi</Text>
+             <Text>Deskripsi Program A</Text>
+             </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/program-kemiskinan/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 DetailProgramKemiskinan;
+

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/edit/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function EditProgramKemiskinan() {
+  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 Program Kemiskinan</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul Program</Text>}
+          placeholder='Masukkan judul program'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
+          placeholder='Masukkan deskripsi'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah Masyarakat Miskin</Text>}
+          placeholder='Masukkan jumlah masyarakat miskin'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi</Text>}
+          placeholder='Masukkan deskripsi'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditProgramKemiskinan;

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/page.tsx

@@ -1,31 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import ProgramKemiskinan from './ui/program/page';
-import StatistikKemiskinan from './ui/statistik/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 ProgramKemiskinan() {
   return (
-    <Stack>
-      <Title order={3}>Program Kemiskinan</Title>
-      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Program Kemiskinan"}>
-        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-          <TabsTab value="Program Kemiskinan">
-            Program Kemiskinan
-          </TabsTab>
-          <TabsTab value="Statistik Kemiskinan">
-            Statistik Kemiskinan
-          </TabsTab>
-        </TabsList>
-
-        <TabsPanel value="Program Kemiskinan">
-          <ProgramKemiskinan />
-        </TabsPanel>
-        <TabsPanel value="Statistik Kemiskinan">
-          <StatistikKemiskinan />
-        </TabsPanel>
-      </Tabs>
-    </Stack>
+    <Box>
+      <HeaderSearch
+        title='Program Kemiskinan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListProgramKemiskinan/>
+    </Box>
   );
 }
 
-export default Page;
+function ListProgramKemiskinan() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Program Kemiskinan'
+          href='/admin/ekonomi/program-kemiskinan/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Judul Program</TableTh>
+              <TableTh>Deskripsi Singkat</TableTh>
+              <TableTh>Jumlah Masyarakat Miskin</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Program A</TableTd>
+              <TableTd>Deskripsi Program A</TableTd>
+              <TableTd>100</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/program-kemiskinan/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default ProgramKemiskinan;

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/ui/program/page.tsx

@@ -1,43 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
-
-function ProgramKemiskinan() {
-  return (
-    <Box py={15}>
-      <SimpleGrid cols={{base: 1, md: 2}}>
-        <Box>
-        <Paper p={"md"} bg={colors['white-1']}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Program Kemiskinan</Title>
-          <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Nama Program</Text>}
-            placeholder="Masukkan nama program"
-          />
-          <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Deskripsi Program</Text>}
-            placeholder="Masukkan deskripsi program"
-          />
-          <Group>
-            <Button
-              bg={colors['blue-button']}
-            >
-              Submit
-            </Button>
-          </Group>
-        </Stack>
-      </Paper>
-        </Box>
-        <Box>
-          <Paper p={"md"} bg={colors['white-1']}>
-            <Stack gap={"xs"}>
-              <Title order={3}>List Data Program Kemiskinan</Title>
-            </Stack>
-          </Paper>
-        </Box>
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-export default ProgramKemiskinan;

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/ui/statistik/page.tsx

@@ -1,43 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
-
-function StatistikKemiskinan() {
-  return (
-    <Box py={15}>
-      <Stack gap={"xs"}>
-        <Box>
-          <Paper w={{base: '100%', md: '50%'}} p={"md"} bg={colors['white-1']}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Statistik Kemiskinan</Title>
-              <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Tahun</Text>}
-              placeholder="Masukkan tahun"
-              />
-              <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Jumlah Penduduk Miskin</Text>}
-              placeholder="Masukkan jumlah penduduk miskin"
-              />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-        <Box>
-          <Paper p={"md"} bg={colors['white-1']}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Statistik Kemiskinan</Title>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
-    </Box>
-  );
-}
-
-export default StatistikKemiskinan;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/create/page.tsx

@@ -0,0 +1,45 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+
+function CreateSektorUnggulanDesa() {
+  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 Sektor Unggulan Desa</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Sektor Unggulan</Text>}
+            placeholder='Masukkan nama sektor unggulan'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Sektor Unggulan</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Jumlah Sektor Unggulan</Text>}
+            placeholder='Masukkan jumlah sektor unggulan'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateSektorUnggulanDesa;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/detail/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailSektorUnggulanDesa() {
+  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 Sektor Unggulan Desa</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+             <Box>
+             <Text fw={"bold"}>Nama Sektor Unggulan</Text>
+             <Text>Petani</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Deskripsi Sektor Unggulan</Text>
+             <Text>BIBD</Text>
+             </Box>
+             <Box>
+             <Text fw={"bold"}>Jumlah Sektor Unggulan</Text>
+             <Text>200</Text>
+             </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/ekonomi/sektor-unggulan-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 DetailSektorUnggulanDesa;
+

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/edit/page.tsx

@@ -0,0 +1,45 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+
+function EditSektorUnggulanDesa() {
+  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 Sektor Unggulan Desa</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Sektor Unggulan</Text>}
+            placeholder='Masukkan nama sektor unggulan'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Sektor Unggulan</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Jumlah Sektor Unggulan</Text>}
+            placeholder='Masukkan jumlah sektor unggulan'
+          />
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditSektorUnggulanDesa;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/page.tsx

@@ -1,32 +1,56 @@
+'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import React from 'react';
-import DataSektorUnggulan from './ui/data_sektor_unggulan/page';
-import GrafikDataSektor from './ui/grafik_data_sektor/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 SektorUnggulanDesa() {
   return (
-    <Stack>
-      <Title order={3}>Sektor Unggulan Desa</Title>
-      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Data Sektor Unggulan Desa"}>
-        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-          <TabsTab value="Data Sektor Unggulan Desa">
-            Data Sektor Unggulan Desa
-          </TabsTab>
-          <TabsTab value="Grafik Data Sektor Unggulan Desa">
-            Grafik Data Sektor Unggulan Desa
-          </TabsTab>
-        </TabsList>
-
-        <TabsPanel value="Data Sektor Unggulan Desa">
-          <DataSektorUnggulan />
-        </TabsPanel>
-        <TabsPanel value="Grafik Data Sektor Unggulan Desa">
-          <GrafikDataSektor />
-        </TabsPanel>
-      </Tabs>
-    </Stack>
+    <Box>
+      <HeaderSearch
+        title='Sektor Unggulan Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListSektorUnggulanDesa/>
+    </Box>
   );
 }
 
-export default Page;
+function ListSektorUnggulanDesa() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Sektor Unggulan Desa'
+          href='/admin/ekonomi/sektor-unggulan-desa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Sektor Unggulan</TableTh>
+              <TableTh>Deskripsi Sektor Unggulan</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Sektor 1</TableTd>
+              <TableTd>Deskripsi Sektor 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/ekonomi/sektor-unggulan-desa/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default SektorUnggulanDesa;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/ui/data_sektor_unggulan/page.tsx

@@ -1,45 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
-
-function DataSektorUnggulan() {
-  return (
-    <Box py={15}>
-      <Stack gap={"xs"}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper p={"md"} bg={colors['white-1']}>
-              <Stack gap={"xs"}>
-                <Title order={3}>Data Sektor Unggulan</Title>
-                <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Nama Sektor Unggulan</Text>}
-                placeholder="Masukkan nama sektor unggulan"
-                />
-                <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Deskripsi Sektor Unggulan</Text>}
-                placeholder="Masukkan deskripsi sektor unggulan"
-                />
-                <Group>
-                  <Button
-                    bg={colors['blue-button']}
-                  >
-                    Submit
-                  </Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-          <Box>
-            <Paper p={"md"} bg={colors['white-1']}>
-              <Stack gap={"xs"}>
-                <Title order={3}>Data Sektor Unggulan</Title>
-              </Stack>
-            </Paper>
-          </Box>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default DataSektorUnggulan;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/ui/grafik_data_sektor/page.tsx

@@ -1,44 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
-
-function GrafikDataSektor() {
-  return (
-    <Box py={15}>
-      <Stack gap={"xs"}>
-        <Box>
-        <Paper w={{base: '100%', md: '50%'}} p={"md"} bg={colors['white-1']}>
-          <Stack gap={"xs"}>
-            <Title order={3}>Grafik Data Sektor Unggulan</Title>
-            <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Nama Sektor Unggulan</Text>}
-            placeholder="Masukkan nama sektor unggulan"
-            />
-            <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Jumlah Sektor Unggulan</Text>}
-            placeholder="Masukkan jumlah sektor unggulan"
-            />
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-        </Box>
-        <Box>
-        <Paper p={"md"} bg={colors['white-1']}>
-          <Stack gap={"xs"}>
-            <Title order={3}>Grafik Sektor Unggulan</Title>
-            
-          </Stack>
-        </Paper>
-        </Box>
-      </Stack>
-    </Box>
-  );
-}
-
-export default GrafikDataSektor;

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

@@ -0,0 +1,49 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+
+function CreateDesaDigital() {
+  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 Desa Digital Smart Village</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Inovasi</Text>}
+          placeholder='Masukkan nama inovasi'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Inovasi</Text>}
+          placeholder='Masukkan deskripsi singkat inovasi'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Image</Text>}
+          placeholder='Masukkan image'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Inovasi</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateDesaDigital;

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

@@ -0,0 +1,66 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconImageInPicture, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailDesaDigital() {
+  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 Desa Digital Smart Village</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fw={"bold"}>Nama Inovasi</Text>
+                <Text>Pelayanan Admin Digital</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Deskripsi Singkat Inovasi</Text>
+                <Text>Deskripsi Singkat Inovasi</Text>
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Image</Text>
+                <IconImageInPicture size={20} />
+              </Box>
+              <Box>
+                <Text fw={"bold"}>Deskripsi Inovasi</Text>
+                <Text>Deskripsi Inovasi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/inovasi/desa-digital-smart-village/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 DetailDesaDigital;
+

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

@@ -0,0 +1,49 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+
+function EditDesaDigital() {
+  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 Desa Digital Smart Village</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Inovasi</Text>}
+          placeholder='Masukkan nama inovasi'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Inovasi</Text>}
+          placeholder='Masukkan deskripsi singkat inovasi'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Image</Text>}
+          placeholder='Masukkan image'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Inovasi</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditDesaDigital;

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

@@ -1,50 +1,60 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
+import { Box, Button, Image, 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 DesaDigitalSmartVillage() {
   return (
     <Box>
-      <Stack gap={"xs"}>
-        <Box>
-          <Paper w={{ base: '100%', md: '50%' }} p={"md"} bg={colors['white-1']}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Create Data Desa Digital Smart Village</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Nama Desa Digital Smart Village</Text>}
-                placeholder="Masukkan nama desa digital smart village"
-              />
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Deskripsi Desa Digital Smart Village</Text>}
-                placeholder="Masukkan deskripsi desa digital smart village"
-              />
-              <Box>
-                <Text fz={"sm"} fw={"bold"}>
-                  Upload Gambar Desa Digital Smart Village
-                </Text>
-                <IconImageInPicture size={24} />
-              </Box>
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-        <Box>
-          <Paper p={"md"} bg={colors['white-1']}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Create Data Desa Digital Smart Village</Title>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
+      <HeaderSearch
+        title='Desa Digital Smart Village'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListDesaDigitalSmartVillage/>
     </Box>
   );
 }
 
-export default Page;
+function ListDesaDigitalSmartVillage() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Desa Digital Smart Village'
+          href='/admin/inovasi/desa-digital-smart-village/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Inovasi</TableTh>
+              <TableTh>Deskripsi Singkat Inovasi</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Layanan Admin Digital</TableTd>
+              <TableTd>Deskripsi Singkat Inovasi</TableTd>
+              <TableTd>
+                <Image src={"/"} alt=''/>
+              </TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/inovasi/desa-digital-smart-village/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default DesaDigitalSmartVillage;

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;

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;

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;

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;

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/ui/list_keamanan_lingkungan/page.tsx

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

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/ui/tambah_keamanan_lingkungan/page.tsx

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

src/app/admin/(dashboard)/keamanan/kontak-darurat/create/createKontak.tsx

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

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;

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;

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;

src/app/admin/(dashboard)/keamanan/kontak-darurat/listData/page.tsx

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

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;

src/app/admin/(dashboard)/keamanan/laporan-publik/create/createLaporan.tsx

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

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;

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;

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;

src/app/admin/(dashboard)/keamanan/laporan-publik/listData/page.tsx

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

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>
-  )
-}
+    <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;

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/createPencegahan.tsx

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

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;

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;

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;

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/listData/page.tsx

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

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;

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;

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;