diff --git a/src/app/admin/(dashboard)/_com/header.tsx b/src/app/admin/(dashboard)/_com/header.tsx new file mode 100644 index 00000000..1a867c81 --- /dev/null +++ b/src/app/admin/(dashboard)/_com/header.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Grid, GridCol, Paper, TextInput, Title } from '@mantine/core'; +import { IconSearch } from '@tabler/icons-react'; // Sesuaikan jika kamu pakai icon lain +import colors from '@/con/colors'; + + +const HeaderSearch = ({ title = "", placeholder = "pencarian", searchIcon = }: { title: string, placeholder?: string, searchIcon?: React.ReactNode }) => { + return ( + + + {title} + + + + + + + + ); +}; + +export default HeaderSearch; \ No newline at end of file diff --git a/src/app/admin/(dashboard)/_com/judulList.tsx b/src/app/admin/(dashboard)/_com/judulList.tsx new file mode 100644 index 00000000..4eaa5731 --- /dev/null +++ b/src/app/admin/(dashboard)/_com/judulList.tsx @@ -0,0 +1,30 @@ + +'use client' +import colors from '@/con/colors'; +import { Grid, GridCol, Button, Text } from '@mantine/core'; +import { IconCircleDashedPlus } from '@tabler/icons-react'; +import { useRouter } from 'next/navigation'; +import React from 'react'; + +const JudulList = ({ title = "", href = "#" }) => { + const router = useRouter(); + + const handleNavigate = () => { + router.push(href); + }; + + return ( + + + {title} + + + + + + ); +}; + +export default JudulList; diff --git a/src/app/admin/(dashboard)/desa/potensi/page.tsx b/src/app/admin/(dashboard)/desa/potensi/page.tsx index b92a9120..d9be0fac 100644 --- a/src/app/admin/(dashboard)/desa/potensi/page.tsx +++ b/src/app/admin/(dashboard)/desa/potensi/page.tsx @@ -1,30 +1,24 @@ 'use client' import colors from '@/con/colors'; -import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput, Title } from '@mantine/core'; -import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react'; -import { useProxy } from 'valtio/utils'; -import potensiDesaState from '../../_state/desa/potensi'; -import { useRouter } from 'next/navigation'; +import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core'; import { useShallowEffect } from '@mantine/hooks'; +import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react'; +import { useRouter } from 'next/navigation'; +import { useProxy } from 'valtio/utils'; +import HeaderSearch from '../../_com/header'; +import JudulList from '../../_com/judulList'; +import potensiDesaState from '../../_state/desa/potensi'; function Potensi() { return ( - - - Potensi Desa - - - - } /> - - - + } + /> ); @@ -51,16 +45,10 @@ function ListPotensi() { - - - List Potensi - - - - - + diff --git a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx new file mode 100644 index 00000000..88e6e01a --- /dev/null +++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/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'; + +function CreateDataLingkunganDesa() { + const router = useRouter() + return ( + + + + + + + + Create Data Lingkungan Desa + Judul} + placeholder="masukkan judul" + /> + + Deskripsi} + placeholder="masukkan deskripsi" + /> + + Gambar + + + {/* Upload Gambar} + 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 ? ( + + ) : ( +
+ +
+ )} */} + + + Konten + {/* { + potensiState.create.form.content = htmlContent; + }} + /> */} + + +
+
+
+ ); +} + +export default CreateDataLingkunganDesa; diff --git a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx index 1732a9f4..d9ba4dfc 100644 --- a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx +++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx @@ -1,11 +1,66 @@ +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'; -function Page() { +function DataLingkunganDesa() { return ( -
- data-lingkungan-desa -
+ + } + /> + + ); } -export default Page; +function ListDataLingkunganDesa() { + return ( + + + + + +
+ + + Judul + Gambar + Deskripsi + Detail + + + + + + + Judul + + + + + + Deskripsi + + + + + +
+
+
+
+
+ ) +} + +export default DataLingkunganDesa; diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/page.tsx new file mode 100644 index 00000000..df1978c0 --- /dev/null +++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/page.tsx @@ -0,0 +1,61 @@ +'use client' +import React from 'react'; +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'; + +function Page() { + const router = useRouter() + return ( + + + + + + + + Create Edukasi Lingkungan + Judul} + placeholder="masukkan judul" + /> + Deskripsi} + placeholder="masukkan deskripsi" + /> + {/* Upload Gambar} + 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 ? ( + + ) : ( +
+ +
+ )} */} + + Gambar + + + +
+
+
+ ); +} + +export default Page; diff --git a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx index 3252f581..eaf32a93 100644 --- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx +++ b/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx @@ -1,11 +1,66 @@ +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'; -function Page() { +function Page() { return ( -
- edukasi-lingkungan -
+ + } + /> + + ); } +function ListEdukasiLingkungan() { + return ( + + + + + + + + + Judul + Gambar + Deskripsi + Detail + + + + + + + Judul + + + + + + Deskripsi + + + + + +
+
+
+
+
+ ) +} + export default Page; diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/create/page.tsx new file mode 100644 index 00000000..07cfb090 --- /dev/null +++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/create/page.tsx @@ -0,0 +1,65 @@ +'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'; + +function Page() { + const router = useRouter() + return ( + + + + + + + + Create Gotong Royong + Judul} + placeholder="masukkan judul" + /> + Kategori} + placeholder="masukkan kategori" + /> + Deskripsi} + placeholder="masukkan deskripsi" + /> + {/* Upload Gambar} + 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 ? ( + + ) : ( +
+ +
+ )} */} + + Gambar + + + +
+
+
+ ); +} + +export default Page; diff --git a/src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx b/src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx index 95411df9..0f0e90aa 100644 --- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx +++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx @@ -1,11 +1,68 @@ -import React from 'react'; +import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core'; +import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react'; +import HeaderSearch from '../../_com/header'; +import colors from '@/con/colors'; +import JudulList from '../../_com/judulList'; -function Page() { +function GotongRoyong() { return ( -
- gotong-royong -
+ + } + /> + + ); } -export default Page; +function ListGotongRoyong() { + return ( + + + + + + + + + Judul + Kategori + Image + Deskripsi + Detail + + + + + + + Judul + + + Kategori + + + + Deskripsi + + + + + + +
+
+
+
+
+ ) +} + +export default GotongRoyong; diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/create/page.tsx new file mode 100644 index 00000000..68bd0e1e --- /dev/null +++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/create/page.tsx @@ -0,0 +1,62 @@ +'use client' +import React from 'react'; +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'; + +function Page() { + const router = useRouter() + return ( + + + + + + + + Create Konservasi Adat Bali + Judul} + placeholder="masukkan judul" + /> + Deskripsi} + placeholder="masukkan deskripsi" + /> + {/* Upload Gambar} + 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 ? ( + + ) : ( +
+ +
+ )} */} + + Gambar + + + +
+
+
+ ); +} + +export default Page; diff --git a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx index c1f5bf13..6361c664 100644 --- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx +++ b/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx @@ -1,11 +1,66 @@ +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'; -function Page() { +function KonservasiAdatBali() { return ( -
- konservasi-adat-bali -
+ + } + /> + + ); } -export default Page; +function ListKonservasiAdatBali() { + return ( + + + + + + + + + Judul + Gambar + Deskripsi + Detail + + + + + + + Judul + + + + + + Deskripsi + + + + + +
+
+
+
+
+ ) +} + +export default KonservasiAdatBali; diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/create/page.tsx new file mode 100644 index 00000000..c8697ae0 --- /dev/null +++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/create/page.tsx @@ -0,0 +1,71 @@ +'use client' +import colors from "@/con/colors"; +import { Box, Button, Paper, Stack, Title, TextInput, Text } from "@mantine/core"; +import { IconArrowBack } from "@tabler/icons-react"; +import { useRouter } from "next/navigation"; + + +export default function CreatePengelolaanSampahBankSampah() { + const router = useRouter() + return ( + + + + + + + + Create Mekanisme Bank Sampah + + Judul} + placeholder="masukkan judul" + /> + + Deskripsi} + placeholder="masukkan deskripsi" + /> + + {/* Upload Gambar} + 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 ? ( + + ) : ( +
+ +
+ )} */} + + + Konten + {/* { + potensiState.create.form.content = htmlContent; + }} + /> */} + + + +
+
+
+ ) +} + diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx index 05e93042..85239543 100644 --- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx +++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx @@ -1,11 +1,33 @@ -import React from 'react'; +import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core'; +import ListPage from './ui/list_page/listPage'; +import colors from '@/con/colors'; -function Page() { +function PengelolaanSampahBankSampah() { return ( -
- pengelolaan-sampah-bank-sampah -
- ); + + + Pengelolaan Sampah Bank Sampah + + + + List Pengelolaan Sampah Bank Sampah + + + Maps + + + + + + + + + Maps + + + + + ) } -export default Page; +export default PengelolaanSampahBankSampah; diff --git a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/ui/list_page/listPage.tsx b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/ui/list_page/listPage.tsx new file mode 100644 index 00000000..c6bef31a --- /dev/null +++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/ui/list_page/listPage.tsx @@ -0,0 +1,66 @@ +import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core'; +import React from 'react'; +import HeaderSearch from '@/app/admin/(dashboard)/_com/header'; +import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react'; +import colors from '@/con/colors'; +import JudulList from '@/app/admin/(dashboard)/_com/judulList'; + +function ListPage() { + return ( + + } + /> + + + ); +} + +function ListPengelolaanSampahBankSampah() { + return ( + + + + + + + + + Judul + Gambar + Deskripsi + Detail + + + + + + + Judul + + + + + + Deskripsi + + + + + +
+
+
+
+
+ ) +} + +export default ListPage; diff --git a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx new file mode 100644 index 00000000..4c1e91c2 --- /dev/null +++ b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/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'; + +function Page() { + const router = useRouter() + return ( + + + + + + + + Create Program Penghijauan + + Judul} + placeholder="masukkan judul" + /> + + Deskripsi} + placeholder="masukkan deskripsi" + /> + + Gambar + + {/* Upload Gambar} + 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 ? ( + + ) : ( +
+ +
+ )} */} + + + Konten + {/* { + potensiState.create.form.content = htmlContent; + }} + /> */} + + + +
+
+
+ ); +} + +export default Page; diff --git a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx index eb7a466b..e818879d 100644 --- a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx +++ b/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx @@ -1,11 +1,68 @@ -import React from 'react'; +import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core'; +import HeaderSearch from '../../_com/header'; +import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react'; +import colors from '@/con/colors'; +import JudulList from '../../_com/judulList'; -function Page() { +function ProgramPenghijauan() { return ( -
- program-penghijauan -
+ + } + /> + + ); } -export default Page; +function ListManfaatPenghijauan() { + return ( + + + + + + + + + Judul + Gambar + Jumlah + Deskripsi + Detail + + + + + + + Judul + + + + Jumlah + + + + + Deskripsi + + + + + +
+
+
+
+
+ ) +} + +export default ProgramPenghijauan;