merge: fix(kesehatan) konsolidasi posyandu tabs - bump 0.1.53

package.json

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

src/app/admin/(dashboard)/kesehatan/posyandu/_com/layoutTabs.tsx

@@ -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;

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

@@ -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');
     }
   };
 

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

@@ -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 (

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

@@ -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)`,

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

@@ -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');
     }
   };
 

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

@@ -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 (

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

@@ -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)`,

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

@@ -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;

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

@@ -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');

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

@@ -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"

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

@@ -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');

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

@@ -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 HeaderSearch from '../../../_com/header';
-import posyandustate from '../../_state/kesehatan/posyandu/posyandu';
+import posyandustate from '../../../_state/kesehatan/posyandu/posyandu';
+
+
 
 function Posyandu() {
   const [search, setSearch] = useState("");
@@ -80,7 +82,7 @@ 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>
@@ -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

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

@@ -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>

src/app/admin/_com/list_PageAdmin.tsx

@@ -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"
       }
     ]
   },
@@ -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"
       }
     ]
   },