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

Ngerjain Tabs Jadwal Kegiatan di Data Kesehatan

Browse Source
This commit is contained in:
nico
2025-04-29 11:01:09 +08:00
parent 3f5d607e83
commit e9d94cfa83
48 changed files with 956 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_com/TextEditor.tsx
View File

@@ -22,6 +22,7 @@ function TextEditor() {
Highlight,
TextAlign.configure({ types: ['heading', 'paragraph'] }),
],
immediatelyRender: false,
content,
});

1
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_com/kesehatanEditor.tsx
View File

@@ -26,6 +26,7 @@ export function KesehatanEditor({ onSubmit, onChange, showSubmit = true }: {
Highlight,
TextAlign.configure({ types: ['heading', 'paragraph'] }),
],
immediatelyRender: false,
content,
onUpdate : ({editor}) => {
onChange(editor.getHTML())

2
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/dokterdantenagamedis/listData.tsx
View File

@@ -1,4 +1,4 @@
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import colors from '@/con/colors';
import { Center, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';

2
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/dokterdantenagamedis/page.tsx
View File

@@ -1,4 +1,4 @@
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import { Box, Text, TextInput } from '@mantine/core';
import { useProxy } from 'valtio/utils';

2
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/fasilitas_pendukung/listData.tsx
View File

@@ -1,7 +1,7 @@
import { Box, Stack, Text } from '@mantine/core';
import React from 'react';
import { useProxy } from 'valtio/utils';
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import { useShallowEffect } from '@mantine/hooks';
function FasilitasPendukungList() {

2
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/fasilitas_pendukung/page.tsx
View File

@@ -1,4 +1,4 @@
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import { Box, Text } from '@mantine/core';
import { useProxy } from 'valtio/utils';
import { KesehatanEditor } from '../../../_com/kesehatanEditor';

2
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/informasi_umum/page.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import { Box, Text, TextInput } from '@mantine/core';
import { useProxy } from 'valtio/utils';

2
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/layanan_unggulan/page.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import { Box, Text } from '@mantine/core';
import { useProxy } from 'valtio/utils';
import { KesehatanEditor } from '../../../_com/kesehatanEditor';

2
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import colors from '@/con/colors';
import { Box, Button, Center, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';

2
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/prosedurpendaftaran/listData.tsx
View File

@@ -1,4 +1,4 @@
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import { Box, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useProxy } from 'valtio/utils';

2
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/prosedurpendaftaran/page.tsx
View File

@@ -1,4 +1,4 @@
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import { Box, Text } from '@mantine/core';
import { useProxy } from 'valtio/utils';
import { KesehatanEditor } from '../../../_com/kesehatanEditor';

2
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/tarifdanlayanan/listData.tsx
View File

@@ -1,4 +1,4 @@
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import colors from '@/con/colors';
import { Center, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';

2
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/tarifdanlayanan/page.tsx
View File

@@ -1,4 +1,4 @@
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import { Box, Text, TextInput } from '@mantine/core';
import { useProxy } from 'valtio/utils';

12
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/deskripsi_kegiatan/page.tsx
View File

@@ -1,11 +1,19 @@
import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
import { Box, Text } from '@mantine/core';
import TextEditor from '../../../_com/TextEditor';
import { useProxy } from 'valtio/utils';
import { KesehatanEditor } from '../../../_com/kesehatanEditor';
function DeskripsiKegiatan() {
const deskripsiKegiatanState = useProxy(stateJadwalKegiatan.deskripsiKegiatan)
return (
<Box>
<Text pt={10} fw={"bold"}>Deskripsi Kegiatan</Text>
<TextEditor/>
<KesehatanEditor
showSubmit={false}
onChange={(val) => {
deskripsiKegiatanState.create.form.deskripsi = val
}}
/>
</Box>
);
}

12
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/dokumen_yang_diperlukan/page.tsx
View File

@@ -1,11 +1,19 @@
import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
import { Box, Text } from '@mantine/core';
import TextEditor from '../../../_com/TextEditor';
import { useProxy } from 'valtio/utils';
import { KesehatanEditor } from '../../../_com/kesehatanEditor';
function DokumenYangDiperlukan() {
const dokumenDiperlukan = useProxy(stateJadwalKegiatan.dokumenjadwalkegiatan)
return (
<Box>
<Text pt={10} fw={"bold"}>Dokumen Yang Diperlukan</Text>
<TextEditor/>
<KesehatanEditor
showSubmit={false}
onChange={(val)=> {
dokumenDiperlukan.create.form.content = val;
}}
/>
</Box>
);
}

15
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/informasi_kegiatan/page.tsx
View File

@@ -1,24 +1,39 @@
import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
import { Box, Text, TextInput } from '@mantine/core';
import { useProxy } from 'valtio/utils';
function InformasiKegiatan() {
const informasiKegiatanState = useProxy(stateJadwalKegiatan.informasiKegiatan)
return (
<Box>
<Text pt={10} fw={"bold"}>Informasi Kegiatan</Text>
<TextInput
label="Nama Kegiatan"
placeholder="Masukkan nama kegiatan"
onChange={(val) => {
informasiKegiatanState.create.form.name = val.target.value
}}
/>
<TextInput
label="Tanggal"
placeholder="Masukkan tanggal kegiatan"
onChange={(val) => {
informasiKegiatanState.create.form.tanggal = val.target.value
}}
/>
<TextInput
label="Waktu"
placeholder="Masukkan waktu kegiatan"
onChange={(val) => {
informasiKegiatanState.create.form.waktu = val.target.value
}}
/>
<TextInput
label="Lokasi"
placeholder="Masukkan lokasi kegiatan"
onChange={(val) => {
informasiKegiatanState.create.form.lokasi = val.target.value
}}
/>
</Box>
);

12
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/layanan_yang_tersedia/page.tsx
View File

@@ -1,11 +1,19 @@
import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
import { Box, Text } from '@mantine/core';
import TextEditor from '../../../_com/TextEditor';
import { useProxy } from 'valtio/utils';
import { KesehatanEditor } from '../../../_com/kesehatanEditor';
function LayananTersedia() {
const layananTersediaState = useProxy(stateJadwalKegiatan.layanantersedia)
return (
<Box>
<Text pt={10} fw={"bold"}>Layanan Yang Tersedia</Text>
<TextEditor/>
<KesehatanEditor
showSubmit={false}
onChange={(val) => {
layananTersediaState.create.form.content = val;
}}
/>
</Box>
);
}

159
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/page.tsx
View File

@@ -1,12 +1,53 @@
import { Box, Button, SimpleGrid, Stack, Title } from '@mantine/core';
import InformasiKegiatan from './informasi_kegiatan/page';
'use client'
import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
import { Box, Button, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useProxy } from 'valtio/utils';
import DeskripsiKegiatan from './deskripsi_kegiatan/page';
import LayananTersedia from './layanan_yang_tersedia/page';
import SyaratDanKetentuan from './syarat_dan_ketentuan/page';
import DokumenYangDiperlukan from './dokumen_yang_diperlukan/page';
import InformasiKegiatan from './informasi_kegiatan/page';
import LayananTersedia from './layanan_yang_tersedia/page';
import Pendaftaran from './pendaftaran/page';
import SyaratDanKetentuan from './syarat_dan_ketentuan/page';
function JadwalKegiatan() {
const allState = useProxy(stateJadwalKegiatan)
const submitAllForms = () => {
if (allState.informasiKegiatan.create.form.name &&
allState.informasiKegiatan.create.form.tanggal &&
allState.informasiKegiatan.create.form.waktu &&
allState.informasiKegiatan.create.form.lokasi) {
allState.informasiKegiatan.create.create()
}
if (allState.deskripsiKegiatan.create.form.deskripsi) {
allState.deskripsiKegiatan.create.create();
}
if (allState.layanantersedia.create.form.content) {
allState.layanantersedia.create.create();
}
if (allState.syaratketentuan.create.form.content) {
allState.syaratketentuan.create.create();
}
if (allState.dokumenjadwalkegiatan.create.form.content) {
allState.dokumenjadwalkegiatan.create.create();
}
if (allState.pendaftaranjadwal.create.form.name &&
allState.pendaftaranjadwal.create.form.tanggal &&
allState.pendaftaranjadwal.create.form.namaOrangtua &&
allState.pendaftaranjadwal.create.form.nomor &&
allState.pendaftaranjadwal.create.form.alamat &&
allState.pendaftaranjadwal.create.form.catatan
) {
allState.pendaftaranjadwal.create.create();
}
}
return (
<Stack py={10}>
<SimpleGrid cols={{
@@ -14,21 +55,117 @@ function JadwalKegiatan() {
}}>
<Box>
<Title order={3}>Jadwal Kegiatan</Title>
<InformasiKegiatan/>
<DeskripsiKegiatan/>
<LayananTersedia/>
<SyaratDanKetentuan/>
<DokumenYangDiperlukan/>
<Pendaftaran/>
<Button mt={10} fullWidth>Submit</Button>
<InformasiKegiatan />
<DeskripsiKegiatan />
<LayananTersedia />
<SyaratDanKetentuan />
<DokumenYangDiperlukan />
<Pendaftaran />
<Button onClick={submitAllForms}>
Submit
</Button>
</Box>
<Box>
<Title order={3}>List Jadwal Kegiatan</Title>
<AllList />
</Box>
</SimpleGrid>
</Stack>
);
}
function AllList() {
const allList = useProxy(stateJadwalKegiatan)
useShallowEffect(() => {
allList.informasiKegiatan.findMany.load()
allList.deskripsiKegiatan.findMany.load()
allList.layanantersedia.findMany.load()
allList.syaratketentuan.findMany.load()
allList.dokumenjadwalkegiatan.findMany.load()
})
const isLoading = !allList.informasiKegiatan.findMany.data ||
!allList.deskripsiKegiatan.findMany.data ||
!allList.layanantersedia.findMany.data ||
!allList.syaratketentuan.findMany.data ||
!allList.dokumenjadwalkegiatan.findMany.data
if (isLoading) {
return (
<Stack>
<Title order={4}>Informasi Kegiatan</Title>
{Array.from({ length: 10 }).map((_, k) => <Skeleton key={k} h={40} />)}
</Stack>
);
}
return (
<Stack>
<Title order={4}>Informasi Kegiatan</Title>
{allList.informasiKegiatan.findMany.data?.map((item) => {
return (
<Box key={item.id}>
<Text>{item.name}</Text>
<Text>{item.tanggal}</Text>
<Text>{item.waktu}</Text>
<Text>{item.lokasi}</Text>
</Box>
)
})}
<Title order={4}>Deskripsi Kegiatan</Title>
{allList.deskripsiKegiatan.findMany.data?.map((item) => {
return (
<Box key={item.id}>
<Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
</Box>
)
})}
<Title order={4}>Layanan Yang Tersedia</Title>
{allList.layanantersedia.findMany.data?.map((item) => {
return (
<Box key={item.id}>
<Text dangerouslySetInnerHTML={{ __html: item.content }} />
</Box>
)
})}
<Title order={4}>Syarat dan Ketentuan</Title>
{allList.syaratketentuan.findMany.data?.map((item) => {
return (
<Box key={item.id}>
<Text dangerouslySetInnerHTML={{ __html: item.content }} />
</Box>
)
})}
<Title order={4}>Dokumen Yang Diperlukan</Title>
{allList.dokumenjadwalkegiatan.findMany.data?.map((item) => {
return (
<Box key={item.id}>
<Text dangerouslySetInnerHTML={{ __html: item.content }} />
</Box>
)
})}
<Title order={4}>Pendaftaran</Title>
{allList.pendaftaranjadwal.findMany.data?.map((item) => {
return (
<Box key={item.id}>
<Text>{item.name}</Text>
<Text>{item.tanggal}</Text>
<Text>{item.namaOrangtua}</Text>
<Text>{item.nomor}</Text>
<Text>{item.alamat}</Text>
<Text>{item.catatan}</Text>
</Box>
)
})}
</Stack>
)
}
export default JadwalKegiatan;

26
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/pendaftaran/page.tsx
View File

@@ -1,45 +1,71 @@
'use client'
import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
import { ActionIcon, Box, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput } from '@mantine/dates';
import { IconCalendar } from '@tabler/icons-react';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
function Pendaftaran() {
const pendaftaran = useProxy(stateJadwalKegiatan.pendaftaranjadwal)
const [dateInputOpened, setDateInputOpened] = useState(false);
const pickerControl = (
<ActionIcon onClick={() => setDateInputOpened(true)} variant="subtle" color="gray">
<IconCalendar size={18} />
</ActionIcon>
);
const formatDate = (date: Date | null): string => { if (!date) return ""; return date.toISOString().split('T')[0]; }
return (
<Box>
<Text pt={10} fw={"bold"}>Pendaftaran</Text>
<TextInput
label='Nama Balita'
placeholder='Masukkan nama balita'
onChange={(val) => {
pendaftaran.create.form.name = val.target.value
}}
/>
<DateInput
clearable defaultValue={new Date()}
styles={{label: {fontSize: '14px'}}}
label='Tanggal Lahir'
placeholder='dd/mm/yyyy'
value={pendaftaran.create.form.tanggal ? new Date(pendaftaran.create.form.tanggal) : null}
popoverProps={{opened: dateInputOpened, onChange: setDateInputOpened}}
rightSection={pickerControl}
onChange={(val) => {
pendaftaran.create.form.tanggal = formatDate(val);
}}
/>
<TextInput
label='Nama Orang Tua / Wali'
placeholder='Masukkan nama orang tua / wali'
onChange={(val) => {
pendaftaran.create.form.namaOrangtua = val.target.value
}}
/>
<TextInput
label='No. Telepon'
placeholder='Masukkan no. telepon'
onChange={(val) => {
pendaftaran.create.form.nomor = val.target.value
}}
/>
<TextInput
label='Alamat'
placeholder='Masukkan alamat'
onChange={(val) => {
pendaftaran.create.form.alamat = val.target.value
}}
/>
<Textarea
label='Catatan Khusus (Opsional)'
placeholder='Masukkan catatan khusus'
onChange={(val) => {
pendaftaran.create.form.catatan = val.target.value
}}
/>
</Box>
);

13
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/syarat_dan_ketentuan/page.tsx
View File

@@ -1,12 +1,19 @@
import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
import { Box, Text } from '@mantine/core';
import React from 'react';
import TextEditor from '../../../_com/TextEditor';
import { useProxy } from 'valtio/utils';
import { KesehatanEditor } from '../../../_com/kesehatanEditor';
function SyaratDanKetentuan() {
const syaratKetentuan = useProxy(stateJadwalKegiatan.syaratketentuan)
return (
<Box>
<Text pt={10} fw={"bold"}>Syarat dan Ketentuan</Text>
<TextEditor/>
<KesehatanEditor
showSubmit={false}
onChange={(val) => {
syaratKetentuan.create.form.content = val;
}}
/>
</Box>
);
}