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

Fix UI Admin Menu Landing Page & PPID

Browse Source
This commit is contained in:
nico
2025-09-01 16:14:28 +08:00
parent 22ec8d942d
commit 7ae83788b4
74 changed files with 4312 additions and 2798 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/_lib/layoutTab.tsx
View File

@@ -1,63 +1,89 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { IconChartBar, IconUsers } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
function LayoutTabsKepuasan({ children }: { children: React.ReactNode }) {
const router = useRouter()
const pathname = usePathname()
const tabs = [
{
label: "Grafik Kepuasan Masyarakat",
value: "grafikkepuasannamasyarakat",
href: "/admin/landing-page/indeks-kepuasan-masyarakat/grafik-kepuasan-masyarakat"
},
{
label: "Responden",
value: "responden",
href: "/admin/landing-page/indeks-kepuasan-masyarakat/responden"
},
];
const curentTab = tabs.find(tab => tab.href === pathname)
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
const router = useRouter();
const pathname = usePathname();
const tabs = [
{
label: "Grafik Kepuasan",
description: "Lihat visualisasi grafik kepuasan masyarakat",
value: "grafik",
href: "/admin/landing-page/indeks-kepuasan-masyarakat/grafik-kepuasan-masyarakat",
icon: <IconChartBar size={18} stroke={1.8} />
},
{
label: "Responden",
description: "Kelola dan tinjau data responden",
value: "responden",
href: "/admin/landing-page/indeks-kepuasan-masyarakat/responden",
icon: <IconUsers size={18} stroke={1.8} />
},
];
const handleTabChange = (value: string | null) => {
const tab = tabs.find(t => t.value === value)
if (tab) {
router.push(tab.href)
}
setActiveTab(value)
}
const curentTab = tabs.find(tab => tab.href === pathname);
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
useEffect(() => {
const match = tabs.find(tab => tab.href === pathname)
if (match) {
setActiveTab(match.value)
}
}, [pathname])
const handleTabChange = (value: string | null) => {
const tab = tabs.find(t => t.value === value);
if (tab) router.push(tab.href);
setActiveTab(value);
};
return (
<Stack>
<Title order={3}>Indeks Kepuasan Masyarakat</Title>
<Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
<TabsList p={"xs"} bg={"#BBC8E7FF"}>
{tabs.map((e, i) => (
<TabsTab key={i} value={e.value}>{e.label}</TabsTab>
))}
</TabsList>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value}>
{/* Konten dummy, bisa diganti tergantung routing */}
<></>
</TabsPanel>
))}
</Tabs>
{children}
</Stack>
);
useEffect(() => {
const match = tabs.find(tab => tab.href === pathname);
if (match) setActiveTab(match.value);
}, [pathname]);
return (
<Stack gap="lg">
<Title order={2} style={{ fontWeight: 700, color: "#1a1a1a" }}>
Indeks Kepuasan Masyarakat
</Title>
<Tabs
radius="xl"
color="blue"
variant="pills"
value={activeTab}
onChange={handleTabChange}
>
<TabsList
p="sm"
style={{
background: "#F3F4FB",
borderRadius: "1rem",
}}
>
{tabs.map((e, i) => (
<Tooltip key={i} label={e.description} withArrow position="bottom" transitionProps={{ transition: 'pop', duration: 200 }}>
<TabsTab
value={e.value}
leftSection={e.icon}
style={{
fontWeight: 500,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
>
{e.label}
</TabsTab>
</Tooltip>
))}
</TabsList>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value} mt="md">
<></>
</TabsPanel>
))}
</Tabs>
{children}
</Stack>
);
}
export default LayoutTabsKepuasan;
export default LayoutTabsKepuasan;