Senin, 19 May 2025 :

Yang Sudah Di Kerjakan
- Tampilan UI Admin di menu kesehatan

Yang Akan Dikerjakan:
- API Di Menu Desa
- Tampilan UI Admin Di Menu Keamanan

src/app/admin/(dashboard)/kesehatan/_com/kesehatanEditor.tsx

@@ -0,0 +1,93 @@
+'use client'
+import colors from '@/con/colors';
+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({showSubmit = true} : {
+  showSubmit: boolean
+}) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content,
+  });
+
+  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
+          mt={10}
+          bg={colors['blue-button']}
+        >
+          Submit
+        </Button>
+      )}
+    </Stack>
+  );
+}

src/app/admin/(dashboard)/kesehatan/_com/kesehatanEditorText.tsx

@@ -0,0 +1,95 @@
+'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';
+
+
+function KesehatanEditorText({ onSubmit, onChange, showSubmit = true, initialContent = '', }: { 
+  onSubmit?: (val: string) => void, 
+  onChange: (val: string) => void, 
+  showSubmit?: boolean,
+  initialContent?: string }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content: initialContent,
+    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>
+  );
+}
+
+export default KesehatanEditorText;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/doctor_sign/page.tsx

@@ -1,21 +1,24 @@
 'use client'
-import { Box, Text } from '@mantine/core';
+import { Box, Paper, Text } from '@mantine/core';
 import React from 'react';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
 import { useProxy } from 'valtio/utils';
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import colors from '@/con/colors';
 
 function DoctorSignUI() {
   const doctorSign = useProxy(stateArtikelKesehatan.doctorSign)
   return (
     <Box>
-      <Text fw={"bold"}>Kapan Harus ke Dokter</Text>
-      <KesehatanEditor 
-      showSubmit={false}
-      onChange={(val) => {
-        doctorSign.create.form.content = val
-      }}
-      />
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Text fw={"bold"}>Kapan Harus ke Dokter</Text>
+        <KesehatanEditor
+          showSubmit={false}
+          onChange={(val) => {
+            doctorSign.create.form.content = val
+          }}
+        />
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/first_aid/page.tsx

@@ -1,27 +1,32 @@
 'use client'
-import { Box, Text, TextInput } from '@mantine/core';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function FirstAidUI() {
   const firstAidState = useProxy(stateArtikelKesehatan.firstAid)
   return (
     <Box>
-    <TextInput
-    label={<Text fw={"bold"}>Title Pertolongan Pertama</Text>}
-    placeholder="Masukkan title"
-    onChange={(val) => {
-      firstAidState.create.form.title = val.target.value
-    }}
-    /> 
-    <KesehatanEditor
-    showSubmit={false}
-    onChange={(val) => {
-      firstAidState.create.form.content = val
-    }}
-    />
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <TextInput
+            label={<Text fw={"bold"}>Judul Pertolongan Pertama</Text>}
+            placeholder="Masukkan judul"
+            onChange={(val) => {
+              firstAidState.create.form.title = val.target.value
+            }}
+          />
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              firstAidState.create.form.content = val
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/introduction/page.tsx

@@ -1,21 +1,26 @@
 'use client'
-import { Box, Text } from '@mantine/core';
+import { Box, Paper, Stack, Text } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import colors from '@/con/colors';
 
 function IntoductionUI() {
   const introduction = useProxy(stateArtikelKesehatan.introduction)
   return (
-    <Box py={10}>
-    <Text fw={"bold"}>Pendahuluan</Text>
-    <KesehatanEditor
-    showSubmit={false}
-    onChange={(val) => {
-      introduction.create.form.content = val;
-    }}
-    />
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text fw={"bold"}>Pendahuluan</Text>
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              introduction.create.form.content = val;
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/mythVsfact/page.tsx

@@ -1,33 +1,38 @@
 'use client'
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 
 function MythFactUI() {
   const mythFact = useProxy(stateArtikelKesehatan.mythFact)
   return (
-    <Box py={10}>
-      <TextInput
-      label={<Text fw={"bold"}>Title Pertolongan Pertama Penyakit</Text>}
-      placeholder="Masukkan title"
-      onChange={(val) => {
-        mythFact.create.form.title = val.target.value
-      }}
-      />
-      <TextInput
-      label={<Text fw={"bold"}>Mitos</Text>}
-      placeholder="Masukkan mitos"
-      onChange={(val) => {
-        mythFact.create.form.mitos = val.target.value
-      }}
-      />
-      <TextInput
-      label={<Text fw={"bold"}>Fakta</Text>}
-      placeholder="Masukkan fakta"
-      onChange={(val) => {
-        mythFact.create.form.fakta = val.target.value
-      }}
-      />
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <TextInput
+            label={<Text fw={"bold"}>Judul Pertolongan Pertama Penyakit</Text>}
+            placeholder="Masukkan judul"
+            onChange={(val) => {
+              mythFact.create.form.title = val.target.value
+            }}
+          />
+          <TextInput
+            label={<Text fw={"bold"}>Mitos</Text>}
+            placeholder="Masukkan mitos"
+            onChange={(val) => {
+              mythFact.create.form.mitos = val.target.value
+            }}
+          />
+          <TextInput
+            label={<Text fw={"bold"}>Fakta</Text>}
+            placeholder="Masukkan fakta"
+            onChange={(val) => {
+              mythFact.create.form.fakta = val.target.value
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

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

@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Center, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Group, Paper, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import IntoductionUI from './introduction/page';
 import SymptomUI from './symptom/page';
 import PreventionUI from './prevention/page';
@@ -39,19 +39,25 @@ function ArtikelKesehatan() {
         base: 1, md: 2
       }}>
         <Box >
-          <Title order={3}>Artikel Kesehatan</Title>
-          <IntoductionUI />
-          <SymptomUI />
-          <PreventionUI />
-          <FirstAidUI />
-          <MythFactUI />
-          <DoctorSignUI />
-          <Button mt={10} onClick={submitAllForms}>Submit</Button>
+          <Stack gap={"xs"}>
+            <Title order={4}>Artikel Kesehatan</Title>
+            <IntoductionUI />
+            <SymptomUI />
+            <PreventionUI />
+            <FirstAidUI />
+            <MythFactUI />
+            <DoctorSignUI />
+            <Group>
+              <Button bg={colors['blue-button']} mt={10} onClick={submitAllForms}>Submit</Button>
+            </Group>
+          </Stack>
         </Box>
 
         <Box>
-          <Title order={3}>List Artikel Kesehatan</Title>
-          <AllList />
+          <Stack gap={"xs"}>
+            <Title order={4}>Data Artikel Kesehatan</Title>
+            <AllList />
+          </Stack>
         </Box>
       </SimpleGrid>
     </Stack>
@@ -78,71 +84,88 @@ function AllList() {
   ) return <Stack>
     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
   </Stack>
-  return <Stack>
-    <Title order={4}>Intoduction</Title>
-    {listState.introduction.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-      </Box>
-    ))}
+  return <Stack gap={"xs"}>
+    {/* Introduction */}
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Title order={4}>Pendahuluan</Title>
+      {listState.introduction.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+        </Box>
+      ))}
+    </Paper>
     {/* Symptom */}
-    {listState.symptom.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Title order={4}>{item.title}</Title>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Title order={4}>Gejala Penyakit</Title>
+      {listState.symptom.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Title order={4}>{item.title}</Title>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+        </Box>
+      ))}
+    </Paper>
     {/* Prevention */}
-    {listState.prevention.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Title order={4}>{item.title}</Title>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
+    <Title order={4}>Pencegahan Penyakit</Title>
+      {listState.prevention.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Title order={4}>{item.title}</Title>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+        </Box>
+      ))}
+    </Paper>
     {/* First Aid */}
-    {listState.firstAid.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Title order={4}>{item.title}</Title>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
+    <Title order={4}>Pertolongan Pertama</Title>
+      {listState.firstAid.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Title order={4}>{item.title}</Title>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+        </Box>
+      ))}
+    </Paper>
     {/* Myth Fact */}
-    {listState.mythFact.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Title order={4}>{item.title}</Title>
-        <Table
-          striped
-          highlightOnHover
-          withTableBorder
-          withColumnBorders
-          bg={colors['white-1']}
-        >
-          <TableThead >
-            <TableTr >
-              <TableTh >
-                <Center>Mitos</Center>
-              </TableTh>
-              <TableTh >
-                <Center>Fakta</Center>
-              </TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody >
-            <TableTr>
-              <TableTd ta="center">{item.mitos}</TableTd>
-              <TableTd ta="center">{item.fakta}</TableTd>
-            </TableTr>
-          </TableTbody>
-        </Table>
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
+    <Title order={4}>Mitos vs Fakta</Title>
+      {listState.mythFact.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Title order={4}>{item.title}</Title>
+          <Table
+            striped
+            highlightOnHover
+            withTableBorder
+            withColumnBorders
+            bg={colors['white-1']}
+          >
+            <TableThead >
+              <TableTr >
+                <TableTh >
+                  <Center>Mitos</Center>
+                </TableTh>
+                <TableTh >
+                  <Center>Fakta</Center>
+                </TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody >
+              <TableTr>
+                <TableTd ta="center">{item.mitos}</TableTd>
+                <TableTd ta="center">{item.fakta}</TableTd>
+              </TableTr>
+            </TableTbody>
+          </Table>
+        </Box>
+      ))}
+    </Paper>
     {/* Doctor Sign */}
-    <Title order={4}>Kapan Harus Ke Dokter?</Title>
-    {listState.doctorSign.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }}/>
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Title order={4}>Kapan Harus Ke Dokter?</Title>
+      {listState.doctorSign.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+        </Box>
+      ))}
+    </Paper>
   </Stack>
 }
 

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/prevention/page.tsx

@@ -1,28 +1,33 @@
 'use client'
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function PreventionUI() {
   const preventionState = useProxy(stateArtikelKesehatan.prevention)
   return (
-    <Box py={10}>
-      <TextInput
-      mb={10}
-        label={<Text fw={"bold"}>Title Pencegahan Penyakit</Text>}
-        placeholder="Masukkan title"
-        onChange={(val) => {
-          preventionState.create.form.title = val.target.value
-        }}
-      />
-      <KesehatanEditor
-        showSubmit={false}
-        onChange={(val) => {
-          preventionState.create.form.content = val
-        }}
-      />
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <TextInput
+            mb={10}
+            label={<Text fw={"bold"}>Judul Pencegahan Penyakit</Text>}
+            placeholder="Masukkan judul"
+            onChange={(val) => {
+              preventionState.create.form.title = val.target.value
+            }}
+          />
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              preventionState.create.form.content = val
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/symptom/page.tsx

@@ -1,27 +1,32 @@
 'use client'
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function SymptomUI() {
   const symptomState = useProxy(stateArtikelKesehatan.symptom)
   return (
-    <Box py={10}>
-      <TextInput
-      mb={10}
-        label={<Text fw={"bold"}>Title Gejala Penyakit</Text>}
-        placeholder='masukkan title'
-        onChange={(val) => {
-          symptomState.create.form.title = val.target.value
-        }}
-      />
-      <KesehatanEditor
-        showSubmit={false}
-        onChange={(val) => {
-          symptomState.create.form.content = val
-        }}
-      />
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <TextInput
+            mb={10}
+            label={<Text fw={"bold"}>Judul Gejala Penyakit</Text>}
+            placeholder='masukkan judul'
+            onChange={(val) => {
+              symptomState.create.form.title = val.target.value
+            }}
+          />
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              symptomState.create.form.content = val
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

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

@@ -1,12 +1,15 @@
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 
 function DokterDanTenagaMedis() {
   const dokterdantenagamedisState = useProxy(stateFasilitasKesehatan.dokterdantenagamedis)
   return (
     <Box>
-      <Text fw={"bold"}>Dokter & Tenaga Medis</Text>
+      <Paper bg={colors['white-1']} p={"md"}>
+        <Stack gap={"xs"}>
+        <Text fw={"bold"}>Dokter & Tenaga Medis</Text>
       <TextInput
         label="Nama Dokter"
         placeholder='masukkan nama dokter'
@@ -29,6 +32,8 @@ function DokterDanTenagaMedis() {
           dokterdantenagamedisState.create.form.jadwal = val.target.value
         }}
       />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

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

@@ -1,17 +1,20 @@
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text } from '@mantine/core';
+import { Box, Paper, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function FasilitasPendukung() {
   const fasilitaspendukungState = useProxy(stateFasilitasKesehatan.fasilitaspendukung)
   return <Box>
-    <Text fw={"bold"}>Fasilitas Pendukung</Text>
-    <KesehatanEditor 
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Text fw={"bold"}>Fasilitas Pendukung</Text>
+      <KesehatanEditor
         showSubmit={false}
         onChange={(val) => {
           fasilitaspendukungState.create.form.content = val;
         }} />
+    </Paper>
   </Box>
 }
 

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

@@ -1,35 +1,40 @@
 'use client'
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 
 function InformasiUmum() {
   const infromasiState = useProxy(stateFasilitasKesehatan.informasiumum)
-  return<Box>
-      <Text fw={"bold"}>Informasi Umum</Text>
-      <TextInput
-        label="Fasilitas"
-        placeholder='masukkan nama fasilitas kesehatan'
-        onChange={(val) => {
-          infromasiState.create.form.fasilitas = val.target.value
-        }}
-      />
-      <TextInput
-        label="Alamat"
-        placeholder='masukkan alamat'
-        onChange={(val) => {
-          infromasiState.create.form.alamat = val.target.value
-        }}
-      />
-      <TextInput
-        mb={10}
-        label="Jam Operasional"
-        placeholder='masukkan jam operasional'
-        onChange={(val) => {
-          infromasiState.create.form.jamOperasional = val.target.value
-        }}
-      />
-    </Box>
+  return <Box>
+    <Paper bg={colors['white-1']} p={'md'}>
+    <Text fw={"bold"}>Informasi Umum</Text>
+      <Stack gap={"xs"}>
+        <TextInput
+          label="Fasilitas"
+          placeholder='masukkan nama fasilitas kesehatan'
+          onChange={(val) => {
+            infromasiState.create.form.fasilitas = val.target.value
+          }}
+        />
+        <TextInput
+          label="Alamat"
+          placeholder='masukkan alamat'
+          onChange={(val) => {
+            infromasiState.create.form.alamat = val.target.value
+          }}
+        />
+        <TextInput
+          mb={10}
+          label="Jam Operasional"
+          placeholder='masukkan jam operasional'
+          onChange={(val) => {
+            infromasiState.create.form.jamOperasional = val.target.value
+          }}
+        />
+      </Stack>
+    </Paper>
+  </Box>
 }
 
 export default InformasiUmum;

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

@@ -1,18 +1,21 @@
 'use client'
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text } from '@mantine/core';
+import { Box, Paper, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function LayananUnggulan() {
   const informasiumumState = useProxy(stateFasilitasKesehatan.layananunggulan)
   return <Box>
+    <Paper bg={colors['white-1']} p={'md'}>
     <Text fw={"bold"}>Layanan Unggulan</Text>
     <KesehatanEditor 
     showSubmit={false}
     onChange={(val) => {
       informasiumumState.create.form.content = val;
     }} />
+    </Paper>
   </Box>
     ;
 }

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

@@ -2,7 +2,7 @@
 
 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 { Box, Button, Center, Paper, 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 DokterDanTenagaMedis from './dokterdantenagamedis/page';
@@ -91,7 +91,7 @@ function FasilitasKesehatan() {
       }}>
         <Box>
           <Stack gap={'xs'}>
-            <Title order={3}>Fasilitas Kesehatan</Title>
+            <Title order={4}>Tambah Fasilitas Kesehatan</Title>
             {/* Informasi Umum */}
             <InformasiUmum />
             {/* Layanan Unggulan */}
@@ -110,7 +110,7 @@ function FasilitasKesehatan() {
 
         <Box>
           <Stack gap={"xs"}>
-            <Title order={3}>List Fasilitas Kesehatan</Title>
+            <Title order={4}>Data Fasilitas Kesehatan</Title>
             <AllList />
           </Stack>
         </Box>
@@ -141,100 +141,113 @@ function AllList() {
     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
   </Stack>
   return <Stack>
-    <Title order={4}>Informasi Umum</Title>
-    {allListState.informasiumum.findMany.data?.map((item) => (
-      <Box key={item.id}>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <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>
-    ))}
+          <Text>{item.fasilitas}</Text>
+          <Text>{item.alamat}</Text>
+          <Text>{item.jamOperasional}</Text>
+        </Box>
+      ))}
+    </Paper>
 
-    <Title order={4}>Layanan Unggulan</Title>
-    {allListState.layananunggulan.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }} />
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Title order={4}>Layanan Unggulan</Title>
+      {allListState.layananunggulan.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+        </Box>
+      ))}
+    </Paper>
 
 
-    <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>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <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>
-        ))}
-      </TableTbody>
-    </Table>
+        </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>
+    </Paper>
 
-    <Title order={4}>Fasilitas Pendukung</Title>
-    {allListState.fasilitaspendukung.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }} />
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
 
-    <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>
+      <Title order={4}>Fasilitas Pendukung</Title>
+      {allListState.fasilitaspendukung.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+        </Box>
+      ))}
+    </Paper>
+
+    <Paper bg={colors['white-1']} p={'md'}>
+      <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>
-        ))}
-      </TableTbody>
-    </Table>
+        </TableThead>
+        <TableTbody>
+          {allListState.tarifdanlayanan.findMany.data?.map((item) => (
+            <TableTr key={item.id}>
+              <TableTd>{item.layanan}</TableTd>
+              <TableTd>Rp.{item.tarif}</TableTd>
+            </TableTr>
+          ))}
+        </TableTbody>
+      </Table>
+    </Paper>
 
-    <Title order={4}>Prosedur Pendaftaran</Title>
-    {allListState.prosedurpendaftaran.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Text dangerouslySetInnerHTML={{__html: item.content}}/>
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
 
+      <Title order={4}>Prosedur Pendaftaran</Title>
+      {allListState.prosedurpendaftaran.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+        </Box>
+      ))}
+    </Paper>
   </Stack>
 }
 

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

@@ -1,19 +1,22 @@
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text } from '@mantine/core';
+import { Box, Text, Paper } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function ProsedurPendaftaran() {
   const prosedurpendaftaranState = useProxy(stateFasilitasKesehatan.prosedurpendaftaran)
   return <Box>
+    <Paper bg={colors['white-1']} p={'md'}>
       <Text fw={"bold"}>Prosedur Pendaftaran</Text>
-      <KesehatanEditor 
-          showSubmit={false}
-          onChange={(val) => {
-            prosedurpendaftaranState.create.form.content = val;
-          }} />
-    </Box>
-  
+      <KesehatanEditor
+        showSubmit={false}
+        onChange={(val) => {
+          prosedurpendaftaranState.create.form.content = val;
+        }} />
+    </Paper>
+  </Box>
+
 }
 
 export default ProsedurPendaftaran;

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

@@ -1,27 +1,32 @@
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 
 function TarifDanLayanan() {
   const tarifdanlayanan = useProxy(stateFasilitasKesehatan.tarifdanlayanan)
   return <Box>
-  <Text fw={"bold"}>Tarif & Layanan</Text>
-  <TextInput
-    label="Tarif"
-    placeholder='masukkan tarif'
-    onChange={(val) => {
-      tarifdanlayanan.create.form.tarif = val.target.value
-    }}
-  />
-  <TextInput
-  mb={10}
-    label="Layanan"
-    placeholder='masukkan layanan'
-    onChange={(val) => {
-      tarifdanlayanan.create.form.layanan = val.target.value
-    }}
-  />
-</Box>
+    <Paper bg={colors['white-1']} p={'md'}>
+    <Text fw={"bold"}>Tarif & Layanan</Text>
+      <Stack gap={"xs"}>
+        <TextInput
+          label="Tarif"
+          placeholder='masukkan tarif'
+          onChange={(val) => {
+            tarifdanlayanan.create.form.tarif = val.target.value
+          }}
+        />
+        <TextInput
+          mb={10}
+          label="Layanan"
+          placeholder='masukkan layanan'
+          onChange={(val) => {
+            tarifdanlayanan.create.form.layanan = val.target.value
+          }}
+        />
+      </Stack>
+    </Paper>
+  </Box>
 }
 
 export default TarifDanLayanan;

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

@@ -2,7 +2,7 @@
 'use client'
 import stategrafikKepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
 import colors from '@/con/colors';
-import { Box, Button, Group, Stack, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, TextInput, Title } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
 import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
@@ -35,54 +35,65 @@ function GrafikHasilKepuasan() {
 
 
   return (
-    <Stack gap={"xs"}>
-      <Title order={3}>Grafik Hasil Kepuasan</Title>
-      <Box>
-        <TextInput
-          w={{ base: '100%', md: '50%' }}
-          label="Label"
-          placeholder='Masukkan label yang diinginkan'
-          value={grafikkepuasan.create.form.label}
-          onChange={(val) => {
-            grafikkepuasan.create.form.label = val.currentTarget.value
-          }}
-        />
-        <TextInput
-          w={{ base: '100%', md: '50%' }}
-          label="Jumlah Penderita"
-          type='number'
-          placeholder='Masukkan jumlah penderita'
-          value={grafikkepuasan.create.form.jumlah}
-          onChange={(val) => {
-            grafikkepuasan.create.form.jumlah = val.currentTarget.value
-          }}
-        />
-      </Box>
-      <Group>
-        <Button mt={10}
-          onClick={async () => {
-            await grafikkepuasan.create.create();
-            await grafikkepuasan.findMany.load();
-            if (grafikkepuasan.findMany.data) {
-              setChartData(grafikkepuasan.findMany.data);
-            }
-          }}
-        >Submit</Button>
-      </Group>
-      <Box h={400} w={{ base: "100%", md: "80%" }}>
-        <Title py={15} order={3}>Data Kelahiran & Kematian</Title>
-        <BarChart
-          width={isMobile ? 450 : isTablet ? 600 : 900}
-          height={380}
-          data={chartData}
-        >
-          <XAxis dataKey="label" />
-          <YAxis />
-          <Tooltip />
-          <Legend />
-          <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah" />
-        </BarChart>
-      </Box>
+    <Stack py={10} gap={"xs"}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Title order={4}>Tambah Grafik Hasil Kepuasan</Title>
+        <Stack gap={"xs"}>
+          <TextInput
+            label="Label"
+            placeholder='Masukkan label yang diinginkan'
+            value={grafikkepuasan.create.form.label}
+            onChange={(val) => {
+              grafikkepuasan.create.form.label = val.currentTarget.value
+            }}
+          />
+          <TextInput
+            label="Jumlah Penderita"
+            type='number'
+            placeholder='Masukkan jumlah penderita'
+            value={grafikkepuasan.create.form.jumlah}
+            onChange={(val) => {
+              grafikkepuasan.create.form.jumlah = val.currentTarget.value
+            }}
+          />
+          <Group>
+            <Button bg={colors['blue-button']} mt={10}
+              onClick={async () => {
+                await grafikkepuasan.create.create();
+                await grafikkepuasan.findMany.load();
+                if (grafikkepuasan.findMany.data) {
+                  setChartData(grafikkepuasan.findMany.data);
+                }
+              }}
+            >Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+      {!chartData ? (
+        <Box style={{ width: '100%', minWidth: 300, minHeight: 300 }}>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Title py={15} order={4}>Data Hasil Kepuasan</Title>
+            <Skeleton h={400} />
+          </Paper>
+        </Box>
+      ) : (
+        <Box style={{ width: '100%', minWidth: 300, minHeight: 300 }}>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Title py={15} order={4}>Data Hasil Kepuasan</Title>
+            <BarChart
+              width={isMobile ? 250 : isTablet ? 300 : 350}
+              height={380}
+              data={chartData}
+            >
+              <XAxis dataKey="label" />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah" />
+            </BarChart>
+          </Paper>
+        </Box>
+      )}
     </Stack>
   );
 }

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

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

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

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

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

@@ -1,12 +1,15 @@
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
-import { Box, Text, TextInput } from '@mantine/core';
+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>
-      <Text pt={10} fw={"bold"}>Informasi Kegiatan</Text>
+     <Paper bg={colors['white-1']} p={'md'}>
+     <Stack gap={"xs"}>
+      <Title order={4}>Informasi Kegiatan</Title>
       <TextInput
         label="Nama Kegiatan"
         placeholder="Masukkan nama kegiatan"
@@ -35,6 +38,8 @@ function InformasiKegiatan() {
           informasiKegiatanState.create.form.lokasi = val.target.value
         }}
       />
+     </Stack>
+     </Paper>
     </Box>
   );
 }

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

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

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

@@ -1,6 +1,6 @@
 '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 { 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';
@@ -9,6 +9,7 @@ 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)
@@ -54,21 +55,25 @@ function JadwalKegiatan() {
         base: 1, md: 2
       }}>
         <Box>
-          <Title order={3}>Jadwal Kegiatan</Title>
-          <InformasiKegiatan />
-          <DeskripsiKegiatan />
-          <LayananTersedia />
-          <SyaratDanKetentuan />
-          <DokumenYangDiperlukan />
-          <Pendaftaran />
-          <Button mt={10} onClick={submitAllForms}>
-            Submit
-          </Button>
+          <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>
-          <Title order={3}>List Jadwal Kegiatan</Title>
-          <AllList />
+          <Stack gap={"xs"}>
+            <Title order={4}>Data Jadwal Kegiatan</Title>
+            <AllList />
+          </Stack>
         </Box>
       </SimpleGrid>
     </Stack>
@@ -103,68 +108,82 @@ function AllList() {
     );
   }
   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>
-        )
-      })}
+    <Stack gap={"xs"}>
 
-      <Title order={4}>Deskripsi Kegiatan</Title>
-      {allList.deskripsiKegiatan.findMany.data?.map((item) => {
-        return (
-          <Box key={item.id}>
-            <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-          </Box>
-        )
-      })}
+      <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>
 
-      <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 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>
-        )
-      })}
+        <Title order={4}>Deskripsi Kegiatan</Title>
+        {allList.deskripsiKegiatan.findMany.data?.map((item) => {
+          return (
+            <Box key={item.id}>
+              <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+            </Box>
+          )
+        })}
+      </Paper>
 
-      <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 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>
 
-      <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 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>
   )
 }

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

@@ -1,56 +1,61 @@
 'use client'
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
-import { Box, Text, Textarea, TextInput } from '@mantine/core';
+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)
+  const pendaftaran = useProxy(stateJadwalKegiatan.pendaftaranjadwal)
 
   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
-      }}
-      />
-      <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
-      }}
-      />
+      <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>
   );
 }

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

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

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

@@ -1,7 +1,8 @@
 'use client'
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import statePersentase from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
-import { Box, Button, Stack, TextInput, Title } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Skeleton, Stack, TextInput, Title } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
 import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
@@ -32,76 +33,90 @@ function PersentaseDataKelahiranKematian() {
     <Stack py={10}>
       {/* Form Input */}
       <Box>
-        <Title order={3}>Persentase Data Kelahiran & Kematian</Title>
-        <TextInput
-          w={{ base: '100%', md: '50%' }}
-          label="Tahun"
-          type="number"
-          value={persentase.create.form.tahun}
-          placeholder="Masukkan tahun"
-          onChange={(val) => {
-            persentase.create.form.tahun = val.currentTarget.value;
-          }}
-        />
-        <TextInput
-          w={{ base: '100%', md: '50%' }}
-          label="Kematian Kasar"
-          type="number"
-          value={persentase.create.form.kematianKasar}
-          placeholder="Masukkan kematian kasar"
-          onChange={(val) => {
-            persentase.create.form.kematianKasar = val.currentTarget.value;
-          }}
-        />
-        <TextInput
-          w={{ base: '100%', md: '50%' }}
-          label="Kematian Bayi"
-          type="number"
-          value={persentase.create.form.kematianBayi}
-          placeholder="Masukkan kematian bayi"
-          onChange={(val) => {
-            persentase.create.form.kematianBayi = val.currentTarget.value;
-          }}
-        />
-        <TextInput
-          w={{ base: '100%', md: '50%' }}
-          label="Kelahiran Kasar"
-          type="number"
-          value={persentase.create.form.kelahiranKasar}
-          placeholder="Masukkan kelahiran kasar"
-          onChange={(val) => {
-            persentase.create.form.kelahiranKasar = val.currentTarget.value;
-          }}
-        />
-        <Button
-          mt={10}
-          onClick={async () => {
-            await persentase.create.create();
-            await persentase.findMany.load();
-            if (persentase.findMany.data) {
-              setChartData(persentase.findMany.data);
-            }
-          }}
-        >
-          Submit
-        </Button>
+        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+          <Title order={4}>Tambah Persentase Data Kelahiran & Kematian</Title>
+          <Stack gap={"xs"}>
+            <TextInput
+              label="Tahun"
+              type="number"
+              value={persentase.create.form.tahun}
+              placeholder="Masukkan tahun"
+              onChange={(val) => {
+                persentase.create.form.tahun = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Kematian Kasar"
+              type="number"
+              value={persentase.create.form.kematianKasar}
+              placeholder="Masukkan kematian kasar"
+              onChange={(val) => {
+                persentase.create.form.kematianKasar = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Kematian Bayi"
+              type="number"
+              value={persentase.create.form.kematianBayi}
+              placeholder="Masukkan kematian bayi"
+              onChange={(val) => {
+                persentase.create.form.kematianBayi = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Kelahiran Kasar"
+              type="number"
+              value={persentase.create.form.kelahiranKasar}
+              placeholder="Masukkan kelahiran kasar"
+              onChange={(val) => {
+                persentase.create.form.kelahiranKasar = val.currentTarget.value;
+              }}
+            />
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                mt={10}
+                onClick={async () => {
+                  await persentase.create.create();
+                  await persentase.findMany.load();
+                  if (persentase.findMany.data) {
+                    setChartData(persentase.findMany.data);
+                  }
+                }}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Box>
 
       {/* Chart */}
-      <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-        <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
-        {mounted && chartData.length > 0 && (
-          <BarChart width={isMobile ? 450 : isTablet ? 600 : 900} height={380} data={chartData} >
-            <XAxis dataKey="tahun" />
-            <YAxis />
-            <Tooltip />
-            <Legend />
-            <Bar dataKey="kematianKasar" fill="#f03e3e" name="Kematian Kasar" />
-            <Bar dataKey="kematianBayi" fill="#ff922b" name="Kematian Bayi" />
-            <Bar dataKey="kelahiranKasar" fill="#4dabf7" name="Kelahiran Kasar" />
-          </BarChart>
-        )}
-      </Box>
+      {!mounted && !chartData ? (
+        <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
+            <Skeleton h={400} />
+          </Paper>
+        </Box>
+      ) : (
+        <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Title pb={10} order={4}>Data Kelahiran & Kematian</Title>
+            {mounted && chartData.length > 0 && (
+              <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
+                <XAxis dataKey="tahun" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Bar dataKey="kematianKasar" fill="#f03e3e" name="Kematian Kasar" />
+                <Bar dataKey="kematianBayi" fill="#ff922b" name="Kematian Bayi" />
+                <Bar dataKey="kelahiranKasar" fill="#4dabf7" name="Kelahiran Kasar" />
+              </BarChart>
+            )}
+          </Paper>
+        </Box>
+      )}
     </Stack>
   );
 }

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

@@ -1,5 +1,5 @@
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import ArtikelKesehatan from './_ui/artikel_kesehatan/page';
 import FasilitasKesehatan from './_ui/fasilitas_kesehatan/page';
 import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan/page';
@@ -10,8 +10,9 @@ import PersentaseDataKelahiranKematian from './_ui/persentase_data_kelahiran_kem
 function Page() {
   return (
     <Stack>
+      <Title order={3}>Data Kesehatan Warga</Title>
       <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Persentase Kelahiran & Kematian"}>
-        <TabsList >
+        <TabsList bg={colors['BG-trans']} p={'xs'}>
           <TabsTab value="Persentase Kelahiran & Kematian">
             Persentase Kelahiran & Kematian
           </TabsTab>

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

@@ -1,11 +1,54 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
 import React from 'react';
+import { KesehatanEditor } from '../_com/kesehatanEditor';
 
-function Page() {
+function Posyandu() {
   return (
-    <div>
-      Posyandu
-    </div>
+    <Box>
+      <Title order={3}>Kesehatan</Title>
+      <SimpleGrid py={10} cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={"md"}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Posyandu</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Nama Posyandu</Text>}
+                placeholder='masukkan nama posyandu'
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Nomor Telepon Posyandu</Text>}
+                placeholder='masukkan nomor telepon posyandu'
+              />
+              <Box>
+              <Text fz={"sm"} fw={"bold"}>Deskripsi Posyandu</Text>
+              <KesehatanEditor
+                showSubmit={false}
+                />
+                </Box>
+                <Box>
+              <Text fz={"sm"} fw={"bold"}>Pelayanan Posyandu</Text>
+              <KesehatanEditor
+                showSubmit={false}
+                />
+                </Box>
+              <Group>
+                <Button bg={colors['blue-button']}>Submit</Button>
+              </Group>
+
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={"md"}>
+            <Stack>
+              <Title order={3}>Preview Data Posyandu</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Box>
   );
 }
 
-export default Page;
+export default Posyandu;

src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx

@@ -1,11 +1,34 @@
-import React from 'react';
+import colors from '@/con/colors';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import UpdatePuskesmas from './ui/Edit-Puskesmas/updatePuskesmas';
+import CreatePuskesmas from './ui/Tambah-Puskesmas/createPuskesmas';
 
-function Page() {
+function Puskesmas() {
   return (
-    <div>
-      Puskesmas
-    </div>
+    <Stack gap={"xs"}>
+      <Box>
+        <Title order={3}>Puskesmas</Title>
+        <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
+          <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
+            <TabsTab value="create" >
+              Tambah Puskesmas
+            </TabsTab>
+            <TabsTab value="update" >
+              Edit Puskesmas
+            </TabsTab>
+          </TabsList>
+
+          <TabsPanel value="create">
+            <CreatePuskesmas />
+          </TabsPanel>
+
+          <TabsPanel value="update">
+            <UpdatePuskesmas />
+          </TabsPanel>
+        </Tabs>
+      </Box>
+    </Stack>
   );
 }
 
-export default Page;
+export default Puskesmas;

src/app/admin/(dashboard)/kesehatan/puskesmas/ui/Edit-Puskesmas/updatePuskesmas.tsx

@@ -0,0 +1,55 @@
+import colors from '@/con/colors';
+import { Box, Stack, SimpleGrid, Paper, Title, TextInput, Text } from '@mantine/core';
+import React from 'react';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function UpdatePuskesmas() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={"md"}>
+              <Stack gap={"xs"}>
+                <Title order={4}>Edit Puskesmas</Title>
+                <TextInput
+                  label={<Text fw={"bold"} fz={"sm"}>Nama Puskesmas</Text>}
+                  placeholder='Masukkan nama puskesmas'
+                />
+                <TextInput
+                  label={<Text fw={"bold"} fz={"sm"}>No Telp Puskesmas</Text>}
+                  placeholder='Masukkan no telp puskesmas'
+                />
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+                  <KesehatanEditor
+                    showSubmit={false}
+                  />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
+                  <KesehatanEditor
+                    showSubmit={false}
+                  />
+                </Box>
+              </Stack>
+            </Paper>
+          </Box>
+          <Box>
+            <Paper bg={colors['white-1']} p={"md"}>
+              <Stack gap={"xs"}>
+                <Title order={4}>Preview Data Puskesmas</Title>
+                <Text fw={"bold"} fz={"sm"}>Nama Puskesmas</Text>
+                <Text fw={"bold"} fz={"sm"}>No Telp Puskesmas</Text>
+                <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+                <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
+              </Stack>
+            </Paper>
+          </Box>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default UpdatePuskesmas;

src/app/admin/(dashboard)/kesehatan/puskesmas/ui/Tambah-Puskesmas/createPuskesmas.tsx

@@ -0,0 +1,55 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import React from 'react';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function CreatePuskesmas() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={"md"}>
+              <Stack gap={"xs"}>
+                <Title order={4}>Tambah Puskesmas</Title>
+                <TextInput
+                  label={<Text fw={"bold"} fz={"sm"}>Nama Puskesmas</Text>}
+                  placeholder='Masukkan nama puskesmas'
+                />
+                <TextInput
+                  label={<Text fw={"bold"} fz={"sm"}>No Telp Puskesmas</Text>}
+                  placeholder='Masukkan no telp puskesmas'
+                />
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+                  <KesehatanEditor
+                    showSubmit={false}
+                  />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
+                  <KesehatanEditor
+                    showSubmit={false}
+                  />
+                </Box>
+              </Stack>
+            </Paper>
+          </Box>
+          <Box>
+            <Paper bg={colors['white-1']} p={"md"}>
+              <Stack gap={"xs"}>
+                <Title order={4}>Preview Data Puskesmas</Title>
+                <Text fw={"bold"} fz={"sm"}>Nama Puskesmas</Text>
+                <Text fw={"bold"} fz={"sm"}>No Telp Puskesmas</Text>
+                <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+                <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
+              </Stack>
+            </Paper>
+          </Box>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default CreatePuskesmas;