Fix New UI Pengaduan

.gitignore

@@ -37,6 +37,9 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 # Dashboard-MD
 Dashboard-MD
 
+# md
+*.md
+
 # Playwright artifacts
 test-results/
 playwright-report/

Pengaduan-New.md

@@ -0,0 +1,168 @@
+Create a modern analytics dashboard UI for a village complaint system (Pengaduan Dashboard).
+
+Tech stack:
+- React 19 + Vite (Bun runtime)
+- Mantine UI (core components)
+- TailwindCSS (layout & spacing only)
+- Recharts (charts)
+- TanStack Router
+- Icons: lucide-react
+- State: Valtio
+- Date: dayjs
+
+---
+
+## 🎨 DESIGN STYLE
+
+- Clean, minimal, and soft dashboard
+- Background: light gray (#f3f4f6)
+- Card: white with subtle shadow
+- Border radius: 16px–24px (rounded-2xl)
+- Typography: medium contrast (not too bold)
+- Primary color: navy blue (#1E3A5F)
+- Accent: soft blue + neutral gray
+- Icons inside circular solid background
+
+Spacing:
+- Use gap-6 consistently
+- Internal padding: p-5 or p-6
+- Layout must feel breathable (no clutter)
+
+---
+
+## 🧱 LAYOUT STRUCTURE
+
+### 🔹 TOP SECTION (4 STAT CARDS - GRID)
+Grid: 4 columns (responsive → 2 / 1)
+
+Each card contains:
+- Title (small, muted)
+- Big number (bold, large)
+- Subtitle (small gray text)
+- Right side: circular icon container
+
+Example:
+- Total Pengaduan → 42 → "Bulan ini"
+- Baru → 14 → "Belum diproses"
+- Diproses → 14 → "Sedang ditangani"
+- Selesai → 14 → "Terselesaikan"
+
+Use:
+- Mantine Card
+- Group justify="space-between"
+- Icon inside circle (bg navy, icon white)
+
+---
+
+## 📈 MAIN CHART (FULL WIDTH)
+Title: "Tren Pengaduan"
+
+- Use Recharts LineChart
+- Smooth line (monotone)
+- Show dots on each point
+- Data: Apr → Okt
+- Value range: 30–60
+
+Style:
+- Minimal grid (light dashed)
+- No heavy colors (use gray/blue line)
+- Rounded container card
+- Add small top-right icon (expand)
+
+---
+
+## 📊 BOTTOM SECTION (3 COLUMN GRID)
+
+### 🔹 LEFT: "Surat Terbanyak"
+- Horizontal bar chart (Recharts)
+- Categories:
+  - KTP
+  - KK
+  - Domisili
+  - Usaha
+  - Lainnya
+
+Style:
+- Dark blue bars
+- Rounded edges
+- Clean axis
+
+---
+
+### 🔹 CENTER: "Pengajuan Terbaru"
+List of activity cards:
+
+Each item:
+- Name (bold)
+- Subtitle (jenis surat)
+- Time (small text)
+- Status badge (kanan)
+
+Status:
+- baru → red
+- proses → blue
+- selesai → green
+
+Style:
+- Card per item
+- Soft border
+- Rounded
+- Compact spacing
+
+---
+
+### 🔹 RIGHT: "Ajuan Ide Inovatif"
+List mirip dengan pengajuan terbaru:
+
+Each item:
+- Nama
+- Judul ide
+- Waktu
+- Button kecil "Detail"
+
+Style:
+- Right-aligned action button
+- Light border
+- Clean spacing
+
+---
+
+## ⚙️ COMPONENT STRUCTURE
+
+components/
+- StatCard.tsx
+- LineChartCard.tsx
+- BarChartCard.tsx
+- ActivityList.tsx
+- IdeaList.tsx
+
+routes/
+- dashboard.tsx
+
+---
+
+## ✨ INTERACTIONS (IMPORTANT)
+
+- Hover card → scale(1.02)
+- Transition: 150ms ease
+- Icon circle slightly pop on hover
+- List item hover → subtle bg change
+
+---
+
+## 🎯 UX DETAILS
+
+- Numbers must be visually dominant
+- Icons must balance layout (not too big)
+- Avoid heavy borders
+- Keep everything aligned perfectly
+- No clutter
+
+---
+
+## 🚀 OUTPUT
+
+- Modular React components (NOT one file)
+- Clean code (production-ready)
+- Use Mantine properly (no hacky inline styles unless needed)
+- Use Tailwind only for layout/grid/spacing

src/components/bumdes-page.tsx

@@ -386,4 +386,4 @@ const BumdesPage = () => {
 	);
 };
 
-export default BumdesPage;
+export default BumdesPage;

src/components/dashboard-content.tsx

@@ -1,4 +1,4 @@
-import { Grid, Stack, useMantineColorScheme } from "@mantine/core";
+import { Grid, Image, Stack, useMantineColorScheme } from "@mantine/core";
 import { CheckCircle, FileText, MessageCircle, Users } from "lucide-react";
 import { ActivityList } from "./dashboard/activity-list";
 import { ChartAPBDes } from "./dashboard/chart-apbdes";
@@ -8,149 +8,26 @@ import { SatisfactionChart } from "./dashboard/satisfaction-chart";
 import { SDGSCard } from "./dashboard/sdgs-card";
 import { StatCard } from "./dashboard/stat-card";
 
-// SDGs Icons
-function EnergyIcon() {
-	return (
-		<svg
-			width="48"
-			height="48"
-			viewBox="0 0 48 48"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M24 4L14 24H22L20 44L34 20H26L24 4Z"
-				fill="currentColor"
-				stroke="currentColor"
-				strokeWidth="2"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-			/>
-		</svg>
-	);
-}
-
-function PeaceIcon() {
-	return (
-		<svg
-			width="48"
-			height="48"
-			viewBox="0 0 48 48"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<circle cx="24" cy="24" r="20" stroke="currentColor" strokeWidth="2" />
-			<path
-				d="M24 4V44M24 24L10 38M24 24L38 38"
-				stroke="currentColor"
-				strokeWidth="2"
-				strokeLinecap="round"
-			/>
-		</svg>
-	);
-}
-
-function HealthIcon() {
-	return (
-		<svg
-			width="48"
-			height="48"
-			viewBox="0 0 48 48"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M24 44C24 44 6 28 6 18C6 11.373 11.373 6 18 6C21.5 6 24.5 7.5 24 12C23.5 7.5 26.5 6 30 6C36.627 6 42 11.373 42 18C42 28 24 44 24 44Z"
-				fill="currentColor"
-				stroke="currentColor"
-				strokeWidth="2"
-				strokeLinejoin="round"
-			/>
-		</svg>
-	);
-}
-
-function PovertyIcon() {
-	return (
-		<svg
-			width="48"
-			height="48"
-			viewBox="0 0 48 48"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<rect x="6" y="18" width="36" height="26" rx="2" fill="currentColor" />
-			<path
-				d="M14 18V12C14 8.686 16.686 6 20 6H28C31.314 6 34 8.686 34 12V18"
-				stroke="currentColor"
-				strokeWidth="2"
-				strokeLinecap="round"
-			/>
-		</svg>
-	);
-}
-
-function OceanIcon() {
-	return (
-		<svg
-			width="48"
-			height="48"
-			viewBox="0 0 48 48"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M6 30C6 30 10 26 14 30C18 34 22 30 26 30C30 30 34 34 38 30C42 26 46 30 46 30"
-				stroke="currentColor"
-				strokeWidth="2"
-				strokeLinecap="round"
-			/>
-			<path
-				d="M6 38C6 38 10 34 14 38C18 42 22 38 26 38C30 38 34 42 38 38C42 34 46 38 46 38"
-				stroke="currentColor"
-				strokeWidth="2"
-				strokeLinecap="round"
-			/>
-			<circle cx="24" cy="16" r="6" fill="currentColor" />
-		</svg>
-	);
-}
-
 const sdgsData = [
 	{
 		title: "Desa Berenergi Bersih dan Terbarukan",
 		score: 99.64,
-		icon: <EnergyIcon />,
-		color: "#FACC15",
-		bgColor: "#FEF9C3",
+		image: "SDGS-7.png",
 	},
 	{
 		title: "Desa Damai Berkeadilan",
 		score: 78.65,
-		icon: <PeaceIcon />,
-		color: "#3B82F6",
-		bgColor: "#DBEAFE",
+		image: "SDGS-16.png",
 	},
 	{
 		title: "Desa Sehat dan Sejahtera",
 		score: 77.37,
-		icon: <HealthIcon />,
-		color: "#22C55E",
-		bgColor: "#DCFCE7",
+		image: "SDGS-3.png",
 	},
 	{
 		title: "Desa Tanpa Kemiskinan",
 		score: 52.62,
-		icon: <PovertyIcon />,
-		color: "#EF4444",
-		bgColor: "#FEE2E2",
-	},
-	{
-		title: "Desa Peduli Lingkungan Laut",
-		score: 50.0,
-		icon: <OceanIcon />,
-		color: "#06B6D4",
-		bgColor: "#CFFAFE",
+		image: "SDGS-1.png",
 	},
 ];
 
@@ -202,37 +79,35 @@ export function DashboardContent() {
 
 			{/* Section 2: Chart & Division Progress */}
 			<Grid gutter="lg">
-				<Grid.Col span={{ base: 12, lg: 8 }}>
+				<Grid.Col span={{ base: 12, lg: 7 }}>
 					<ChartSurat />
 				</Grid.Col>
-				<Grid.Col span={{ base: 12, lg: 4 }}>
-					<DivisionProgress />
-				</Grid.Col>
-			</Grid>
-
-			{/* Section 3: APBDes Chart */}
-			<ChartAPBDes />
-
-			{/* Section 4 & 5: Activity List & Satisfaction Chart */}
-			<Grid gutter="lg">
-				<Grid.Col span={{ base: 12, lg: 6 }}>
-					<ActivityList />
-				</Grid.Col>
-				<Grid.Col span={{ base: 12, lg: 6 }}>
+				<Grid.Col span={{ base: 12, lg: 5 }}>
 					<SatisfactionChart />
 				</Grid.Col>
 			</Grid>
 
+			{/* Section 3: APBDes Chart */}
+			<Grid gutter="lg">
+				<Grid.Col span={{ base: 12, lg: 7 }}>
+					<DivisionProgress />
+				</Grid.Col>
+				<Grid.Col span={{ base: 12, lg: 5 }}>
+					<ActivityList />
+					{/* <SatisfactionChart /> */}
+				</Grid.Col>
+			</Grid>
+
+			<ChartAPBDes />
+
 			{/* Section 6: SDGs Desa Cards */}
 			<Grid gutter="md">
 				{sdgsData.map((sdg, index) => (
-					<Grid.Col key={index} span={{ base: 12, sm: 6, md: 4, lg: 2.4 }}>
+					<Grid.Col key={index} span={{ base: 9, md: 3 }}>
 						<SDGSCard
+							image={<Image src={sdg.image} alt={sdg.title} />}
 							title={sdg.title}
 							score={sdg.score}
-							icon={sdg.icon}
-							color={sdg.color}
-							bgColor={sdg.bgColor}
 						/>
 					</Grid.Col>
 				))}

src/components/dashboard/activity-list.tsx

@@ -36,6 +36,7 @@ export function ActivityList() {
 					? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
 					: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
 			}}
+			h="100%"
 		>
 			<Group gap="xs" mb="lg">
 				<Calendar

src/components/dashboard/chart-apbdes.tsx

@@ -39,6 +39,7 @@ export function ChartAPBDes() {
 					? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
 					: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
 			}}
+			h="100%"
 		>
 			<Title order={4} c={dark ? "white" : "gray.9"} mb="lg">
 				Grafik APBDes

src/components/dashboard/chart-surat.tsx

@@ -42,6 +42,7 @@ export function ChartSurat() {
 					? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
 					: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
 			}}
+			h="100%"
 		>
 			<Group justify="space-between" mb="md">
 				<Box>

src/components/dashboard/division-progress.tsx

@@ -39,6 +39,7 @@ export function DivisionProgress() {
 					? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
 					: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
 			}}
+			h="100%"
 		>
 			<Title order={4} c={dark ? "white" : "gray.9"} mb="lg">
 				Divisi Teraktif

src/components/dashboard/satisfaction-chart.tsx

@@ -32,6 +32,7 @@ export function SatisfactionChart() {
 					? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
 					: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
 			}}
+			h="100%"
 		>
 			<Title order={4} c={dark ? "white" : "gray.9"} mb={5}>
 				Tingkat Kepuasan

src/components/dashboard/sdgs-card.tsx

@@ -4,18 +4,10 @@ import type { ReactNode } from "react";
 interface SDGSCardProps {
 	title: string;
 	score: number;
-	icon: ReactNode;
-	color: string;
-	bgColor: string;
+	image: ReactNode;
 }
 
-export function SDGSCard({
-	title,
-	score,
-	icon,
-	color,
-	bgColor,
-}: SDGSCardProps) {
+export function SDGSCard({ title, score, image }: SDGSCardProps) {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
 
@@ -24,29 +16,28 @@ export function SDGSCard({
 			p="md"
 			radius="xl"
 			withBorder
-			bg={bgColor}
 			style={{
-				borderColor: dark ? "#334155" : bgColor,
+				borderColor: dark ? "#334155" : "white",
 				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
 			}}
+			h="100%"
 		>
 			<Group justify="space-between" align="flex-start" w="100%">
+				<Box>{image}</Box>
 				<Box style={{ flex: 1 }}>
-					<Text size="sm" c={dark ? "white" : "gray.8"} fw={500} mb="xs">
+					<Text
+						ta={"center"}
+						size="sm"
+						c={dark ? "white" : "gray.8"}
+						fw={500}
+						mb="xs"
+					>
 						{title}
 					</Text>
-					<Text size="xl" fw={700} c={color}>
+					<Text ta={"center"} size="xl" c={dark ? "white" : "gray.8"} fw={700}>
 						{score.toFixed(2)}
 					</Text>
 				</Box>
-				<Box
-					style={{
-						color,
-						opacity: 0.8,
-					}}
-				>
-					{icon}
-				</Box>
 			</Group>
 		</Card>
 	);

src/components/demografi-pekerjaan.tsx

@@ -408,4 +408,4 @@ const DemografiPekerjaan = () => {
 	);
 };
 
-export default DemografiPekerjaan;
+export default DemografiPekerjaan;

src/components/header.tsx

@@ -118,4 +118,4 @@ export function Header() {
 			</Group>
 		</Group>
 	);
-}
+}

src/components/help-page.tsx

@@ -432,4 +432,4 @@ const HelpPage = () => {
 	);
 };
 
-export default HelpPage;
+export default HelpPage;

src/components/jenna-analytic.tsx

@@ -1,123 +1,79 @@
-import { BarChart } from "@mantine/charts";
 import {
 	Badge,
 	Box,
-	Button,
 	Card,
 	Grid,
+	GridCol,
 	Group,
 	Progress,
 	Stack,
 	Text,
+	ThemeIcon,
 	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
-import React from "react";
+import {
+	MessageCircle,
+	CheckCircle,
+	AlertTriangle,
+	Clock,
+	TrendingUp,
+} from "lucide-react";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";
 
-// Sample Data
+// KPI Data
 const kpiData = [
 	{
 		id: 1,
 		title: "Interaksi Hari Ini",
 		value: "61",
-		delta: "+15% dari kemarin",
-		deltaType: "positive",
-		icon: (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				strokeWidth={1.5}
-				stroke="currentColor"
-				className="h-6 w-6 text-muted-foreground"
-			>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H16.5m-13.5 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"
-				/>
-			</svg>
-		),
+		subtitle: "+15% dari kemarin",
+		trend: "positive",
+		icon: MessageCircle,
 	},
 	{
 		id: 2,
 		title: "Jawaban Otomatis",
 		value: "87%",
-		sub: "53 dari 61 interaksi",
-		icon: (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				strokeWidth={1.5}
-				stroke="currentColor"
-				className="h-6 w-6 text-muted-foreground"
-			>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.473-1.688 3.342-.48.485-.926.97-1.378 1.44c-1.472 1.58-2.306 2.787-2.91 3.514-.15.18-.207.33-.207.33A.75.75 0 0 1 15 21h-3c-1.104 0-2.08-.542-2.657-1.455-.139-.201-.264-.406-.38-.614l-.014-.025C8.85 18.067 8.156 17.2 7.5 16.325.728 12.56.728 7.44 7.5 3.675c3.04-.482 5.584.47 7.042 1.956.674.672 1.228 1.462 1.696 2.307.426.786.793 1.582 1.113 2.392h.001Z"
-				/>
-			</svg>
-		),
+		subtitle: "53 dari 61 interaksi",
+		icon: CheckCircle,
 	},
 	{
 		id: 3,
 		title: "Belum Ditindak",
 		value: "8",
-		sub: "Perlu respon manual",
-		deltaType: "negative",
-		icon: (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				strokeWidth={1.5}
-				stroke="currentColor"
-				className="h-6 w-6 text-muted-foreground"
-			>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
-				/>
-			</svg>
-		),
+		subtitle: "Perlu respon manual",
+		icon: AlertTriangle,
 	},
 	{
 		id: 4,
 		title: "Waktu Respon",
 		value: "2.3 sec",
-		sub: "Rata-rata",
-		icon: (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				strokeWidth={1.5}
-				stroke="currentColor"
-				className="h-6 w-6 text-muted-foreground"
-			>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-				/>
-			</svg>
-		),
+		subtitle: "Rata-rata",
+		icon: Clock,
 	},
 ];
 
+// Chart Data
 const chartData = [
-	{ day: "Sen", total: 100 },
-	{ day: "Sel", total: 120 },
-	{ day: "Rab", total: 90 },
-	{ day: "Kam", total: 150 },
-	{ day: "Jum", total: 110 },
-	{ day: "Sab", total: 80 },
-	{ day: "Min", total: 130 },
+	{ day: "Sen", total: 45 },
+	{ day: "Sel", total: 62 },
+	{ day: "Rab", total: 38 },
+	{ day: "Kam", total: 75 },
+	{ day: "Jum", total: 58 },
+	{ day: "Sab", total: 32 },
+	{ day: "Min", total: 51 },
 ];
 
+// Top Topics Data
 const topTopics = [
 	{ topic: "Cara mengurus KTP", count: 89 },
 	{ topic: "Syarat Kartu Keluarga", count: 76 },
@@ -126,6 +82,7 @@ const topTopics = [
 	{ topic: "Info program bansos", count: 48 },
 ];
 
+// Busy Hours Data
 const busyHours = [
 	{ period: "Pagi (08–12)", percentage: 30 },
 	{ period: "Siang (12–16)", percentage: 40 },
@@ -138,146 +95,206 @@ const JennaAnalytic = () => {
 	const dark = colorScheme === "dark";
 
 	return (
-		<Box className="space-y-6">
-			<Stack gap="xl">
-				{/* KPI Cards */}
-				<Grid gutter="lg">
-					{kpiData.map((kpi) => (
-						<Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}>
-							<Card
-								p="md"
-								radius="md"
-								withBorder
-								bg={dark ? "#141D34" : "white"}
-								style={{ borderColor: dark ? "#141D34" : "white" }}
-							>
-								<Group justify="space-between" align="flex-start" mb="xs">
-									<Text size="sm" fw={500} c="dimmed">
-										{kpi.title}
-									</Text>
-									{React.cloneElement(kpi.icon, {
-										className: "h-6 w-6", // Keeping classes for now, can be replaced by Mantine Icon component if available or styled with sx prop
-										color: "var(--mantine-color-dimmed)", // Set color via prop
-									})}
-								</Group>
-								<Title order={3} fw={700} mt="xs">
-									{kpi.value}
-								</Title>
-								{kpi.delta && (
-									<Text
-										size="xs"
-										c={
-											kpi.deltaType === "positive"
-												? "green"
-												: kpi.deltaType === "negative"
-													? "red"
-													: "dimmed"
-										}
-										mt={4}
-									>
-										{kpi.delta}
-									</Text>
-								)}
-								{kpi.sub && (
-									<Text size="xs" c="dimmed" mt={2}>
-										{kpi.sub}
-									</Text>
-								)}
-							</Card>
-						</Grid.Col>
-					))}
-				</Grid>
-
-				<Card
-					p="md"
-					radius="md"
-					withBorder
-					bg={dark ? "#141D34" : "white"}
-					style={{ borderColor: dark ? "#141D34" : "white" }}
-				>
-					<Title order={3} fw={500} mb="md">
-						Interaksi Chatbot
-					</Title>
-					<BarChart
-						h={300}
-						data={chartData}
-						dataKey="day"
-						series={[{ name: "total", color: "blue" }]}
-						withLegend
-					/>
-				</Card>
-
-				{/* Charts and Lists Section */}
-				<Grid gutter="lg">
-					{/* Grafik Interaksi Chatbot (now Bar Chart) */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
+		<Stack gap="lg">
+			{/* TOP SECTION - 4 STAT CARDS */}
+			<Grid gutter="md">
+				{kpiData.map((item) => (
+					<Grid.Col key={item.id} span={{ base: 12, sm: 6, lg: 3 }}>
 						<Card
 							p="md"
-							radius="md"
+							radius="xl"
 							withBorder
-							bg={dark ? "#141D34" : "white"}
-							style={{ borderColor: dark ? "#141D34" : "white" }}
+							bg={dark ? "#1E293B" : "white"}
+							style={{
+								borderColor: dark ? "#334155" : "white",
+								boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+								transition: "transform 0.15s ease, box-shadow 0.15s ease",
+							}}
 							h="100%"
 						>
-							<Title order={3} fw={500} mb="md">
-								Jam Tersibuk
-							</Title>
-							<Stack gap="sm">
-								{busyHours.map((item, index) => (
-									<Box key={index}>
-										<Text size="sm">{item.period}</Text>
-										<Group align="center">
-											<Progress value={item.percentage} flex={1} />
-											<Text size="sm" fw={500}>
-												{item.percentage}%
-											</Text>
-										</Group>
-									</Box>
-								))}
-							</Stack>
+							<Group justify="space-between" align="flex-start" w="100%">
+								<Stack gap={2}>
+									<Text size="sm" c="dimmed">
+										{item.title}
+									</Text>
+									<Text size="xl" fw={700} c={dark ? "white" : "gray.9"}>
+										{item.value}
+									</Text>
+									<Group gap={4} align="flex-start">
+										{item.trend === "positive" && (
+											<TrendingUp size={14} color="#22C55E" />
+										)}
+										<Text
+											size="xs"
+											c={
+												item.trend === "positive"
+													? "green"
+													: dark
+														? "gray.4"
+														: "gray.5"
+											}
+										>
+											{item.subtitle}
+										</Text>
+									</Group>
+								</Stack>
+								<ThemeIcon
+									color="#1E3A5F"
+									variant="filled"
+									size="lg"
+									radius="xl"
+								>
+									<item.icon style={{ width: "60%", height: "60%" }} />
+								</ThemeIcon>
+							</Group>
 						</Card>
 					</Grid.Col>
+				))}
+			</Grid>
 
-					{/* Topik Pertanyaan Terbanyak & Jam Tersibuk */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Stack gap="lg">
-							{/* Topik Pertanyaan Terbanyak */}
-							<Card
-								p="md"
-								radius="md"
-								withBorder
-								bg={dark ? "#141D34" : "white"}
-								style={{ borderColor: dark ? "#141D34" : "white" }}
-								h="100%"
-							>
-								<Title order={3} fw={500} mb="md">
-									Topik Pertanyaan Terbanyak
-								</Title>
-								<Stack gap="xs">
-									{topTopics.map((item, index) => (
-										<Group
-											key={index}
-											justify="space-between"
-											align="center"
-											p="xs"
+			{/* MAIN CHART - INTERAKSI CHATBOT */}
+			<Card
+				p="md"
+				radius="xl"
+				withBorder
+				bg={dark ? "#1E293B" : "white"}
+				style={{
+					borderColor: dark ? "#334155" : "white",
+					boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				}}
+			>
+				<Group justify="space-between" mb="md">
+					<Title order={4} c={dark ? "white" : "gray.9"}>
+						Interaksi Chatbot
+					</Title>
+				</Group>
+				<ResponsiveContainer width="100%" height={300}>
+					<BarChart data={chartData}>
+						<CartesianGrid
+							strokeDasharray="3 3"
+							vertical={false}
+							stroke={dark ? "#334155" : "#e5e7eb"}
+						/>
+						<XAxis
+							dataKey="day"
+							axisLine={false}
+							tickLine={false}
+							tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
+						/>
+						<YAxis
+							axisLine={false}
+							tickLine={false}
+							tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
+						/>
+						<Tooltip
+							contentStyle={{
+								backgroundColor: dark ? "#1E293B" : "white",
+								borderColor: dark ? "#334155" : "#e5e7eb",
+								borderRadius: "8px",
+							}}
+							labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
+							cursor={{ fill: dark ? "#334155" : "#f3f4f6" }}
+						/>
+						<Bar
+							dataKey="total"
+							fill="#1E3A5F"
+							radius={[8, 8, 0, 0]}
+							maxBarSize={60}
+						/>
+					</BarChart>
+				</ResponsiveContainer>
+			</Card>
+
+			{/* BOTTOM SECTION - 2 COLUMNS */}
+			<Grid gutter="lg">
+				{/* LEFT: TOPIK PERTANYAAN TERBANYAK */}
+				<Grid.Col span={{ base: 12, lg: 6 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Title order={4} c={dark ? "white" : "gray.9"} mb="md">
+							Topik Pertanyaan Terbanyak
+						</Title>
+						<Stack gap="xs">
+							{topTopics.map((item, index) => (
+								<Box
+									key={index}
+									p="sm"
+									bg={dark ? "#334155" : "#F1F5F9"}
+									style={{
+										transition: "background-color 0.15s ease",
+										cursor: "pointer",
+									}}
+								>
+									<Group justify="space-between">
+										<Text size="sm" fw={500} c={dark ? "white" : "gray.9"}>
+											{item.topic}
+										</Text>
+										<Badge
+											variant="light"
+											color="darmasaba-blue"
+											radius="sm"
+											fw={600}
 										>
-											<Text size="sm" fw={500}>
-												{item.topic}
-											</Text>
-											<Badge variant="light" color="gray">
-												{item.count}x
-											</Badge>
-										</Group>
-									))}
-								</Stack>
-							</Card>
-
-							{/* Jam Tersibuk */}
+											{item.count}x
+										</Badge>
+									</Group>
+								</Box>
+							))}
 						</Stack>
-					</Grid.Col>
-				</Grid>
-			</Stack>
-		</Box>
+					</Card>
+				</Grid.Col>
+
+				{/* RIGHT: JAM TERSIBUK */}
+				<Grid.Col span={{ base: 12, lg: 6 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Title order={4} c={dark ? "white" : "gray.9"} mb="md">
+							Jam Tersibuk
+						</Title>
+						<Stack gap="md">
+							{busyHours.map((item, index) => (
+								<Box key={index}>
+									<Group justify="space-between" mb={5}>
+										<Text size="sm" fw={500} c={dark ? "white" : "gray.9"}>
+											{item.period}
+										</Text>
+										<Text size="sm" fw={600} c={dark ? "white" : "gray.9"}>
+											{item.percentage}%
+										</Text>
+									</Group>
+									<Progress
+										value={item.percentage}
+										size="lg"
+										radius="xl"
+										color="#1E3A5F"
+										animated
+									/>
+								</Box>
+							))}
+						</Stack>
+					</Card>
+				</Grid.Col>
+			</Grid>
+		</Stack>
 	);
 };
-export default JennaAnalytic;
+
+export default JennaAnalytic;

src/components/keamanan-page.tsx

@@ -322,4 +322,4 @@ const KeamananPage = () => {
 	);
 };
 
-export default KeamananPage;
+export default KeamananPage;

src/components/keuangan-anggaran.tsx

@@ -354,4 +354,4 @@ const KeuanganAnggaran = () => {
 	);
 };
 
-export default KeuanganAnggaran;
+export default KeuanganAnggaran;

src/components/kinerja-divisi.tsx

@@ -1,13 +1,12 @@
 import { Grid, Stack } from "@mantine/core";
-import {
-	ActivityCard,
-	ArchiveCard,
-	DiscussionPanel,
-	DivisionList,
-	DocumentChart,
-	EventCard,
-	ProgressChart,
-} from ".";
+import { ActivityCard } from "./kinerja-divisi/activity-card";
+import { DivisionList } from "./kinerja-divisi/division-list";
+import { DocumentChart } from "./kinerja-divisi/document-chart";
+import { ProgressChart } from "./kinerja-divisi/progress-chart";
+import { DiscussionPanel } from "./kinerja-divisi/discussion-panel";
+import { EventCard } from "./kinerja-divisi/event-card";
+import { ArchiveCard } from "./kinerja-divisi/archive-card";
+
 
 // Data for program kegiatan (Section 1)
 const programKegiatanData = [
@@ -15,25 +14,25 @@ const programKegiatanData = [
 		title: "Rakor 2025",
 		date: "3 Juli 2025",
 		progress: 90,
-		status: "selesai" as const,
+		status: "Selesai" as const,
 	},
 	{
 		title: "Pemutakhiran Indeks Desa",
 		date: "3 Juli 2025",
 		progress: 85,
-		status: "selesai" as const,
+		status: "Selesai" as const,
 	},
 	{
 		title: "Mengurus Akta Cerai Warga",
 		date: "3 Juli 2025",
 		progress: 80,
-		status: "selesai" as const,
+		status: "Selesai" as const,
 	},
 	{
 		title: "Pasek 7 Desa Adat",
 		date: "3 Juli 2025",
 		progress: 92,
-		status: "selesai" as const,
+		status: "Selesai" as const,
 	},
 ];
 

src/components/kinerja-divisi/activity-card.tsx

@@ -1,17 +1,10 @@
-import {
-	Box,
-	Card,
-	Group,
-	Progress,
-	Text,
-	useMantineColorScheme,
-} from "@mantine/core";
+import { Card, Text, Progress, Group, Box } from "@mantine/core";
 
 interface ActivityCardProps {
 	title: string;
 	date: string;
 	progress: number;
-	status: "selesai" | "berjalan" | "tertunda";
+	status: "Selesai" | "Berjalan" | "Tertunda";
 }
 
 export function ActivityCard({
@@ -20,16 +13,13 @@ export function ActivityCard({
 	progress,
 	status,
 }: ActivityCardProps) {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	const getStatusColor = (s: string) => {
-		switch (s) {
-			case "selesai":
+	const getStatusColor = () => {
+		switch (status) {
+			case "Selesai":
 				return "#22C55E";
-			case "berjalan":
+			case "Berjalan":
 				return "#3B82F6";
-			case "tertunda":
+			case "Tertunda":
 				return "#EF4444";
 			default:
 				return "#9CA3AF";
@@ -38,58 +28,62 @@ export function ActivityCard({
 
 	return (
 		<Card
-			p="md"
 			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
+			p={0}
+			withBorder={false}
 			style={{
-				borderColor: dark ? "#334155" : "white",
-				boxShadow: dark
-					? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
-					: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				backgroundColor: "#F3F4F6",
+				overflow: "hidden",
 			}}
 		>
+			{/* 🔵 HEADER */}
 			<Box
 				style={{
-					borderLeft: `4px solid #3B82F6`,
-					paddingLeft: 12,
-					marginBottom: 12,
+					backgroundColor: "#1E3A5F",
+					padding: "16px",
+					textAlign: "center",
 				}}
 			>
-				<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"}>
+				<Text c="white" fw={700} size="md">
 					{title}
 				</Text>
 			</Box>
 
-			<Group justify="space-between" mb="xs">
-				<Text size="xs" c="dimmed">
-					{date}
-				</Text>
-				<Box
-					style={{
-						backgroundColor: getStatusColor(status),
-						color: "white",
-						padding: "2px 8px",
-						borderRadius: 4,
-						fontSize: 11,
-						fontWeight: 600,
+			{/* CONTENT */}
+			<Box p="md">
+				{/* PROGRESS */}
+				<Progress
+					value={progress}
+					radius="xl"
+					size="lg"
+					color="orange"
+					styles={{
+						root: {
+							height: 16,
+						},
 					}}
-				>
-					{status.toUpperCase()}
-				</Box>
-			</Group>
+				/>
 
-			<Progress
-				value={progress}
-				size="sm"
-				radius="xl"
-				color={progress === 100 ? "green" : "yellow"}
-				animated={progress < 100}
-			/>
+				{/* FOOTER */}
+				<Group justify="space-between" mt="md">
+					<Text size="sm" fw={500}>
+						{date}
+					</Text>
 
-			<Text size="xs" c="dimmed" mt="xs" ta="right">
-				{progress}%
-			</Text>
+					<Box
+						style={{
+							backgroundColor: getStatusColor(),
+							color: "white",
+							padding: "4px 12px",
+							borderRadius: 999,
+							fontSize: 12,
+							fontWeight: 600,
+						}}
+					>
+						{status}
+					</Box>
+				</Group>
+			</Box>
 		</Card>
 	);
-}
+}

src/components/kinerja-divisi/archive-card.tsx

@@ -28,6 +28,7 @@ export function ArchiveCard({ item, onClick }: ArchiveCardProps) {
 				cursor: "pointer",
 				transition: "transform 0.2s, box-shadow 0.2s",
 			}}
+			h="100%"
 			onClick={onClick}
 		>
 			<Group gap="md">

src/components/kinerja-divisi/discussion-panel.tsx

@@ -48,6 +48,7 @@ export function DiscussionPanel() {
 					? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
 					: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
 			}}
+			h="100%"
 		>
 			<Group gap="xs" mb="md">
 				<MessageCircle size={20} color={dark ? "#E2E8F0" : "#1E3A5F"} />

src/components/kinerja-divisi/document-chart.tsx

@@ -3,6 +3,7 @@ import {
 	Bar,
 	BarChart,
 	CartesianGrid,
+	Cell,
 	ResponsiveContainer,
 	Tooltip,
 	XAxis,
@@ -10,8 +11,8 @@ import {
 } from "recharts";
 
 const documentData = [
-	{ name: "Gambar", value: 300 },
-	{ name: "Dokumen", value: 310 },
+	{ name: "Gambar", jumlah: 300, color: "#FACC15" },
+	{ name: "Dokumen", jumlah: 310, color: "#22C55E" },
 ];
 
 export function DocumentChart() {
@@ -61,7 +62,11 @@ export function DocumentChart() {
 						}}
 						labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
 					/>
-					<Bar dataKey="value" fill="#3B82F6" radius={[4, 4, 0, 0]} />
+					<Bar dataKey="jumlah" radius={[4, 4, 0, 0]}>
+						{documentData.map((entry, index) => (
+							<Cell key={`cell-${index}`} fill={entry.color} />
+						))}
+					</Bar>
 				</BarChart>
 			</ResponsiveContainer>
 		</Card>

src/components/kinerja-divisi/event-card.tsx

@@ -33,6 +33,7 @@ export function EventCard({ agendas = [] }: EventCardProps) {
 					? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
 					: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
 			}}
+			h="100%"
 		>
 			<Group gap="xs" mb="md">
 				<Calendar size={20} color={dark ? "#E2E8F0" : "#1E3A5F"} />

src/components/kinerja-divisi/progress-chart.tsx

@@ -10,7 +10,7 @@ import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
 
 const progressData = [
 	{ name: "Selesai", value: 83.33, color: "#22C55E" },
-	{ name: "Dikerjakan", value: 16.67, color: "#FACC15" },
+	{ name: "Dikerjakan", value: 16.67, color: "#F59E0B" },
 	{ name: "Segera Dikerjakan", value: 0, color: "#3B82F6" },
 	{ name: "Dibatalkan", value: 0, color: "#EF4444" },
 ];

src/components/sidebar.tsx

@@ -3,6 +3,7 @@ import {
 	Box,
 	Collapse,
 	Group,
+	Image,
 	Input,
 	NavLink as MantineNavLink,
 	Stack,
@@ -60,30 +61,10 @@ export function Sidebar({ className }: SidebarProps) {
 	return (
 		<Box className={className}>
 			{/* Logo */}
-			<Box
-				p="md"
-				style={{ borderBottom: "1px solid var(--mantine-color-gray-3)" }}
-			>
-				<Group gap="xs">
-					<Badge
-						color="dark"
-						variant="filled"
-						size="xl"
-						radius="md"
-						py="xs"
-						px="md"
-						style={{ fontSize: "1.5rem", fontWeight: "bold" }}
-					>
-						DESA
-					</Badge>
-					<Badge color="green" variant="filled" size="md" radius="md">
-						+
-					</Badge>
-				</Group>
-				<Text size="xs" c="dimmed" mt="xs">
-					Digitalisasi Desa Transparansi Kerja
-				</Text>
-			</Box>
+			<Image
+				src={dark ? "/white.png" : "/light-mode.png"}
+				alt="Logo"
+			/>
 
 			{/* Search */}
 			<Box p="md">
@@ -204,4 +185,4 @@ export function Sidebar({ className }: SidebarProps) {
 			</Stack>
 		</Box>
 	);
-}
+}

src/components/sosial-page.tsx

@@ -462,4 +462,4 @@ const SosialPage = () => {
 	);
 };
 
-export default SosialPage;
+export default SosialPage;

src/index.css

@@ -1 +1 @@
-@import "tailwindcss";
+@import "tailwindcss";

src/index.ts

@@ -12,240 +12,240 @@ const isProduction = process.env.NODE_ENV === "production";
 
 // Auto-seed database in production (ensure admin user exists)
 if (isProduction && process.env.ADMIN_EMAIL) {
-  try {
-    console.log("🌱 Running database seed in production...");
-    const { runSeed } = await import("../prisma/seed.ts");
-    await runSeed();
-  } catch (error) {
-    console.error("⚠️ Production seed failed:", error);
-    // Don't crash the server if seed fails
-  }
+	try {
+		console.log("🌱 Running database seed in production...");
+		const { runSeed } = await import("../prisma/seed.ts");
+		await runSeed();
+	} catch (error) {
+		console.error("⚠️ Production seed failed:", error);
+		// Don't crash the server if seed fails
+	}
 }
 
 const app = new Elysia().use(api);
 
 if (!isProduction) {
-  // Development: Use Vite middleware
-  const { createVite } = await import("./vite");
-  const vite = await createVite();
+	// Development: Use Vite middleware
+	const { createVite } = await import("./vite");
+	const vite = await createVite();
 
-  // Serve PWA/TWA assets in dev (root and nested path support)
-  const _servePwaAsset = (srcPath: string) => () => Bun.file(srcPath);
+	// Serve PWA/TWA assets in dev (root and nested path support)
+	const _servePwaAsset = (srcPath: string) => () => Bun.file(srcPath);
 
-  app.post("/__open-in-editor", ({ body }) => {
-    const { relativePath, lineNumber, columnNumber } = body as {
-      relativePath: string;
-      lineNumber: number;
-      columnNumber: number;
-    };
+	app.post("/__open-in-editor", ({ body }) => {
+		const { relativePath, lineNumber, columnNumber } = body as {
+			relativePath: string;
+			lineNumber: number;
+			columnNumber: number;
+		};
 
-    openInEditor(relativePath, {
-      line: lineNumber,
-      column: columnNumber,
-      editor: "antigravity",
-    });
+		openInEditor(relativePath, {
+			line: lineNumber,
+			column: columnNumber,
+			editor: "antigravity",
+		});
 
-    return { ok: true };
-  });
+		return { ok: true };
+	});
 
-  // Vite middleware for other requests
-  app.all("*", async ({ request }) => {
-    const url = new URL(request.url);
-    const pathname = url.pathname;
+	// Vite middleware for other requests
+	app.all("*", async ({ request }) => {
+		const url = new URL(request.url);
+		const pathname = url.pathname;
 
-    // Serve transformed index.html for root or any path that should be handled by the SPA
-    if (
-      pathname === "/" ||
-      (!pathname.includes(".") &&
-        !pathname.startsWith("/@") &&
-        !pathname.startsWith("/inspector") &&
-        !pathname.startsWith("/__open-stack-frame-in-editor") &&
-        !pathname.startsWith("/api"))
-    ) {
-      try {
-        const htmlPath = path.resolve("src/index.html");
-        let html = fs.readFileSync(htmlPath, "utf-8");
-        html = await vite.transformIndexHtml(pathname, html);
+		// Serve transformed index.html for root or any path that should be handled by the SPA
+		if (
+			pathname === "/" ||
+			(!pathname.includes(".") &&
+				!pathname.startsWith("/@") &&
+				!pathname.startsWith("/inspector") &&
+				!pathname.startsWith("/__open-stack-frame-in-editor") &&
+				!pathname.startsWith("/api"))
+		) {
+			try {
+				const htmlPath = path.resolve("src/index.html");
+				let html = fs.readFileSync(htmlPath, "utf-8");
+				html = await vite.transformIndexHtml(pathname, html);
 
-        return new Response(html, {
-          headers: { "Content-Type": "text/html" },
-        });
-      } catch (e) {
-        console.error(e);
-      }
-    }
+				return new Response(html, {
+					headers: { "Content-Type": "text/html" },
+				});
+			} catch (e) {
+				console.error(e);
+			}
+		}
 
-    return new Promise<Response>((resolve) => {
-      // Use a Proxy to mock Node.js req because Bun's Request is read-only
-      const req = new Proxy(request, {
-        get(target, prop) {
-          if (prop === "url") return pathname + url.search;
-          if (prop === "method") return request.method;
-          if (prop === "headers")
-            return Object.fromEntries(request.headers as any);
-          return (target as any)[prop];
-        },
-      }) as any;
+		return new Promise<Response>((resolve) => {
+			// Use a Proxy to mock Node.js req because Bun's Request is read-only
+			const req = new Proxy(request, {
+				get(target, prop) {
+					if (prop === "url") return pathname + url.search;
+					if (prop === "method") return request.method;
+					if (prop === "headers")
+						return Object.fromEntries(request.headers as any);
+					return (target as any)[prop];
+				},
+			}) as any;
 
-      const res = {
-        statusCode: 200,
-        setHeader(name: string, value: string) {
-          this.headers[name.toLowerCase()] = value;
-        },
-        getHeader(name: string) {
-          return this.headers[name.toLowerCase()];
-        },
-        writeHead(code: number, headers: Record<string, string>) {
-          this.statusCode = code;
-          Object.assign(this.headers, headers);
-        },
-        write(chunk: any, callback?: () => void) {
-          // Collect chunks for streaming responses
-          if (!this._chunks) this._chunks = [];
-          this._chunks.push(chunk);
-          if (callback) callback();
-          return true; // Indicate we can accept more data
-        },
-        headers: {} as Record<string, string>,
-        end(data: any) {
-          // Handle potential Buffer or string data from Vite
-          let body = data;
-          // If we have collected chunks from write() calls, combine them
-          if (this._chunks && this._chunks.length > 0) {
-            body = Buffer.concat(this._chunks);
-          }
-          if (data instanceof Uint8Array) {
-            body = data;
-          } else if (typeof data === "string") {
-            body = data;
-          } else if (data) {
-            body = String(data);
-          }
+			const res = {
+				statusCode: 200,
+				setHeader(name: string, value: string) {
+					this.headers[name.toLowerCase()] = value;
+				},
+				getHeader(name: string) {
+					return this.headers[name.toLowerCase()];
+				},
+				writeHead(code: number, headers: Record<string, string>) {
+					this.statusCode = code;
+					Object.assign(this.headers, headers);
+				},
+				write(chunk: any, callback?: () => void) {
+					// Collect chunks for streaming responses
+					if (!this._chunks) this._chunks = [];
+					this._chunks.push(chunk);
+					if (callback) callback();
+					return true; // Indicate we can accept more data
+				},
+				headers: {} as Record<string, string>,
+				end(data: any) {
+					// Handle potential Buffer or string data from Vite
+					let body = data;
+					// If we have collected chunks from write() calls, combine them
+					if (this._chunks && this._chunks.length > 0) {
+						body = Buffer.concat(this._chunks);
+					}
+					if (data instanceof Uint8Array) {
+						body = data;
+					} else if (typeof data === "string") {
+						body = data;
+					} else if (data) {
+						body = String(data);
+					}
 
-          resolve(
-            new Response(body || "", {
-              status: this.statusCode,
-              headers: this.headers,
-            }),
-          );
-        },
-        // Minimal event emitter mock
-        once() {
-          return this;
-        },
-        on() {
-          return this;
-        },
-        emit() {
-          return this;
-        },
-        removeListener() {
-          return this;
-        },
-      } as any;
+					resolve(
+						new Response(body || "", {
+							status: this.statusCode,
+							headers: this.headers,
+						}),
+					);
+				},
+				// Minimal event emitter mock
+				once() {
+					return this;
+				},
+				on() {
+					return this;
+				},
+				emit() {
+					return this;
+				},
+				removeListener() {
+					return this;
+				},
+			} as any;
 
-      vite.middlewares(req, res, (err: any) => {
-        if (err) {
-          console.error("Vite middleware error:", err);
-          resolve(new Response(err.stack || err.toString(), { status: 500 }));
-          return;
-        }
-        // If Vite doesn't handle it, return 404
-        resolve(new Response("Not Found", { status: 404 }));
-      });
-    });
-  });
+			vite.middlewares(req, res, (err: any) => {
+				if (err) {
+					console.error("Vite middleware error:", err);
+					resolve(new Response(err.stack || err.toString(), { status: 500 }));
+					return;
+				}
+				// If Vite doesn't handle it, return 404
+				resolve(new Response("Not Found", { status: 404 }));
+			});
+		});
+	});
 } else {
-  // Production: Final catch-all for static files and SPA fallback
-  app.all("*", async ({ request }) => {
-    const url = new URL(request.url);
-    const pathname = url.pathname;
+	// Production: Final catch-all for static files and SPA fallback
+	app.all("*", async ({ request }) => {
+		const url = new URL(request.url);
+		const pathname = url.pathname;
 
-    // 1. Try exact match in dist
-    let filePath = path.join(
-      "dist",
-      pathname === "/" ? "index.html" : pathname,
-    );
+		// 1. Try exact match in dist
+		let filePath = path.join(
+			"dist",
+			pathname === "/" ? "index.html" : pathname,
+		);
 
-    // 1.1 Special handling for PWA/TWA assets that might not be in dist (since we use custom bun build)
-    if (isProduction) {
-      const srcPath = path.join("src", pathname);
-      if (fs.existsSync(srcPath)) {
-        filePath = srcPath;
-      }
-      // Check public folder for static assets
-      const publicPath = path.join("public", pathname);
-      if (fs.existsSync(publicPath)) {
-        filePath = publicPath;
-      }
-    }
+		// 1.1 Special handling for PWA/TWA assets that might not be in dist (since we use custom bun build)
+		if (isProduction) {
+			const srcPath = path.join("src", pathname);
+			if (fs.existsSync(srcPath)) {
+				filePath = srcPath;
+			}
+			// Check public folder for static assets
+			const publicPath = path.join("public", pathname);
+			if (fs.existsSync(publicPath)) {
+				filePath = publicPath;
+			}
+		}
 
-    // 2. If not found and looks like an asset (has extension), try root of dist or src
-    if (!fs.existsSync(filePath) || !fs.statSync(filePath).isFile()) {
-      if (pathname.includes(".") && !pathname.endsWith("/")) {
-        const filename = path.basename(pathname);
+		// 2. If not found and looks like an asset (has extension), try root of dist or src
+		if (!fs.existsSync(filePath) || !fs.statSync(filePath).isFile()) {
+			if (pathname.includes(".") && !pathname.endsWith("/")) {
+				const filename = path.basename(pathname);
 
-        // Try root of dist
-        const fallbackDistPath = path.join("dist", filename);
-        if (
-          fs.existsSync(fallbackDistPath) &&
-          fs.statSync(fallbackDistPath).isFile()
-        ) {
-          filePath = fallbackDistPath;
-        }
-        // Try public folder
-        else {
-          const fallbackPublicPath = path.join("public", filename);
-          if (
-            fs.existsSync(fallbackPublicPath) &&
-            fs.statSync(fallbackPublicPath).isFile()
-          ) {
-            filePath = fallbackPublicPath;
-          }
-        }
-        // Special handling for PWA files in src
-        if (pathname.includes("assetlinks.json")) {
-          const srcFilename = pathname.includes("assetlinks.json")
-            ? ".well-known/assetlinks.json"
-            : filename;
-          const fallbackSrcPath = path.join("src", srcFilename);
-          if (
-            fs.existsSync(fallbackSrcPath) &&
-            fs.statSync(fallbackSrcPath).isFile()
-          ) {
-            filePath = fallbackSrcPath;
-          }
-        }
-      }
-    }
+				// Try root of dist
+				const fallbackDistPath = path.join("dist", filename);
+				if (
+					fs.existsSync(fallbackDistPath) &&
+					fs.statSync(fallbackDistPath).isFile()
+				) {
+					filePath = fallbackDistPath;
+				}
+				// Try public folder
+				else {
+					const fallbackPublicPath = path.join("public", filename);
+					if (
+						fs.existsSync(fallbackPublicPath) &&
+						fs.statSync(fallbackPublicPath).isFile()
+					) {
+						filePath = fallbackPublicPath;
+					}
+				}
+				// Special handling for PWA files in src
+				if (pathname.includes("assetlinks.json")) {
+					const srcFilename = pathname.includes("assetlinks.json")
+						? ".well-known/assetlinks.json"
+						: filename;
+					const fallbackSrcPath = path.join("src", srcFilename);
+					if (
+						fs.existsSync(fallbackSrcPath) &&
+						fs.statSync(fallbackSrcPath).isFile()
+					) {
+						filePath = fallbackSrcPath;
+					}
+				}
+			}
+		}
 
-    if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
-      const file = Bun.file(filePath);
-      return new Response(file, {
-        headers: {
-          Vary: "Accept-Encoding",
-        },
-      });
-    }
+		if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+			const file = Bun.file(filePath);
+			return new Response(file, {
+				headers: {
+					Vary: "Accept-Encoding",
+				},
+			});
+		}
 
-    // 3. SPA Fallback: Serve index.html
-    const indexHtml = path.join("dist", "index.html");
-    if (fs.existsSync(indexHtml)) {
-      return new Response(Bun.file(indexHtml), {
-        headers: {
-          Vary: "Accept-Encoding",
-        },
-      });
-    }
+		// 3. SPA Fallback: Serve index.html
+		const indexHtml = path.join("dist", "index.html");
+		if (fs.existsSync(indexHtml)) {
+			return new Response(Bun.file(indexHtml), {
+				headers: {
+					Vary: "Accept-Encoding",
+				},
+			});
+		}
 
-    return new Response("Not Found", { status: 404 });
-  });
+		return new Response("Not Found", { status: 404 });
+	});
 }
 
 app.listen(PORT);
 
 console.log(
-  `🚀 Server running at http://localhost:${PORT} in ${isProduction ? "production" : "development"} mode`,
+	`🚀 Server running at http://localhost:${PORT} in ${isProduction ? "production" : "development"} mode`,
 );
 
 export type ApiApp = typeof app;

src/middleware/authMiddleware.tsx

@@ -152,4 +152,4 @@ export function createProtectedRoute(options: ProtectedRouteOptions = {}) {
  * Default Middleware Export
  * ================================ */
 
-export const protectedRouteMiddleware = createProtectedRoute();
+export const protectedRouteMiddleware = createProtectedRoute();

src/routes/__root.tsx

@@ -28,4 +28,4 @@ export const Route = createRootRoute({
 
 function RootComponent() {
 	return <Outlet />;
-}
+}

src/routes/index.tsx

@@ -48,4 +48,4 @@ function DashboardPage() {
 			</AppShell.Main>
 		</AppShell>
 	);
-}
+}

src/routes/jenna-analytic.tsx

@@ -1,9 +1,51 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import JennaAnalytic from "@/components/jenna-analytic";
+import { Sidebar } from "@/components/sidebar";
 
 export const Route = createFileRoute("/jenna-analytic")({
-	component: RouteComponent,
+	component: JennaAnalyticPage,
 });
 
-function RouteComponent() {
-	return <div>Hello "/jenna-analytic"!</div>;
+function JennaAnalyticPage() {
+	const [opened, { toggle }] = useDisclosure();
+	const { colorScheme } = useMantineColorScheme();
+	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
+	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
+	const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
+
+	return (
+		<AppShell
+			header={{ height: 60 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+					<Header />
+				</Group>
+			</AppShell.Header>
+
+			<AppShell.Navbar
+				p="md"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
+				</div>
+			</AppShell.Navbar>
+
+			<AppShell.Main bg={mainBgColor}>
+				<JennaAnalytic />
+			</AppShell.Main>
+		</AppShell>
+	);
 }

src/routes/pengaturan/route.tsx

@@ -1,11 +1,10 @@
-import {
-	AppShell,
-	Burger,
-	Group,
-	useMantineColorScheme,
-} from "@mantine/core";
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
 import { useDisclosure, useMediaQuery } from "@mantine/hooks";
-import { createFileRoute, Outlet, useRouterState } from "@tanstack/react-router";
+import {
+	createFileRoute,
+	Outlet,
+	useRouterState,
+} from "@tanstack/react-router";
 import { useEffect } from "react";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
@@ -44,12 +43,7 @@ function PengaturanLayout() {
 		>
 			<AppShell.Header bg={headerBgColor}>
 				<Group h="100%" px="lg" align="center" wrap="nowrap">
-					<Burger
-						opened={opened}
-						onClick={toggle}
-						hiddenFrom="sm"
-						size="sm"
-					/>
+					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
 					<Header />
 				</Group>
 			</AppShell.Header>

src/utils/env.ts

@@ -21,7 +21,7 @@ export const getEnv = (key: string, defaultValue = ""): string => {
 };
 
 export const VITE_PUBLIC_URL = (() => {
-	// Priority: 
+	// Priority:
 	// 1. BETTER_AUTH_URL (standard for better-auth)
 	// 2. VITE_PUBLIC_URL (our app standard)
 	// 3. window.location.origin (browser fallback)