Tambahan UI di menu ligkungan

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx

@@ -4,6 +4,7 @@ import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core
 import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React from 'react';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
 
 function CreateDataLingkunganDesa() {
   const router = useRouter()
@@ -19,10 +20,13 @@ function CreateDataLingkunganDesa() {
         <Stack gap="xs">
           <Title order={3}>Create Data Lingkungan Desa</Title>
           <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label={<Text fz="sm" fw="bold">Nama Data Lingkungan Desa</Text>}
+            placeholder="masukkan nama data lingkungan desa"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Jumlah</Text>}
+            placeholder="masukkan jumlah"
           />
-
           <TextInput
             label={<Text fz="sm" fw="bold">Deskripsi</Text>}
             placeholder="masukkan deskripsi"
@@ -51,15 +55,11 @@ function CreateDataLingkunganDesa() {
                             <IconImageInPicture />
                         </Center>
                     )} */}
-
           <Box>
-            <Text fz="sm" fw="bold">Konten</Text>
-            {/* <CreateEditor
-                            value={potensiState.create.form.content}
-                            onChange={(htmlContent) => {
-                                potensiState.create.form.content = htmlContent;
-                            }}
-                        /> */}
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Data Lingkungan Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
           </Box>
           <Button bg={colors['blue-button']} >
             Simpan Data

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/detail/page.tsx

@@ -0,0 +1,66 @@
+'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 DetailDataLingkunganDesa() {
+  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 Data Lingkungan Desa</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Data Lingkungan Desa</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Jumlah</Text>
+                <Text fz={"lg"}>Test Jumlah</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/lingkungan/data-lingkungan-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 DetailDataLingkunganDesa;

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/edit/page.tsx

@@ -0,0 +1,73 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+function EditDataLingkunganDesa() {
+  const router = useRouter()
+  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']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Edit Data Lingkungan Desa</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Nama Data Lingkungan Desa</Text>}
+            placeholder="masukkan nama data lingkungan desa"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Jumlah</Text>}
+            placeholder="masukkan jumlah"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+          <Box>
+            <Text fz="sm" fw="bold">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          {/* <FileInput
+                        label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+                        value={file}
+                        onChange={async (e) => {
+                            if (!e) return;
+                            setFile(e);
+                            const base64 = await e.arrayBuffer().then((buf) =>
+                                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+                            );
+                            setPreviewImage(base64);
+                        }}
+                    /> */}
+
+          {/* {previewImage ? (
+                        <Image alt="" src={previewImage} w={200} h={200} />
+                    ) : (
+                        <Center w={200} h={200} bg="gray">
+                            <IconImageInPicture />
+                        </Center>
+                    )} */}
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Data Lingkungan Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Button bg={colors['blue-button']} >
+            Simpan Data
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditDataLingkunganDesa;

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx

@@ -1,9 +1,11 @@
+'use client'
 import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import React from 'react';
 import HeaderSearch from '../../_com/header';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import colors from '@/con/colors';
 import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
 function DataLingkunganDesa() {
   return (
@@ -19,6 +21,7 @@ function DataLingkunganDesa() {
 }
 
 function ListDataLingkunganDesa() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p="md">
@@ -31,7 +34,7 @@ function ListDataLingkunganDesa() {
             <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
+                  <TableTh>Nama Data Lingkungan</TableTh>
                   <TableTh>Gambar</TableTh>
                   <TableTh>Deskripsi</TableTh>
                   <TableTh>Detail</TableTh>
@@ -41,15 +44,15 @@ function ListDataLingkunganDesa() {
                 <TableTr>
                   <TableTd>
                     <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                      <Text truncate="end" fz={"sm"}>Lingkungan Desa</Text>
                     </Box>
                   </TableTd>
                   <TableTd>
-                    <Image w={100}  alt="image" />
+                    <Image w={100} src={"/"}  alt="image" />
                   </TableTd>
                   <TableTd>Deskripsi</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>