Lanjutan UI

src/app/admin/(dashboard)/kesehatan/posyandu/detail/page.tsx

@@ -46,7 +46,7 @@ function DetailPosyandu() {
                   <Button color="red">
                     <IconX size={20} />
                   </Button>
-                  <Button color="green">
+                  <Button onClick={() => router.push('/admin/kesehatan/posyandu/edit')} color="green">
                     <IconEdit size={20} />
                   </Button>
                 </Flex>

src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx

@@ -1,8 +1,10 @@
+'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';
 
 function Posyandu() {
   return (
@@ -18,6 +20,7 @@ function Posyandu() {
 }
 
 function ListPosyandu() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -40,7 +43,7 @@ function ListPosyandu() {
               <TableTd>0896232831883</TableTd>
               <TableTd>Posyandu 1</TableTd>
               <TableTd>
-                <Button>
+                <Button onClick={() => router.push('/admin/kesehatan/posyandu/detail')}>
                   <IconDeviceImac size={20} />
                 </Button>
               </TableTd>

src/app/admin/(dashboard)/kesehatan/program-kesehatan/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 DetailProgramKesehatan() {
+  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 Potensi</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Kategori</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/kesehatan/program-kesehatan/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 DetailProgramKesehatan;

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

@@ -0,0 +1,55 @@
+import colors from '@/con/colors';
+import { Box, Stack, SimpleGrid, Paper, Title, TextInput, Text } from '@mantine/core';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+
+
+function EditProgramKesehatan() {
+  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}>Edit Program Kesehatan</Title>
+                <TextInput
+                  label={<Text fw={"bold"} fz={"sm"}>Nama Program Kesehatan</Text>}
+                  placeholder='Masukkan nama Program Kesehatan'
+                />
+                <TextInput
+                  label={<Text fw={"bold"} fz={"sm"}>No Telp Program Kesehatan</Text>}
+                  placeholder='Masukkan no telp Program Kesehatan'
+                />
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+                  <KesehatanEditor
+                    showSubmit={false}
+                  />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
+                  <KesehatanEditor
+                    showSubmit={false}
+                  />
+                </Box>
+              </Stack>
+            </Paper>
+          </Box>
+          <Box>
+            <Paper bg={colors['white-1']} p={"md"}>
+              <Stack gap={"xs"}>
+                <Title order={4}>Preview Data Program Kesehatan</Title>
+                <Text fw={"bold"} fz={"sm"}>Nama Program Kesehatan</Text>
+                <Text fw={"bold"} fz={"sm"}>No Telp Program Kesehatan</Text>
+                <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+                <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
+              </Stack>
+            </Paper>
+          </Box>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditProgramKesehatan;

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

@@ -1,8 +1,10 @@
+'use client'
 import colors from '@/con/colors';
 import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import JudulList from '../../_com/judulList';
 import HeaderSearch from '../../_com/header';
+import { useRouter } from 'next/navigation';
 
 function ProgramKesehatan() {
   return (
@@ -18,6 +20,7 @@ function ProgramKesehatan() {
 }
 
 function ListProgramKesehatan() {
+  const router = useRouter()
   return (
     <Box py={10}>
     <Paper bg={colors['white-1']} p={'md'}>
@@ -47,7 +50,7 @@ function ListProgramKesehatan() {
                   <Image w={100} src={"/"} alt="image" />
                 </TableTd>
                 <TableTd>
-                  <Button>
+                  <Button onClick={() => router.push('/admin/kesehatan/program-kesehatan/detail')}>
                     <IconDeviceImacCog size={25} />
                   </Button>
                 </TableTd>

src/app/admin/(dashboard)/kesehatan/puskesmas/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 DetailPuskesmas() {
+  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 Potensi</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Kategori</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/kesehatan/puskesmas/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 DetailPuskesmas;

src/app/admin/(dashboard)/kesehatan/puskesmas/edit/page.tsx

@@ -1,11 +1,19 @@
 import colors from '@/con/colors';
-import { Box, Stack, SimpleGrid, Paper, Title, TextInput, Text } from '@mantine/core';
+import { Box, Stack, SimpleGrid, Paper, Title, TextInput, Text, Button } from '@mantine/core';
 import { KesehatanEditor } from '../../_com/kesehatanEditor';
+import { useRouter } from 'next/navigation';
+import { IconArrowBack } from '@tabler/icons-react';
 
 
-function UpdatePuskesmas() {
+function EditPuskesmas() {
-  return (
+  const router = useRouter();
-    <Box>
+    return (
+      <Box>
+        <Box mb={10}>
+          <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+            <IconArrowBack color={colors['blue-button']} size={25}/>
+          </Button>
+        </Box>
       <Stack gap={"xs"}>
         <SimpleGrid cols={{ base: 1, md: 2 }}>
           <Box>
@@ -52,4 +60,4 @@ function UpdatePuskesmas() {
   );
 }
 
-export default UpdatePuskesmas;
+export default EditPuskesmas;