UI & API Data Kesehatan warga sisa 3 tabs

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

@@ -0,0 +1,27 @@
+'use client'
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+
+function DeskripsiKegiatan() {
+  const deskripsiKegiatanState = useProxy(stateJadwalKegiatan.deskripsiKegiatan)
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text pt={10} fw={"bold"}>Deskripsi Kegiatan</Text>
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              deskripsiKegiatanState.create.form.deskripsi = val
+            }}
+          />
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default DeskripsiKegiatan;

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

@@ -0,0 +1,29 @@
+'use client'
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+
+function DokumenYangDiperlukan() {
+  const dokumenDiperlukan = useProxy(stateJadwalKegiatan.dokumenjadwalkegiatan)
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text pt={10} fw={"bold"}>Dokumen Yang Diperlukan</Text>
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              dokumenDiperlukan.create.form.content = val;
+            }}
+          />
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default DokumenYangDiperlukan;
+
+

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

@@ -0,0 +1,48 @@
+'use client'
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+
+function InformasiKegiatan() {
+  const informasiKegiatanState = useProxy(stateJadwalKegiatan.informasiKegiatan)
+  return (
+    <Box>
+     <Paper bg={colors['white-1']} p={'md'}>
+     <Stack gap={"xs"}>
+      <Title order={4}>Informasi Kegiatan</Title>
+      <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
+        }}
+      />
+     </Stack>
+     </Paper>
+    </Box>
+  );
+}
+
+export default InformasiKegiatan;

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

@@ -0,0 +1,27 @@
+'use client'
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+
+function LayananTersedia() {
+  const layananTersediaState = useProxy(stateJadwalKegiatan.layanantersedia)
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text pt={10} fw={"bold"}>Layanan Yang Tersedia</Text>
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              layananTersediaState.create.form.content = val;
+            }}
+          />
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default LayananTersedia;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/jadwal_kegiatan/page.tsx

@@ -0,0 +1,192 @@
+'use client'
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import { Box, Button, Paper, 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 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';
+import colors from '@/con/colors';
+
+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={{
+        base: 1, md: 2
+      }}>
+        <Box>
+          <Stack gap={"xs"}>
+            <Title order={4}>Tambah Jadwal Kegiatan</Title>
+            <InformasiKegiatan />
+            <DeskripsiKegiatan />
+            <LayananTersedia />
+            <SyaratDanKetentuan />
+            <DokumenYangDiperlukan />
+            <Pendaftaran />
+            <Button mt={10} onClick={submitAllForms}>
+              Submit
+            </Button>
+          </Stack>
+        </Box>
+
+        <Box>
+          <Stack gap={"xs"}>
+            <Title order={4}>Data Jadwal Kegiatan</Title>
+            <AllList />
+          </Stack>
+        </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()
+    allList.pendaftaranjadwal.findMany.load()
+  }, [])
+
+  const isLoading = !allList.informasiKegiatan.findMany.data ||
+    !allList.deskripsiKegiatan.findMany.data ||
+    !allList.layanantersedia.findMany.data ||
+    !allList.syaratketentuan.findMany.data ||
+    !allList.dokumenjadwalkegiatan.findMany.data ||
+    !allList.pendaftaranjadwal.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 gap={"xs"}>
+
+      <Paper bg={colors['white-1']} p={'md'}>
+        <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>
+          )
+        })}
+      </Paper>
+
+      <Paper bg={colors['white-1']} p={'md'}>
+
+        <Title order={4}>Deskripsi Kegiatan</Title>
+        {allList.deskripsiKegiatan.findMany.data?.map((item) => {
+          return (
+            <Box key={item.id}>
+              <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+            </Box>
+          )
+        })}
+      </Paper>
+
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Title order={4}>Layanan Yang Tersedia</Title>
+        {allList.layanantersedia.findMany.data?.map((item) => {
+          return (
+            <Box key={item.id}>
+              <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+            </Box>
+          )
+        })}
+      </Paper>
+
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Title order={4}>Syarat dan Ketentuan</Title>
+        {allList.syaratketentuan.findMany.data?.map((item) => {
+          return (
+            <Box key={item.id}>
+              <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+            </Box>
+          )
+        })}
+      </Paper>
+
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Title order={4}>Dokumen Yang Diperlukan</Title>
+        {allList.dokumenjadwalkegiatan.findMany.data?.map((item) => {
+          return (
+            <Box key={item.id}>
+              <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+            </Box>
+          )
+        })}
+      </Paper>
+
+      <Paper bg={colors['white-1']} p={'md'}>
+        <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>
+          )
+        })}
+      </Paper>
+    </Stack>
+  )
+}
+
+
+export default JadwalKegiatan;

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

@@ -0,0 +1,63 @@
+'use client'
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+
+function Pendaftaran() {
+  const pendaftaran = useProxy(stateJadwalKegiatan.pendaftaranjadwal)
+
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text pt={10} fw={"bold"}>Pendaftaran</Text>
+          <TextInput
+            label='Nama Balita'
+            placeholder='Masukkan nama balita'
+            onChange={(val) => {
+              pendaftaran.create.form.name = val.target.value
+            }}
+          />
+          <TextInput
+            label='Tanggal'
+            placeholder='Masukkan tanggal'
+            onChange={(val) => {
+              pendaftaran.create.form.tanggal = val.target.value
+            }}
+          />
+          <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
+            }}
+          />
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Pendaftaran;

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

@@ -0,0 +1,27 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../_com/kesehatanEditor';
+import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
+
+function SyaratDanKetentuan() {
+  const syaratKetentuan = useProxy(stateJadwalKegiatan.syaratketentuan)
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text pt={10} fw={"bold"}>Syarat dan Ketentuan</Text>
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              syaratKetentuan.create.form.content = val;
+            }}
+          />
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default SyaratDanKetentuan;