wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Lanjutan UI

Browse Source
This commit is contained in:
nico
2025-06-03 10:21:06 +08:00
parent 5037009c40
commit 084435500f
7 changed files with 217 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

70
src/app/admin/(dashboard)/kesehatan/program-kesehatan/detail/page.tsx Normal file
View File

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

55
src/app/admin/(dashboard)/kesehatan/program-kesehatan/edit/page.tsx Normal file
View File

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

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

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

70
src/app/admin/(dashboard)/kesehatan/puskesmas/detail/page.tsx Normal file
View File

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

14
src/app/admin/(dashboard)/kesehatan/puskesmas/edit/updatePuskesmas.tsx → src/app/admin/(dashboard)/kesehatan/puskesmas/edit/page.tsx
View File

@@ -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() {
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>
<Stack gap={"xs"}>
<SimpleGrid cols={{ base: 1, md: 2 }}>
<Box>
@@ -52,4 +60,4 @@ function UpdatePuskesmas() {
);
}
export default UpdatePuskesmas;
export default EditPuskesmas;