Tambahan UI Admin : Dibagian Desa Sisa Profile, Potensi, Penghargaan

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/create/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 '../../../keamanan/_com/keamananEditor';
+
+function CreatePengumuman() {
+  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 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 CreatePengumuman;

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

@@ -0,0 +1,116 @@
+'use client'
+
+import { Box, Button, Flex, Image, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+import colors from '@/con/colors';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+// import stateDashboardBerita from '../../../_state/desa/berita';
+
+function DetailPengumuman() {
+  // const pengumumanState = useProxy(stateDashboardpengumuman)
+  // 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}>
+  //       {Array.from({ length: 10 }).map((_, k) => (
+  //         <Skeleton key={k} h={40} />
+  //       ))}
+  //     </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>
+            <Paper bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
+                  <Text fz={"lg"}>Pendidikan</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>Pengumuman Pendidikan</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi Singkat</Text>
+                  <Text fz={"lg"}>Pengumuman Pendidikan</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"}>Pengumuman Pendidikan</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
+                  <Text fz={"lg"}>2025-06-04</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Waktu</Text>
+                  <Text fz={"lg"}>08:00 - 17:00</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={"/"} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Konten</Text>
+                  <Text fz={"lg"}>Pengumuman Pendidikan</Text>
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => router.push("/admin/desa/pengumuman")}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => router.push("/admin/desa/pengumuman/edit")}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+        </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/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 '../../../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/page.tsx

@@ -1,102 +1,109 @@
 '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, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
+
 
 function Page() {
   return (
     <Box>
-      <Title order={3}>Pengumuman</Title>
-      <SimpleGrid cols={{
-        base: 1, md: 2
-      }}>
-        <PengumumanCreate />
+      <HeaderSearch
+        title='Pengumuman'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
       <PengumumanList />
-      </SimpleGrid>
     </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)
-  useShallowEffect(() => {
-    pengumumanState.pengumuman.findMany.load()
-  }, [])
+  // const pengumumanState = useProxy(stateDashboardPengumuman)
+  // const [modalHapus, setModalHapus] = useState(false)
+  // const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  // useShallowEffect(() => {
+  //   pengumumanState.pengumuman.findMany.load()
+  // }, [])
+
+  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>
+  //   )
+  // }
 
-  if (!pengumumanState.pengumuman.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 gap={"xs"}>
+        <Stack>
+          <Grid>
+            <GridCol span={{ base: 12, md: 11 }}>
               <Text fz={"xl"} fw={"bold"}>List Pengumuman</Text>
-          {pengumumanState.pengumuman.findMany.data?.map((item) => (
-            <Text key={item.id}>{item.judul}</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={250}>Image</TableTh>
+                  <TableTh w={200}>Detail</TableTh>
+
+                </TableTr>
+              </TableThead>
+              <TableTbody >
+
+                <TableTr>
+                  <TableTd >
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd >Kesehatan</TableTd>
+                  <TableTd>
+                    <Image w={100} src={"/"} alt="gambar" />
+                  </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;