Sudah Dibuatkan Inputan Data Di Data Kesehatan Warga Fasilitas Kesehatan

2025-04-28 10:21:59 +08:00
parent d575c9c792
commit 3f5d607e83
32 changed files with 610 additions and 150 deletions
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -142,8 +142,10 @@ model GalleryVideo {
  videosId         String?  @unique
  videosGalleryVideo Videos?  @relation(fields: [videosId], references: [id])
 }
+
 // ========================================= MENU KESEHATAN ========================================= //
 // ========================================= DATA KESEHATAN WARGA ========================================= //
+
 // ========================================= FASILITAS KESEHATAN ========================================= //
 model DataKematian_Kelahiran {
  id             Int      @id @default(autoincrement())
@@ -233,4 +235,76 @@ model TarifDanLayanan{
  deletedAt DateTime @default(now())
  isActive Boolean @default(true)
  FasilitasKesehatan FasilitasKesehatan[]
-}
+}
+
+// ========================================= JADWAL KEGIATAN ========================================= //
+model JadwalKegiatan{
+  id   String @id @default(cuid())
+  content String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive Boolean @default(true)
+}
+
+model InformasiJadwalKegiatan{
+  id String @id @default(cuid())
+  name String 
+  tanggal String
+  waktu String
+  lokasi String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive Boolean @default(true)
+}
+
+model DeskripsiJadwalKegiatan{
+  id String @id @default(cuid())
+  deskripsi String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive Boolean @default(true)
+}
+
+model LayananJadwalKegiatan{
+  id String @id @default(cuid())
+  content String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive Boolean @default(true)
+}
+
+model SyaratKetentuanJadwalKegiatan{
+  id String @id @default(cuid())
+  content String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive Boolean @default(true)
+}
+
+model DokumenJadwalKegiatan{
+  id String @id @default(cuid())
+  content String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive Boolean @default(true)
+}
+
+model PendaftaranJadwalKegiatan{
+  id String @id @default(cuid())
+  name String
+  tanggal String
+  namaOrangtua String
+  nomor String
+  alamat String
+  catatan String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive Boolean @default(true)
+}
--- a/src/app/admin/(dashboard)/_state/desa/berita.ts
+++ b/src/app/admin/(dashboard)/_state/desa/berita.ts
--- a/src/app/admin/(dashboard)/_state/desa/pengumuman.ts
+++ b/src/app/admin/(dashboard)/_state/desa/pengumuman.ts
--- a/src/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan.ts
+++ b/src/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan.ts
@@ -321,7 +321,7 @@ const prosedurpendaftaran = proxy({
  },
 })

-const stateKesehatan = proxy({
+const stateFasilitasKesehatan = proxy({
  informasiumum,
  layananunggulan,
  dokterdantenagamedis,
@@ -330,4 +330,4 @@ const stateKesehatan = proxy({
  prosedurpendaftaran
 })

-export default stateKesehatan
+export default stateFasilitasKesehatan
--- a/src/app/admin/(dashboard)/desa/berita/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/page.tsx
@@ -4,7 +4,7 @@ import { useShallowEffect } from '@mantine/hooks';
 import { Prisma } from '@prisma/client';
 import { IconImageInPicture } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
-import stateDashboardBerita from '../../_state/berita';
+import stateDashboardBerita from '../../_state/desa/berita';
 import { BeritaEditor } from './_com/BeritaEditor';

 function Page() {
--- a/src/app/admin/(dashboard)/desa/pengumuman/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/page.tsx
@@ -2,7 +2,7 @@
 import { Group, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
-import stateDesaPengumuman from '../../_state/pengumuman';
+import stateDesaPengumuman from '../../_state/desa/pengumuman';
 import { useShallowEffect } from '@mantine/hooks';
 import { Prisma } from '@prisma/client';
 import { BeritaEditor } from '../berita/_com/BeritaEditor';
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_com/buttonSubmit.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_com/buttonSubmit.tsx
@@ -1,12 +0,0 @@
-import { Button } from '@mantine/core';
-import React from 'react';
-
-function ButtonSubmit() {
-  return (
-    <>
-      <Button onClick={() => {}}>Submit</Button>
-    </>
-  );
-}
-
-export default ButtonSubmit;
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_com/kesehatanEditor.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_com/kesehatanEditor.tsx
@@ -0,0 +1,93 @@
+'use client'
+import { Button, Stack } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+
+const content =
+  '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
+
+export function KesehatanEditor({ onSubmit, onChange, showSubmit = true }: { 
+  onSubmit?: (val: string) => void, 
+  onChange: (val: string) => void, 
+  showSubmit?: boolean }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    content,
+    onUpdate : ({editor}) => {
+      onChange(editor.getHTML())
+    }
+  });
+
+  return (
+    <Stack>
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      {showSubmit && (
+        <Button onClick={() => {
+          if (!editor) return
+          onSubmit?.(editor?.getHTML())
+        }}>Submit</Button>
+      )}
+    </Stack>
+  );
+}
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/page.tsx
@@ -3,7 +3,7 @@ import React from 'react';

 function ArtikelKesehatan() {
  return (
-    <Stack>
+    <Stack py={10}>
      <SimpleGrid cols={{
        base: 1, md: 2
      }}>
--- 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 stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
 import colors from '@/con/colors';
 import { Center, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
@@ -6,7 +6,7 @@ import _ from 'lodash';
 import { useProxy } from 'valtio/utils';

 function DokterdanTenagaMedisList() {
-  const kesehatanState = useProxy(stateKesehatan.dokterdantenagamedis);
+  const kesehatanState = useProxy(stateFasilitasKesehatan.dokterdantenagamedis);
  
  useShallowEffect(() => {
    kesehatanState.findMany.load();
@@ -52,8 +52,7 @@ function DokterdanTenagaMedisList() {

  return (
    <Stack>
-      <Table
-        
+      <Table     
        striped 
        highlightOnHover 
        withTableBorder 
--- 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,10 +1,9 @@
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
-import { Box, Button, Text, TextInput } from '@mantine/core';
-import React from 'react';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
+import { Box, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';

 function DokterDanTenagaMedis() {
-  const dokterdantenagamedisState = useProxy(stateKesehatan.dokterdantenagamedis)
+  const dokterdantenagamedisState = useProxy(stateFasilitasKesehatan.dokterdantenagamedis)
  return (
    <Box>
      <Text fw={"bold"}>Dokter & Tenaga Medis</Text>
@@ -30,10 +29,6 @@ function DokterDanTenagaMedis() {
          dokterdantenagamedisState.create.form.jadwal = val.target.value
        }}
      />
-      <Button
-        onClick={() => {
-          dokterdantenagamedisState.create.create()
-        }}>Simpan</Button>
    </Box>
  );
 }
--- 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,11 +1,11 @@
 import { Box, Stack, Text } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
 import { useShallowEffect } from '@mantine/hooks';

 function FasilitasPendukungList() {
-  const fasilitaspendukungState = useProxy(stateKesehatan.fasilitaspendukung)
+  const fasilitaspendukungState = useProxy(stateFasilitasKesehatan.fasilitaspendukung)
  useShallowEffect(() => {
    fasilitaspendukungState.findMany.load()
  }, [])
--- 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,17 +1,17 @@
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
-import { BeritaEditor } from '@/app/admin/(dashboard)/desa/berita/_com/BeritaEditor';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
 import { Box, Text } from '@mantine/core';
-import React from 'react';
 import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';

 function FasilitasPendukung() {
-  const fasilitaspendukungState = useProxy(stateKesehatan.fasilitaspendukung)
+  const fasilitaspendukungState = useProxy(stateFasilitasKesehatan.fasilitaspendukung)
  return <Box>
    <Text fw={"bold"}>Fasilitas Pendukung</Text>
-    <BeritaEditor onSubmit={(val) => {
-      fasilitaspendukungState.create.form.content = val
-      fasilitaspendukungState.create.create()
-    }}/>
+    <KesehatanEditor 
+        showSubmit={false}
+        onChange={(val) => {
+          fasilitaspendukungState.create.form.content = val;
+        }} />
  </Box>
 }

--- 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,25 +1,24 @@
 'use client'
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
-import { Box, Button, Text, TextInput } from '@mantine/core';
-import React from 'react';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
+import { Box, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';

 function InformasiUmum() {
-  const infromasiState = useProxy(stateKesehatan)
+  const infromasiState = useProxy(stateFasilitasKesehatan.informasiumum)
  return<Box>
      <Text fw={"bold"}>Informasi Umum</Text>
      <TextInput
        label="Fasilitas"
        placeholder='masukkan nama fasilitas kesehatan'
        onChange={(val) => {
-          infromasiState.informasiumum.create.form.fasilitas = val.target.value
+          infromasiState.create.form.fasilitas = val.target.value
        }}
      />
      <TextInput
        label="Alamat"
        placeholder='masukkan alamat'
        onChange={(val) => {
-          infromasiState.informasiumum.create.form.alamat = val.target.value
+          infromasiState.create.form.alamat = val.target.value
        }}
      />
      <TextInput
@@ -27,13 +26,9 @@ function InformasiUmum() {
        label="Jam Operasional"
        placeholder='masukkan jam operasional'
        onChange={(val) => {
-          infromasiState.informasiumum.create.form.jamOperasional = val.target.value
+          infromasiState.create.form.jamOperasional = val.target.value
        }}
      />
-      <Button
-        onClick={() => {
-          infromasiState.informasiumum.create.create()
-        }}>Simpan</Button>
    </Box>
 }

--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/layanan_unggulan/layananUnggulanList.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/layanan_unggulan/layananUnggulanList.tsx
@@ -1,24 +0,0 @@
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
-import { Box, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { useProxy } from 'valtio/utils';
-
-function LayananUnggulanList() {
-  const layananunggulanstate = useProxy(stateKesehatan.layananunggulan)
-  useShallowEffect(() => {
-    layananunggulanstate.findMany.load()
-  }, [])
-
-  if (!layananunggulanstate.findMany.data) return <Stack>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
-  return <Stack>
-    {layananunggulanstate.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Text dangerouslySetInnerHTML={{__html: item.content}}/>
-      </Box>
-    ))}
-  </Stack>
-}
-
-export default LayananUnggulanList;
--- 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,16 +1,17 @@
 'use client'
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
 import { Box, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
-import { BeritaEditor } from '@/app/admin/(dashboard)/desa/berita/_com/BeritaEditor';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';

 function LayananUnggulan() {
-  const informasiumumState = useProxy(stateKesehatan.layananunggulan)
+  const informasiumumState = useProxy(stateFasilitasKesehatan.layananunggulan)
  return <Box>
    <Text fw={"bold"}>Layanan Unggulan</Text>
-    <BeritaEditor onSubmit={(val) => {
-      informasiumumState.create.form.content = val
-      informasiumumState.create.create()
+    <KesehatanEditor 
+    showSubmit={false}
+    onChange={(val) => {
+      informasiumumState.create.form.content = val;
    }} />
  </Box>
    ;
--- 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,28 +1,91 @@
 "use client"

-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
-import { Box, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/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';
 import { useProxy } from 'valtio/utils';
-import DokterdanTenagaMedisList from './dokterdantenagamedis/listData';
 import DokterDanTenagaMedis from './dokterdantenagamedis/page';
-import FasilitasPendukungList from './fasilitas_pendukung/listData';
 import FasilitasPendukung from './fasilitas_pendukung/page';
 import InformasiUmum from './informasi_umum/page';
-import LayananUnggulanList from './layanan_unggulan/layananUnggulanList';
 import LayananUnggulan from './layanan_unggulan/page';
 import ProsedurPendaftaran from './prosedurpendaftaran/page';
-import TarifDanLayananList from './tarifdanlayanan/listData';
 import TarifDanLayanan from './tarifdanlayanan/page';
-import ListProsedurPendaftaran from './prosedurpendaftaran/listData';


 function FasilitasKesehatan() {
+  const allState = useProxy(stateFasilitasKesehatan)
+  const submitAllForms = () => {
+    if (allState.informasiumum.create.form.fasilitas &&
+      allState.informasiumum.create.form.alamat &&
+      allState.informasiumum.create.form.jamOperasional) {
+      allState.informasiumum.create.create()
+    }

+    if (allState.layananunggulan.create.form.content) {
+      allState.layananunggulan.create.create();
+    }

+    if (allState.dokterdantenagamedis.create.form.name &&
+      allState.dokterdantenagamedis.create.form.specialist &&
+      allState.dokterdantenagamedis.create.form.jadwal) {
+      allState.dokterdantenagamedis.create.create()
+    }
+
+    if (allState.fasilitaspendukung.create.form.content) {
+      allState.fasilitaspendukung.create.create();
+    }
+
+    if (allState.tarifdanlayanan.create.form.tarif &&
+      allState.tarifdanlayanan.create.form.layanan) {
+      allState.tarifdanlayanan.create.create()
+    }
+
+    if (allState.prosedurpendaftaran.create.form.content) {
+      allState.prosedurpendaftaran.create.create();
+    }
+
+    // refreshListData();
+    // resetAllForms();
+  }
+
+  // const refreshListData = () => {
+  //   allState.informasiumum.findMany.load();
+  //   allState.layananunggulan.findMany.load();
+  //   allState.dokterdantenagamedis.findMany.load();
+  //   allState.fasilitaspendukung.findMany.load();
+  //   allState.tarifdanlayanan.findMany.load();
+  //   allState.prosedurpendaftaran.findMany.load();
+  // }
+
+  // const resetAllForms = () => {
+  //   allState.informasiumum.create.form = {
+  //     fasilitas: '',
+  //     alamat: '',
+  //     jamOperasional: ''
+  //   };
+  //   allState.layananunggulan.create.form = {
+  //     content: ''
+  //   };
+  //   allState.dokterdantenagamedis.create.form = {
+  //     name: '',
+  //     specialist: '',
+  //     jadwal: ''
+  //   };
+  //   allState.fasilitaspendukung.create.form = {
+  //     content: ''
+  //   };
+  //   allState.tarifdanlayanan.create.form = {
+  //     tarif: '',
+  //     layanan: ''
+  //   };
+  //   allState.prosedurpendaftaran.create.form = {
+  //     content: ''
+  //   };
+  // }

  return (
-    <Stack>
+    <Stack py={10}>
      <SimpleGrid cols={{
        base: 1, md: 2
      }}>
@@ -32,33 +95,23 @@ function FasilitasKesehatan() {
            {/* Informasi Umum */}
            <InformasiUmum />
            {/* Layanan Unggulan */}
-            <LayananUnggulan/>
+            <LayananUnggulan />
            {/* Dokter & Tenaga Medis */}
-            <DokterDanTenagaMedis/>
+            <DokterDanTenagaMedis />
            {/* Fasilitas Pendukung */}
-            <FasilitasPendukung/>
+            <FasilitasPendukung />
            {/* Tarif & Layanan */}
-            <TarifDanLayanan/>
+            <TarifDanLayanan />
            {/* Prosedur Pendaftaran */}
-            <ProsedurPendaftaran/>
+            <ProsedurPendaftaran />
+            <Button onClick={submitAllForms}>Submit</Button>
          </Stack>
        </Box>

        <Box>
          <Stack gap={"xs"}>
-          <Title order={3}>List Fasilitas Kesehatan</Title>
-          <Title order={4}>Informasi Umum</Title>
-          <InformasiUmumList/>
-          <Title order={4}>Layanan Unggulan</Title>
-          <LayananUnggulanList/>
-          <Title order={4}>Dokter & Tenaga Medis</Title>
-          <DokterdanTenagaMedisList/>
-          <Title order={4}>Fasilitas Pendukung</Title>
-          <FasilitasPendukungList/>
-          <Title order={4}>Tarif & Layanan</Title>
-          <TarifDanLayananList/>
-          <Title order={4}>Prosedur Pendaftaran</Title>
-          <ListProsedurPendaftaran/>
+            <Title order={3}>List Fasilitas Kesehatan</Title>
+            <AllList />
          </Stack>
        </Box>
      </SimpleGrid>
@@ -67,24 +120,121 @@ function FasilitasKesehatan() {
  );
 }

-function InformasiUmumList(){
-  const infromasiState = useProxy(stateKesehatan)
+function AllList() {
+  const allListState = useProxy(stateFasilitasKesehatan)
  useShallowEffect(() => {
-    infromasiState.informasiumum.findMany.load()
+    allListState.informasiumum.findMany.load();
+    allListState.layananunggulan.findMany.load();
+    allListState.dokterdantenagamedis.findMany.load();
+    allListState.fasilitaspendukung.findMany.load();
+    allListState.tarifdanlayanan.findMany.load();
+    allListState.prosedurpendaftaran.findMany.load();
  }, [])

-  if (!infromasiState.informasiumum.findMany.data) return <Stack>
+  if (!allListState.informasiumum.findMany.data
+    || !allListState.layananunggulan.findMany.data
+    || !allListState.dokterdantenagamedis.findMany.data
+    || !allListState.fasilitaspendukung.findMany.data
+    || !allListState.tarifdanlayanan.findMany.data
+    || !allListState.prosedurpendaftaran.findMany.data
+  ) return <Stack>
    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
  </Stack>
  return <Stack>
-    {infromasiState.informasiumum.findMany.data?.map((item) => (
+    <Title order={4}>Informasi Umum</Title>
+    {allListState.informasiumum.findMany.data?.map((item) => (
      <Box key={item.id}>
-        
+
        <Text>{item.fasilitas}</Text>
        <Text>{item.alamat}</Text>
        <Text>{item.jamOperasional}</Text>
      </Box>
    ))}
+
+    <Title order={4}>Layanan Unggulan</Title>
+    {allListState.layananunggulan.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+      </Box>
+    ))}
+
+
+    <Title order={4}>Dokter & Tenaga Medis</Title>
+    
+    <Table
+      striped
+      highlightOnHover
+      withTableBorder
+      withColumnBorders
+      bg={colors['white-1']}
+    >
+      <TableThead >
+        <TableTr >
+          <TableTh >
+            <Center>Nama</Center>
+          </TableTh>
+          <TableTh >
+            <Center>Specialist</Center>
+          </TableTh>
+          <TableTh >
+            <Center>Jadwal</Center>
+          </TableTh>
+        </TableTr>
+      </TableThead>
+      <TableTbody >
+        {allListState.dokterdantenagamedis.findMany.data?.map((item) => (
+          <TableTr key={item.id}>
+            <TableTd ta="center">{item.name}</TableTd>
+            <TableTd ta="center">Specialist {item.specialist}</TableTd>
+            <TableTd ta="center">{item.jadwal}</TableTd>
+          </TableTr>
+        ))}
+      </TableTbody>
+    </Table>
+
+    <Title order={4}>Fasilitas Pendukung</Title>
+    {allListState.fasilitaspendukung.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+      </Box>
+    ))}
+
+    <Title order={4}>Tarif & Layanan</Title>
+    <Table
+      suppressHydrationWarning
+      striped
+      highlightOnHover
+      withTableBorder
+      withColumnBorders
+      bg={colors['white-1']}
+    >
+      <TableThead>
+        <TableTr>
+          <TableTh>
+            Layanan
+          </TableTh>
+          <TableTh>
+            Tarif
+          </TableTh>
+        </TableTr>
+      </TableThead>
+      <TableTbody>
+        {allListState.tarifdanlayanan.findMany.data?.map((item) => (
+          <TableTr key={item.id}>
+            <TableTd>{item.layanan}</TableTd>
+            <TableTd>Rp.{item.tarif}</TableTd>
+          </TableTr>
+        ))}
+      </TableTbody>
+    </Table>
+
+    <Title order={4}>Prosedur Pendaftaran</Title>
+    {allListState.prosedurpendaftaran.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Text dangerouslySetInnerHTML={{__html: item.content}}/>
+      </Box>
+    ))}
+
  </Stack>
 }

--- 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,10 +1,10 @@
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
 import { Box, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';

 function ListProsedurPendaftaran() {
-  const prosedurpendaftaranState = useProxy(stateKesehatan.prosedurpendaftaran)
+  const prosedurpendaftaranState = useProxy(stateFasilitasKesehatan.prosedurpendaftaran)
  useShallowEffect(() => {
    prosedurpendaftaranState.findMany.load()
  }, [])
--- 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,16 +1,17 @@
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
 import { Box, Text } from '@mantine/core';
-import { BeritaEditor } from '@/app/admin/(dashboard)/desa/berita/_com/BeritaEditor';
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
 import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';

 function ProsedurPendaftaran() {
-  const prosedurpendaftaranState = useProxy(stateKesehatan.prosedurpendaftaran)
+  const prosedurpendaftaranState = useProxy(stateFasilitasKesehatan.prosedurpendaftaran)
  return <Box>
      <Text fw={"bold"}>Prosedur Pendaftaran</Text>
-      <BeritaEditor onSubmit={(val) => {
-        prosedurpendaftaranState.create.form.content = val
-        prosedurpendaftaranState.create.create()
-      }} />
+      <KesehatanEditor 
+          showSubmit={false}
+          onChange={(val) => {
+            prosedurpendaftaranState.create.form.content = val;
+          }} />
    </Box>
  
 }
--- 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 stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
 import colors from '@/con/colors';
 import { Center, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
@@ -6,7 +6,7 @@ import _ from 'lodash';
 import { useProxy } from 'valtio/utils';

 function TarifDanLayananList() {
-  const tarifdanlayanan = useProxy(stateKesehatan.tarifdanlayanan)
+  const tarifdanlayanan = useProxy(stateFasilitasKesehatan.tarifdanlayanan)
  useShallowEffect(() => {
    tarifdanlayanan.findMany.load()
  }, [])
--- 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,10 +1,9 @@
-import { Box, Button, Text, TextInput } from '@mantine/core';
-import React from 'react';
+import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/fasilitasKesehatan';
+import { Box, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
-import stateKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/kesehatan';

 function TarifDanLayanan() {
-  const tarifdanlayanan = useProxy(stateKesehatan.tarifdanlayanan)
+  const tarifdanlayanan = useProxy(stateFasilitasKesehatan.tarifdanlayanan)
  return <Box>
  <Text fw={"bold"}>Tarif & Layanan</Text>
  <TextInput
@@ -22,11 +21,6 @@ function TarifDanLayanan() {
      tarifdanlayanan.create.form.layanan = val.target.value
    }}
  />
-  <Button
-    onClick={() => {
-      tarifdanlayanan.create.create()
-    }}
-  >Simpan</Button>
 </Box>
 }

--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/grafik_hasil_kepuasan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/grafik_hasil_kepuasan/page.tsx
@@ -0,0 +1,12 @@
+import { Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function GrafikHasilKepuasan() {
+  return (
+    <Stack py={10}>
+      <Title order={3}>Grafik Hasil Kepuasan</Title>
+    </Stack>
+  );
+}
+
+export default GrafikHasilKepuasan;
--- 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
@@ -0,0 +1,13 @@
+import { Box, Text } from '@mantine/core';
+import TextEditor from '../../../_com/TextEditor';
+
+function DeskripsiKegiatan() {
+  return (
+    <Box>
+      <Text pt={10} fw={"bold"}>Deskripsi Kegiatan</Text>
+      <TextEditor/>
+    </Box>
+  );
+}
+
+export default DeskripsiKegiatan;
--- 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
@@ -0,0 +1,15 @@
+import { Box, Text } from '@mantine/core';
+import TextEditor from '../../../_com/TextEditor';
+
+function DokumenYangDiperlukan() {
+  return (
+    <Box>
+      <Text pt={10} fw={"bold"}>Dokumen Yang Diperlukan</Text>
+      <TextEditor/>
+    </Box>
+  );
+}
+
+export default DokumenYangDiperlukan;
+
+
--- 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
@@ -0,0 +1,27 @@
+import { Box, Text, TextInput } from '@mantine/core';
+
+function InformasiKegiatan() {
+  return (
+    <Box>
+      <Text pt={10} fw={"bold"}>Informasi Kegiatan</Text>
+      <TextInput
+        label="Nama Kegiatan"
+        placeholder="Masukkan nama kegiatan"
+      />
+      <TextInput
+        label="Tanggal"
+        placeholder="Masukkan tanggal kegiatan"
+      />
+      <TextInput
+        label="Waktu"
+        placeholder="Masukkan waktu kegiatan"
+      />
+      <TextInput
+        label="Lokasi"
+        placeholder="Masukkan lokasi kegiatan"
+      />
+    </Box>
+  );
+}
+
+export default InformasiKegiatan;
--- 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
@@ -0,0 +1,13 @@
+import { Box, Text } from '@mantine/core';
+import TextEditor from '../../../_com/TextEditor';
+
+function LayananTersedia() {
+  return (
+    <Box>
+      <Text pt={10} fw={"bold"}>Layanan Yang Tersedia</Text>
+      <TextEditor/>
+    </Box>
+  );
+}
+
+export default LayananTersedia;
--- 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,18 +1,26 @@
-import { Box, SimpleGrid, Stack, TextInput, Title } from '@mantine/core';
-import React from 'react';
+import { Box, Button, SimpleGrid, Stack, Title } from '@mantine/core';
+import InformasiKegiatan from './informasi_kegiatan/page';
+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 Pendaftaran from './pendaftaran/page';

 function JadwalKegiatan() {
  return (
-    <Stack>
+    <Stack py={10}>
      <SimpleGrid cols={{
        base: 1, md: 2
      }}>
        <Box>
          <Title order={3}>Jadwal Kegiatan</Title>
-          <TextInput
-            label="Jadwal"
-            placeholder='masukkan jadwal kegiatan'
-          />
+          <InformasiKegiatan/>
+          <DeskripsiKegiatan/>
+          <LayananTersedia/>
+          <SyaratDanKetentuan/>
+          <DokumenYangDiperlukan/>
+          <Pendaftaran/>
+          <Button mt={10} fullWidth>Submit</Button>
        </Box>
        <Box>
          <Title order={3}>List Jadwal Kegiatan</Title>
--- 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
@@ -0,0 +1,48 @@
+'use client'
+import { ActionIcon, Box, Text, Textarea, TextInput } from '@mantine/core';
+import { DateInput } from '@mantine/dates';
+import { IconCalendar } from '@tabler/icons-react';
+import { useState } from 'react';
+
+function Pendaftaran() {
+    const [dateInputOpened, setDateInputOpened] = useState(false);
+    const pickerControl = (
+      <ActionIcon onClick={() => setDateInputOpened(true)} variant="subtle" color="gray">
+        <IconCalendar size={18} />
+      </ActionIcon>
+    );
+  return (
+    <Box>
+      <Text pt={10} fw={"bold"}>Pendaftaran</Text>
+      <TextInput
+      label='Nama Balita'
+      placeholder='Masukkan nama balita'
+      />
+      <DateInput
+      styles={{label: {fontSize: '14px'}}}
+      label='Tanggal Lahir'
+      placeholder='dd/mm/yyyy'
+      popoverProps={{opened: dateInputOpened, onChange: setDateInputOpened}}
+      rightSection={pickerControl}
+      />
+      <TextInput
+      label='Nama Orang Tua / Wali'
+      placeholder='Masukkan nama orang tua / wali'
+      />
+      <TextInput
+      label='No. Telepon'
+      placeholder='Masukkan no. telepon'
+      />
+      <TextInput
+      label='Alamat'
+      placeholder='Masukkan alamat'
+      />
+      <Textarea
+      label='Catatan Khusus (Opsional)'
+      placeholder='Masukkan catatan khusus'
+      />
+    </Box>
+  );
+}
+
+export default Pendaftaran;
--- 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
@@ -0,0 +1,14 @@
+import { Box, Text } from '@mantine/core';
+import React from 'react';
+import TextEditor from '../../../_com/TextEditor';
+
+function SyaratDanKetentuan() {
+  return (
+    <Box>
+      <Text pt={10} fw={"bold"}>Syarat dan Ketentuan</Text>
+      <TextEditor/>
+    </Box>
+  );
+}
+
+export default SyaratDanKetentuan;
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/persentase_data_kelahiran_kematian/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/persentase_data_kelahiran_kematian/page.tsx
@@ -0,0 +1,12 @@
+import { Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function PersentaseDataKelahiranKematian() {
+  return (
+    <Stack py={10}>
+      <Title order={3}>Persentase Data Kelahiran & Kematian</Title>
+    </Stack>
+  );
+}
+
+export default PersentaseDataKelahiranKematian;
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/page.tsx
@@ -1,18 +1,53 @@
-import { Stack } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from '@mantine/core';
 import ArtikelKesehatan from './_ui/artikel_kesehatan/page';
 import FasilitasKesehatan from './_ui/fasilitas_kesehatan/page';
 import JadwalKegiatan from './_ui/jadwal_kegiatan/page';
+import PersentaseDataKelahiranKematian from './_ui/persentase_data_kelahiran_kematian/page';
+import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan/page';
+import colors from '@/con/colors';


 function Page() {
  return (
    <Stack>
-        <FasilitasKesehatan/>
-        <JadwalKegiatan/>
-        <ArtikelKesehatan/>
+      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Persentase Kelahiran & Kematian"}>
+        <TabsList >
+          <TabsTab value="Persentase Kelahiran & Kematian">
+            Persentase Kelahiran & Kematian
+          </TabsTab>
+          <TabsTab value="Grafik Hasil Kepuasan">
+            Grafik Hasil Kepuasan
+          </TabsTab>
+          <TabsTab value="Fasilitas Kesehatan">
+            Fasilitas Kesehatan
+          </TabsTab>
+          <TabsTab value="Jadwal Kegiatan">
+            Jadwal Kegiatan
+          </TabsTab>
+          <TabsTab value="Artikel Kesehatan">
+            Artikel Kesehatan
+          </TabsTab>
+        </TabsList>
+
+        <TabsPanel value="Persentase Kelahiran & Kematian">
+          <PersentaseDataKelahiranKematian />
+        </TabsPanel>
+        <TabsPanel value="Grafik Hasil Kepuasan">
+          <GrafikHasilKepuasan/>
+        </TabsPanel>
+        <TabsPanel value="Fasilitas Kesehatan">
+          <FasilitasKesehatan/>
+        </TabsPanel>
+        <TabsPanel value="Jadwal Kegiatan">
+          <JadwalKegiatan/>
+        </TabsPanel>
+        <TabsPanel value="Artikel Kesehatan">
+          <ArtikelKesehatan/>
+        </TabsPanel>
+
+      </Tabs>
    </Stack>
  );
 }

-export default Page;
-//Fasilitas Kesehatan Jadwal Kegiatan Artikel Kesehatan
+export default Page;
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -39,9 +39,6 @@ export default function Layout({ children }: { children: React.ReactNode }) {
        c={colors["blue-button"]}
        component={ScrollArea}
      >
-        <AppShell.Section h={100} bg={"gray.1"}>
-          <Text c={colors["blue-button"]}>Heder Navbar</Text>
-        </AppShell.Section>
        <AppShell.Section >
          {navBar.map((v, k) => {
            return (
@@ -73,7 +70,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
          })}
        </AppShell.Section>

-        <AppShell.Section>
+        <AppShell.Section py={20}>
          <Group justify="end">
            <ActionIcon variant="light" onClick={toggleDesktop}><IconChevronLeft /></ActionIcon>
          </Group>