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

fix(kesehatan): konsolidasi balita, ibu-hamil, ringkasan-kesehatan ke dalam posyandu tabs + fix semua routing path - bump 0.1.53

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nico
2026-05-05 12:26:18 +08:00
parent fd2060405f
commit f1ee53a7b9
15 changed files with 248 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "desa-darmasaba",
"version": "0.1.52",
"version": "0.1.53",
"private": true,
"scripts": {
"dev": "next dev",

161
src/app/admin/(dashboard)/kesehatan/posyandu/_com/layoutTabs.tsx Normal file
View File

@@ -0,0 +1,161 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { IconBabyCarriage, IconCategory, IconClipboard, IconClipboardText, IconGenderDemigirl, IconNews } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
function LayoutTabsPosyandu({ children }: { children: React.ReactNode }) {
const router = useRouter();
const pathname = usePathname();
const tabs = [
{
label: "List Posyandu",
value: "list_posyandu",
href: "/admin/kesehatan/posyandu/list-posyandu",
icon: <IconNews size={18} stroke={1.8} />
},
{
label: "Balita",
value: "balita",
href: "/admin/kesehatan/posyandu/balita",
icon: <IconBabyCarriage size={18} stroke={1.8} />
},
{
label: "Ibu Hamil",
value: "ibu_hamil",
href: "/admin/kesehatan/posyandu/ibu-hamil",
icon: <IconGenderDemigirl size={18} stroke={1.8} />
},
{
label: "Ringkasan Kesehatan",
value: "ringkasan_kesehatan",
href: "/admin/kesehatan/posyandu/ringkasan-kesehatan",
icon: <IconClipboardText size={18} stroke={1.8} />
}
];
const currentTab = tabs.find(tab => tab.href === pathname)
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
const handleTabChange = (value: string | null) => {
const tab = tabs.find(t => t.value === value)
if (tab) {
router.push(tab.href)
}
setActiveTab(value)
}
useEffect(() => {
const match = tabs.find(tab => tab.href === pathname)
if (match) {
setActiveTab(match.value)
}
}, [pathname])
return (
<Stack gap="lg">
<Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Layanan</Title>
<Tabs
color={colors["blue-button"]}
variant="pills"
value={activeTab}
onChange={handleTabChange}
radius="lg"
keepMounted={false}
>
{/* ✅ Scroll horizontal wrapper */}
<Box visibleFrom='md' pb={10}>
<ScrollArea type="auto" offsetScrollbars w="100%">
<TabsList
p="sm"
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
width: "max-content", // ⬅️ kunci
maxWidth: "100%",
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
flexShrink: 0, // ✅ jangan mengecil aneh-aneh
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
</Box>
<Box hiddenFrom='md' pb={10}>
<ScrollArea
type="auto"
offsetScrollbars={false}
w="100%"
>
<TabsList
p="xs" // lebih kecil
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
width: "max-content", // ⬅️ kunci
maxWidth: "100%", // ⬅️ penting
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
paddingInline: "0.75rem", // ⬅️ lebih ramping
flexShrink: 0, // ✅ jangan mengecil aneh-aneh
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
</Box>
{tabs.map((tab, i) => (
<TabsPanel
key={i}
value={tab.value}
style={{
padding: "1.5rem",
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
borderRadius: "1rem",
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
}}
>
{/* Konten dummy, bisa diganti sesuai routing */}
<>{children}</>
</TabsPanel>
))}
</Tabs>
</Stack>
);
}
export default LayoutTabsPosyandu;

5
src/app/admin/(dashboard)/kesehatan/balita/create/page.tsx → src/app/admin/(dashboard)/kesehatan/posyandu/balita/create/page.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import balitaState from '@/app/admin/(dashboard)/_state/kesehatan/balita/balita';
import colors from '@/con/colors';
import {
Box,
@@ -19,7 +20,7 @@ import {
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import balitaState from '../../../_state/kesehatan/balita/balita';
export default function BalitaCreatePage() {
const router = useRouter();
@@ -30,7 +31,7 @@ export default function BalitaCreatePage() {
const ok = await balitaState.create.submit();
if (ok) {
balitaState.create.reset();
router.push('/admin/kesehatan/balita');
router.push('/admin/kesehatan/posyandu/balita');
}
};

5
src/app/admin/(dashboard)/kesehatan/balita/edit/[id]/page.tsx → src/app/admin/(dashboard)/kesehatan/posyandu/balita/edit/[id]/page.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import balitaState from '@/app/admin/(dashboard)/_state/kesehatan/balita/balita';
import colors from '@/con/colors';
import {
Box,
@@ -20,7 +21,7 @@ import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
import balitaState from '../../../../_state/kesehatan/balita/balita';
export default function BalitaEditPage() {
const router = useRouter();
@@ -35,7 +36,7 @@ export default function BalitaEditPage() {
const handleSubmit = async () => {
const ok = await balitaState.edit.update();
if (ok) router.push('/admin/kesehatan/balita');
if (ok) router.push('/admin/kesehatan/posyandu/balita');
};
return (

7
src/app/admin/(dashboard)/kesehatan/balita/page.tsx → src/app/admin/(dashboard)/kesehatan/posyandu/balita/page.tsx
View File

@@ -20,7 +20,8 @@ import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import balitaState from '../../_state/kesehatan/balita/balita';
import balitaState from '../../../_state/kesehatan/balita/balita';
const STUNTING_COLORS: Record<string, string> = {
NORMAL: 'green',
@@ -81,7 +82,7 @@ export default function BalitaPage() {
<ActionIcon
variant="light"
color="blue"
onClick={() => router.push(`/admin/kesehatan/balita/edit/${d.id}`)}
onClick={() => router.push(`/admin/kesehatan/posyandu/balita/edit/${d.id}`)}
>
<IconEdit size={16} />
</ActionIcon>
@@ -104,7 +105,7 @@ export default function BalitaPage() {
<Title order={3} c="black">Balita Terdaftar</Title>
<Button
leftSection={<IconPlus size={16} />}
onClick={() => router.push('/admin/kesehatan/balita/create')}
onClick={() => router.push('/admin/kesehatan/posyandu/balita/create')}
radius="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,

5
src/app/admin/(dashboard)/kesehatan/ibu-hamil/create/page.tsx → src/app/admin/(dashboard)/kesehatan/posyandu/ibu-hamil/create/page.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import ibuHamilState from '@/app/admin/(dashboard)/_state/kesehatan/ibu-hamil/ibuHamil';
import colors from '@/con/colors';
import {
Box,
@@ -17,7 +18,7 @@ import {
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import ibuHamilState from '../../../_state/kesehatan/ibu-hamil/ibuHamil';
export default function IbuHamilCreatePage() {
const router = useRouter();
@@ -28,7 +29,7 @@ export default function IbuHamilCreatePage() {
const ok = await ibuHamilState.create.submit();
if (ok) {
ibuHamilState.create.reset();
router.push('/admin/kesehatan/ibu-hamil');
router.push('/admin/kesehatan/posyandu/ibu-hamil');
}
};

4
src/app/admin/(dashboard)/kesehatan/ibu-hamil/edit/[id]/page.tsx → src/app/admin/(dashboard)/kesehatan/posyandu/ibu-hamil/edit/[id]/page.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import ibuHamilState from '@/app/admin/(dashboard)/_state/kesehatan/ibu-hamil/ibuHamil';
import colors from '@/con/colors';
import {
Box,
@@ -18,7 +19,6 @@ import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
import ibuHamilState from '../../../../_state/kesehatan/ibu-hamil/ibuHamil';
export default function IbuHamilEditPage() {
const router = useRouter();
@@ -33,7 +33,7 @@ export default function IbuHamilEditPage() {
const handleSubmit = async () => {
const ok = await ibuHamilState.edit.update();
if (ok) router.push('/admin/kesehatan/ibu-hamil');
if (ok) router.push('/admin/kesehatan/posyandu/ibu-hamil');
};
return (

7
src/app/admin/(dashboard)/kesehatan/ibu-hamil/page.tsx → src/app/admin/(dashboard)/kesehatan/posyandu/ibu-hamil/page.tsx
View File

@@ -20,7 +20,8 @@ import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import ibuHamilState from '../../_state/kesehatan/ibu-hamil/ibuHamil';
import ibuHamilState from '../../../_state/kesehatan/ibu-hamil/ibuHamil';
const STATUS_COLORS: Record<string, string> = {
AKTIF: 'green',
@@ -64,7 +65,7 @@ export default function IbuHamilPage() {
<ActionIcon
variant="light"
color="blue"
onClick={() => router.push(`/admin/kesehatan/ibu-hamil/edit/${d.id}`)}
onClick={() => router.push(`/admin/kesehatan/posyandu/ibu-hamil/edit/${d.id}`)}
>
<IconEdit size={16} />
</ActionIcon>
@@ -87,7 +88,7 @@ export default function IbuHamilPage() {
<Title order={3} c="black">Ibu Hamil</Title>
<Button
leftSection={<IconPlus size={16} />}
onClick={() => router.push('/admin/kesehatan/ibu-hamil/create')}
onClick={() => router.push('/admin/kesehatan/posyandu/ibu-hamil/create')}
radius="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,

35
src/app/admin/(dashboard)/kesehatan/posyandu/layout.tsx Normal file
View File

@@ -0,0 +1,35 @@
'use client'
import { Box } from '@mantine/core';
import { usePathname } from 'next/navigation';
import React from 'react';
import LayoutTabsPosyandu from './_com/layoutTabs';
function Layout({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
// Contoh path:
// - /darmasaba/desa/berita/semua → panjang 5 → list
// - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
// - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
const segments = pathname.split('/').filter(Boolean);
const isDetailPage = segments.length >= 5;
if (isDetailPage) {
// Tampilkan tanpa tab menu
return (
<Box>
{children}
</Box>
);
}
return (
<LayoutTabsPosyandu>
{children}
</LayoutTabsPosyandu>
);
}
export default Layout;

5
src/app/admin/(dashboard)/kesehatan/posyandu/[id]/edit/page.tsx → src/app/admin/(dashboard)/kesehatan/posyandu/list-posyandu/[id]/edit/page.tsx
View File

@@ -1,6 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import posyandustate from '@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu';
import colors from '@/con/colors';
@@ -145,7 +144,7 @@ function EditPosyandu() {
await statePosyandu.edit.update();
toast.success('Posyandu berhasil diperbarui!');
router.push('/admin/kesehatan/posyandu');
router.push('/admin/kesehatan/posyandu/list-posyandu');
} catch (error) {
console.error('Error updating posyandu:', error);
toast.error('Terjadi kesalahan saat memperbarui posyandu');
@@ -168,7 +167,7 @@ function EditPosyandu() {
};
return (
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Box px={{ base: 0, md: 'lg' }} py="xs">
{/* Tombol Back */}
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

11
src/app/admin/(dashboard)/kesehatan/posyandu/[id]/page.tsx → src/app/admin/(dashboard)/kesehatan/posyandu/list-posyandu/[id]/page.tsx
View File

@@ -1,4 +1,6 @@
'use client'
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import posyandustate from '@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu';
import colors from '@/con/colors';
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
@@ -6,12 +8,11 @@ import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import posyanduState from '../../../_state/kesehatan/posyandu/posyandu';
function DetailPosyandu() {
const statePosyandu = useProxy(posyanduState);
const statePosyandu = useProxy(posyandustate);
const params = useParams();
const router = useRouter();
const [modalHapus, setModalHapus] = useState(false);
@@ -28,7 +29,7 @@ function DetailPosyandu() {
statePosyandu.delete.byId(selectedId);
setModalHapus(false);
setSelectedId(null);
router.push("/admin/kesehatan/posyandu");
router.push("/admin/kesehatan/posyandu/list-posyandu");
}
};
@@ -147,7 +148,7 @@ function DetailPosyandu() {
<Button
color="green"
onClick={() => router.push(`/admin/kesehatan/posyandu/${data.id}/edit`)}
onClick={() => router.push(`/admin/kesehatan/posyandu/list-posyandu/${data.id}/edit`)}
variant="light"
radius="md"
size="md"

7
src/app/admin/(dashboard)/kesehatan/posyandu/create/page.tsx → src/app/admin/(dashboard)/kesehatan/posyandu/list-posyandu/create/page.tsx
View File

@@ -1,4 +1,6 @@
'use client';
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
import posyandustate from '@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import {
@@ -20,8 +22,7 @@ import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
import CreateEditor from '../../../_com/createEditor';
import posyandustate from '../../../_state/kesehatan/posyandu/posyandu';
function CreatePosyandu() {
@@ -105,7 +106,7 @@ function CreatePosyandu() {
statePosyandu.create.form.imageId = uploaded.id;
await statePosyandu.create.create();
resetForm();
router.push('/admin/kesehatan/posyandu');
router.push('/admin/kesehatan/posyandu/list-posyandu');
} catch (error) {
console.error('Error creating posyandu:', error);
toast.error('Gagal menambahkan posyandu');

22
src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx → src/app/admin/(dashboard)/kesehatan/posyandu/list-posyandu/page.tsx
View File

@@ -23,8 +23,10 @@ import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../_com/header';
import posyandustate from '../../_state/kesehatan/posyandu/posyandu';
import HeaderSearch from '../../../_com/header';
import posyandustate from '../../../_state/kesehatan/posyandu/posyandu';
function Posyandu() {
const [search, setSearch] = useState("");
@@ -80,18 +82,18 @@ function ListPosyandu({ search }: { search: string }) {
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/kesehatan/posyandu/create')}
onClick={() => router.push('/admin/kesehatan/posyandu/list-posyandu/create')}
>
Tambah Baru
</Button>
</Group>
{/* Desktop Table */}
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Table highlightOnHover
layout="fixed" // 🔥 PENTING
withColumnBorders={false}
>
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Table highlightOnHover
layout="fixed" // 🔥 PENTING
withColumnBorders={false}
>
<TableThead>
<TableTr>
<TableTh w={220} fz="sm" fw={600} ta="left" lh={1.4}>Nama Posyandu</TableTh>
@@ -130,7 +132,7 @@ function ListPosyandu({ search }: { search: string }) {
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/kesehatan/posyandu/${item.id}`)}
onClick={() => router.push(`/admin/kesehatan/posyandu/list-posyandu/${item.id}`)}
>
Detail
</Button>
@@ -192,7 +194,7 @@ function ListPosyandu({ search }: { search: string }) {
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/kesehatan/posyandu/${item.id}`)}
onClick={() => router.push(`/admin/kesehatan/posyandu/list-posyandu/${item.id}`)}
fullWidth
>
Detail

7
src/app/admin/(dashboard)/kesehatan/ringkasan-kesehatan/page.tsx → src/app/admin/(dashboard)/kesehatan/posyandu/ringkasan-kesehatan/page.tsx
View File

@@ -26,7 +26,8 @@ import {
import { useRouter } from 'next/navigation';
import { useEffect, useCallback } from 'react';
import { useProxy } from 'valtio/utils';
import ringkasanKesehatanState from '../../_state/kesehatan/ringkasan-kesehatan/ringkasanKesehatan';
import ringkasanKesehatanState from '../../../_state/kesehatan/ringkasan-kesehatan/ringkasanKesehatan';
type StatCardProps = {
label: string;
@@ -197,7 +198,7 @@ export default function RingkasanKesehatanPage() {
color="pink"
radius="md"
rightSection={<IconArrowRight size={16} />}
onClick={() => router.push('/admin/kesehatan/ibu-hamil')}
onClick={() => router.push('/admin/kesehatan/posyandu/ibu-hamil')}
>
Kelola Ibu Hamil
</Button>
@@ -206,7 +207,7 @@ export default function RingkasanKesehatanPage() {
color="blue"
radius="md"
rightSection={<IconArrowRight size={16} />}
onClick={() => router.push('/admin/kesehatan/balita')}
onClick={() => router.push('/admin/kesehatan/posyandu/balita')}
>
Kelola Balita
</Button>

53
src/app/admin/_com/list_PageAdmin.tsx
View File

@@ -135,7 +135,7 @@ export const devBar = [
{
id: "Kesehatan_1",
name: "Posyandu",
path: "/admin/kesehatan/posyandu"
path: "/admin/kesehatan/posyandu/list-posyandu"
},
{
id: "Kesehatan_2",
@@ -166,21 +166,6 @@ export const devBar = [
id: "Kesehatan_7",
name: "Info Wabah/Penyakit",
path: "/admin/kesehatan/info-wabah-penyakit"
},
{
id: "Kesehatan_8",
name: "Ringkasan Kesehatan",
path: "/admin/kesehatan/ringkasan-kesehatan"
},
{
id: "Kesehatan_9",
name: "Ibu Hamil",
path: "/admin/kesehatan/ibu-hamil"
},
{
id: "Kesehatan_10",
name: "Balita",
path: "/admin/kesehatan/balita"
}
]
},
@@ -586,7 +571,7 @@ export const navBar = [
{
id: "Kesehatan_1",
name: "Posyandu",
path: "/admin/kesehatan/posyandu"
path: "/admin/kesehatan/posyandu/list-posyandu/list_posyandu"
},
{
id: "Kesehatan_2",
@@ -617,21 +602,6 @@ export const navBar = [
id: "Kesehatan_7",
name: "Info Wabah/Penyakit",
path: "/admin/kesehatan/info-wabah-penyakit"
},
{
id: "Kesehatan_8",
name: "Ringkasan Kesehatan",
path: "/admin/kesehatan/ringkasan-kesehatan"
},
{
id: "Kesehatan_9",
name: "Ibu Hamil",
path: "/admin/kesehatan/ibu-hamil"
},
{
id: "Kesehatan_10",
name: "Balita",
path: "/admin/kesehatan/balita"
}
]
},
@@ -1228,7 +1198,7 @@ export const role1 = [
}
]
},
{
{
id: "Kependudukan",
name: "Kependudukan",
path: "",
@@ -1271,7 +1241,7 @@ export const role2 = [
{
id: "Kesehatan_1",
name: "Posyandu",
path: "/admin/kesehatan/posyandu"
path: "/admin/kesehatan/posyandu/list-posyandu/list_posyandu"
},
{
id: "Kesehatan_2",
@@ -1302,21 +1272,6 @@ export const role2 = [
id: "Kesehatan_7",
name: "Info Wabah/Penyakit",
path: "/admin/kesehatan/info-wabah-penyakit"
},
{
id: "Kesehatan_8",
name: "Ringkasan Kesehatan",
path: "/admin/kesehatan/ringkasan-kesehatan"
},
{
id: "Kesehatan_9",
name: "Ibu Hamil",
path: "/admin/kesehatan/ibu-hamil"
},
{
id: "Kesehatan_10",
name: "Balita",
path: "/admin/kesehatan/balita"
}
]
},