wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

UI & API Admin Menu Kesehatan Done

Browse Source
This commit is contained in:
nico
2025-06-27 23:52:00 +08:00
parent 924be5b11b
commit 6d5b8dcf64
19 changed files with 1546 additions and 752 deletions
Download Patch File Download Diff File Expand all files Collapse all files

374
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/[id]/edit/page.tsx Normal file
View File

@@ -0,0 +1,374 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import colors from '@/con/colors';
import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
interface ArtikelKesehatanFormBase {
title: string;
content: string;
introduction: {
content: string;
};
symptom: {
title: string;
content: string;
};
prevention: {
title: string;
content: string;
};
firstAid: {
title: string;
content: string;
};
mythVsFact: {
title: string;
mitos: string;
fakta: string;
};
doctorSign: {
content: string;
};
}
function EditArtikelKesehatan() {
const stateArtikelKesehatan = useProxy(artikelKesehatanState);
const router = useRouter();
const params = useParams();
const [formData, setFormData] = useState<ArtikelKesehatanFormBase>({
title: stateArtikelKesehatan.edit.form.title || '',
content: stateArtikelKesehatan.edit.form.content || '',
introduction: {
content: stateArtikelKesehatan.edit.form.introduction?.content || '',
},
symptom: {
title: stateArtikelKesehatan.edit.form.symptom?.title || '',
content: stateArtikelKesehatan.edit.form.symptom?.content || '',
},
prevention: {
title: stateArtikelKesehatan.edit.form.prevention?.title || '',
content: stateArtikelKesehatan.edit.form.prevention?.content || '',
},
firstAid: {
title: stateArtikelKesehatan.edit.form.firstAid?.title || '',
content: stateArtikelKesehatan.edit.form.firstAid?.content || '',
},
mythVsFact: {
title: stateArtikelKesehatan.edit.form.mythVsFact?.title || '',
mitos: stateArtikelKesehatan.edit.form.mythVsFact?.mitos || '',
fakta: stateArtikelKesehatan.edit.form.mythVsFact?.fakta || '',
},
doctorSign: {
content: stateArtikelKesehatan.edit.form.doctorSign?.content || '',
},
});
useEffect(() => {
const loadArtikelKesehatan = async () => {
const id = params?.id as string;
if (!id) return;
try {
await stateArtikelKesehatan.edit.load(id);
const { form } = stateArtikelKesehatan.edit;
if (form) {
setFormData({
title: form.title,
content: form.content,
introduction: {
content: form.introduction?.content || '',
},
symptom: {
title: form.symptom?.title || '',
content: form.symptom?.content || '',
},
prevention: {
title: form.prevention?.title || '',
content: form.prevention?.content || '',
},
firstAid: {
title: form.firstAid?.title || '',
content: form.firstAid?.content || '',
},
mythVsFact: {
title: form.mythVsFact?.title || '',
mitos: form.mythVsFact?.mitos || '',
fakta: form.mythVsFact?.fakta || '',
},
doctorSign: {
content: form.doctorSign?.content || '',
},
});
}
} catch (error) {
console.error("Error loading artikel kesehatan:", error);
toast.error("Gagal memuat data artikel kesehatan");
}
};
loadArtikelKesehatan();
}, [params?.id]);
const handleSubmit = async () => {
try {
stateArtikelKesehatan.edit.form = {
...stateArtikelKesehatan.edit.form,
title: formData.title,
content: formData.content,
introduction: {
content: formData.introduction.content,
},
symptom: {
title: formData.symptom.title,
content: formData.symptom.content,
},
prevention: {
title: formData.prevention.title,
content: formData.prevention.content,
},
firstAid: {
title: formData.firstAid.title,
content: formData.firstAid.content,
},
mythVsFact: {
title: formData.mythVsFact.title,
mitos: formData.mythVsFact.mitos,
fakta: formData.mythVsFact.fakta,
},
doctorSign: {
content: formData.doctorSign.content,
},
};
const success = await stateArtikelKesehatan.edit.submit();
if (success) {
toast.success("Artikel kesehatan berhasil diperbarui!");
router.push("/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan");
}
} catch (error) {
console.error("Error updating artikel kesehatan:", error);
toast.error(error instanceof Error ? error.message : "Gagal memperbarui data artikel kesehatan");
}
};
return (
<Box>
<Box mb={10}>
<Button onClick={() => router.back()} variant="subtle" color="blue">
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
<Stack gap="xs">
<Title order={3}>Edit Artikel Kesehatan</Title>
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="masukkan judul"
value={formData.title}
onChange={(e) => {
setFormData(prev => ({
...prev,
title: e.target.value
}));
}}
/>
<TextInput
label={<Text fz="sm" fw="bold">Deskripsi</Text>}
placeholder="masukkan deskripsi"
value={formData.content}
onChange={(e) => {
setFormData(prev => ({
...prev,
content: e.target.value
}));
}}
/>
<TextInput
label={<Text fz="sm" fw="bold">Pendahuluan</Text>}
placeholder="masukkan pendahuluan"
value={formData.introduction.content}
onChange={(e) => {
setFormData(prev => ({
...prev,
introduction: {
...prev.introduction,
content: e.target.value
}
}));
}}
/>
<Box>
<Text fz="md" fw="bold">Gejala</Text>
<Stack gap="xs">
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="masukkan judul gejala penyakit"
value={formData.symptom.title}
onChange={(e) => {
setFormData(prev => ({
...prev,
symptom: {
...prev.symptom,
title: e.target.value
}
}));
}}
/>
<Box>
<Text fz="sm" fw="bold">Deskripsi Gejala</Text>
<EditEditor
value={formData.symptom.content}
onChange={(e) => {
setFormData(prev => ({
...prev,
symptom: {
...prev.symptom,
content: e
}
}));
}}
/>
</Box>
</Stack>
</Box>
<Box>
<Text fz="md" fw="bold">Pencegahan</Text>
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="masukkan judul"
value={formData.prevention.title}
onChange={(e) => {
setFormData(prev => ({
...prev,
prevention: {
...prev.prevention,
title: e.target.value
}
}));
}}
/>
<EditEditor
value={formData.prevention.content}
onChange={(e) => {
setFormData(prev => ({
...prev,
prevention: {
...prev.prevention,
content: e
}
}));
}}
/>
</Box>
<Box>
<Text fz="md" fw="bold">Pertolongan Pertama</Text>
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="masukkan judul"
value={formData.firstAid.title}
onChange={(e) => {
setFormData(prev => ({
...prev,
firstAid: {
...prev.firstAid,
title: e.target.value
}
}));
}}
/>
<EditEditor
value={formData.firstAid.content}
onChange={(e) => {
setFormData(prev => ({
...prev,
firstAid: {
...prev.firstAid,
content: e
}
}));
}}
/>
</Box>
<Box>
<Text fz="md" fw="bold">Mitos dan Fakta</Text>
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="masukkan judul"
value={formData.mythVsFact.title}
onChange={(e) => {
setFormData(prev => ({
...prev,
mythVsFact: {
...prev.mythVsFact,
title: e.target.value
}
}));
}}
/>
<Box>
<Text>
Mitos
</Text>
<EditEditor
value={formData.mythVsFact.mitos}
onChange={(e) => {
setFormData(prev => ({
...prev,
mythVsFact: {
...prev.mythVsFact,
mitos: e
}
}));
}}
/>
</Box>
<Box>
<Text>
Fakta
</Text>
<EditEditor
value={formData.mythVsFact.fakta}
onChange={(e) => {
setFormData(prev => ({
...prev,
mythVsFact: {
...prev.mythVsFact,
fakta: e
}
}));
}}
/>
</Box>
</Box>
<Box>
<Text fz="md" fw="bold">Kapan Harus Ke Dokter</Text>
<EditEditor
value={formData.doctorSign.content}
onChange={(e) => {
setFormData(prev => ({
...prev,
doctorSign: {
...prev.doctorSign,
content: e
}
}));
}}
/>
</Box>
<Button onClick={handleSubmit} bg={colors['blue-button']}>
Simpan
</Button>
</Stack>
</Paper>
</Box>
);
}
export default EditArtikelKesehatan;

143
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/[id]/page.tsx Normal file
View File

@@ -0,0 +1,143 @@
'use client'
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import colors from '@/con/colors';
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
function DetailArtikelKesehatan() {
const params = useParams()
const router = useRouter();
const stateArtikelKesehatan = useProxy(artikelKesehatanState)
const [modalHapus, setModalHapus] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null)
useShallowEffect(() => {
stateArtikelKesehatan.findUnique.load(params?.id as string)
}, [])
const handleHapus = () => {
if (selectedId) {
stateArtikelKesehatan.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan")
}
}
if (!stateArtikelKesehatan.findUnique.data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
<Stack>
<Text fz={"xl"} fw={"bold"}>Detail Artikel Kesehatan</Text>
{stateArtikelKesehatan.findUnique.data ? (
<Paper bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>
<Box>
<Text fz={"lg"} fw={"bold"}>Judul</Text>
<Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.title}</Text>
</Box>
<Box>
<Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
<Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.content }} />
</Box>
<Box>
<Text fz={"lg"} fw={"bold"}>Pendahuluan</Text>
<Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.introduction.content }} />
</Box>
<Box>
<Stack gap={"xs"}>
<Text fz={"lg"} fw={"bold"}>Gejala</Text>
<Text fz={"md"} fw={"bold"}>Judul Gejala</Text>
<Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.symptom.title}</Text>
<Text fz={"md"} fw={"bold"}>Deskripsi Gejala</Text>
<Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.symptom.content }} />
</Stack>
</Box>
<Box>
<Stack gap={"xs"}>
<Text fz={"lg"} fw={"bold"}>Pencegahan</Text>
<Text fz={"md"} fw={"bold"}>Judul Pencegahan</Text>
<Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.prevention.title}</Text>
<Text fz={"md"} fw={"bold"}>Deskripsi Pencegahan</Text>
<Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.prevention.content }} />
</Stack>
</Box>
<Box>
<Stack gap={"xs"}>
<Text fz={"lg"} fw={"bold"}>Pertolongan Pertama</Text>
<Text fz={"md"} fw={"bold"}>Judul Pertolongan Pertama</Text>
<Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.firstaid.title}</Text>
<Text fz={"md"} fw={"bold"}>Deskripsi Pertolongan Pertama</Text>
<Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.firstaid.content }} />
</Stack>
</Box>
<Box>
<Stack gap={"xs"}>
<Text fz={"lg"} fw={"bold"}>Mitos dan Fakta</Text>
<Text fz={"md"} fw={"bold"}>Judul Mitos dan Fakta</Text>
<Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.mythvsfact.title}</Text>
<Text fz={"md"} fw={"bold"}>Deskripsi Mitos</Text>
<Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.mythvsfact.mitos }} />
<Text fz={"md"} fw={"bold"}>Deskripsi Fakta</Text>
<Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.mythvsfact.fakta }} />
</Stack>
</Box>
<Box>
<Stack gap={"xs"}>
<Text fz={"lg"} fw={"bold"}>Kapan Harus ke Dokter</Text>
<Text fz={"md"} fw={"bold"}>Deskripsi Kapan Harus ke Dokter</Text>
<Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.doctorsign.content }} />
</Stack>
</Box>
<Box>
<Flex gap={"xs"}>
<Button color="red" onClick={() => {
if (stateArtikelKesehatan.findUnique.data) {
setSelectedId(stateArtikelKesehatan.findUnique.data.id)
setModalHapus(true)
}
}}>
<IconX size={20} />
</Button>
<Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/${stateArtikelKesehatan.findUnique.data?.id}/edit`)} color="green">
<IconEdit size={20} />
</Button>
</Flex>
</Box>
</Stack>
</Paper>
) : null}
</Stack>
</Paper>
{/* Modal Hapus */}
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text="Apakah anda yakin ingin menghapus artikel kesehatan ini?"
/>
</Box>
);
}
export default DetailArtikelKesehatan;

203
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/create/page.tsx Normal file
View File

@@ -0,0 +1,203 @@
'use client'
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import colors from '@/con/colors';
import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function CreateArtikelKesehatan() {
const stateArtikelKesehatan = useProxy(artikelKesehatanState)
const router = useRouter();
const resetForm = () => {
stateArtikelKesehatan.create.form = {
title: "",
content: "",
introduction: {
content: "",
},
symptom: {
title: "",
content: "",
},
prevention: {
title: "",
content: "",
},
firstAid: {
title: "",
content: "",
},
mythVsFact: {
title: "",
mitos: "",
fakta: "",
},
doctorSign: {
content: ""
}
};
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
await stateArtikelKesehatan.create.submit();
toast.success("Data berhasil disimpan");
resetForm();
// After successful submission, redirect to the list page
router.push('/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan');
}
return (
<Box component="form" onSubmit={handleSubmit}>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
<Stack gap="xs">
<Title order={3}>Create Artikel Kesehatan</Title>
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="masukkan judul"
value={stateArtikelKesehatan.create.form.title}
onChange={(e) => {
stateArtikelKesehatan.create.form.title = e.target.value;
}}
/>
<TextInput
label={<Text fz="sm" fw="bold">Deskripsi</Text>}
placeholder="masukkan deskripsi"
value={stateArtikelKesehatan.create.form.content}
onChange={(e) => {
stateArtikelKesehatan.create.form.content = e.target.value;
}}
/>
<TextInput
label={<Text fz="sm" fw="bold">Pendahuluan</Text>}
placeholder="masukkan pendahuluan"
value={stateArtikelKesehatan.create.form.introduction.content}
onChange={(e) => {
stateArtikelKesehatan.create.form.introduction.content = e.target.value;
}}
/>
<Box>
<Text fz="md" fw="bold">Gejala</Text>
<Stack gap="xs">
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="masukkan judul gejala penyakit"
value={stateArtikelKesehatan.create.form.symptom.title}
onChange={(e) => {
stateArtikelKesehatan.create.form.symptom.title = e.target.value;
}}
/>
<Box>
<Text fz="sm" fw="bold">Deskripsi Gejala</Text>
<CreateEditor
value={stateArtikelKesehatan.create.form.symptom.content}
onChange={(e) => {
stateArtikelKesehatan.create.form.symptom.content = e;
}}
/>
</Box>
</Stack>
</Box>
<Box>
<Text fz="md" fw="bold">Pencegahan</Text>
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="masukkan judul"
value={stateArtikelKesehatan.create.form.prevention.title}
onChange={(e) => {
stateArtikelKesehatan.create.form.prevention.title = e.target.value;
}}
/>
<CreateEditor
value={stateArtikelKesehatan.create.form.prevention.content}
onChange={(e) => {
stateArtikelKesehatan.create.form.prevention.content = e;
}}
/>
</Box>
<Box>
<Text fz="md" fw="bold">Pertolongan Pertama</Text>
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="masukkan judul"
value={stateArtikelKesehatan.create.form.firstAid.title}
onChange={(e) => {
stateArtikelKesehatan.create.form.firstAid.title = e.target.value;
}}
/>
<CreateEditor
value={stateArtikelKesehatan.create.form.firstAid.content}
onChange={(e) => {
stateArtikelKesehatan.create.form.firstAid.content = e;
}}
/>
</Box>
<Box>
<Text fz="md" fw="bold">Mitos dan Fakta</Text>
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="masukkan judul"
value={stateArtikelKesehatan.create.form.mythVsFact.title}
onChange={(e) => {
stateArtikelKesehatan.create.form.mythVsFact.title = e.target.value;
}}
/>
<Box>
<Text>
Mitos
</Text>
<CreateEditor
value={stateArtikelKesehatan.create.form.mythVsFact.mitos}
onChange={(e) => {
stateArtikelKesehatan.create.form.mythVsFact.mitos = e;
}}
/>
</Box>
<Box>
<Text>
Fakta
</Text>
<CreateEditor
value={stateArtikelKesehatan.create.form.mythVsFact.fakta}
onChange={(e) => {
stateArtikelKesehatan.create.form.mythVsFact.fakta = e;
}}
/>
</Box>
</Box>
<Box>
<Text fz="md" fw="bold">Kapan Harus Ke Dokter</Text>
<CreateEditor
value={stateArtikelKesehatan.create.form.doctorSign.content}
onChange={(e) => {
stateArtikelKesehatan.create.form.doctorSign.content = e;
}}
/>
</Box>
<Button onClick={handleSubmit} bg={colors['blue-button']}>
Simpan
</Button>
</Stack>
</Paper>
</Box>
);
}
export default CreateArtikelKesehatan;

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

@@ -1,25 +0,0 @@
'use client'
import colors from '@/con/colors';
import { Box, Paper, Text } from '@mantine/core';
import { KesehatanEditor } from '../../_com/kesehatanEditor';
import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import { useProxy } from 'valtio/utils';
function DoctorSignUI() {
const doctorSign = useProxy(stateArtikelKesehatan.doctorSign)
return (
<Box>
<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>
);
}
export default DoctorSignUI;

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

@@ -1,33 +0,0 @@
'use client'
import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import colors from '@/con/colors';
import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
import { useProxy } from 'valtio/utils';
import { KesehatanEditor } from '../../_com/kesehatanEditor';
function FirstAidUI() {
const firstAidState = useProxy(stateArtikelKesehatan.firstAid)
return (
<Box>
<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>
);
}
export default FirstAidUI;

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

@@ -1,28 +0,0 @@
'use client'
import { Box, Paper, Stack, Text } from '@mantine/core';
import React from 'react';
import { useProxy } from 'valtio/utils';
import colors from '@/con/colors';
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>
<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>
);
}
export default IntoductionUI;

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

@@ -1,40 +0,0 @@
'use client'
import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
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>
<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>
);
}
export default MythFactUI;

211
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/page.tsx
View File

@@ -1,172 +1,79 @@
'use client'
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';
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';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import JudulList from '../../../_com/judulList';
import artikelKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
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 >
<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>
<Stack gap={"xs"}>
<Title order={4}>Data Artikel Kesehatan</Title>
<AllList />
</Stack>
</Box>
</SimpleGrid>
</Stack>
<Box>
<HeaderSearch
title='Artikel Kesehatan'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
/>
<ListArtikelKesehatan/>
</Box>
);
}
function AllList() {
const listState = useProxy(stateArtikelKesehatan)
function ListArtikelKesehatan() {
const stateArtikelKesehatan = useProxy(artikelKesehatanState)
const router = useRouter();
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();
stateArtikelKesehatan.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 gap={"xs"}>
{/* Introduction */}
if (!stateArtikelKesehatan.findMany.data) {
return (
<Box py={10}>
<Skeleton h={500}/>
</Box>
)
}
return (
<Box py={10}>
<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 */}
<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 */}
<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 */}
<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 */}
<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>
<Stack>
<JudulList
title='List Artikel Kesehatan'
href='/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/create'
/>
<Box style={{ overflowX: "auto" }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
<TableThead>
<TableTr>
<TableTh>Judul</TableTh>
<TableTh>Content</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody >
<TableTr>
<TableTd ta="center">{item.mitos}</TableTd>
<TableTd ta="center">{item.fakta}</TableTd>
</TableTr>
<TableTbody>
{stateArtikelKesehatan.findMany.data?.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.title}</TableTd>
<TableTd>{item.content}</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
))}
</Stack>
</Paper>
{/* Doctor Sign */}
<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>
</Box>
)
}
export default ArtikelKesehatan;
export default ArtikelKesehatan;

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

@@ -1,34 +0,0 @@
'use client'
import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import colors from '@/con/colors';
import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
import { useProxy } from 'valtio/utils';
import { KesehatanEditor } from '../../_com/kesehatanEditor';
function PreventionUI() {
const preventionState = useProxy(stateArtikelKesehatan.prevention)
return (
<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>
);
}
export default PreventionUI;

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

@@ -1,34 +0,0 @@
'use client'
import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import colors from '@/con/colors';
import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
import { useProxy } from 'valtio/utils';
import { KesehatanEditor } from '../../_com/kesehatanEditor';
function SymptomUI() {
const symptomState = useProxy(stateArtikelKesehatan.symptom)
return (
<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>
);
}
export default SymptomUI;