Merge pull request #19 from bipproduction/nico/2-may-25

Fix Eror Admin Persentase & Grafik
2025-05-02 16:11:38 +08:00
parent f8914ab78f a8556aacb7
commit fbe0c19d22
34 changed files with 1109 additions and 48 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "desa-darmasaba",
-  "version": "0.1.1",
+  "version": "0.1.2",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -323,3 +323,73 @@ model GrafikKepuasan {
  deletedAt DateTime @default(now())
  isActive  Boolean  @default(true)
 }
+
+// ========================================= ARTIKEL KESEHATAN ========================================= //
+model ArtikelKesehatan {
+  id        Int      @id @default(autoincrement())
+  title     String
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model Introduction {
+  id        Int      @id @default(autoincrement())
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model Symptom {
+  id        Int      @id @default(autoincrement())
+  title     String
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model Prevention {
+  id        Int      @id @default(autoincrement())
+  title     String
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model FirstAid {
+  id        Int      @id @default(autoincrement())
+  title     String
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model MythVsFact {
+  id        Int      @id @default(autoincrement())
+  title     String
+  mitos     String
+  fakta     String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model DoctorSign {
+  id        Int      @id @default(autoincrement())
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
--- a/src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan.ts
+++ b/src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan.ts
@@ -0,0 +1,339 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+/* Introduction */
+const templateIntroduction = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+})
+
+type Introduction = Prisma.IntroductionGetPayload<{
+  select: {
+    content: true;
+  };
+}>;
+
+const introduction = proxy({
+  create: {
+    form: {} as Introduction,
+    loading: false,
+    async create() {
+      const cek = templateIntroduction.safeParse(introduction.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        introduction.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.introduction["create"].post(introduction.create.form);
+        if (res.status === 200) {
+          introduction.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        introduction.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+      data: null as
+      | Prisma.IntroductionGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+      async load() {
+        const res = await ApiFetch.api.kesehatan.introduction["find-many"].get();
+        if (res.status === 200) {
+          introduction.findMany.data = res.data?.data ?? [];
+        }
+      }
+  }
+});
+/* ======================================================================= */
+
+/* symptom */
+const templateSymptom = z.object({
+  title: z.string().min(3, "Title minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+})
+
+type Symptom = Prisma.SymptomGetPayload<{
+  select: {
+    title: true;
+    content: true;
+  };
+}>;
+
+const symptom = proxy({
+  create: {
+    form: {} as Symptom,
+    loading: false,
+    async create() {
+      const cek = templateSymptom.safeParse(symptom.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        symptom.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.symptom["create"].post(symptom.create.form);
+        if (res.status === 200) {
+          symptom.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        symptom.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.SymptomGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.symptom["find-many"].get();
+      if (res.status === 200) {
+        symptom.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* Prevention */
+const templatePrevention = z.object({
+  title: z.string().min(3, "Title minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+})
+
+type Prevention = Prisma.PreventionGetPayload<{
+  select: {
+    title: true;
+    content: true;
+  };
+}>;
+
+const prevention = proxy({
+  create: {
+    form: {} as Prevention,
+    loading: false,
+    async create() {
+      const cek = templatePrevention.safeParse(prevention.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        prevention.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.prevention["create"].post(prevention.create.form);
+        if (res.status === 200) {
+          prevention.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        prevention.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.PreventionGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.prevention["find-many"].get();
+      if (res.status === 200) {
+        prevention.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+/* ======================================================================= */
+
+/* First Aid */
+const templateFirstAid = z.object({
+  title: z.string().min(3, "Title minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+})
+
+type FirstAid = Prisma.FirstAidGetPayload<{
+  select: {
+    title: true;
+    content: true;
+  };
+}>;
+
+const firstAid = proxy({
+    create: {
+        form: {} as FirstAid,
+        loading: false,
+        async create() {
+            const cek = templateFirstAid.safeParse(firstAid.create.form);
+            if (!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+            try {
+                firstAid.create.loading = true;
+                const res = await ApiFetch.api.kesehatan.firstaid["create"].post(firstAid.create.form);
+                if (res.status === 200) {
+                    firstAid.findMany.load();
+                    return toast.success("success create");
+                }
+                return toast.error("failed create");
+            } catch (error) {
+                console.log((error as Error).message);
+            } finally {
+                firstAid.create.loading = false;
+            }
+        },
+    },
+    findMany: {
+        data: null as
+            | Prisma.FirstAidGetPayload<{ omit: { isActive: true } }>[]
+            | null,
+        async load() {
+            const res = await ApiFetch.api.kesehatan.firstaid["find-many"].get();
+            if (res.status === 200) {
+                firstAid.findMany.data = res.data?.data ?? [];
+            }
+        },
+    },
+})
+/* ======================================================================= */
+
+/* Myth vs Fact */
+const templateMythFact = z.object({
+  title: z.string().min(3, "Title minimal 3 karakter"),
+  mitos: z.string().min(3, "Mitos minimal 3 karakter"),
+  fakta: z.string().min(3, "Fakta minimal 3 karakter"),
+})
+
+type MythFact = Prisma.MythVsFactGetPayload<{
+  select: {
+    title: true;
+    mitos: true;
+    fakta: true;
+  };
+}>;
+
+const mythFact = proxy({
+  create: {
+    form: {} as MythFact,
+    loading: false,
+    async create() {
+      const cek = templateMythFact.safeParse(mythFact.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        mythFact.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.mythvsfact["create"].post(mythFact.create.form);
+        if (res.status === 200) {
+          mythFact.findMany.load();
+          return toast.success("success create");
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        mythFact.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.MythVsFactGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.kesehatan.mythvsfact["find-many"].get();
+      if (res.status === 200) {
+        mythFact.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+})
+/* ======================================================================= */
+
+/* Doctor Sign */
+const templateDoctorSign = z.object({
+  content: z.string().min(3, "Content minimal 3 karakter"),
+})
+
+type DoctorSign = Prisma.DoctorSignGetPayload<{
+    select: {
+        content: true
+    }
+}>
+
+const doctorSign = proxy({
+    create: {
+        form: {} as DoctorSign,
+        loading: false,
+        async create() {
+            const cek = templateDoctorSign.safeParse(doctorSign.create.form);
+            if (!cek.success) {
+                const err = `[${cek.error.issues
+                    .map((v) => `${v.path.join(".")}`)
+                    .join("\n")}] required`;
+                return toast.error(err);
+            }
+            try {
+                doctorSign.create.loading = true;
+                const res = await ApiFetch.api.kesehatan.doctor_sign["create"].post(doctorSign.create.form);
+                if (res.status === 200) {
+                    doctorSign.findMany.load();
+                    return toast.success("success create");
+                }
+                return toast.error("failed create");
+            } catch (error) {
+                console.log((error as Error).message);
+            } finally {
+                doctorSign.create.loading = false;
+            }
+        },
+    },
+    findMany: {
+        data: null as
+            | Prisma.DoctorSignGetPayload<{ omit: { isActive: true } }>[]
+            | null,
+        async load() {
+            const res = await ApiFetch.api.kesehatan.doctor_sign["find-many"].get();
+            if (res.status === 200) {
+                doctorSign.findMany.data = res.data?.data ?? [];
+            }
+        },
+    },
+})
+
+/* ======================================================================= */
+
+const stateArtikelKesehatan = proxy({
+  introduction,
+  symptom,
+  prevention,
+  firstAid,
+  mythFact,
+  doctorSign
+})
+
+export default stateArtikelKesehatan
--- a/src/app/admin/(dashboard)/desa/berita/_com/BeritaEditor.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/_com/BeritaEditor.tsx
@@ -24,8 +24,14 @@ export function BeritaEditor({ onSubmit }: { onSubmit: (val: string) => void })
      TextAlign.configure({ types: ['heading', 'paragraph'] }),
    ],
    content,
+    immediatelyRender: false
  });

+  if (!editor) {
+    return null;
+  }
+
+
  return (
    <Stack>
      <RichTextEditor editor={editor}>
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/doctor_sign/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/doctor_sign/page.tsx
@@ -0,0 +1,23 @@
+'use client'
+import { Box, 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';
+
+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
+      }}
+      />
+    </Box>
+  );
+}
+
+export default DoctorSignUI;
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/first_aid/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/first_aid/page.tsx
@@ -0,0 +1,29 @@
+'use client'
+import { Box, 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';
+
+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
+    }}
+    />
+    </Box>
+  );
+}
+
+export default FirstAidUI;
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/introduction/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/introduction/page.tsx
@@ -0,0 +1,23 @@
+'use client'
+import { Box, 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';
+
+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>
+  );
+}
+
+export default IntoductionUI;
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/mythVsfact/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/mythVsfact/page.tsx
@@ -0,0 +1,35 @@
+'use client'
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import { Box, 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>
+  );
+}
+
+export default MythFactUI;
--- 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
@@ -1,26 +1,149 @@
-import { Box, SimpleGrid, Stack, TextInput, Title } from '@mantine/core';
-import React from 'react';
+'use client'
+import { Box, Button, Center, 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';
+import MythFactUI from './mythVsfact/page';
+import DoctorSignUI from './doctor_sign/page';
+import { useProxy } from 'valtio/utils';
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import FirstAidUI from './first_aid/page';
+import { useShallowEffect } from '@mantine/hooks';
+import colors from '@/con/colors';

 function ArtikelKesehatan() {
+  const state = useProxy(stateArtikelKesehatan)
+  const submitAllForms = () => {
+    if (state.introduction.create.form.content) {
+      state.introduction.create.create()
+    }
+    if (state.symptom.create.form.title && state.symptom.create.form.content) {
+      state.symptom.create.create()
+    }
+    if (state.prevention.create.form.title && state.prevention.create.form.content) {
+      state.prevention.create.create()
+    }
+    if (state.firstAid.create.form.title && state.firstAid.create.form.content) {
+      state.firstAid.create.create()
+    }
+    if (state.mythFact.create.form.title && state.mythFact.create.form.mitos && state.mythFact.create.form.fakta) {
+      state.mythFact.create.create()
+    }
+    if (state.doctorSign.create.form.content) {
+      state.doctorSign.create.create()
+    }
+  }
  return (
    <Stack py={10}>
      <SimpleGrid cols={{
        base: 1, md: 2
      }}>
-        <Box>
+        <Box >
          <Title order={3}>Artikel Kesehatan</Title>
-          <TextInput
-            label="Jadwal"
-            placeholder='masukkan artikel kesehatan'
-          />
+          <IntoductionUI />
+          <SymptomUI />
+          <PreventionUI />
+          <FirstAidUI />
+          <MythFactUI />
+          <DoctorSignUI />
+          <Button mt={10} onClick={submitAllForms}>Submit</Button>
        </Box>
+
        <Box>
          <Title order={3}>List Artikel Kesehatan</Title>
+          <AllList />
        </Box>
      </SimpleGrid>
    </Stack>
  );
 }

+function AllList() {
+  const listState = useProxy(stateArtikelKesehatan)
+  useShallowEffect(() => {
+    listState.introduction.findMany.load();
+    listState.symptom.findMany.load();
+    listState.prevention.findMany.load();
+    listState.firstAid.findMany.load();
+    listState.mythFact.findMany.load();
+    listState.doctorSign.findMany.load();
+  }, [])
+
+  if (!listState.introduction.findMany.data
+    || !listState.symptom.findMany.data
+    || !listState.prevention.findMany.data
+    || !listState.firstAid.findMany.data
+    || !listState.mythFact.findMany.data
+    || !listState.doctorSign.findMany.data
+  ) 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>
+    ))}
+    {/* Symptom */}
+    {listState.symptom.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Title order={4}>{item.title}</Title>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+      </Box>
+    ))}
+    {/* Prevention */}
+    {listState.prevention.findMany.data?.map((item) => (
+      <Box key={item.id}>
+        <Title order={4}>{item.title}</Title>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+      </Box>
+    ))}
+    {/* 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>
+    ))}
+    {/* 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>
+    ))}
+    {/* 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>
+    ))}
+  </Stack>
+}

 export default ArtikelKesehatan;
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/prevention/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/prevention/page.tsx
@@ -0,0 +1,30 @@
+'use client'
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import { Box, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+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>
+  );
+}
+
+export default PreventionUI;
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/symptom/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/symptom/page.tsx
@@ -0,0 +1,29 @@
+'use client'
+import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import { Box, Text, TextInput } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+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>
+  );
+}
+
+export default SymptomUI;
--- 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
@@ -1,16 +1,20 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 '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 { useShallowEffect } from '@mantine/hooks';
-import { useState } from 'react';
-import { Bar, Legend, RadialBarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useEffect, useState } from 'react';
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
 import { useProxy } from 'valtio/utils';

 function GrafikHasilKepuasan() {
  const grafikkepuasan = useProxy(stategrafikKepuasan.grafikkepuasan)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [mounted, setMounted] = useState(false);
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')
  const [chartData, setChartData] = useState<any[]>([])
+
  useShallowEffect(() => {
    const fetchData = async () => {
      await grafikkepuasan.findMany.load();
@@ -20,11 +24,22 @@ function GrafikHasilKepuasan() {
    };
    fetchData();
  }, []);
+
+  useEffect(() => {
+    setMounted(true); // setelah komponen siap di client
+  }, []);
+
+  if (!mounted) {
+    return null; // Jangan render apa-apa dulu sebelum mounted
+  }
+
+
  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}
@@ -33,9 +48,10 @@ function GrafikHasilKepuasan() {
          }}
        />
        <TextInput
-          label="Jumlah Penderita Farangitis Akut"
+          w={{ base: '100%', md: '50%' }}
+          label="Jumlah Penderita"
          type='number'
-          placeholder='Masukkan jumlah penderita farangitis akut'
+          placeholder='Masukkan jumlah penderita'
          value={grafikkepuasan.create.form.jumlah}
          onChange={(val) => {
            grafikkepuasan.create.form.jumlah = val.currentTarget.value
@@ -43,29 +59,29 @@ function GrafikHasilKepuasan() {
        />
      </Box>
      <Group>
-        <Button mt={10} 
-        onClick={async () => {
-          await grafikkepuasan.create.create();
-          await grafikkepuasan.findMany.load();
-          if (grafikkepuasan.findMany.data) {
-            setChartData(grafikkepuasan.findMany.data);
-          }
-        }}
+        <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 order={3}>Data Kelahiran & Kematian</Title>
-        <ResponsiveContainer width="100%" height="100%">
-          <RadialBarChart 
+        <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" />
-          </RadialBarChart>
-        </ResponsiveContainer>
+        >
+          <XAxis dataKey="label" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah" />
+        </BarChart>
      </Box>
    </Stack>
  );
--- 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
@@ -2,15 +2,17 @@
 /* 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 { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
-import { Bar, BarChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
 import { useProxy } from 'valtio/utils';

 function PersentaseDataKelahiranKematian() {
  const persentase = useProxy(statePersentase.persentasekelahiran);
  const [chartData, setChartData] = useState<any[]>([]);
  const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')

  useEffect(() => {
    setMounted(true);
@@ -87,19 +89,17 @@ function PersentaseDataKelahiranKematian() {

      {/* Chart */}
      <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-        <Title order={3}>Data Kelahiran & Kematian</Title>
+        <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
        {mounted && chartData.length > 0 && (
-          <ResponsiveContainer width="100%" aspect={2}>
-            <BarChart width={300} 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>
-          </ResponsiveContainer>
+          <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>
    </Stack>
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/doctor_sign/create.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/doctor_sign/create.ts
@@ -0,0 +1,26 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.DoctorSignGetPayload<{
+    select: {
+        content: true;
+    }
+}>
+
+export default async function doctorSignCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.doctorSign.create({
+        data: {
+            content: body.content,
+        },
+    });
+    return {
+        success: true,
+        message: "Success create doctor sign",
+        data: {
+            ...body,
+        },
+    };
+}
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/doctor_sign/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/doctor_sign/find-many.ts
@@ -0,0 +1,10 @@
+import prisma from "@/lib/prisma";
+
+export default async function doctorSignFindMany() {
+    const data = await prisma.doctorSign.findMany();
+    return {
+        success: true,
+        message: "Success get doctor sign",
+        data,
+    };
+}
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/doctor_sign/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/doctor_sign/index.ts
@@ -0,0 +1,15 @@
+import Elysia, { t } from "elysia"
+import doctorSignCreate from "./create"
+import doctorSignFindMany from "./find-many"
+
+const DoctorSign = new Elysia({
+    prefix: "/doctor_sign",
+    tags: ["Data Kesehatan/Artikel Kesehatan/Doctor Sign"],
+})
+    .get("/find-many", doctorSignFindMany)
+    .post("/create", doctorSignCreate, {
+        body: t.Object({
+            content: t.String(),
+        }),
+    })
+export default DoctorSign
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/first_aid/create.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/first_aid/create.ts
@@ -0,0 +1,27 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.FirstAidGetPayload<{
+    select: {
+        title: true;
+        content: true;
+    }
+}>
+export default async function firstAidCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.firstAid.create({
+        data: {
+            title: body.title,
+            content: body.content,
+        },
+    });
+    return {
+        success: true,
+        message: "Success create first aid",
+        data: {
+            ...body,
+        },
+    };
+}
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/first_aid/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/first_aid/find-many.ts
@@ -0,0 +1,8 @@
+import prisma from "@/lib/prisma"
+
+export default async function firstAidFindMany() {
+    const res = await prisma.firstAid.findMany()
+    return {
+        data: res
+    }
+}
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/first_aid/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/first_aid/index.ts
@@ -0,0 +1,16 @@
+import Elysia, { t } from "elysia"
+import firstAidCreate from "./create"
+import firstAidFindMany from "./find-many"
+
+const FirstAid = new Elysia({
+    prefix: "/firstaid",
+    tags: ["Data Kesehatan/Artikel Kesehatan/First Aid"]
+})
+    .get("/find-many", firstAidFindMany)
+    .post("/create", firstAidCreate, {
+        body: t.Object({
+            title: t.String(),
+            content: t.String(),
+        }),
+    })
+export default FirstAid
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/introduction/create.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/introduction/create.ts
@@ -0,0 +1,26 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.IntroductionGetPayload<{
+  select: {
+    content: true;
+  };
+}>;
+
+export default async function introductionCreate(context: Context) {
+  const body = context.body as FormCreate;
+
+  await prisma.introduction.create({
+    data: {
+      content: body.content,
+    },
+  });
+  return {
+    success: true,
+    message: "Success create introduction",
+    data: {
+      ...body,
+    },
+  };
+}
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/introduction/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/introduction/find-many.ts
@@ -0,0 +1,8 @@
+import prisma from "@/lib/prisma";
+
+export default async function introductionFindMany() {
+  const res = await prisma.introduction.findMany();
+  return {
+    data: res,
+  };
+}
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/introduction/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/introduction/index.ts
@@ -0,0 +1,16 @@
+import Elysia, { t } from "elysia";
+import introductionCreate from "./create";
+import introductionFindMany from "./find-many";
+
+const Introduction = new Elysia({
+    prefix: "/introduction",
+    tags: ["Data Kesehatan/Artikel Kesehatan/Introduction"]
+})
+    .get("/find-many", introductionFindMany)
+    .post("/create", introductionCreate, {
+        body: t.Object({
+            content: t.String(),
+        }),
+    })
+
+export default Introduction;
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/myth_vs_fact/create.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/myth_vs_fact/create.ts
@@ -0,0 +1,30 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import { Prisma } from "@prisma/client";
+
+type FormCreate = Prisma.MythVsFactGetPayload<{
+    select: {
+        title: true;
+        mitos: true;
+        fakta: true;
+    }
+}>
+
+export default async function mythVsFactCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.mythVsFact.create({
+        data: {
+            title: body.title,
+            mitos: body.mitos,
+            fakta: body.fakta,
+        },
+    });
+    return {
+        success: true,
+        message: "Success create myth vs fact",
+        data: {
+            ...body,
+        },
+    };
+}
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/myth_vs_fact/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/myth_vs_fact/find-many.ts
@@ -0,0 +1,10 @@
+import prisma from "@/lib/prisma";
+
+export default async function mythVsFactFindMany() {
+    const mythVsFacts = await prisma.mythVsFact.findMany();
+    return {
+        success: true,
+        message: "Success get myth vs fact",
+        data: mythVsFacts,
+    };
+}
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/myth_vs_fact/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/myth_vs_fact/index.ts
@@ -0,0 +1,17 @@
+import Elysia, { t } from "elysia";
+import mythVsFactCreate from "./create";
+import mythVsFactFindMany from "./find-many";
+
+const MythVsFact = new Elysia({
+    prefix: "/mythvsfact",
+    tags: ["Data Kesehatan/Artikel Kesehatan/Myth vs Fact"]
+})
+    .get("/find-many", mythVsFactFindMany)
+    .post("/create", mythVsFactCreate, {
+        body: t.Object({
+            title: t.String(),
+            mitos: t.String(),
+            fakta: t.String(),
+        }),
+    })
+export default MythVsFact
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/prevention/create.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/prevention/create.ts
@@ -0,0 +1,28 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.PreventionGetPayload<{
+    select: {
+        title: true;
+        content: true;
+    }
+}>
+
+export default async function preventionCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.prevention.create({
+        data: {
+            title: body.title,
+            content: body.content,
+        },
+    });
+    return {
+        success: true,
+        message: "Success create prevention",
+        data: {
+            ...body,
+        },
+    };
+}
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/prevention/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/prevention/find-many.ts
@@ -0,0 +1,8 @@
+import prisma from "@/lib/prisma"
+
+export default async function preventionFindMany() {
+    const res = await prisma.prevention.findMany()
+    return {
+        data: res
+    }
+}
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/prevention/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/prevention/index.ts
@@ -0,0 +1,16 @@
+import Elysia, { t } from "elysia"
+import preventionCreate from "./create"
+import preventionFindMany from "./find-many"
+
+const Prevention = new Elysia({
+    prefix: "/prevention",
+    tags: ["Data Kesehatan/Artikel Kesehatan/Prevention"]
+})
+    .get("/find-many", preventionFindMany)
+    .post("/create", preventionCreate, {
+        body: t.Object({
+            title: t.String(),
+            content: t.String(),
+        }),
+    })
+export default Prevention
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/syptom/create.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/syptom/create.ts
@@ -0,0 +1,27 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.SymptomGetPayload<{
+    select: {
+        title: true;
+        content: true;
+    }
+}>
+export default async function symptomCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.symptom.create({
+        data: {
+            title: body.title,
+            content: body.content,
+        },
+    });
+    return {
+        success: true,
+        message: "Success create symptom",
+        data: {
+            ...body,
+        },
+    };
+}
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/syptom/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/syptom/find-many.ts
@@ -0,0 +1,8 @@
+import prisma from "@/lib/prisma"
+
+export default async function symptomFindMany() {
+    const res = await prisma.symptom.findMany()
+    return {
+        data: res
+    }
+}
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/syptom/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/syptom/index.ts
@@ -0,0 +1,16 @@
+import Elysia, { t } from "elysia";
+import symptomCreate from "./create";
+import symptomFindMany from "./find-many";
+
+const Syptom = new Elysia({
+    prefix: "/symptom",
+    tags: ["Data Kesehatan/Artikel Kesehatan/Syptom"]
+})
+    .get("/find-many", symptomFindMany)
+    .post("/create", symptomCreate, {
+        body: t.Object({
+            title: t.String(),
+            content: t.String(),
+        }),
+    })
+export default Syptom
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/index.ts
@@ -13,6 +13,12 @@ import DokumenDiperlukan from "./data_kesehatan_warga/jadwal_kegiatan/dokumen_ya
 import PendaftaranJadwal from "./data_kesehatan_warga/jadwal_kegiatan/pendaftaran";
 import PersentaseKelahiranKematian from "./data_kesehatan_warga/persentase_kelahiran_kematian";
 import GrafikKepuasan from "./data_kesehatan_warga/grafik_kepuasan";
+import Introduction from "./data_kesehatan_warga/artikel_kesehatan/introduction";
+import Syptom from "./data_kesehatan_warga/artikel_kesehatan/syptom";
+import Prevention from "./data_kesehatan_warga/artikel_kesehatan/prevention";
+import FirstAid from "./data_kesehatan_warga/artikel_kesehatan/first_aid";
+import MythVsFact from "./data_kesehatan_warga/artikel_kesehatan/myth_vs_fact";
+import DoctorSign from "./data_kesehatan_warga/artikel_kesehatan/doctor_sign";


 const Kesehatan = new Elysia({
@@ -33,4 +39,10 @@ const Kesehatan = new Elysia({
 .use(PendaftaranJadwal)
 .use(PersentaseKelahiranKematian)
 .use(GrafikKepuasan)
+.use(Introduction)
+.use(Syptom)
+.use(Prevention)
+.use(FirstAid)
+.use(MythVsFact)
+.use(DoctorSign)
 export default Kesehatan;
--- a/src/app/api/[[...slugs]]/route.ts
+++ b/src/app/api/[[...slugs]]/route.ts
@@ -45,11 +45,25 @@ async function layanan() {
  const data = await prisma.layanan.findMany();
  return { data };
 }
+
+const Utils = new Elysia({
+  prefix: "/api/utils",
+  tags: ["Utils"],
+}).get("/version", async () => {
+  const packageJson = await fs.readFile(
+    path.join(ROOT, "package.json"),
+    "utf-8"
+  );
+  const version = JSON.parse(packageJson).version;
+  return { version };
+});
+
 const ApiServer = new Elysia()
  .use(swagger({ path: "/api/docs" }))
  .use(cors(corsConfig))
  .use(Kesehatan)
  .use(Desa)
+  .use(Utils)
  .onError(({ code }) => {
    if (code === "NOT_FOUND") {
      return {
--- a/src/app/darmasaba/_com/main-page/prestasi/index.tsx
+++ b/src/app/darmasaba/_com/main-page/prestasi/index.tsx
@@ -8,7 +8,7 @@ const data = [
        title: "Olahraga dan Kepemudaan",
        deskripsi: "Tim Bola Voli Putri Dharma Temaja meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali ",
        image: "/api/img/prestasi-voli.jpeg",
-        link: "/darmasaba/prestasi/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali"
+        link: "/darmasaba/prestasi-desa/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali"
      },
      {
        id: 2,