feat: finalize kinerja divisi feature implementation

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
2026-02-11 12:38:28 +08:00
parent defdb2b7bd
commit ca2f97fa47
64 changed files with 725 additions and 38 deletions
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -0,0 +1,108 @@
+import { useLocation } from "@tanstack/react-router";
+import { Bell, Moon, Sun, User as UserIcon } from "lucide-react"; // Renamed User to UserIcon to avoid conflict with Mantine's User component if it exists
+
+import {
+	Group,
+	Text,
+	Title,
+	ActionIcon,
+	Divider,
+	Avatar,
+	Box,
+	Badge,
+	useMantineColorScheme,
+} from "@mantine/core";
+
+export function Header() {
+	const location = useLocation();
+	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	// Define page titles based on route
+	const getPageTitle = () => {
+		switch (location.pathname) {
+			case "/":
+				return "Dashboard";
+			case "/kinerja-divisi":
+				return "Kinerja Divisi";
+			case "/pengaduan":
+				return "Pengaduan & Layanan Publik";
+			case "/analytic":
+				return "Jenna Analytic";
+			case "/demografi":
+				return "Demografi & Kependudukan";
+			case "/keuangan":
+				return "Keuangan & Anggaran";
+			case "/bumdes":
+				return "Bumdes & UMKM Desa";
+			case "/sosial":
+			case "/keamanan":
+				return "Keamanan";
+			case "/bantuan":
+				return "Bantuan";
+			case "/pengaturan":
+				return "Pengaturan";
+			default:
+				return "Dashboard";
+		}
+	};
+
+	return (
+		<Group justify="space-between" w="100%">
+			{/* Title */}
+			<Title order={2}>{getPageTitle()}</Title>
+
+			{/* Right Section */}
+			<Group gap="md">
+
+
+				{/* User Info */}
+				<Group gap="sm">
+					<Box ta="right">
+						<Text size="sm" fw={500}>
+							I. B. Surya Prabhawa M...
+						</Text>
+						<Text size="xs" c="dimmed">
+							Kepala Desa
+						</Text>
+					</Box>
+					<Avatar color="blue" radius="xl">
+						<UserIcon style={{ width: "70%", height: "70%" }} />
+					</Avatar>
+				</Group>
+
+				{/* Divider */}
+				<Divider orientation="vertical" h={30} />
+
+				{/* Icons */}
+				<Group gap="sm">
+					<ActionIcon
+						onClick={() => toggleColorScheme()}
+						variant="subtle"
+						size="lg"
+						radius="xl"
+						aria-label="Toggle color scheme"
+					>
+						{dark ? (
+							<Sun style={{ width: "70%", height: "70%" }} />
+						) : (
+							<Moon style={{ width: "70%", height: "70%" }} />
+						)}
+					</ActionIcon>
+					<ActionIcon variant="subtle" size="lg" radius="xl" pos="relative">
+						<Bell style={{ width: "70%", height: "70%" }} />
+						<Badge
+							size="xs"
+							color="red"
+							variant="filled"
+							style={{ position: "absolute", top: 0, right: 0 }}
+							radius={"xl"}
+						>
+							10
+						</Badge>
+					</ActionIcon>
+				</Group>
+			</Group>
+		</Group>
+	);
+}