Ngerjain Tabs Jadwal Kegiatan di Data Kesehatan

2025-04-29 11:01:09 +08:00
parent 3f5d607e83
commit e9d94cfa83
48 changed files with 956 additions and 39 deletions
--- a/src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan.ts
+++ b/src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan.ts
--- a/src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan.ts
+++ b/src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan.ts
@@ -0,0 +1,366 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+/* Informasi Kegiatan */
+const templateInformasiKegiatan = z.object({
+  name: z.string().min(3, "Name minimal 3 karakter"),
+  tanggal: z.string().min(3, "Tanggal minimal 3 karakter"),
+  waktu: z.string().min(3, "Waktu minimal 3 karakter"),
+  lokasi: z.string().min(3, "Lokasi minimal 3 karakter"),
+});
+
+type InformasiKegiatan = Prisma.InformasiJadwalKegiatanGetPayload<{
+  select: {
+    name: true;
+    tanggal: true;
+    waktu: true;
+    lokasi: true;
+  };
+}>;
+
+const informasiKegiatan = proxy({
+  create: {
+    form: {} as InformasiKegiatan,
+    loading: false,
+    async create() {
+      const cek = templateInformasiKegiatan.safeParse(
+        informasiKegiatan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        informasiKegiatan.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.informasiJadwalKegiatan[
+          "create"
+        ].post(informasiKegiatan.create.form);
+        if (res.status === 200) {
+          informasiKegiatan.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        informasiKegiatan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.InformasiJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.informasiJadwalKegiatan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        informasiKegiatan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Deskripsi Kegiatan */
+const templateDeskripsiKegiatan = z.object({
+  deskripsi: z.string().min(3, "Content minimal 3 karakter"),
+});
+
+type DeskripsiKegiatan = Prisma.DeskripsiJadwalKegiatanGetPayload<{
+  select: { deskripsi: true };
+}>;
+
+const deskripsiKegiatan = proxy({
+  create: {
+    form: {} as DeskripsiKegiatan,
+    loading: false,
+    async create() {
+      const cek = templateDeskripsiKegiatan.safeParse(
+        deskripsiKegiatan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        deskripsiKegiatan.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.deskripsikegiatan[
+          "create"
+        ].post(deskripsiKegiatan.create.form);
+        if (res.status === 200) {
+          deskripsiKegiatan.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        deskripsiKegiatan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DeskripsiJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.deskripsikegiatan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        deskripsiKegiatan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Layanan Tersedia */
+const templateLayananTersedia = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+});
+
+type LayananTersedia = Prisma.LayananJadwalKegiatanGetPayload<{
+  select: { content: true };
+}>;
+
+const layanantersedia = proxy({
+  create: {
+    form: {} as LayananTersedia,
+    loading: false,
+    async create() {
+      const cek = templateLayananTersedia.safeParse(
+        layanantersedia.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        layanantersedia.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.layanantersedia["create"].post(
+          layanantersedia.create.form
+        );
+        if (res.status === 200) {
+          layanantersedia.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        layanantersedia.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.LayananJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.layanantersedia[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        layanantersedia.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Syarat dan Ketentuan */
+const templateSyaratKetentuan = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+});
+
+type SyaratKetentuan = Prisma.SyaratKetentuanJadwalKegiatanGetPayload<{
+  select: { content: true };
+}>;
+
+const syaratketentuan = proxy({
+  create: {
+    form: {} as SyaratKetentuan,
+    loading: false,
+    async create() {
+      const cek = templateSyaratKetentuan.safeParse(
+       syaratketentuan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+       syaratketentuan.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.syaratketentuan[
+          "create"
+        ].post(syaratketentuan.create.form);
+        if (res.status === 200) {
+         syaratketentuan.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+       syaratketentuan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.SyaratKetentuanJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.syaratketentuan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        syaratketentuan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Dokumen Yang Diperlukan */
+const templateDokumenDiperlukan = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+});
+
+type DokumenDiperlukan = Prisma.DokumenJadwalKegiatanGetPayload<{
+  select: { content: true };
+}>;
+
+const dokumenjadwalkegiatan = proxy({
+  create: {
+    form: {} as DokumenDiperlukan,
+    loading: false,
+    async create() {
+      const cek = templateDokumenDiperlukan.safeParse(
+        dokumenjadwalkegiatan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        dokumenjadwalkegiatan.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.dokumendiperlukan[
+          "create"
+        ].post(dokumenjadwalkegiatan.create.form);
+        if (res.status === 200) {
+          dokumenjadwalkegiatan.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        dokumenjadwalkegiatan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DokumenJadwalKegiatanGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.dokumendiperlukan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        dokumenjadwalkegiatan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Pendaftaran */
+const templatePendaftaran = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  tanggal: z.string().min(1),
+  namaOrangtua: z.string().min(3, "Nama minimal 3 karakter"),
+  nomor: z.string().min(9, "Nama minimal 9 karakter"),
+  alamat: z.string().min(7, "Alamat minimal 7 karakter"),
+  catatan: z.string().min(3, "Catatan minimal 3 karakter"),
+})
+
+type Pendaftaran = Prisma.PendaftaranJadwalKegiatanGetPayload<{
+  select: {
+    name: true;
+    tanggal: true;
+    namaOrangtua: true;
+    nomor: true;
+    alamat: true;
+    catatan: true;
+  }
+}>
+
+const pendaftaranjadwal = proxy({
+  create: {
+    form: {} as Pendaftaran,
+    loading: false,
+    async create() {
+      const cek = templatePendaftaran.safeParse(pendaftaranjadwal.create.form);
+      if(!cek.success) {
+        const err = `[${cek.error.issues
+        .map((v) => `${v.path.join(".")}`)
+        .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        pendaftaranjadwal.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.pendaftaranJadwalKegiatan["create"].post(
+          pendaftaranjadwal.create.form);
+          if (res.status === 200) {
+            pendaftaranjadwal.findMany.load();
+            return toast.success("success create")
+          }
+          return toast.error("failed create")
+      } catch (error) {
+        console.log((error as Error).message)
+      } finally {
+        pendaftaranjadwal.create.loading = false;
+      }
+    }
+  },
+  findMany: {
+    data: null as
+    | Prisma.PendaftaranJadwalKegiatanGetPayload<{omit: {isActive: true}}>[]
+    | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.
+      pendaftaranJadwalKegiatan["find-many"].get();
+      if(res.status === 200) {
+        pendaftaranjadwal.findMany.data = res.data?.data ?? [];
+      }
+    }
+  }
+})
+
+const stateJadwalKegiatan = proxy({
+  informasiKegiatan,
+  deskripsiKegiatan,
+  layanantersedia,
+  syaratketentuan,
+  dokumenjadwalkegiatan,
+  pendaftaranjadwal
+});
+export default stateJadwalKegiatan;
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_com/TextEditor.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_com/TextEditor.tsx
@@ -22,6 +22,7 @@ function TextEditor() {
      Highlight,
      TextAlign.configure({ types: ['heading', 'paragraph'] }),
    ],
+    immediatelyRender: false,
    content,
  });

--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_com/kesehatanEditor.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_com/kesehatanEditor.tsx
@@ -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())
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/dokterdantenagamedis/listData.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/dokterdantenagamedis/listData.tsx
@@ -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';
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/dokterdantenagamedis/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/dokterdantenagamedis/page.tsx
@@ -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';

--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/fasilitas_pendukung/listData.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/fasilitas_pendukung/listData.tsx
@@ -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() {
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/fasilitas_pendukung/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/fasilitas_pendukung/page.tsx
@@ -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';
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/informasi_umum/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/informasi_umum/page.tsx
@@ -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';

--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/layanan_unggulan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/layanan_unggulan/page.tsx
@@ -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';
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/page.tsx
@@ -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';
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/prosedurpendaftaran/listData.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/prosedurpendaftaran/listData.tsx
@@ -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';
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/prosedurpendaftaran/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/prosedurpendaftaran/page.tsx
@@ -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';
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/tarifdanlayanan/listData.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/tarifdanlayanan/listData.tsx
@@ -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';
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/tarifdanlayanan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/tarifdanlayanan/page.tsx
@@ -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';

--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/deskripsi_kegiatan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/deskripsi_kegiatan/page.tsx
@@ -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>
  );
 }
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/dokumen_yang_diperlukan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/dokumen_yang_diperlukan/page.tsx
@@ -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>
  );
 }
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/informasi_kegiatan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/informasi_kegiatan/page.tsx
@@ -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>
  );
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/layanan_yang_tersedia/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/layanan_yang_tersedia/page.tsx
@@ -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>
  );
 }
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/page.tsx
@@ -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;
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/pendaftaran/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/pendaftaran/page.tsx
@@ -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>
  );
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/syarat_dan_ketentuan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/syarat_dan_ketentuan/page.tsx
@@ -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>
  );
 }