Merge pull request 'nico/26-feb-26/fix-seed' (#4) from nico/26-feb-26/fix-seed into main

Reviewed-on: #4

.env.example

@@ -1,19 +0,0 @@
-# Database
-DATABASE_URL="postgresql://user:password@localhost:5432/dashboard_desa?schema=public"
-
-# Authentication
-BETTER_AUTH_SECRET="your-secret-key-here-min-32-characters"
-ADMIN_EMAIL="admin@example.com"
-ADMIN_PASSWORD="admin123"
-
-# GitHub OAuth (Optional)
-GITHUB_CLIENT_ID=""
-GITHUB_CLIENT_SECRET=""
-
-# Application
-PORT=3000
-NODE_ENV=development
-LOG_LEVEL=info
-
-# Public URL
-VITE_PUBLIC_URL="http://localhost:3000"

.github/workflows/publish.yml

@@ -1,106 +0,0 @@
-name: Publish Docker to GHCR
-
-on:
-  workflow_dispatch:
-    inputs:
-      stack_env:
-        description: "stack env"
-        required: true
-        type: choice
-        default: "dev"
-        options:
-          - dev
-          - prod
-          - stg
-      tag:
-        description: "Image tag (e.g. 1.0.0)"
-        required: true
-        default: "1.0.0"
-
-
-env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
-
-jobs:
-  publish:
-    name: Build & Push to GHCR ${{ github.repository }}:${{ github.event.inputs.stack_env }}-${{ github.event.inputs.tag }}
-    runs-on: ubuntu-latest
-    environment: ${{ vars.PORTAINER_ENV || 'portainer' }}
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Free disk space
-        run: |
-          sudo rm -rf /usr/share/dotnet
-          sudo rm -rf /usr/local/lib/android
-          sudo rm -rf /opt/ghc
-          sudo rm -rf /opt/hostedtoolcache/CodeQL
-          sudo docker image prune --all --force
-          df -h
-
-      - name: Checkout branch ${{ github.event.inputs.stack_env }}
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.inputs.stack_env }}
-
-      - name: Checkout scripts from main
-        uses: actions/checkout@v4
-        with:
-          ref: main
-          path: .ci
-          sparse-checkout: .github/workflows/script
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Generate image metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: |
-            type=raw,value=${{ github.event.inputs.stack_env }}-${{ github.event.inputs.tag }}
-            type=raw,value=${{ github.event.inputs.stack_env }}-latest
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          platforms: linux/amd64
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          no-cache: true
-
-      - name: Notify success
-        if: success()
-        run: bash ./.ci/.github/workflows/script/notify.sh
-        env:
-          TELEGRAM_TOKEN: ${{ secrets.TELEGRAM_TOKEN }}
-          TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
-          NOTIFY_STATUS: success
-          NOTIFY_WORKFLOW: "Publish Docker"
-          NOTIFY_DETAIL: "Image: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.event.inputs.stack_env }}-${{ github.event.inputs.tag }}"
-
-      - name: Notify failure
-        if: failure()
-        run: bash ./.ci/.github/workflows/script/notify.sh
-        env:
-          TELEGRAM_TOKEN: ${{ secrets.TELEGRAM_TOKEN }}
-          TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
-          NOTIFY_STATUS: failure
-          NOTIFY_WORKFLOW: "Publish Docker"
-          NOTIFY_DETAIL: "Image: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.event.inputs.stack_env }}-${{ github.event.inputs.tag }}"

.github/workflows/re-pull.yml

@@ -1,60 +0,0 @@
-name: Re-Pull Docker
-on:
-    workflow_dispatch:
-        inputs:
-            stack_name:
-                description: "stack name"
-                required: true
-                type: string
-            stack_env:
-                description: "stack env"
-                required: true
-                type: choice
-                default: "dev"
-                options:
-                    - dev
-                    - stg
-                    - prod
-
-jobs:
-    publish:
-        name: Re-Pull Docker ${{ github.event.inputs.stack_name }}
-        runs-on: ubuntu-latest
-        environment: ${{ vars.PORTAINER_ENV || 'portainer' }}
-        permissions:
-            contents: read
-            packages: write
-        steps:
-            - name: Checkout scripts from main
-              uses: actions/checkout@v4
-              with:
-                  ref: main
-                  sparse-checkout: .github/workflows/script
-
-            - name: Deploy ke Portainer
-              run: bash ./.github/workflows/script/re-pull.sh
-              env:
-                  PORTAINER_USERNAME: ${{ secrets.PORTAINER_USERNAME }}
-                  PORTAINER_PASSWORD: ${{ secrets.PORTAINER_PASSWORD }}
-                  PORTAINER_URL: ${{ secrets.PORTAINER_URL }}
-                  STACK_NAME: ${{ github.event.inputs.stack_name }}-${{ github.event.inputs.stack_env }}
-
-            - name: Notify success
-              if: success()
-              run: bash ./.github/workflows/script/notify.sh
-              env:
-                  TELEGRAM_TOKEN: ${{ secrets.TELEGRAM_TOKEN }}
-                  TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
-                  NOTIFY_STATUS: success
-                  NOTIFY_WORKFLOW: "Re-Pull Docker"
-                  NOTIFY_DETAIL: "Stack: ${{ github.event.inputs.stack_name }}-${{ github.event.inputs.stack_env }}"
-
-            - name: Notify failure
-              if: failure()
-              run: bash ./.github/workflows/script/notify.sh
-              env:
-                  TELEGRAM_TOKEN: ${{ secrets.TELEGRAM_TOKEN }}
-                  TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
-                  NOTIFY_STATUS: failure
-                  NOTIFY_WORKFLOW: "Re-Pull Docker"
-                  NOTIFY_DETAIL: "Stack: ${{ github.event.inputs.stack_name }}-${{ github.event.inputs.stack_env }}"

.github/workflows/script/notify.sh

@@ -1,26 +0,0 @@
-#!/bin/bash
-
-: "${TELEGRAM_TOKEN:?TELEGRAM_TOKEN tidak di-set}"
-: "${TELEGRAM_CHAT_ID:?TELEGRAM_CHAT_ID tidak di-set}"
-: "${NOTIFY_STATUS:?NOTIFY_STATUS tidak di-set}"
-: "${NOTIFY_WORKFLOW:?NOTIFY_WORKFLOW tidak di-set}"
-
-if [ "$NOTIFY_STATUS" = "success" ]; then
-  ICON="✅"
-  TEXT="${ICON} *${NOTIFY_WORKFLOW}* berhasil!"
-else
-  ICON="❌"
-  TEXT="${ICON} *${NOTIFY_WORKFLOW}* gagal!"
-fi
-
-if [ -n "$NOTIFY_DETAIL" ]; then
-  TEXT="${TEXT}
-${NOTIFY_DETAIL}"
-fi
-
-curl -s -X POST "https://api.telegram.org/bot${TELEGRAM_TOKEN}/sendMessage" \
-  -H "Content-Type: application/json" \
-  -d "$(jq -n \
-    --arg chat_id "$TELEGRAM_CHAT_ID" \
-    --arg text "$TEXT" \
-    '{chat_id: $chat_id, text: $text, parse_mode: "Markdown"}')"

.github/workflows/script/re-pull.sh

@@ -1,93 +0,0 @@
-#!/bin/bash
-
-: "${PORTAINER_URL:?PORTAINER_URL tidak di-set}"
-: "${PORTAINER_USERNAME:?PORTAINER_USERNAME tidak di-set}"
-: "${PORTAINER_PASSWORD:?PORTAINER_PASSWORD tidak di-set}"
-: "${STACK_NAME:?STACK_NAME tidak di-set}"
-
-echo "🔐 Autentikasi ke Portainer..."
-TOKEN=$(curl -s -X POST https://${PORTAINER_URL}/api/auth \
-  -H "Content-Type: application/json" \
-  -d "{\"username\": \"${PORTAINER_USERNAME}\", \"password\": \"${PORTAINER_PASSWORD}\"}" \
-  | jq -r .jwt)
-
-if [ -z "$TOKEN" ] || [ "$TOKEN" = "null" ]; then
-  echo "❌ Autentikasi gagal! Cek PORTAINER_URL, USERNAME, dan PASSWORD."
-  exit 1
-fi
-
-echo "🔍 Mencari stack: $STACK_NAME..."
-STACK=$(curl -s -X GET https://${PORTAINER_URL}/api/stacks \
-  -H "Authorization: Bearer ${TOKEN}" \
-  | jq ".[] | select(.Name == \"$STACK_NAME\")")
-
-if [ -z "$STACK" ]; then
-  echo "❌ Stack '$STACK_NAME' tidak ditemukan di Portainer!"
-  echo "   Pastikan nama stack sudah benar."
-  exit 1
-fi
-
-STACK_ID=$(echo "$STACK" | jq -r .Id)
-ENDPOINT_ID=$(echo "$STACK" | jq -r .EndpointId)
-ENV=$(echo "$STACK" | jq '.Env // []')
-
-echo "📄 Mengambil compose file..."
-STACK_FILE=$(curl -s -X GET "https://${PORTAINER_URL}/api/stacks/${STACK_ID}/file" \
-  -H "Authorization: Bearer ${TOKEN}" \
-  | jq -r .StackFileContent)
-
-PAYLOAD=$(jq -n \
-  --arg content "$STACK_FILE" \
-  --argjson env "$ENV" \
-  '{stackFileContent: $content, env: $env, pullImage: true}')
-
-echo "🚀 Redeploying $STACK_NAME (pull latest image)..."
-HTTP_STATUS=$(curl -s -o /tmp/portainer_response.json -w "%{http_code}" \
-  -X PUT "https://${PORTAINER_URL}/api/stacks/${STACK_ID}?endpointId=${ENDPOINT_ID}" \
-  -H "Authorization: Bearer ${TOKEN}" \
-  -H "Content-Type: application/json" \
-  -d "$PAYLOAD")
-
-if [ "$HTTP_STATUS" != "200" ]; then
-  echo "❌ Redeploy gagal! HTTP Status: $HTTP_STATUS"
-  cat /tmp/portainer_response.json | jq .
-  exit 1
-fi
-
-echo "⏳ Menunggu container running..."
-
-MAX_RETRY=15
-COUNT=0
-
-while [ $COUNT -lt $MAX_RETRY ]; do
-  sleep 5
-  COUNT=$((COUNT + 1))
-
-  CONTAINERS=$(curl -s -X GET \
-    "https://${PORTAINER_URL}/api/endpoints/${ENDPOINT_ID}/docker/containers/json?all=true&filters=%7B%22label%22%3A%5B%22com.docker.compose.project%3D${STACK_NAME}%22%5D%7D" \
-    -H "Authorization: Bearer ${TOKEN}")
-
-  TOTAL=$(echo "$CONTAINERS" | jq 'length')
-  RUNNING=$(echo "$CONTAINERS" | jq '[.[] | select(.State == "running")] | length')
-  FAILED=$(echo "$CONTAINERS" | jq '[.[] | select(.State == "exited" and (.Status | test("Exited \\(0\\)") | not))] | length')
-
-  echo "🔄 [${COUNT}/${MAX_RETRY}] Running: ${RUNNING} | Failed: ${FAILED} | Total: ${TOTAL}"
-  echo "$CONTAINERS" | jq -r '.[] | "   → \(.Names[0]) | \(.State) | \(.Status)"'
-
-  if [ "$FAILED" -gt "0" ]; then
-    echo ""
-    echo "❌ Ada container yang crash!"
-    echo "$CONTAINERS" | jq -r '.[] | select(.State == "exited" and (.Status | test("Exited \\(0\\)") | not)) | "   → \(.Names[0]) | \(.Status)"'
-    exit 1
-  fi
-
-  if [ "$RUNNING" -gt "0" ]; then
-    echo ""
-    echo "✅ Stack $STACK_NAME berhasil di-redeploy dan running!"
-    exit 0
-  fi
-done
-
-echo ""
-echo "❌ Timeout! Stack tidak kunjung running setelah $((MAX_RETRY * 5)) detik."
-exit 1

.gitignore

@@ -16,7 +16,6 @@ _.log
 report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 
 # dotenv environment variable files
-# Only .env.example is allowed to be committed
 .env
 .env.development.local
 .env.test.local
@@ -34,9 +33,6 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 # Finder (MacOS) folder config
 .DS_Store
 
-# Dashboard-MD
-Dashboard-MD
-
 # Playwright artifacts
 test-results/
 playwright-report/

Dockerfile

@@ -1,62 +0,0 @@
-# Stage 1: Build
-FROM oven/bun:1.3 AS build
-
-# Install build dependencies for native modules
-RUN apt-get update && apt-get install -y \
-    python3 \
-    make \
-    g++ \
-    && rm -rf /var/lib/apt/lists/*
-
-# Set the working directory
-WORKDIR /app
-
-# Copy package files
-COPY package.json bun.lock* ./
-
-# Install dependencies
-RUN bun install --frozen-lockfile
-
-# Copy the rest of the application code
-COPY . .
-
-# Use .env.example as default env for build
-RUN cp .env.example .env
-
-# Generate Prisma client
-RUN bun x prisma generate
-
-# Generate API types
-RUN bun run gen:api
-
-# Build the application frontend using our custom build script
-RUN bun run build
-
-# Stage 2: Runtime
-FROM oven/bun:1.3-slim AS runtime
-
-# Set environment variables
-ENV NODE_ENV=production
-
-# Install runtime dependencies
-RUN apt-get update && apt-get install -y \
-    postgresql-client \
-    && rm -rf /var/lib/apt/lists/*
-
-# Set the working directory
-WORKDIR /app
-
-# Copy necessary files from build stage
-COPY --from=build /app/package.json ./
-COPY --from=build /app/tsconfig.json ./
-COPY --from=build /app/dist ./dist
-COPY --from=build /app/generated ./generated
-COPY --from=build /app/src ./src
-COPY --from=build /app/node_modules ./node_modules
-COPY --from=build /app/prisma ./prisma
-
-# Expose the port
-EXPOSE 3000
-
-# Start the application
-CMD ["bun", "start"]

package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"dev": "lsof -ti:3000 | xargs kill -9 2>/dev/null || true; bun run gen:api && REACT_EDITOR=antigravity bun --hot src/index.ts",
+		"dev": "bun run gen:api && REACT_EDITOR=antigravity bun --hot src/index.ts",
 		"lint": "biome check .",
 		"check": "biome check --write .",
 		"format": "biome format --write .",
@@ -12,7 +12,7 @@
 		"test": "bun test __tests__/api",
 		"test:ui": "bun test --ui __tests__/api",
 		"test:e2e": "bun run build && playwright test",
-		"build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='VITE_*' && cp -r public/* dist/ 2>/dev/null || true",
+		"build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='VITE_*'",
 		"start": "NODE_ENV=production bun src/index.ts",
 		"seed": "bun prisma/seed.ts"
 	},

prisma/seed.ts

@@ -133,18 +133,7 @@ async function main() {
 	console.log("Database seeding completed.");
 }
 
-// Only auto-execute when run directly (not when imported)
-const isMainModule =
-	typeof require !== "undefined"
-		? require.main === module
-		: import.meta.path.endsWith("seed.ts");
-
-if (isMainModule) {
-	main().catch((error) => {
-		console.error("Error during seeding:", error);
-		process.exit(1);
-	});
-}
-
-// Export for programmatic use
-export { seedAdminUser, seedDemoUsers, main as runSeed };
+main().catch((error) => {
+	console.error("Error during seeding:", error);
+	process.exit(1);
+});

scripts/build.ts

@@ -1,58 +0,0 @@
-#!/usr/bin/env bun
-
-/**
- * Build script for production
- * 1. Build CSS with PostCSS/Tailwind
- * 2. Bundle JS with Bun (without CSS)
- * 3. Replace CSS reference in HTML
- */
-
-import { $ } from "bun";
-import fs from "node:fs";
-import postcss from "postcss";
-import tailwindcss from "@tailwindcss/postcss";
-import autoprefixer from "autoprefixer";
-
-console.log("🔨 Starting production build...");
-
-// Ensure dist directory exists
-if (!fs.existsSync("./dist")) {
-	fs.mkdirSync("./dist", { recursive: true });
-}
-
-// Step 1: Build CSS with PostCSS
-console.log("🎨 Building CSS...");
-const cssInput = fs.readFileSync("./src/index.css", "utf-8");
-const cssResult = await postcss([tailwindcss(), autoprefixer()]).process(
-	cssInput,
-	{
-		from: "./src/index.css",
-		to: "./dist/index.css",
-	},
-);
-
-fs.writeFileSync("./dist/index.css", cssResult.css);
-console.log("✅ CSS built successfully!");
-
-// Step 2: Build JS with Bun (build HTML too, we'll fix CSS link later)
-console.log("📦 Bundling JavaScript...");
-await $`bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='"production"' --env='VITE_*'`;
-
-// Step 3: Copy public assets
-console.log("📁 Copying public assets...");
-if (fs.existsSync("./public")) {
-	await $`cp -r public/* dist/ 2>/dev/null || true`;
-}
-
-// Step 4: Ensure HTML references the correct CSS
-// Bun build might have renamed the CSS, we want to use our own index.css
-console.log("🔧 Fixing HTML CSS reference...");
-const htmlPath = "./dist/index.html";
-if (fs.existsSync(htmlPath)) {
-	let html = fs.readFileSync(htmlPath, "utf-8");
-	// Replace any bundled CSS reference with our index.css
-	html = html.replace(/href="[^"]*\.css"/g, 'href="/index.css"');
-	fs.writeFileSync(htmlPath, html);
-}
-
-console.log("✅ Build completed successfully!");

src/components/bumdes-page.tsx

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

src/components/dashboard-content.tsx

@@ -1,242 +1,510 @@
-import { Grid, 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";
-import { ChartSurat } from "./dashboard/chart-surat";
-import { DivisionProgress } from "./dashboard/division-progress";
-import { SatisfactionChart } from "./dashboard/satisfaction-chart";
-import { SDGSCard } from "./dashboard/sdgs-card";
-import { StatCard } from "./dashboard/stat-card";
+import {
+	Calendar,
+	CheckCircle,
+	FileText,
+	MessageCircle,
+	Users,
+} from "lucide-react";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	Cell,
+	Pie,
+	PieChart,
+	ResponsiveContainer,
+	Tooltip, // Added Tooltip import
+	XAxis,
+	YAxis,
+} from "recharts";
 
-// 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>
-	);
-}
+// Import Mantine components
 
-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>
-	);
-}
+import {
+	ActionIcon,
+	Badge,
+	Box,
+	Card, // Added for icon containers
+	Grid,
+	Group,
+	Progress,
+	Stack,
+	Text,
+	ThemeIcon,
+	Title,
+	useMantineColorScheme, // Add this import
+} from "@mantine/core";
 
-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>
-	);
-}
+const barChartData = [
+	{ month: "Jan", value: 145 },
+	{ month: "Feb", value: 165 },
+	{ month: "Mar", value: 195 },
+	{ month: "Apr", value: 155 },
+	{ month: "Mei", value: 205 },
+	{ month: "Jun", value: 185 },
+];
 
-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>
-	);
-}
+const pieChartData = [
+	{ name: "Puas", value: 25 },
+	{ name: "Cukup", value: 25 },
+	{ name: "Kurang", value: 25 },
+	{ name: "Sangat puas", value: 25 },
+];
 
-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 COLORS = ["#4E5BA6", "#F4C542", "#8CC63F", "#E57373"];
 
-const sdgsData = [
-	{
-		title: "Desa Berenergi Bersih dan Terbarukan",
-		score: 99.64,
-		icon: <EnergyIcon />,
-		color: "#FACC15",
-		bgColor: "#FEF9C3",
-	},
-	{
-		title: "Desa Damai Berkeadilan",
-		score: 78.65,
-		icon: <PeaceIcon />,
-		color: "#3B82F6",
-		bgColor: "#DBEAFE",
-	},
-	{
-		title: "Desa Sehat dan Sejahtera",
-		score: 77.37,
-		icon: <HealthIcon />,
-		color: "#22C55E",
-		bgColor: "#DCFCE7",
-	},
-	{
-		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",
-	},
+const divisiData = [
+	{ name: "Kesejahteraan", value: 37 },
+	{ name: "Pemerintahan", value: 26 },
+	{ name: "Keuangan", value: 17 },
+	{ name: "Sekretaris Desa", value: 15 },
+];
+
+const eventData = [
+	{ date: "1 Oktober 2025", title: "Hari Kesaktian Pancasila" },
+	{ date: "15 Oktober 2025", title: "Davest" },
+	{ date: "19 Oktober 2025", title: "Rapat Koordinasi" },
+];
+
+const apbdesData = [
+	{ name: "Belanja", value: 70, color: "blue" },
+	{ name: "Pendapatan", value: 90, color: "green" },
+	{ name: "Pembangunan", value: 50, color: "orange" },
 ];
 
 export function DashboardContent() {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
-
 	return (
 		<Stack gap="lg">
-			{/* Header Metrics - 4 Stat Cards */}
+			{/* Stats Cards */}
 			<Grid gutter="md">
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-					<StatCard
-						title="Surat Minggu Ini"
-						value={99}
-						detail="14 baru, 14 diproses"
-						trend="12% dari minggu lalu ↗ +12%"
-						trendValue={12}
-						icon={<FileText style={{ width: "70%", height: "70%" }} />}
-					/>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						h="100%"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
+						<Group justify="space-between" align="flex-start" w="100%">
+							<Box style={{ flex: 1 }}>
+								<Text size="sm" c="dimmed" mb="xs">
+									Surat Minggu Ini
+								</Text>
+								<Group align="baseline" gap="xs">
+									<Text size="xl" fw={700}>
+										99
+									</Text>
+								</Group>
+								<Text size="sm" c="dimmed" mt="xs">
+									14 baru, 14 diproses
+								</Text>
+								<Text size="sm" c="red" mt="xs">
+									12% dari minggu lalu ↗ +12%
+								</Text>
+							</Box>
+							<ThemeIcon
+								variant="filled"
+								size="xl"
+								radius="xl"
+								color={dark ? "gray" : "darmasaba-blue"}
+							>
+								<FileText style={{ width: "70%", height: "70%" }} />
+							</ThemeIcon>
+						</Group>
+					</Card>
 				</Grid.Col>
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-					<StatCard
-						title="Pengaduan Aktif"
-						value={28}
-						detail="14 baru, 14 diproses"
-						icon={<MessageCircle style={{ width: "70%", height: "70%" }} />}
-					/>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						h="100%"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
+						<Group justify="space-between" align="flex-start" w="100%">
+							<Box style={{ flex: 1 }}>
+								<Text size="sm" c="dimmed" mb="xs">
+									Pengaduan Aktif
+								</Text>
+								<Group align="baseline" gap="xs">
+									<Text size="xl" fw={700}>
+										28
+									</Text>
+								</Group>
+								<Text size="sm" c="dimmed" mt="xs">
+									14 baru, 14 diproses
+								</Text>
+							</Box>
+							<ThemeIcon
+								variant="filled"
+								size="xl"
+								radius="xl"
+								color={dark ? "gray" : "darmasaba-blue"}
+							>
+								<MessageCircle style={{ width: "70%", height: "70%" }} />
+							</ThemeIcon>
+						</Group>
+					</Card>
 				</Grid.Col>
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-					<StatCard
-						title="Layanan Selesai"
-						value={156}
-						detail="bulan ini"
-						trend="+8%"
-						trendValue={8}
-						icon={<CheckCircle style={{ width: "70%", height: "70%" }} />}
-					/>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						h="100%"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
+						<Group justify="space-between" align="flex-start" w="100%">
+							<Box style={{ flex: 1 }}>
+								<Text size="sm" c="dimmed" mb="xs">
+									Layanan Selesai
+								</Text>
+								<Group align="baseline" gap="xs">
+									<Text size="xl" fw={700}>
+										156
+									</Text>
+								</Group>
+								<Text size="sm" c="dimmed" mt="xs">
+									bulan ini
+								</Text>
+								<Text size="sm" c="red" mt="xs">
+									+8%
+								</Text>
+							</Box>
+							<ThemeIcon
+								variant="filled"
+								size="xl"
+								radius="xl"
+								color={dark ? "gray" : "darmasaba-blue"}
+							>
+								<CheckCircle style={{ width: "70%", height: "70%" }} />
+							</ThemeIcon>
+						</Group>
+					</Card>
 				</Grid.Col>
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-					<StatCard
-						title="Kepuasan Warga"
-						value="87.2%"
-						detail="dari 482 responden"
-						icon={<Users style={{ width: "70%", height: "70%" }} />}
-					/>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						h="100%"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
+						<Group justify="space-between" align="flex-start" w="100%">
+							<Box style={{ flex: 1 }}>
+								<Text size="sm" c="dimmed" mb="xs">
+									Kepuasan Warga
+								</Text>
+								<Group align="baseline" gap="xs">
+									<Text size="xl" fw={700}>
+										87.2%
+									</Text>
+								</Group>
+								<Text size="sm" c="dimmed" mt="xs">
+									dari 482 responden
+								</Text>
+							</Box>
+							<ThemeIcon
+								variant="filled"
+								size="xl"
+								radius="xl"
+								color={dark ? "gray" : "darmasaba-blue"}
+							>
+								<Users style={{ width: "70%", height: "70%" }} />
+							</ThemeIcon>
+						</Group>
+					</Card>
 				</Grid.Col>
 			</Grid>
-
-			{/* Section 2: Chart & Division Progress */}
 			<Grid gutter="lg">
-				<Grid.Col span={{ base: 12, lg: 8 }}>
-					<ChartSurat />
+				{/* Bar Chart */}
+				<Grid.Col span={{ base: 12, lg: 6 }}>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
+						<Group justify="space-between" mb="md">
+							<Box>
+								<Title order={4} mb={5}>
+									Statistik Pengajuan Surat
+								</Title>
+								<Text size="sm" c="dimmed">
+									Trend pengajuan surat 6 bulan terakhir
+								</Text>
+							</Box>
+							<ActionIcon variant="subtle" size="lg" radius="md">
+								{/* Original SVG converted to a generic Icon placeholder */}
+								<svg
+									width="20"
+									height="20"
+									viewBox="0 0 20 20"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										d="M8 5L13 10L8 15"
+										stroke="currentColor"
+										strokeWidth="2"
+										strokeLinecap="round"
+										strokeLinejoin="round"
+									/>
+								</svg>
+							</ActionIcon>
+						</Group>
+						<ResponsiveContainer width="100%" height={300}>
+							<BarChart data={barChartData}>
+								<CartesianGrid
+									strokeDasharray="3 3"
+									vertical={false}
+									stroke="var(--mantine-color-gray-3)"
+								/>
+								<XAxis
+									dataKey="month"
+									axisLine={false}
+									tickLine={false}
+									tick={{ fill: "var(--mantine-color-text)" }}
+								/>
+								<YAxis
+									axisLine={false}
+									tickLine={false}
+									ticks={[0, 55, 110, 165, 220]}
+									tick={{ fill: "var(--mantine-color-text)" }}
+								/>
+								<Tooltip />
+								<Bar
+									dataKey="value"
+									fill="var(--mantine-color-blue-filled)"
+									radius={[4, 4, 0, 0]}
+								/>
+							</BarChart>
+						</ResponsiveContainer>
+					</Card>
 				</Grid.Col>
-				<Grid.Col span={{ base: 12, lg: 4 }}>
-					<DivisionProgress />
+
+				{/* Pie Chart */}
+				<Grid.Col span={{ base: 12, lg: 6 }}>
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
+						<Title order={4} mb={5}>
+							Tingkat Kepuasan
+						</Title>
+						<Text size="sm" c="dimmed" mb="md">
+							Tingkat kepuasan layanan
+						</Text>
+						<ResponsiveContainer width="100%" height={300}>
+							<PieChart>
+								<Pie
+									data={pieChartData}
+									cx="50%"
+									cy="50%"
+									innerRadius={80}
+									outerRadius={120}
+									paddingAngle={2}
+									dataKey="value"
+								>
+									{pieChartData.map((_entry, index) => (
+										<Cell key={`cell-${index}`} fill={COLORS[index]} />
+									))}
+								</Pie>
+								<Tooltip />
+							</PieChart>
+						</ResponsiveContainer>
+						<Group justify="center" gap="md" mt="md">
+							<Group gap="xs">
+								<Box
+									w={12}
+									h={12}
+									style={{ backgroundColor: COLORS[0], borderRadius: "50%" }}
+								/>
+								<Text size="sm">Sangat puas (0%)</Text>
+							</Group>
+							<Group gap="xs">
+								<Box
+									w={12}
+									h={12}
+									style={{ backgroundColor: COLORS[1], borderRadius: "50%" }}
+								/>
+								<Text size="sm">Puas (0%)</Text>
+							</Group>
+							<Group gap="xs">
+								<Box
+									w={12}
+									h={12}
+									style={{ backgroundColor: COLORS[2], borderRadius: "50%" }}
+								/>
+								<Text size="sm">Cukup (0%)</Text>
+							</Group>
+							<Group gap="xs">
+								<Box
+									w={12}
+									h={12}
+									style={{ backgroundColor: COLORS[3], borderRadius: "50%" }}
+								/>
+								<Text size="sm">Kurang (0%)</Text>
+							</Group>
+						</Group>
+					</Card>
 				</Grid.Col>
 			</Grid>
 
-			{/* Section 3: APBDes Chart */}
-			<ChartAPBDes />
-
-			{/* Section 4 & 5: Activity List & Satisfaction Chart */}
+			{/* Bottom Section */}
 			<Grid gutter="lg">
+				{/* Divisi Teraktif */}
 				<Grid.Col span={{ base: 12, lg: 6 }}>
-					<ActivityList />
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
+						<Group gap="xs" mb="lg">
+							<Box>
+								{/* Original SVG icon */}
+								<svg
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<rect
+										x="3"
+										y="3"
+										width="7"
+										height="7"
+										rx="1"
+										fill="currentColor"
+									/>
+									<rect
+										x="3"
+										y="14"
+										width="7"
+										height="7"
+										rx="1"
+										fill="currentColor"
+									/>
+									<rect
+										x="14"
+										y="3"
+										width="7"
+										height="7"
+										rx="1"
+										fill="currentColor"
+									/>
+									<rect
+										x="14"
+										y="14"
+										width="7"
+										height="7"
+										rx="1"
+										fill="currentColor"
+									/>
+								</svg>
+							</Box>
+							<Title order={4}>Divisi Teraktif</Title>
+						</Group>
+						<Stack gap="sm">
+							{divisiData.map((divisi, index) => (
+								<Box key={index}>
+									<Group justify="space-between" mb={5}>
+										<Text size="sm" fw={500}>
+											{divisi.name}
+										</Text>
+										<Text size="sm" fw={600}>
+											{divisi.value} Kegiatan
+										</Text>
+									</Group>
+									<Progress
+										value={(divisi.value / 37) * 100}
+										size="sm"
+										radius="xl"
+										color="blue"
+									/>
+								</Box>
+							))}
+						</Stack>
+					</Card>
 				</Grid.Col>
+
+				{/* Kalender */}
 				<Grid.Col span={{ base: 12, lg: 6 }}>
-					<SatisfactionChart />
+					<Card
+						p="md"
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+					>
+						<Group gap="xs" mb="lg">
+							<Calendar style={{ width: 20, height: 20 }} />
+							<Title order={4}>Kalender & Kegiatan Mendatang</Title>
+						</Group>
+						<Stack gap="md">
+							{eventData.map((event, index) => (
+								<Box
+									key={index}
+									style={{
+										borderLeft: "4px solid var(--mantine-color-blue-filled)",
+										paddingLeft: 12,
+									}}
+								>
+									<Text size="sm" c="dimmed">
+										{event.date}
+									</Text>
+									<Text fw={500}>{event.title}</Text>
+								</Box>
+							))}
+						</Stack>
+					</Card>
 				</Grid.Col>
 			</Grid>
 
-			{/* 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 }}>
-						<SDGSCard
-							title={sdg.title}
-							score={sdg.score}
-							icon={sdg.icon}
-							color={sdg.color}
-							bgColor={sdg.bgColor}
-						/>
-					</Grid.Col>
-				))}
-			</Grid>
+			{/* APBDes Chart */}
+			<Card
+				p="md"
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+			>
+				<Title order={4} mb="lg">
+					Grafik APBDes
+				</Title>
+				<Stack gap="xs">
+					{apbdesData.map((data, index) => (
+						<Grid key={index} align="center">
+							<Grid.Col span={3}>
+								<Text size="sm" fw={500}>
+									{data.name}
+								</Text>
+							</Grid.Col>
+							<Grid.Col span={9}>
+								<Progress
+									value={data.value}
+									size="lg"
+									radius="xl"
+									color={data.color}
+								/>
+							</Grid.Col>
+						</Grid>
+					))}
+				</Stack>
+			</Card>
 		</Stack>
 	);
 }

src/components/dashboard/activity-list.tsx

@@ -1,69 +0,0 @@
-import {
-	Box,
-	Card,
-	Group,
-	Stack,
-	Text,
-	Title,
-	useMantineColorScheme,
-} from "@mantine/core";
-import { Calendar } from "lucide-react";
-
-interface EventData {
-	date: string;
-	title: string;
-}
-
-const events: EventData[] = [
-	{ date: "1 Oktober 2025", title: "Hari Kesaktian Pancasila" },
-	{ date: "15 Oktober 2025", title: "Davest" },
-	{ date: "19 Oktober 2025", title: "Rapat Koordinasi" },
-];
-
-export function ActivityList() {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			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)",
-			}}
-		>
-			<Group gap="xs" mb="lg">
-				<Calendar
-					style={{ width: 20, height: 20 }}
-					color={dark ? "#E2E8F0" : "#1E3A5F"}
-				/>
-				<Title order={4} c={dark ? "white" : "gray.9"}>
-					Kalender & Kegiatan Mendatang
-				</Title>
-			</Group>
-			<Stack gap="md">
-				{events.map((event, index) => (
-					<Box
-						key={index}
-						style={{
-							borderLeft: "4px solid var(--mantine-color-blue-filled)",
-							paddingLeft: 12,
-						}}
-					>
-						<Text size="sm" c="dimmed">
-							{event.date}
-						</Text>
-						<Text fw={500} c={dark ? "white" : "gray.9"}>
-							{event.title}
-						</Text>
-					</Box>
-				))}
-			</Stack>
-		</Card>
-	);
-}

src/components/dashboard/chart-apbdes.tsx

@@ -1,74 +0,0 @@
-import {
-	Card,
-	Group,
-	Stack,
-	Text,
-	Title,
-	useMantineColorScheme,
-} from "@mantine/core";
-import {
-	Bar,
-	BarChart,
-	Cell,
-	ResponsiveContainer,
-	Tooltip,
-	XAxis,
-	YAxis,
-} from "recharts";
-
-const apbdesData = [
-	{ name: "Belanja", value: 70, color: "#3B82F6" },
-	{ name: "Pangan", value: 45, color: "#22C55E" },
-	{ name: "Pembiayaan", value: 55, color: "#FACC15" },
-	{ name: "Pendapatan", value: 90, color: "#3B82F6" },
-];
-
-export function ChartAPBDes() {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			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)",
-			}}
-		>
-			<Title order={4} c={dark ? "white" : "gray.9"} mb="lg">
-				Grafik APBDes
-			</Title>
-			<Stack gap="xs">
-				{apbdesData.map((item, index) => (
-					<Group key={index} align="center" gap="md">
-						<Text size="sm" fw={500} w={100} c={dark ? "white" : "gray.7"}>
-							{item.name}
-						</Text>
-						<ResponsiveContainer width="100%" height={20}>
-							<BarChart layout="vertical" data={[item]}>
-								<XAxis type="number" hide domain={[0, 100]} />
-								<YAxis type="category" hide dataKey="name" />
-								<Tooltip
-									formatter={(value: number) => [`${value}%`, ""]}
-									contentStyle={{
-										backgroundColor: dark ? "#1E293B" : "white",
-										borderColor: dark ? "#334155" : "#e5e7eb",
-										borderRadius: "8px",
-									}}
-								/>
-								<Bar dataKey="value" radius={[4, 4, 4, 4]}>
-									<Cell fill={item.color} />
-								</Bar>
-							</BarChart>
-						</ResponsiveContainer>
-					</Group>
-				))}
-			</Stack>
-		</Card>
-	);
-}

src/components/dashboard/chart-surat.tsx

@@ -1,110 +0,0 @@
-import {
-	ActionIcon,
-	Box,
-	Card,
-	Group,
-	Text,
-	Title,
-	useMantineColorScheme,
-} from "@mantine/core";
-import {
-	Bar,
-	BarChart,
-	CartesianGrid,
-	ResponsiveContainer,
-	Tooltip,
-	XAxis,
-	YAxis,
-} from "recharts";
-
-const chartData = [
-	{ month: "Jan", value: 150 },
-	{ month: "Feb", value: 165 },
-	{ month: "Mar", value: 195 },
-	{ month: "Apr", value: 160 },
-	{ month: "Mei", value: 205 },
-	{ month: "Jun", value: 185 },
-];
-
-export function ChartSurat() {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			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)",
-			}}
-		>
-			<Group justify="space-between" mb="md">
-				<Box>
-					<Title order={4} c={dark ? "white" : "gray.9"} mb={5}>
-						Statistik Pengajuan Surat
-					</Title>
-					<Text size="sm" c="dimmed">
-						Trend pengajuan surat 6 bulan terakhir
-					</Text>
-				</Box>
-				<ActionIcon variant="subtle" size="lg" radius="md">
-					<svg
-						width="20"
-						height="20"
-						viewBox="0 0 20 20"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M8 5L13 10L8 15"
-							stroke="currentColor"
-							strokeWidth="2"
-							strokeLinecap="round"
-							strokeLinejoin="round"
-						/>
-					</svg>
-				</ActionIcon>
-			</Group>
-			<ResponsiveContainer width="100%" height={300}>
-				<BarChart data={chartData}>
-					<CartesianGrid
-						strokeDasharray="3 3"
-						vertical={false}
-						stroke={dark ? "#334155" : "#e5e7eb"}
-					/>
-					<XAxis
-						dataKey="month"
-						axisLine={false}
-						tickLine={false}
-						tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
-					/>
-					<YAxis
-						axisLine={false}
-						tickLine={false}
-						ticks={[0, 55, 110, 165, 220]}
-						tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
-					/>
-					<Tooltip
-						contentStyle={{
-							backgroundColor: dark ? "#1E293B" : "white",
-							borderColor: dark ? "#334155" : "#e5e7eb",
-							borderRadius: "8px",
-							boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
-						}}
-						labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
-					/>
-					<Bar
-						dataKey="value"
-						fill="var(--mantine-color-blue-filled)"
-						radius={[4, 4, 0, 0]}
-					/>
-				</BarChart>
-			</ResponsiveContainer>
-		</Card>
-	);
-}

src/components/dashboard/division-progress.tsx

@@ -1,69 +0,0 @@
-import {
-	Box,
-	Card,
-	Group,
-	Progress,
-	Stack,
-	Text,
-	Title,
-	useMantineColorScheme,
-} from "@mantine/core";
-
-interface DivisionData {
-	name: string;
-	value: number;
-}
-
-const divisionData: DivisionData[] = [
-	{ name: "Kesejahteraan", value: 37 },
-	{ name: "Pemberdayaan", value: 26 },
-	{ name: "Keuangan", value: 17 },
-	{ name: "Sekretaris Desa", value: 15 },
-];
-
-const max_value = 37;
-
-export function DivisionProgress() {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			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)",
-			}}
-		>
-			<Title order={4} c={dark ? "white" : "gray.9"} mb="lg">
-				Divisi Teraktif
-			</Title>
-			<Stack gap="sm">
-				{divisionData.map((divisi, index) => (
-					<Box key={index}>
-						<Group justify="space-between" mb={5}>
-							<Text size="sm" fw={500} c={dark ? "white" : "gray.7"}>
-								{divisi.name}
-							</Text>
-							<Text size="sm" fw={600} c={dark ? "white" : "gray.9"}>
-								{divisi.value} Kegiatan
-							</Text>
-						</Group>
-						<Progress
-							value={(divisi.value / max_value) * 100}
-							size="sm"
-							radius="xl"
-							color="blue"
-							animated
-						/>
-					</Box>
-				))}
-			</Stack>
-		</Card>
-	);
-}

src/components/dashboard/index.ts

@@ -1,7 +0,0 @@
-export { ActivityList } from "./activity-list";
-export { ChartAPBDes } from "./chart-apbdes";
-export { ChartSurat } from "./chart-surat";
-export { DivisionProgress } from "./division-progress";
-export { SatisfactionChart } from "./satisfaction-chart";
-export { SDGSCard } from "./sdgs-card";
-export { StatCard } from "./stat-card";

src/components/dashboard/satisfaction-chart.tsx

@@ -1,82 +0,0 @@
-import {
-	Box,
-	Card,
-	Group,
-	Stack,
-	Text,
-	Title,
-	useMantineColorScheme,
-} from "@mantine/core";
-import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
-
-const satisfactionData = [
-	{ name: "Sangat Puas", value: 25, color: "#4E5BA6" },
-	{ name: "Puas", value: 25, color: "#F4C542" },
-	{ name: "Cukup", value: 25, color: "#8CC63F" },
-	{ name: "Kurang", value: 25, color: "#E57373" },
-];
-
-export function SatisfactionChart() {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			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)",
-			}}
-		>
-			<Title order={4} c={dark ? "white" : "gray.9"} mb={5}>
-				Tingkat Kepuasan
-			</Title>
-			<Text size="sm" c="dimmed" mb="md">
-				Tingkat kepuasan layanan
-			</Text>
-			<ResponsiveContainer width="100%" height={300}>
-				<PieChart>
-					<Pie
-						data={satisfactionData}
-						cx="50%"
-						cy="50%"
-						innerRadius={80}
-						outerRadius={120}
-						paddingAngle={2}
-						dataKey="value"
-					>
-						{satisfactionData.map((entry, index) => (
-							<Cell key={`cell-${index}`} fill={entry.color} />
-						))}
-					</Pie>
-					<Tooltip
-						contentStyle={{
-							backgroundColor: dark ? "#1E293B" : "white",
-							borderColor: dark ? "#334155" : "#e5e7eb",
-							borderRadius: "8px",
-						}}
-					/>
-				</PieChart>
-			</ResponsiveContainer>
-			<Group justify="center" gap="md" mt="md">
-				{satisfactionData.map((item, index) => (
-					<Group key={index} gap="xs">
-						<Box
-							w={12}
-							h={12}
-							style={{ backgroundColor: item.color, borderRadius: "50%" }}
-						/>
-						<Text size="sm" c={dark ? "white" : "gray.7"}>
-							{item.name}
-						</Text>
-					</Group>
-				))}
-			</Group>
-		</Card>
-	);
-}

src/components/dashboard/sdgs-card.tsx

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

src/components/dashboard/stat-card.tsx

@@ -1,86 +0,0 @@
-import {
-	Box,
-	Card,
-	Group,
-	Text,
-	ThemeIcon,
-	useMantineColorScheme,
-} from "@mantine/core";
-import type { ReactNode } from "react";
-
-interface StatCardProps {
-	title: string;
-	value: string | number;
-	detail?: string;
-	trend?: string;
-	trendValue?: number;
-	icon: ReactNode;
-	iconColor?: string;
-}
-
-export function StatCard({
-	title,
-	value,
-	detail,
-	trend,
-	trendValue,
-	icon,
-	iconColor = "darmasaba-blue",
-}: StatCardProps) {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	const isPositiveTrend = trendValue ? trendValue >= 0 : true;
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			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)",
-			}}
-			h="100%"
-		>
-			<Group justify="space-between" align="flex-start" w="100%">
-				<Box style={{ flex: 1 }}>
-					<Text size="sm" c="dimmed" mb="xs">
-						{title}
-					</Text>
-					<Group align="baseline" gap="xs">
-						<Text size="xl" fw={700} c={dark ? "white" : "gray.9"}>
-							{value}
-						</Text>
-					</Group>
-					{detail && (
-						<Text size="sm" c="dimmed" mt="xs">
-							{detail}
-						</Text>
-					)}
-					{trend && (
-						<Text
-							size="sm"
-							c={isPositiveTrend ? "green" : "red"}
-							mt="xs"
-							fw={500}
-						>
-							{trend}
-						</Text>
-					)}
-				</Box>
-				<ThemeIcon
-					variant="filled"
-					size="xl"
-					radius="xl"
-					color={dark ? "gray" : iconColor}
-				>
-					{icon}
-				</ThemeIcon>
-			</Group>
-		</Card>
-	);
-}

src/components/demografi-pekerjaan.tsx

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

src/components/header.tsx

@@ -1,121 +1,72 @@
 import {
 	ActionIcon,
-	Avatar,
 	Badge,
 	Box,
-	Divider,
 	Group,
 	Text,
-	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
-import { IconUserShield } from "@tabler/icons-react";
-import { useLocation, useNavigate } 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 { useLocation } from "@tanstack/react-router";
+import { Bell, Moon, Sun } from "lucide-react";
 
 export function Header() {
 	const location = useLocation();
 	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
-	const navigate = useNavigate();
 
-	// Define page titles based on route
-	const getPageTitle = () => {
-		switch (location.pathname) {
-			case "/":
-				return "Beranda";
-			case "/kinerja-divisi":
-				return "Kinerja Divisi";
-			case "/pengaduan-layanan-publik":
-				return "Pengaduan & Layanan Publik";
-			case "/jenna-analytic":
-				return "Jenna Analytic";
-			case "/demografi-pekerjaan":
-				return "Demografi & Kependudukan";
-			case "/keuangan-anggaran":
-				return "Keuangan & Anggaran";
-			case "/bumdes":
-				return "Bumdes & UMKM Desa";
-			case "/sosial":
-				return "Sosial";
-			case "/keamanan":
-				return "Keamanan";
-			case "/bantuan":
-				return "Bantuan";
-			case "/pengaturan":
-			case "/pengaturan/umum":
-			case "/pengaturan/notifikasi":
-			case "/pengaturan/keamanan":
-			case "/pengaturan/akses-dan-tim":
-				return "Pengaturan";
-			default:
-				return "Desa Darmasaba";
-		}
-	};
+	const title =
+		location.pathname === "/"
+			? "Desa Darmasaba"
+			: "Desa Darmasaba";
 
 	return (
-		<Group justify="space-between" w="100%">
-			{/* Title */}
-			<Title order={3} c={"white"}>
-				{getPageTitle()}
-			</Title>
+		<Box
+			style={{
+				display: "grid",
+				gridTemplateColumns: "1fr auto 1fr",
+				alignItems: "center",
+				width: "100%",
+			}}
+		>
+			{/* LEFT SPACER (burger sudah di luar) */}
+			<Box />
 
-			{/* Right Section */}
-			<Group gap="md">
-				{/* User Info */}
-				<Group gap="sm">
-					<Box ta="right">
-						<Text c={"white"} size="sm" fw={500}>
-							I. B. Surya Prabhawa M...
-						</Text>
-						<Text c={"white"} size="xs">
-							Kepala Desa
-						</Text>
-					</Box>
-					<Avatar color="blue" radius="xl">
-						<UserIcon color="white" style={{ width: "70%", height: "70%" }} />
-					</Avatar>
-				</Group>
+			{/* CENTER TITLE */}
+			<Text
+				c="white"
+				fw={600}
+				size="md"
+				style={{
+					textAlign: "center",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+				}}
+			>
+				{title}
+			</Text>
 
-				{/* Divider */}
-				<Divider orientation="vertical" h={30} />
+			{/* RIGHT ICONS */}
+			<Group gap="xs" justify="flex-end">
+				<ActionIcon
+					onClick={toggleColorScheme}
+					variant="subtle"
+					radius="xl"
+				>
+					{dark ? <Sun size={18} /> : <Moon size={18} />}
+				</ActionIcon>
 
-				{/* Icons */}
-				<Group gap="sm">
-					<ActionIcon
-						onClick={() => toggleColorScheme()}
-						variant="subtle"
-						size="lg"
-						radius="xl"
-						aria-label="Toggle color scheme"
+				<ActionIcon variant="subtle" radius="xl" pos="relative">
+					<Bell size={18} />
+					<Badge
+						size="xs"
+						color="red"
+						style={{ position: "absolute", top: -4, right: -4 }}
 					>
-						{dark ? (
-							<Sun color="white" style={{ width: "70%", height: "70%" }} />
-						) : (
-							<Moon color="white" style={{ width: "70%", height: "70%" }} />
-						)}
-					</ActionIcon>
-					<ActionIcon variant="subtle" size="lg" radius="xl" pos="relative">
-						<Bell color="white" style={{ width: "70%", height: "70%" }} />
-						<Badge
-							size="xs"
-							color="red"
-							variant="filled"
-							style={{ position: "absolute", top: 0, right: 0 }}
-							radius={"xl"}
-						>
-							10
-						</Badge>
-					</ActionIcon>
-					<ActionIcon variant="subtle" size="lg" radius="xl">
-						<IconUserShield
-							color="white"
-							style={{ width: "70%", height: "70%" }}
-							onClick={() => navigate({ to: "/signin" })}
-						/>
-					</ActionIcon>
-				</Group>
+						10
+					</Badge>
+				</ActionIcon>
 			</Group>
-		</Group>
+		</Box>
 	);
-}
+}

src/components/help-page.tsx

@@ -143,13 +143,6 @@ const HelpPage = () => {
 
 	return (
 		<Container size="lg" py="xl">
-			<Title order={1} mb="xl" ta="center">
-				Pusat Bantuan
-			</Title>
-			<Text size="lg" color="dimmed" ta="center" mb="xl">
-				Temukan jawaban untuk pertanyaan Anda atau hubungi tim support kami
-			</Text>
-
 			{/* Statistics Section */}
 			<SimpleGrid cols={3} spacing="lg" mb="xl">
 				{stats.map((stat, index) => (
@@ -432,4 +425,4 @@ const HelpPage = () => {
 	);
 };
 
-export default HelpPage;
+export default HelpPage;

src/components/jenna-analytic.tsx

@@ -280,4 +280,4 @@ const JennaAnalytic = () => {
 		</Box>
 	);
 };
-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,99 +1,537 @@
-import { Grid, Stack } from "@mantine/core";
 import {
-	ActivityCard,
-	ArchiveCard,
-	DiscussionPanel,
-	DivisionList,
-	DocumentChart,
-	EventCard,
-	ProgressChart,
-} from ".";
-
-// Data for program kegiatan (Section 1)
-const programKegiatanData = [
-	{
-		title: "Rakor 2025",
-		date: "3 Juli 2025",
-		progress: 90,
-		status: "selesai" as const,
-	},
-	{
-		title: "Pemutakhiran Indeks Desa",
-		date: "3 Juli 2025",
-		progress: 85,
-		status: "selesai" as const,
-	},
-	{
-		title: "Mengurus Akta Cerai Warga",
-		date: "3 Juli 2025",
-		progress: 80,
-		status: "selesai" as const,
-	},
-	{
-		title: "Pasek 7 Desa Adat",
-		date: "3 Juli 2025",
-		progress: 92,
-		status: "selesai" as const,
-	},
-];
-
-// Data for arsip digital (Section 5)
-const archiveData = [
-	{ name: "Surat Keputusan" },
-	{ name: "Dokumentasi" },
-	{ name: "Laporan Keuangan" },
-	{ name: "Notulensi Rapat" },
-];
+	ActionIcon,
+	Box,
+	Card,
+	Divider,
+	Grid,
+	GridCol,
+	Group,
+	List,
+	Badge as MantineBadge,
+	Progress as MantineProgress,
+	Skeleton,
+	Stack,
+	Text,
+	ThemeIcon,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	Cell,
+	Pie,
+	PieChart,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";
+import { Button } from "@/components/ui/button";
 
 const KinerjaDivisi = () => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	// Data for division progress chart
+	const divisionProgressData = [
+		{ name: "Sekretariat", selesai: 12, berjalan: 5, tertunda: 2 },
+		{ name: "Keuangan", selesai: 8, berjalan: 7, tertunda: 1 },
+		{ name: "Sosial", selesai: 10, berjalan: 3, tertunda: 4 },
+		{ name: "Humas", selesai: 6, berjalan: 9, tertunda: 3 },
+	];
+
+	// Division task summaries
+	const divisionTasks = [
+		{
+			name: "Sekretariat",
+			tasks: [
+				{ title: "Laporan Bulanan", status: "selesai" },
+				{ title: "Arsip Dokumen", status: "berjalan" },
+				{ title: "Undangan Rapat", status: "tertunda" },
+			],
+		},
+		{
+			name: "Keuangan",
+			tasks: [
+				{ title: "Laporan APBDes", status: "selesai" },
+				{ title: "Verifikasi Dana", status: "tertunda" },
+				{ title: "Pengeluaran Harian", status: "berjalan" },
+			],
+		},
+		{
+			name: "Sosial",
+			tasks: [
+				{ title: "Program Bantuan", status: "selesai" },
+				{ title: "Kegiatan Posyandu", status: "berjalan" },
+				{ title: "Monitoring Stunting", status: "tertunda" },
+			],
+		},
+		{
+			name: "Humas",
+			tasks: [
+				{ title: "Publikasi Kegiatan", status: "selesai" },
+				{ title: "Koordinasi Media", status: "berjalan" },
+				{ title: "Laporan Kegiatan", status: "tertunda" },
+			],
+		},
+	];
+
+	// Archive items
+	const archiveItems = [
+		{ name: "Surat Keputusan", count: 12 },
+		{ name: "Laporan Keuangan", count: 8 },
+		{ name: "Dokumentasi", count: 24 },
+		{ name: "Notulensi Rapat", count: 15 },
+	];
+
+	// Activity progress
+	const activityProgress = [
+		{
+			name: "Pembangunan Jalan",
+			progress: 75,
+			date: "15 Feb 2026",
+			status: "berjalan",
+		},
+		{
+			name: "Posyandu Bulanan",
+			progress: 100,
+			date: "10 Feb 2026",
+			status: "selesai",
+		},
+		{
+			name: "Vaksinasi Massal",
+			progress: 45,
+			date: "20 Feb 2026",
+			status: "berjalan",
+		},
+		{
+			name: "Festival Budaya",
+			progress: 20,
+			date: "5 Mar 2026",
+			status: "berjalan",
+		},
+	];
+
+	// Document statistics
+	const documentStats = [
+		{ name: "Gambar", value: 42 },
+		{ name: "Dokumen", value: 87 },
+	];
+
+	// Activity progress statistics
+	const activityProgressStats = [
+		{ name: "Selesai", value: 12, fill: "#10B981" },
+		{ name: "Dikerjakan", value: 8, fill: "#F59E0B" },
+		{ name: "Segera Dikerjakan", value: 5, fill: "#EF4444" },
+		{ name: "Dibatalkan", value: 2, fill: "#6B7280" },
+	];
+
+	const COLORS = ["#10B981", "#F59E0B", "#EF4444", "#6B7280"];
+	const STATUS_COLORS: Record<string, string> = {
+		selesai: "green",
+		berjalan: "blue",
+		tertunda: "red",
+		proses: "yellow",
+	};
+
+	// Discussion data
+	const discussions = [
+		{
+			title: "Pembahasan APBDes 2026",
+			sender: "Kepala Desa",
+			timestamp: "2 jam yang lalu",
+		},
+		{
+			title: "Kegiatan Posyandu",
+			sender: "Divisi Sosial",
+			timestamp: "5 jam yang lalu",
+		},
+		{
+			title: "Festival Budaya",
+			sender: "Divisi Humas",
+			timestamp: "1 hari yang lalu",
+		},
+	];
+
+	// Today's agenda
+	const todayAgenda = [
+		{ time: "09:00", event: "Rapat Evaluasi Bulanan" },
+		{ time: "14:00", event: "Koordinasi Program Bantuan" },
+	];
+
 	return (
 		<Stack gap="lg">
-			{/* SECTION 1 — PROGRAM KEGIATAN */}
-			<Grid gutter="md">
-				{programKegiatanData.map((kegiatan, index) => (
-					<Grid.Col key={index} span={{ base: 12, md: 6, lg: 3 }}>
-						<ActivityCard
-							title={kegiatan.title}
-							date={kegiatan.date}
-							progress={kegiatan.progress}
-							status={kegiatan.status}
+			{/* Grafik Progres Tugas per Divisi */}
+			<Card
+				p="md"
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+			>
+				<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
+					Grafik Progres Tugas per Divisi
+				</Title>
+				<ResponsiveContainer width="100%" height={300}>
+					<BarChart data={divisionProgressData}>
+						<CartesianGrid
+							strokeDasharray="3 3"
+							vertical={false}
+							stroke={dark ? "#141D34" : "white"}
 						/>
-					</Grid.Col>
-				))}
-			</Grid>
+						<XAxis
+							dataKey="name"
+							axisLine={false}
+							tickLine={false}
+							tick={{
+								fill: dark
+									? "var(--mantine-color-text)"
+									: "var(--mantine-color-text)",
+							}}
+						/>
+						<YAxis
+							axisLine={false}
+							tickLine={false}
+							tick={{
+								fill: dark
+									? "var(--mantine-color-text)"
+									: "var(--mantine-color-text)",
+							}}
+						/>
+						<Tooltip
+							contentStyle={
+								dark
+									? {
+										backgroundColor: "var(--mantine-color-dark-7)",
+										borderColor: "var(--mantine-color-dark-6)",
+									}
+									: {}
+							}
+						/>
+						<Bar
+							dataKey="selesai"
+							stackId="a"
+							fill="#10B981"
+							name="Selesai"
+							radius={[4, 4, 0, 0]}
+						/>
+						<Bar
+							dataKey="berjalan"
+							stackId="a"
+							fill="#3B82F6"
+							name="Berjalan"
+							radius={[4, 4, 0, 0]}
+						/>
+						<Bar
+							dataKey="tertunda"
+							stackId="a"
+							fill="#EF4444"
+							name="Tertunda"
+							radius={[4, 4, 0, 0]}
+						/>
+					</BarChart>
+				</ResponsiveContainer>
+			</Card>
 
-			{/* SECTION 2 — GRID DASHBOARD (3 Columns) */}
-			<Grid gutter="lg">
-				{/* Left Column - Division List */}
-				<Grid.Col span={{ base: 12, lg: 3 }}>
-					<DivisionList />
-				</Grid.Col>
-
-				{/* Middle Column - Document Chart */}
-				<Grid.Col span={{ base: 12, lg: 5 }}>
-					<DocumentChart />
-				</Grid.Col>
-
-				{/* Right Column - Progress Chart */}
-				<Grid.Col span={{ base: 12, lg: 4 }}>
-					<ProgressChart />
-				</Grid.Col>
-			</Grid>
-
-			{/* SECTION 3 — DISCUSSION PANEL */}
-			<DiscussionPanel />
-
-			{/* SECTION 4 — ACARA HARI INI */}
-			<EventCard />
-
-			{/* SECTION 5 — ARSIP DIGITAL PERANGKAT DESA */}
+			{/* Ringkasan Tugas per Divisi */}
 			<Grid gutter="md">
-				{archiveData.map((item, index) => (
-					<Grid.Col key={index} span={{ base: 12, md: 6 }}>
-						<ArchiveCard item={item} />
-					</Grid.Col>
+				{divisionTasks.map((division, index) => (
+					<GridCol key={index} span={{ base: 12, md: 6, lg: 3 }}>
+						<Card
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#141D34" : "white"}
+							style={{ borderColor: dark ? "#141D34" : "white" }}
+							h="100%"
+						>
+							<Title order={4} mb="sm" c={dark ? "white" : "darmasaba-navy"}>
+								{division.name}
+							</Title>
+							<Stack gap="sm">
+								{division.tasks.map((task, taskIndex) => (
+									<Box key={taskIndex}>
+										<Group justify="space-between">
+											<Text size="sm" c={dark ? "white" : "darmasaba-navy"}>
+												{task.title}
+											</Text>
+											<MantineBadge
+												color={STATUS_COLORS[task.status] || "gray"}
+												variant="light"
+											>
+												{task.status}
+											</MantineBadge>
+										</Group>
+									</Box>
+								))}
+							</Stack>
+						</Card>
+					</GridCol>
 				))}
 			</Grid>
+
+			{/* Arsip Digital Perangkat Desa */}
+			<Card
+				p="md"
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+			>
+				<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
+					Arsip Digital Perangkat Desa
+				</Title>
+				<Grid gutter="md">
+					{archiveItems.map((item, index) => (
+						<GridCol key={index} span={{ base: 12, md: 6, lg: 3 }}>
+							<Card
+								p="md"
+								radius="md"
+								withBorder
+								bg={dark ? "#263852ff" : "#F1F5F9"}
+								style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+							>
+								<Group justify="space-between">
+									<Text c={dark ? "white" : "darmasaba-navy"} fw={500}>
+										{item.name}
+									</Text>
+									<Text c={dark ? "white" : "darmasaba-navy"} fw={700}>
+										{item.count}
+									</Text>
+								</Group>
+							</Card>
+						</GridCol>
+					))}
+				</Grid>
+			</Card>
+
+			{/* Kartu Progres Kegiatan */}
+			<Card
+				p="md"
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+			>
+				<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
+					Progres Kegiatan / Program
+				</Title>
+				<Stack gap="md">
+					{activityProgress.map((activity, index) => (
+						<Card
+							key={index}
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#263852ff" : "#F1F5F9"}
+							style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+						>
+							<Group justify="space-between" mb="sm">
+								<Text c={dark ? "white" : "darmasaba-navy"} fw={500}>
+									{activity.name}
+								</Text>
+								<MantineBadge
+									color={STATUS_COLORS[activity.status] || "gray"}
+									variant="light"
+								>
+									{activity.status}
+								</MantineBadge>
+							</Group>
+							<Group justify="space-between">
+								<MantineProgress
+									value={activity.progress}
+									size="sm"
+									radius="xl"
+									color={activity.progress === 100 ? "green" : "blue"}
+									w="calc(100% - 80px)"
+								/>
+								<Text size="sm" c={dark ? "white" : "darmasaba-navy"}>
+									{activity.progress}%
+								</Text>
+							</Group>
+							<Text size="sm" c="dimmed" mt="sm">
+								{activity.date}
+							</Text>
+						</Card>
+					))}
+				</Stack>
+			</Card>
+
+			{/* Statistik Dokumen & Progres Kegiatan */}
+			<Grid gutter="md">
+				<GridCol span={{ base: 12, lg: 6 }}>
+					<Card
+						p="md"
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+					>
+						<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
+							Jumlah Dokumen
+						</Title>
+						<ResponsiveContainer width="100%" height={200}>
+							<BarChart data={documentStats}>
+								<CartesianGrid
+									strokeDasharray="3 3"
+									vertical={false}
+									stroke={dark ? "#141D34" : "white"}
+								/>
+								<XAxis
+									dataKey="name"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark
+											? "var(--mantine-color-text)"
+											: "var(--mantine-color-text)",
+									}}
+								/>
+								<YAxis
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark
+											? "var(--mantine-color-text)"
+											: "var(--mantine-color-text)",
+									}}
+								/>
+								<Tooltip
+									contentStyle={
+										dark
+											? {
+												backgroundColor: "var(--mantine-color-dark-7)",
+												borderColor: "var(--mantine-color-dark-6)",
+											}
+											: {}
+									}
+								/>
+								<Bar
+									dataKey="value"
+									fill={
+										dark
+											? "var(--mantine-color-blue-6)"
+											: "var(--mantine-color-blue-filled)"
+									}
+									radius={[4, 4, 0, 0]}
+								/>
+							</BarChart>
+						</ResponsiveContainer>
+					</Card>
+				</GridCol>
+
+				<GridCol span={{ base: 12, lg: 6 }}>
+					<Card
+						p="md"
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+					>
+						<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
+							Progres Kegiatan
+						</Title>
+						<ResponsiveContainer width="100%" height={200}>
+							<PieChart
+								margin={{ top: 20, right: 80, bottom: 20, left: 80 }}
+							>
+								<Pie
+									data={activityProgressStats}
+									cx="50%"
+									cy="50%"
+									labelLine
+									outerRadius={65}
+									dataKey="value"
+									label={({ name, percent }) =>
+										`${name}: ${percent ? (percent * 100).toFixed(0) : "0"}%`
+									}
+								/>
+								<Tooltip
+									contentStyle={
+										dark
+											? {
+												backgroundColor: "var(--mantine-color-dark-7)",
+												borderColor: "var(--mantine-color-dark-6)",
+											}
+											: {}
+									}
+								/>
+							</PieChart>
+						</ResponsiveContainer>
+					</Card>
+				</GridCol>
+			</Grid>
+
+			{/* Diskusi Internal */}
+			<Card
+				p="md"
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+			>
+				<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
+					Diskusi Internal
+				</Title>
+				<Stack gap="sm">
+					{discussions.map((discussion, index) => (
+						<Card
+							key={index}
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#263852ff" : "#F1F5F9"}
+							style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+						>
+							<Group justify="space-between">
+								<Text c={dark ? "white" : "darmasaba-navy"} fw={500}>
+									{discussion.title}
+								</Text>
+								<Text size="sm" c="dimmed">
+									{discussion.timestamp}
+								</Text>
+							</Group>
+							<Text size="sm" c="dimmed">
+								{discussion.sender}
+							</Text>
+						</Card>
+					))}
+				</Stack>
+			</Card>
+
+			{/* Agenda / Acara Hari Ini */}
+			<Card
+				p="md"
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+			>
+				<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
+					Agenda / Acara Hari Ini
+				</Title>
+				{todayAgenda.length > 0 ? (
+					<Stack gap="sm">
+						{todayAgenda.map((agenda, index) => (
+							<Group key={index} align="flex-start">
+								<Box w={60}>
+									<Text c="dimmed">{agenda.time}</Text>
+								</Box>
+								<Divider orientation="vertical" mx="sm" />
+								<Text c={dark ? "white" : "darmasaba-navy"}>
+									{agenda.event}
+								</Text>
+							</Group>
+						))}
+					</Stack>
+				) : (
+					<Text c="dimmed" ta="center" py="md">
+						Tidak ada acara hari ini
+					</Text>
+				)}
+			</Card>
 		</Stack>
 	);
 };

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

@@ -1,95 +0,0 @@
-import {
-	Box,
-	Card,
-	Group,
-	Progress,
-	Text,
-	useMantineColorScheme,
-} from "@mantine/core";
-
-interface ActivityCardProps {
-	title: string;
-	date: string;
-	progress: number;
-	status: "selesai" | "berjalan" | "tertunda";
-}
-
-export function ActivityCard({
-	title,
-	date,
-	progress,
-	status,
-}: ActivityCardProps) {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	const getStatusColor = (s: string) => {
-		switch (s) {
-			case "selesai":
-				return "#22C55E";
-			case "berjalan":
-				return "#3B82F6";
-			case "tertunda":
-				return "#EF4444";
-			default:
-				return "#9CA3AF";
-		}
-	};
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			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)",
-			}}
-		>
-			<Box
-				style={{
-					borderLeft: `4px solid #3B82F6`,
-					paddingLeft: 12,
-					marginBottom: 12,
-				}}
-			>
-				<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"}>
-					{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,
-					}}
-				>
-					{status.toUpperCase()}
-				</Box>
-			</Group>
-
-			<Progress
-				value={progress}
-				size="sm"
-				radius="xl"
-				color={progress === 100 ? "green" : "yellow"}
-				animated={progress < 100}
-			/>
-
-			<Text size="xs" c="dimmed" mt="xs" ta="right">
-				{progress}%
-			</Text>
-		</Card>
-	);
-}

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

@@ -1,41 +0,0 @@
-import { Card, Group, Text, useMantineColorScheme } from "@mantine/core";
-import { FileText } from "lucide-react";
-
-interface ArchiveItem {
-	name: string;
-}
-
-interface ArchiveCardProps {
-	item: ArchiveItem;
-	onClick?: () => void;
-}
-
-export function ArchiveCard({ item, onClick }: ArchiveCardProps) {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			style={{
-				borderColor: dark ? "#334155" : "#e5e7eb",
-				boxShadow: dark
-					? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
-					: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
-				cursor: "pointer",
-				transition: "transform 0.2s, box-shadow 0.2s",
-			}}
-			onClick={onClick}
-		>
-			<Group gap="md">
-				<FileText size={32} color={dark ? "#60A5FA" : "#3B82F6"} />
-				<Text size="sm" fw={500} c={dark ? "white" : "#1E3A5F"}>
-					{item.name}
-				</Text>
-			</Group>
-		</Card>
-	);
-}

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

@@ -1,92 +0,0 @@
-import {
-	Box,
-	Card,
-	Group,
-	Stack,
-	Text,
-	useMantineColorScheme,
-} from "@mantine/core";
-import { MessageCircle } from "lucide-react";
-
-interface DiscussionItem {
-	message: string;
-	sender: string;
-	date: string;
-}
-
-const discussions: DiscussionItem[] = [
-	{
-		message: "Kepada Pelayanan, mohon di cek...",
-		sender: "I.B Surya Prabhawa Manu",
-		date: "12 Apr 2025",
-	},
-	{
-		message: "Kepada staf perencanaan @suar...",
-		sender: "Ni Nyoman Yuliani",
-		date: "14 Jun 2025",
-	},
-	{
-		message: "ijin atau mohon kepada KBD sar...",
-		sender: "Ni Wayan Martini",
-		date: "12 Apr 2025",
-	},
-];
-
-export function DiscussionPanel() {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			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)",
-			}}
-		>
-			<Group gap="xs" mb="md">
-				<MessageCircle size={20} color={dark ? "#E2E8F0" : "#1E3A5F"} />
-				<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"}>
-					Diskusi
-				</Text>
-			</Group>
-			<Stack gap="sm">
-				{discussions.map((discussion, index) => (
-					<Card
-						key={index}
-						p="sm"
-						radius="md"
-						withBorder
-						bg={dark ? "#334155" : "#F1F5F9"}
-						style={{
-							borderColor: dark ? "#334155" : "#F1F5F9",
-						}}
-					>
-						<Text
-							size="sm"
-							c={dark ? "white" : "#1E3A5F"}
-							fw={500}
-							mb="xs"
-							lineClamp={2}
-						>
-							{discussion.message}
-						</Text>
-						<Group justify="space-between">
-							<Text size="xs" c="dimmed">
-								{discussion.sender}
-							</Text>
-							<Text size="xs" c="dimmed">
-								{discussion.date}
-							</Text>
-						</Group>
-					</Card>
-				))}
-			</Stack>
-		</Card>
-	);
-}

src/components/kinerja-divisi/division-list.tsx

@@ -1,77 +0,0 @@
-import {
-	Box,
-	Card,
-	Group,
-	Stack,
-	Text,
-	useMantineColorScheme,
-} from "@mantine/core";
-import { ChevronRight } from "lucide-react";
-
-interface DivisionItem {
-	name: string;
-	count: number;
-}
-
-const divisionData: DivisionItem[] = [
-	{ name: "Kesejahteraan", count: 37 },
-	{ name: "Pemerintahan", count: 26 },
-	{ name: "Keuangan", count: 17 },
-	{ name: "Sekretaris Desa", count: 15 },
-	{ name: "Tata Usaha TK", count: 14 },
-	{ name: "Perangkat Kewilayahan", count: 12 },
-	{ name: "Pelayanan", count: 10 },
-	{ name: "Perencanaan", count: 9 },
-	{ name: "Tata Usaha & Umum", count: 7 },
-];
-
-export function DivisionList() {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			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)",
-			}}
-			h="100%"
-		>
-			<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"} mb="md">
-				Divisi Teraktif
-			</Text>
-			<Stack gap="xs">
-				{divisionData.map((division, index) => (
-					<Group
-						key={index}
-						justify="space-between"
-						align="center"
-						style={{
-							padding: "8px 12px",
-							borderRadius: 8,
-							backgroundColor: dark ? "#334155" : "#F1F5F9",
-							transition: "background-color 0.2s",
-							cursor: "pointer",
-						}}
-					>
-						<Text size="sm" c={dark ? "white" : "#1E3A5F"}>
-							{division.name}
-						</Text>
-						<Group gap="xs">
-							<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"}>
-								{division.count}
-							</Text>
-							<ChevronRight size={16} color={dark ? "#94A3B8" : "#64748B"} />
-						</Group>
-					</Group>
-				))}
-			</Stack>
-		</Card>
-	);
-}

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

@@ -1,69 +0,0 @@
-import { Card, Text, useMantineColorScheme } from "@mantine/core";
-import {
-	Bar,
-	BarChart,
-	CartesianGrid,
-	ResponsiveContainer,
-	Tooltip,
-	XAxis,
-	YAxis,
-} from "recharts";
-
-const documentData = [
-	{ name: "Gambar", value: 300 },
-	{ name: "Dokumen", value: 310 },
-];
-
-export function DocumentChart() {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			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)",
-			}}
-			h="100%"
-		>
-			<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"} mb="md">
-				Jumlah Dokumen
-			</Text>
-			<ResponsiveContainer width="100%" height={200}>
-				<BarChart data={documentData}>
-					<CartesianGrid
-						strokeDasharray="3 3"
-						vertical={false}
-						stroke={dark ? "#334155" : "#e5e7eb"}
-					/>
-					<XAxis
-						dataKey="name"
-						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" }}
-					/>
-					<Bar dataKey="value" fill="#3B82F6" radius={[4, 4, 0, 0]} />
-				</BarChart>
-			</ResponsiveContainer>
-		</Card>
-	);
-}

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

@@ -1,65 +0,0 @@
-import {
-	Box,
-	Card,
-	Group,
-	Stack,
-	Text,
-	useMantineColorScheme,
-} from "@mantine/core";
-import { Calendar } from "lucide-react";
-
-interface AgendaItem {
-	time: string;
-	event: string;
-}
-
-interface EventCardProps {
-	agendas?: AgendaItem[];
-}
-
-export function EventCard({ agendas = [] }: EventCardProps) {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			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)",
-			}}
-		>
-			<Group gap="xs" mb="md">
-				<Calendar size={20} color={dark ? "#E2E8F0" : "#1E3A5F"} />
-				<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"}>
-					Acara Hari Ini
-				</Text>
-			</Group>
-			{agendas.length > 0 ? (
-				<Stack gap="sm">
-					{agendas.map((agenda, index) => (
-						<Group key={index} align="flex-start" gap="md">
-							<Box w={60}>
-								<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"}>
-									{agenda.time}
-								</Text>
-							</Box>
-							<Text size="sm" c={dark ? "white" : "#1E3A5F"}>
-								{agenda.event}
-							</Text>
-						</Group>
-					))}
-				</Stack>
-			) : (
-				<Text c="dimmed" ta="center" py="md">
-					Tidak ada acara hari ini
-				</Text>
-			)}
-		</Card>
-	);
-}

src/components/kinerja-divisi/index.ts

@@ -1,7 +0,0 @@
-export { ActivityCard } from "./activity-card";
-export { ArchiveCard } from "./archive-card";
-export { DiscussionPanel } from "./discussion-panel";
-export { DivisionList } from "./division-list";
-export { DocumentChart } from "./document-chart";
-export { EventCard } from "./event-card";
-export { ProgressChart } from "./progress-chart";

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

@@ -1,84 +0,0 @@
-import {
-	Box,
-	Card,
-	Group,
-	Stack,
-	Text,
-	useMantineColorScheme,
-} from "@mantine/core";
-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: "Segera Dikerjakan", value: 0, color: "#3B82F6" },
-	{ name: "Dibatalkan", value: 0, color: "#EF4444" },
-];
-
-export function ProgressChart() {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
-
-	return (
-		<Card
-			p="md"
-			radius="xl"
-			withBorder
-			bg={dark ? "#1E293B" : "white"}
-			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)",
-			}}
-			h="100%"
-		>
-			<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"} mb="md">
-				Progres Kegiatan
-			</Text>
-			<ResponsiveContainer width="100%" height={200}>
-				<PieChart>
-					<Pie
-						data={progressData}
-						cx="50%"
-						cy="50%"
-						innerRadius={60}
-						outerRadius={80}
-						paddingAngle={2}
-						dataKey="value"
-					>
-						{progressData.map((entry, index) => (
-							<Cell key={`cell-${index}`} fill={entry.color} />
-						))}
-					</Pie>
-					<Tooltip
-						contentStyle={{
-							backgroundColor: dark ? "#1E293B" : "white",
-							borderColor: dark ? "#334155" : "#e5e7eb",
-							borderRadius: "8px",
-						}}
-					/>
-				</PieChart>
-			</ResponsiveContainer>
-			<Stack gap="xs" mt="md">
-				{progressData.map((item, index) => (
-					<Group key={index} justify="space-between">
-						<Group gap="xs">
-							<Box
-								w={12}
-								h={12}
-								style={{ backgroundColor: item.color, borderRadius: 2 }}
-							/>
-							<Text size="sm" c={dark ? "white" : "gray.7"}>
-								{item.name}
-							</Text>
-						</Group>
-						<Text size="sm" fw={600} c={dark ? "white" : "gray.9"}>
-							{item.value.toFixed(2)}%
-						</Text>
-					</Group>
-				))}
-			</Stack>
-		</Card>
-	);
-}

src/components/pengaduan-layanan-publik.tsx

@@ -840,4 +840,4 @@ const PengaduanLayananPublik = () => {
 	);
 };
 
-export default PengaduanLayananPublik;
+export default PengaduanLayananPublik;

src/components/sidebar.tsx

@@ -27,29 +27,35 @@ export function Sidebar({ className }: SidebarProps) {
 
 	// State for settings submenu collapse
 	const [settingsOpen, setSettingsOpen] = useState(
-		location.pathname.startsWith("/pengaturan"),
+		location.pathname.startsWith("/dashboard/pengaturan"),
 	);
 
 	// Define menu items with their paths
 	const menuItems = [
-		{ name: "Beranda", path: "/" },
-		{ name: "Kinerja Divisi", path: "/kinerja-divisi" },
-		{ name: "Pengaduan & Layanan Publik", path: "/pengaduan-layanan-publik" },
-		{ name: "Jenna Analytic", path: "/jenna-analytic" },
-		{ name: "Demografi & Kependudukan", path: "/demografi-pekerjaan" },
-		{ name: "Keuangan & Anggaran", path: "/keuangan-anggaran" },
-		{ name: "Bumdes & UMKM Desa", path: "/bumdes" },
-		{ name: "Sosial", path: "/sosial" },
-		{ name: "Keamanan", path: "/keamanan" },
-		{ name: "Bantuan", path: "/bantuan" },
+		{ name: "Beranda", path: "/dashboard" },
+		{ name: "Kinerja Divisi", path: "/dashboard/kinerja-divisi" },
+		{
+			name: "Pengaduan & Layanan Publik",
+			path: "/dashboard/pengaduan-layanan-publik",
+		},
+		{ name: "Jenna Analytic", path: "/dashboard/jenna-analytic" },
+		{
+			name: "Demografi & Kependudukan",
+			path: "/dashboard/demografi-pekerjaan",
+		},
+		{ name: "Keuangan & Anggaran", path: "/dashboard/keuangan-anggaran" },
+		{ name: "Bumdes & UMKM Desa", path: "/dashboard/bumdes" },
+		{ name: "Sosial", path: "/dashboard/sosial" },
+		{ name: "Keamanan", path: "/dashboard/keamanan" },
+		{ name: "Bantuan", path: "/dashboard/bantuan" },
 	];
 
 	// Settings submenu items
 	const settingsItems = [
-		{ name: "Umum", path: "/pengaturan/umum" },
-		{ name: "Notifikasi", path: "/pengaturan/notifikasi" },
-		{ name: "Keamanan", path: "/pengaturan/keamanan" },
-		{ name: "Akses & Tim", path: "/pengaturan/akses-dan-tim" },
+		{ name: "Umum", path: "/dashboard/pengaturan/umum" },
+		{ name: "Notifikasi", path: "/dashboard/pengaturan/notifikasi" },
+		{ name: "Keamanan", path: "/dashboard/pengaturan/keamanan" },
+		{ name: "Akses & Tim", path: "/dashboard/pengaturan/akses-dan-tim" },
 	];
 
 	// Check if any settings submenu is active
@@ -204,4 +210,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

@@ -10,242 +10,201 @@ const PORT = process.env.PORT || 3000;
 
 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
-  }
-}
-
 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()];
+				},
+				headers: {} as Record<string, string>,
+				end(data: any) {
+					// Handle potential Buffer or string data from Vite
+					let body = data;
+					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;
+			}
+		}
 
-    // 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;
+				}
+				// Special handling for PWA files in src
+				else 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

@@ -60,39 +60,16 @@ type RouteRule = {
 };
 
 const routeRules: RouteRule[] = [
-	// Public routes - no auth required
-	{
-		match: (p) => p === "/" || p === "/signin" || p === "/signup",
-		requireAuth: false,
-	},
-	// Profile routes - auth required for all roles
 	{
 		match: (p) => p === "/profile" || p.startsWith("/profile/"),
 		requireAuth: true,
 		redirectTo: "/signin",
 	},
-	// Dashboard and main pages - auth required for all roles (not just admin)
 	{
-		match: (p) =>
-			p.startsWith("/kinerja-divisi") ||
-			p.startsWith("/pengaduan") ||
-			p.startsWith("/jenna") ||
-			p.startsWith("/demografi") ||
-			p.startsWith("/keuangan") ||
-			p.startsWith("/bumdes") ||
-			p.startsWith("/sosial") ||
-			p.startsWith("/keamanan") ||
-			p.startsWith("/bantuan") ||
-			p.startsWith("/pengaturan"),
-		requireAuth: true,
-		redirectTo: "/signin",
-	},
-	// Admin routes - auth required with admin role only
-	{
-		match: (p) => p.startsWith("/admin"),
+		match: (p) => p === "/dashboard" || p.startsWith("/dashboard/"),
 		requireAuth: true,
 		requiredRole: "admin",
-		redirectTo: "/signin",
+		redirectTo: "/profile",
 	},
 ];
 
@@ -121,22 +98,15 @@ export function createProtectedRoute(options: ProtectedRouteOptions = {}) {
 		location: { pathname: string; href: string };
 	}) => {
 		const rule = findRouteRule(location.pathname);
-
-		// If no rule matches, allow access by default
 		if (!rule) return;
 
-		// If route explicitly doesn't require auth, allow access
-		if (rule.requireAuth === false) return;
-
 		const session = await fetchSession();
 		const user = session?.user;
 
-		// If auth is required but user is not logged in, redirect to login
 		if (rule.requireAuth && !user) {
 			redirectToLogin(rule.redirectTo ?? redirectTo, location.href);
 		}
 
-		// If specific role is required, check it
 		if (rule.requiredRole && user?.role !== rule.requiredRole) {
 			redirectToLogin(rule.redirectTo ?? redirectTo, location.href);
 		}
@@ -152,4 +122,4 @@ export function createProtectedRoute(options: ProtectedRouteOptions = {}) {
  * Default Middleware Export
  * ================================ */
 
-export const protectedRouteMiddleware = createProtectedRoute();
+export const protectedRouteMiddleware = createProtectedRoute();

src/routeTree.gen.ts

@@ -9,38 +9,35 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
-import { Route as SosialRouteImport } from './routes/sosial'
 import { Route as SignupRouteImport } from './routes/signup'
 import { Route as SigninRouteImport } from './routes/signin'
-import { Route as PengaduanLayananPublikRouteImport } from './routes/pengaduan-layanan-publik'
-import { Route as KinerjaDivisiRouteImport } from './routes/kinerja-divisi'
-import { Route as KeuanganAnggaranRouteImport } from './routes/keuangan-anggaran'
-import { Route as KeamananRouteImport } from './routes/keamanan'
-import { Route as JennaAnalyticRouteImport } from './routes/jenna-analytic'
-import { Route as DemografiPekerjaanRouteImport } from './routes/demografi-pekerjaan'
-import { Route as BumdesRouteImport } from './routes/bumdes'
-import { Route as BantuanRouteImport } from './routes/bantuan'
-import { Route as PengaturanRouteRouteImport } from './routes/pengaturan/route'
+import { Route as DashboardRouteRouteImport } from './routes/dashboard/route'
 import { Route as AdminRouteRouteImport } from './routes/admin/route'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as UsersIndexRouteImport } from './routes/users/index'
 import { Route as ProfileIndexRouteImport } from './routes/profile/index'
+import { Route as DashboardIndexRouteImport } from './routes/dashboard/index'
 import { Route as AdminIndexRouteImport } from './routes/admin/index'
 import { Route as UsersIdRouteImport } from './routes/users/$id'
 import { Route as ProfileEditRouteImport } from './routes/profile/edit'
-import { Route as PengaturanUmumRouteImport } from './routes/pengaturan/umum'
-import { Route as PengaturanNotifikasiRouteImport } from './routes/pengaturan/notifikasi'
-import { Route as PengaturanKeamananRouteImport } from './routes/pengaturan/keamanan'
-import { Route as PengaturanAksesDanTimRouteImport } from './routes/pengaturan/akses-dan-tim'
+import { Route as DashboardSosialRouteImport } from './routes/dashboard/sosial'
+import { Route as DashboardPengaduanLayananPublikRouteImport } from './routes/dashboard/pengaduan-layanan-publik'
+import { Route as DashboardKinerjaDivisiRouteImport } from './routes/dashboard/kinerja-divisi'
+import { Route as DashboardKeuanganAnggaranRouteImport } from './routes/dashboard/keuangan-anggaran'
+import { Route as DashboardKeamananRouteImport } from './routes/dashboard/keamanan'
+import { Route as DashboardJennaAnalyticRouteImport } from './routes/dashboard/jenna-analytic'
+import { Route as DashboardDemografiPekerjaanRouteImport } from './routes/dashboard/demografi-pekerjaan'
+import { Route as DashboardBumdesRouteImport } from './routes/dashboard/bumdes'
+import { Route as DashboardBantuanRouteImport } from './routes/dashboard/bantuan'
 import { Route as AdminUsersRouteImport } from './routes/admin/users'
 import { Route as AdminSettingsRouteImport } from './routes/admin/settings'
 import { Route as AdminApikeyRouteImport } from './routes/admin/apikey'
+import { Route as DashboardPengaturanRouteRouteImport } from './routes/dashboard/pengaturan/route'
+import { Route as DashboardPengaturanUmumRouteImport } from './routes/dashboard/pengaturan/umum'
+import { Route as DashboardPengaturanNotifikasiRouteImport } from './routes/dashboard/pengaturan/notifikasi'
+import { Route as DashboardPengaturanKeamananRouteImport } from './routes/dashboard/pengaturan/keamanan'
+import { Route as DashboardPengaturanAksesDanTimRouteImport } from './routes/dashboard/pengaturan/akses-dan-tim'
 
-const SosialRoute = SosialRouteImport.update({
-  id: '/sosial',
-  path: '/sosial',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const SignupRoute = SignupRouteImport.update({
   id: '/signup',
   path: '/signup',
@@ -51,49 +48,9 @@ const SigninRoute = SigninRouteImport.update({
   path: '/signin',
   getParentRoute: () => rootRouteImport,
 } as any)
-const PengaduanLayananPublikRoute = PengaduanLayananPublikRouteImport.update({
-  id: '/pengaduan-layanan-publik',
-  path: '/pengaduan-layanan-publik',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const KinerjaDivisiRoute = KinerjaDivisiRouteImport.update({
-  id: '/kinerja-divisi',
-  path: '/kinerja-divisi',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const KeuanganAnggaranRoute = KeuanganAnggaranRouteImport.update({
-  id: '/keuangan-anggaran',
-  path: '/keuangan-anggaran',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const KeamananRoute = KeamananRouteImport.update({
-  id: '/keamanan',
-  path: '/keamanan',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const JennaAnalyticRoute = JennaAnalyticRouteImport.update({
-  id: '/jenna-analytic',
-  path: '/jenna-analytic',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const DemografiPekerjaanRoute = DemografiPekerjaanRouteImport.update({
-  id: '/demografi-pekerjaan',
-  path: '/demografi-pekerjaan',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const BumdesRoute = BumdesRouteImport.update({
-  id: '/bumdes',
-  path: '/bumdes',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const BantuanRoute = BantuanRouteImport.update({
-  id: '/bantuan',
-  path: '/bantuan',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const PengaturanRouteRoute = PengaturanRouteRouteImport.update({
-  id: '/pengaturan',
-  path: '/pengaturan',
+const DashboardRouteRoute = DashboardRouteRouteImport.update({
+  id: '/dashboard',
+  path: '/dashboard',
   getParentRoute: () => rootRouteImport,
 } as any)
 const AdminRouteRoute = AdminRouteRouteImport.update({
@@ -116,6 +73,11 @@ const ProfileIndexRoute = ProfileIndexRouteImport.update({
   path: '/profile/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DashboardIndexRoute = DashboardIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => DashboardRouteRoute,
+} as any)
 const AdminIndexRoute = AdminIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -131,25 +93,53 @@ const ProfileEditRoute = ProfileEditRouteImport.update({
   path: '/profile/edit',
   getParentRoute: () => rootRouteImport,
 } as any)
-const PengaturanUmumRoute = PengaturanUmumRouteImport.update({
-  id: '/umum',
-  path: '/umum',
-  getParentRoute: () => PengaturanRouteRoute,
+const DashboardSosialRoute = DashboardSosialRouteImport.update({
+  id: '/sosial',
+  path: '/sosial',
+  getParentRoute: () => DashboardRouteRoute,
 } as any)
-const PengaturanNotifikasiRoute = PengaturanNotifikasiRouteImport.update({
-  id: '/notifikasi',
-  path: '/notifikasi',
-  getParentRoute: () => PengaturanRouteRoute,
+const DashboardPengaduanLayananPublikRoute =
+  DashboardPengaduanLayananPublikRouteImport.update({
+    id: '/pengaduan-layanan-publik',
+    path: '/pengaduan-layanan-publik',
+    getParentRoute: () => DashboardRouteRoute,
+  } as any)
+const DashboardKinerjaDivisiRoute = DashboardKinerjaDivisiRouteImport.update({
+  id: '/kinerja-divisi',
+  path: '/kinerja-divisi',
+  getParentRoute: () => DashboardRouteRoute,
 } as any)
-const PengaturanKeamananRoute = PengaturanKeamananRouteImport.update({
+const DashboardKeuanganAnggaranRoute =
+  DashboardKeuanganAnggaranRouteImport.update({
+    id: '/keuangan-anggaran',
+    path: '/keuangan-anggaran',
+    getParentRoute: () => DashboardRouteRoute,
+  } as any)
+const DashboardKeamananRoute = DashboardKeamananRouteImport.update({
   id: '/keamanan',
   path: '/keamanan',
-  getParentRoute: () => PengaturanRouteRoute,
+  getParentRoute: () => DashboardRouteRoute,
 } as any)
-const PengaturanAksesDanTimRoute = PengaturanAksesDanTimRouteImport.update({
-  id: '/akses-dan-tim',
-  path: '/akses-dan-tim',
-  getParentRoute: () => PengaturanRouteRoute,
+const DashboardJennaAnalyticRoute = DashboardJennaAnalyticRouteImport.update({
+  id: '/jenna-analytic',
+  path: '/jenna-analytic',
+  getParentRoute: () => DashboardRouteRoute,
+} as any)
+const DashboardDemografiPekerjaanRoute =
+  DashboardDemografiPekerjaanRouteImport.update({
+    id: '/demografi-pekerjaan',
+    path: '/demografi-pekerjaan',
+    getParentRoute: () => DashboardRouteRoute,
+  } as any)
+const DashboardBumdesRoute = DashboardBumdesRouteImport.update({
+  id: '/bumdes',
+  path: '/bumdes',
+  getParentRoute: () => DashboardRouteRoute,
+} as any)
+const DashboardBantuanRoute = DashboardBantuanRouteImport.update({
+  id: '/bantuan',
+  path: '/bantuan',
+  getParentRoute: () => DashboardRouteRoute,
 } as any)
 const AdminUsersRoute = AdminUsersRouteImport.update({
   id: '/users',
@@ -166,192 +156,222 @@ const AdminApikeyRoute = AdminApikeyRouteImport.update({
   path: '/apikey',
   getParentRoute: () => AdminRouteRoute,
 } as any)
+const DashboardPengaturanRouteRoute =
+  DashboardPengaturanRouteRouteImport.update({
+    id: '/pengaturan',
+    path: '/pengaturan',
+    getParentRoute: () => DashboardRouteRoute,
+  } as any)
+const DashboardPengaturanUmumRoute = DashboardPengaturanUmumRouteImport.update({
+  id: '/umum',
+  path: '/umum',
+  getParentRoute: () => DashboardPengaturanRouteRoute,
+} as any)
+const DashboardPengaturanNotifikasiRoute =
+  DashboardPengaturanNotifikasiRouteImport.update({
+    id: '/notifikasi',
+    path: '/notifikasi',
+    getParentRoute: () => DashboardPengaturanRouteRoute,
+  } as any)
+const DashboardPengaturanKeamananRoute =
+  DashboardPengaturanKeamananRouteImport.update({
+    id: '/keamanan',
+    path: '/keamanan',
+    getParentRoute: () => DashboardPengaturanRouteRoute,
+  } as any)
+const DashboardPengaturanAksesDanTimRoute =
+  DashboardPengaturanAksesDanTimRouteImport.update({
+    id: '/akses-dan-tim',
+    path: '/akses-dan-tim',
+    getParentRoute: () => DashboardPengaturanRouteRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/admin': typeof AdminRouteRouteWithChildren
-  '/pengaturan': typeof PengaturanRouteRouteWithChildren
-  '/bantuan': typeof BantuanRoute
-  '/bumdes': typeof BumdesRoute
-  '/demografi-pekerjaan': typeof DemografiPekerjaanRoute
-  '/jenna-analytic': typeof JennaAnalyticRoute
-  '/keamanan': typeof KeamananRoute
-  '/keuangan-anggaran': typeof KeuanganAnggaranRoute
-  '/kinerja-divisi': typeof KinerjaDivisiRoute
-  '/pengaduan-layanan-publik': typeof PengaduanLayananPublikRoute
+  '/dashboard': typeof DashboardRouteRouteWithChildren
   '/signin': typeof SigninRoute
   '/signup': typeof SignupRoute
-  '/sosial': typeof SosialRoute
+  '/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
   '/admin/apikey': typeof AdminApikeyRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/admin/users': typeof AdminUsersRoute
-  '/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
-  '/pengaturan/keamanan': typeof PengaturanKeamananRoute
-  '/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
-  '/pengaturan/umum': typeof PengaturanUmumRoute
+  '/dashboard/bantuan': typeof DashboardBantuanRoute
+  '/dashboard/bumdes': typeof DashboardBumdesRoute
+  '/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
+  '/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
+  '/dashboard/keamanan': typeof DashboardKeamananRoute
+  '/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
+  '/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
+  '/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
+  '/dashboard/sosial': typeof DashboardSosialRoute
   '/profile/edit': typeof ProfileEditRoute
   '/users/$id': typeof UsersIdRoute
   '/admin/': typeof AdminIndexRoute
+  '/dashboard/': typeof DashboardIndexRoute
   '/profile/': typeof ProfileIndexRoute
   '/users/': typeof UsersIndexRoute
+  '/dashboard/pengaturan/akses-dan-tim': typeof DashboardPengaturanAksesDanTimRoute
+  '/dashboard/pengaturan/keamanan': typeof DashboardPengaturanKeamananRoute
+  '/dashboard/pengaturan/notifikasi': typeof DashboardPengaturanNotifikasiRoute
+  '/dashboard/pengaturan/umum': typeof DashboardPengaturanUmumRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/pengaturan': typeof PengaturanRouteRouteWithChildren
-  '/bantuan': typeof BantuanRoute
-  '/bumdes': typeof BumdesRoute
-  '/demografi-pekerjaan': typeof DemografiPekerjaanRoute
-  '/jenna-analytic': typeof JennaAnalyticRoute
-  '/keamanan': typeof KeamananRoute
-  '/keuangan-anggaran': typeof KeuanganAnggaranRoute
-  '/kinerja-divisi': typeof KinerjaDivisiRoute
-  '/pengaduan-layanan-publik': typeof PengaduanLayananPublikRoute
   '/signin': typeof SigninRoute
   '/signup': typeof SignupRoute
-  '/sosial': typeof SosialRoute
+  '/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
   '/admin/apikey': typeof AdminApikeyRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/admin/users': typeof AdminUsersRoute
-  '/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
-  '/pengaturan/keamanan': typeof PengaturanKeamananRoute
-  '/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
-  '/pengaturan/umum': typeof PengaturanUmumRoute
+  '/dashboard/bantuan': typeof DashboardBantuanRoute
+  '/dashboard/bumdes': typeof DashboardBumdesRoute
+  '/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
+  '/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
+  '/dashboard/keamanan': typeof DashboardKeamananRoute
+  '/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
+  '/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
+  '/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
+  '/dashboard/sosial': typeof DashboardSosialRoute
   '/profile/edit': typeof ProfileEditRoute
   '/users/$id': typeof UsersIdRoute
   '/admin': typeof AdminIndexRoute
+  '/dashboard': typeof DashboardIndexRoute
   '/profile': typeof ProfileIndexRoute
   '/users': typeof UsersIndexRoute
+  '/dashboard/pengaturan/akses-dan-tim': typeof DashboardPengaturanAksesDanTimRoute
+  '/dashboard/pengaturan/keamanan': typeof DashboardPengaturanKeamananRoute
+  '/dashboard/pengaturan/notifikasi': typeof DashboardPengaturanNotifikasiRoute
+  '/dashboard/pengaturan/umum': typeof DashboardPengaturanUmumRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/admin': typeof AdminRouteRouteWithChildren
-  '/pengaturan': typeof PengaturanRouteRouteWithChildren
-  '/bantuan': typeof BantuanRoute
-  '/bumdes': typeof BumdesRoute
-  '/demografi-pekerjaan': typeof DemografiPekerjaanRoute
-  '/jenna-analytic': typeof JennaAnalyticRoute
-  '/keamanan': typeof KeamananRoute
-  '/keuangan-anggaran': typeof KeuanganAnggaranRoute
-  '/kinerja-divisi': typeof KinerjaDivisiRoute
-  '/pengaduan-layanan-publik': typeof PengaduanLayananPublikRoute
+  '/dashboard': typeof DashboardRouteRouteWithChildren
   '/signin': typeof SigninRoute
   '/signup': typeof SignupRoute
-  '/sosial': typeof SosialRoute
+  '/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
   '/admin/apikey': typeof AdminApikeyRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/admin/users': typeof AdminUsersRoute
-  '/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
-  '/pengaturan/keamanan': typeof PengaturanKeamananRoute
-  '/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
-  '/pengaturan/umum': typeof PengaturanUmumRoute
+  '/dashboard/bantuan': typeof DashboardBantuanRoute
+  '/dashboard/bumdes': typeof DashboardBumdesRoute
+  '/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
+  '/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
+  '/dashboard/keamanan': typeof DashboardKeamananRoute
+  '/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
+  '/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
+  '/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
+  '/dashboard/sosial': typeof DashboardSosialRoute
   '/profile/edit': typeof ProfileEditRoute
   '/users/$id': typeof UsersIdRoute
   '/admin/': typeof AdminIndexRoute
+  '/dashboard/': typeof DashboardIndexRoute
   '/profile/': typeof ProfileIndexRoute
   '/users/': typeof UsersIndexRoute
+  '/dashboard/pengaturan/akses-dan-tim': typeof DashboardPengaturanAksesDanTimRoute
+  '/dashboard/pengaturan/keamanan': typeof DashboardPengaturanKeamananRoute
+  '/dashboard/pengaturan/notifikasi': typeof DashboardPengaturanNotifikasiRoute
+  '/dashboard/pengaturan/umum': typeof DashboardPengaturanUmumRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
     | '/admin'
-    | '/pengaturan'
-    | '/bantuan'
-    | '/bumdes'
-    | '/demografi-pekerjaan'
-    | '/jenna-analytic'
-    | '/keamanan'
-    | '/keuangan-anggaran'
-    | '/kinerja-divisi'
-    | '/pengaduan-layanan-publik'
+    | '/dashboard'
     | '/signin'
     | '/signup'
-    | '/sosial'
+    | '/dashboard/pengaturan'
     | '/admin/apikey'
     | '/admin/settings'
     | '/admin/users'
-    | '/pengaturan/akses-dan-tim'
-    | '/pengaturan/keamanan'
-    | '/pengaturan/notifikasi'
-    | '/pengaturan/umum'
+    | '/dashboard/bantuan'
+    | '/dashboard/bumdes'
+    | '/dashboard/demografi-pekerjaan'
+    | '/dashboard/jenna-analytic'
+    | '/dashboard/keamanan'
+    | '/dashboard/keuangan-anggaran'
+    | '/dashboard/kinerja-divisi'
+    | '/dashboard/pengaduan-layanan-publik'
+    | '/dashboard/sosial'
     | '/profile/edit'
     | '/users/$id'
     | '/admin/'
+    | '/dashboard/'
     | '/profile/'
     | '/users/'
+    | '/dashboard/pengaturan/akses-dan-tim'
+    | '/dashboard/pengaturan/keamanan'
+    | '/dashboard/pengaturan/notifikasi'
+    | '/dashboard/pengaturan/umum'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
-    | '/pengaturan'
-    | '/bantuan'
-    | '/bumdes'
-    | '/demografi-pekerjaan'
-    | '/jenna-analytic'
-    | '/keamanan'
-    | '/keuangan-anggaran'
-    | '/kinerja-divisi'
-    | '/pengaduan-layanan-publik'
     | '/signin'
     | '/signup'
-    | '/sosial'
+    | '/dashboard/pengaturan'
     | '/admin/apikey'
     | '/admin/settings'
     | '/admin/users'
-    | '/pengaturan/akses-dan-tim'
-    | '/pengaturan/keamanan'
-    | '/pengaturan/notifikasi'
-    | '/pengaturan/umum'
+    | '/dashboard/bantuan'
+    | '/dashboard/bumdes'
+    | '/dashboard/demografi-pekerjaan'
+    | '/dashboard/jenna-analytic'
+    | '/dashboard/keamanan'
+    | '/dashboard/keuangan-anggaran'
+    | '/dashboard/kinerja-divisi'
+    | '/dashboard/pengaduan-layanan-publik'
+    | '/dashboard/sosial'
     | '/profile/edit'
     | '/users/$id'
     | '/admin'
+    | '/dashboard'
     | '/profile'
     | '/users'
+    | '/dashboard/pengaturan/akses-dan-tim'
+    | '/dashboard/pengaturan/keamanan'
+    | '/dashboard/pengaturan/notifikasi'
+    | '/dashboard/pengaturan/umum'
   id:
     | '__root__'
     | '/'
     | '/admin'
-    | '/pengaturan'
-    | '/bantuan'
-    | '/bumdes'
-    | '/demografi-pekerjaan'
-    | '/jenna-analytic'
-    | '/keamanan'
-    | '/keuangan-anggaran'
-    | '/kinerja-divisi'
-    | '/pengaduan-layanan-publik'
+    | '/dashboard'
     | '/signin'
     | '/signup'
-    | '/sosial'
+    | '/dashboard/pengaturan'
     | '/admin/apikey'
     | '/admin/settings'
     | '/admin/users'
-    | '/pengaturan/akses-dan-tim'
-    | '/pengaturan/keamanan'
-    | '/pengaturan/notifikasi'
-    | '/pengaturan/umum'
+    | '/dashboard/bantuan'
+    | '/dashboard/bumdes'
+    | '/dashboard/demografi-pekerjaan'
+    | '/dashboard/jenna-analytic'
+    | '/dashboard/keamanan'
+    | '/dashboard/keuangan-anggaran'
+    | '/dashboard/kinerja-divisi'
+    | '/dashboard/pengaduan-layanan-publik'
+    | '/dashboard/sosial'
     | '/profile/edit'
     | '/users/$id'
     | '/admin/'
+    | '/dashboard/'
     | '/profile/'
     | '/users/'
+    | '/dashboard/pengaturan/akses-dan-tim'
+    | '/dashboard/pengaturan/keamanan'
+    | '/dashboard/pengaturan/notifikasi'
+    | '/dashboard/pengaturan/umum'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AdminRouteRoute: typeof AdminRouteRouteWithChildren
-  PengaturanRouteRoute: typeof PengaturanRouteRouteWithChildren
-  BantuanRoute: typeof BantuanRoute
-  BumdesRoute: typeof BumdesRoute
-  DemografiPekerjaanRoute: typeof DemografiPekerjaanRoute
-  JennaAnalyticRoute: typeof JennaAnalyticRoute
-  KeamananRoute: typeof KeamananRoute
-  KeuanganAnggaranRoute: typeof KeuanganAnggaranRoute
-  KinerjaDivisiRoute: typeof KinerjaDivisiRoute
-  PengaduanLayananPublikRoute: typeof PengaduanLayananPublikRoute
+  DashboardRouteRoute: typeof DashboardRouteRouteWithChildren
   SigninRoute: typeof SigninRoute
   SignupRoute: typeof SignupRoute
-  SosialRoute: typeof SosialRoute
   ProfileEditRoute: typeof ProfileEditRoute
   UsersIdRoute: typeof UsersIdRoute
   ProfileIndexRoute: typeof ProfileIndexRoute
@@ -360,13 +380,6 @@ export interface RootRouteChildren {
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/sosial': {
-      id: '/sosial'
-      path: '/sosial'
-      fullPath: '/sosial'
-      preLoaderRoute: typeof SosialRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/signup': {
       id: '/signup'
       path: '/signup'
@@ -381,67 +394,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SigninRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/pengaduan-layanan-publik': {
-      id: '/pengaduan-layanan-publik'
-      path: '/pengaduan-layanan-publik'
-      fullPath: '/pengaduan-layanan-publik'
-      preLoaderRoute: typeof PengaduanLayananPublikRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/kinerja-divisi': {
-      id: '/kinerja-divisi'
-      path: '/kinerja-divisi'
-      fullPath: '/kinerja-divisi'
-      preLoaderRoute: typeof KinerjaDivisiRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/keuangan-anggaran': {
-      id: '/keuangan-anggaran'
-      path: '/keuangan-anggaran'
-      fullPath: '/keuangan-anggaran'
-      preLoaderRoute: typeof KeuanganAnggaranRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/keamanan': {
-      id: '/keamanan'
-      path: '/keamanan'
-      fullPath: '/keamanan'
-      preLoaderRoute: typeof KeamananRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/jenna-analytic': {
-      id: '/jenna-analytic'
-      path: '/jenna-analytic'
-      fullPath: '/jenna-analytic'
-      preLoaderRoute: typeof JennaAnalyticRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/demografi-pekerjaan': {
-      id: '/demografi-pekerjaan'
-      path: '/demografi-pekerjaan'
-      fullPath: '/demografi-pekerjaan'
-      preLoaderRoute: typeof DemografiPekerjaanRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/bumdes': {
-      id: '/bumdes'
-      path: '/bumdes'
-      fullPath: '/bumdes'
-      preLoaderRoute: typeof BumdesRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/bantuan': {
-      id: '/bantuan'
-      path: '/bantuan'
-      fullPath: '/bantuan'
-      preLoaderRoute: typeof BantuanRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/pengaturan': {
-      id: '/pengaturan'
-      path: '/pengaturan'
-      fullPath: '/pengaturan'
-      preLoaderRoute: typeof PengaturanRouteRouteImport
+    '/dashboard': {
+      id: '/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof DashboardRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/admin': {
@@ -472,6 +429,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProfileIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/dashboard/': {
+      id: '/dashboard/'
+      path: '/'
+      fullPath: '/dashboard/'
+      preLoaderRoute: typeof DashboardIndexRouteImport
+      parentRoute: typeof DashboardRouteRoute
+    }
     '/admin/': {
       id: '/admin/'
       path: '/'
@@ -493,33 +457,68 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProfileEditRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/pengaturan/umum': {
-      id: '/pengaturan/umum'
-      path: '/umum'
-      fullPath: '/pengaturan/umum'
-      preLoaderRoute: typeof PengaturanUmumRouteImport
-      parentRoute: typeof PengaturanRouteRoute
+    '/dashboard/sosial': {
+      id: '/dashboard/sosial'
+      path: '/sosial'
+      fullPath: '/dashboard/sosial'
+      preLoaderRoute: typeof DashboardSosialRouteImport
+      parentRoute: typeof DashboardRouteRoute
     }
-    '/pengaturan/notifikasi': {
-      id: '/pengaturan/notifikasi'
-      path: '/notifikasi'
-      fullPath: '/pengaturan/notifikasi'
-      preLoaderRoute: typeof PengaturanNotifikasiRouteImport
-      parentRoute: typeof PengaturanRouteRoute
+    '/dashboard/pengaduan-layanan-publik': {
+      id: '/dashboard/pengaduan-layanan-publik'
+      path: '/pengaduan-layanan-publik'
+      fullPath: '/dashboard/pengaduan-layanan-publik'
+      preLoaderRoute: typeof DashboardPengaduanLayananPublikRouteImport
+      parentRoute: typeof DashboardRouteRoute
     }
-    '/pengaturan/keamanan': {
-      id: '/pengaturan/keamanan'
+    '/dashboard/kinerja-divisi': {
+      id: '/dashboard/kinerja-divisi'
+      path: '/kinerja-divisi'
+      fullPath: '/dashboard/kinerja-divisi'
+      preLoaderRoute: typeof DashboardKinerjaDivisiRouteImport
+      parentRoute: typeof DashboardRouteRoute
+    }
+    '/dashboard/keuangan-anggaran': {
+      id: '/dashboard/keuangan-anggaran'
+      path: '/keuangan-anggaran'
+      fullPath: '/dashboard/keuangan-anggaran'
+      preLoaderRoute: typeof DashboardKeuanganAnggaranRouteImport
+      parentRoute: typeof DashboardRouteRoute
+    }
+    '/dashboard/keamanan': {
+      id: '/dashboard/keamanan'
       path: '/keamanan'
-      fullPath: '/pengaturan/keamanan'
-      preLoaderRoute: typeof PengaturanKeamananRouteImport
-      parentRoute: typeof PengaturanRouteRoute
+      fullPath: '/dashboard/keamanan'
+      preLoaderRoute: typeof DashboardKeamananRouteImport
+      parentRoute: typeof DashboardRouteRoute
     }
-    '/pengaturan/akses-dan-tim': {
-      id: '/pengaturan/akses-dan-tim'
-      path: '/akses-dan-tim'
-      fullPath: '/pengaturan/akses-dan-tim'
-      preLoaderRoute: typeof PengaturanAksesDanTimRouteImport
-      parentRoute: typeof PengaturanRouteRoute
+    '/dashboard/jenna-analytic': {
+      id: '/dashboard/jenna-analytic'
+      path: '/jenna-analytic'
+      fullPath: '/dashboard/jenna-analytic'
+      preLoaderRoute: typeof DashboardJennaAnalyticRouteImport
+      parentRoute: typeof DashboardRouteRoute
+    }
+    '/dashboard/demografi-pekerjaan': {
+      id: '/dashboard/demografi-pekerjaan'
+      path: '/demografi-pekerjaan'
+      fullPath: '/dashboard/demografi-pekerjaan'
+      preLoaderRoute: typeof DashboardDemografiPekerjaanRouteImport
+      parentRoute: typeof DashboardRouteRoute
+    }
+    '/dashboard/bumdes': {
+      id: '/dashboard/bumdes'
+      path: '/bumdes'
+      fullPath: '/dashboard/bumdes'
+      preLoaderRoute: typeof DashboardBumdesRouteImport
+      parentRoute: typeof DashboardRouteRoute
+    }
+    '/dashboard/bantuan': {
+      id: '/dashboard/bantuan'
+      path: '/bantuan'
+      fullPath: '/dashboard/bantuan'
+      preLoaderRoute: typeof DashboardBantuanRouteImport
+      parentRoute: typeof DashboardRouteRoute
     }
     '/admin/users': {
       id: '/admin/users'
@@ -542,6 +541,41 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminApikeyRouteImport
       parentRoute: typeof AdminRouteRoute
     }
+    '/dashboard/pengaturan': {
+      id: '/dashboard/pengaturan'
+      path: '/pengaturan'
+      fullPath: '/dashboard/pengaturan'
+      preLoaderRoute: typeof DashboardPengaturanRouteRouteImport
+      parentRoute: typeof DashboardRouteRoute
+    }
+    '/dashboard/pengaturan/umum': {
+      id: '/dashboard/pengaturan/umum'
+      path: '/umum'
+      fullPath: '/dashboard/pengaturan/umum'
+      preLoaderRoute: typeof DashboardPengaturanUmumRouteImport
+      parentRoute: typeof DashboardPengaturanRouteRoute
+    }
+    '/dashboard/pengaturan/notifikasi': {
+      id: '/dashboard/pengaturan/notifikasi'
+      path: '/notifikasi'
+      fullPath: '/dashboard/pengaturan/notifikasi'
+      preLoaderRoute: typeof DashboardPengaturanNotifikasiRouteImport
+      parentRoute: typeof DashboardPengaturanRouteRoute
+    }
+    '/dashboard/pengaturan/keamanan': {
+      id: '/dashboard/pengaturan/keamanan'
+      path: '/keamanan'
+      fullPath: '/dashboard/pengaturan/keamanan'
+      preLoaderRoute: typeof DashboardPengaturanKeamananRouteImport
+      parentRoute: typeof DashboardPengaturanRouteRoute
+    }
+    '/dashboard/pengaturan/akses-dan-tim': {
+      id: '/dashboard/pengaturan/akses-dan-tim'
+      path: '/akses-dan-tim'
+      fullPath: '/dashboard/pengaturan/akses-dan-tim'
+      preLoaderRoute: typeof DashboardPengaturanAksesDanTimRouteImport
+      parentRoute: typeof DashboardPengaturanRouteRoute
+    }
   }
 }
 
@@ -563,39 +597,64 @@ const AdminRouteRouteWithChildren = AdminRouteRoute._addFileChildren(
   AdminRouteRouteChildren,
 )
 
-interface PengaturanRouteRouteChildren {
-  PengaturanAksesDanTimRoute: typeof PengaturanAksesDanTimRoute
-  PengaturanKeamananRoute: typeof PengaturanKeamananRoute
-  PengaturanNotifikasiRoute: typeof PengaturanNotifikasiRoute
-  PengaturanUmumRoute: typeof PengaturanUmumRoute
+interface DashboardPengaturanRouteRouteChildren {
+  DashboardPengaturanAksesDanTimRoute: typeof DashboardPengaturanAksesDanTimRoute
+  DashboardPengaturanKeamananRoute: typeof DashboardPengaturanKeamananRoute
+  DashboardPengaturanNotifikasiRoute: typeof DashboardPengaturanNotifikasiRoute
+  DashboardPengaturanUmumRoute: typeof DashboardPengaturanUmumRoute
 }
 
-const PengaturanRouteRouteChildren: PengaturanRouteRouteChildren = {
-  PengaturanAksesDanTimRoute: PengaturanAksesDanTimRoute,
-  PengaturanKeamananRoute: PengaturanKeamananRoute,
-  PengaturanNotifikasiRoute: PengaturanNotifikasiRoute,
-  PengaturanUmumRoute: PengaturanUmumRoute,
+const DashboardPengaturanRouteRouteChildren: DashboardPengaturanRouteRouteChildren =
+  {
+    DashboardPengaturanAksesDanTimRoute: DashboardPengaturanAksesDanTimRoute,
+    DashboardPengaturanKeamananRoute: DashboardPengaturanKeamananRoute,
+    DashboardPengaturanNotifikasiRoute: DashboardPengaturanNotifikasiRoute,
+    DashboardPengaturanUmumRoute: DashboardPengaturanUmumRoute,
+  }
+
+const DashboardPengaturanRouteRouteWithChildren =
+  DashboardPengaturanRouteRoute._addFileChildren(
+    DashboardPengaturanRouteRouteChildren,
+  )
+
+interface DashboardRouteRouteChildren {
+  DashboardPengaturanRouteRoute: typeof DashboardPengaturanRouteRouteWithChildren
+  DashboardBantuanRoute: typeof DashboardBantuanRoute
+  DashboardBumdesRoute: typeof DashboardBumdesRoute
+  DashboardDemografiPekerjaanRoute: typeof DashboardDemografiPekerjaanRoute
+  DashboardJennaAnalyticRoute: typeof DashboardJennaAnalyticRoute
+  DashboardKeamananRoute: typeof DashboardKeamananRoute
+  DashboardKeuanganAnggaranRoute: typeof DashboardKeuanganAnggaranRoute
+  DashboardKinerjaDivisiRoute: typeof DashboardKinerjaDivisiRoute
+  DashboardPengaduanLayananPublikRoute: typeof DashboardPengaduanLayananPublikRoute
+  DashboardSosialRoute: typeof DashboardSosialRoute
+  DashboardIndexRoute: typeof DashboardIndexRoute
 }
 
-const PengaturanRouteRouteWithChildren = PengaturanRouteRoute._addFileChildren(
-  PengaturanRouteRouteChildren,
+const DashboardRouteRouteChildren: DashboardRouteRouteChildren = {
+  DashboardPengaturanRouteRoute: DashboardPengaturanRouteRouteWithChildren,
+  DashboardBantuanRoute: DashboardBantuanRoute,
+  DashboardBumdesRoute: DashboardBumdesRoute,
+  DashboardDemografiPekerjaanRoute: DashboardDemografiPekerjaanRoute,
+  DashboardJennaAnalyticRoute: DashboardJennaAnalyticRoute,
+  DashboardKeamananRoute: DashboardKeamananRoute,
+  DashboardKeuanganAnggaranRoute: DashboardKeuanganAnggaranRoute,
+  DashboardKinerjaDivisiRoute: DashboardKinerjaDivisiRoute,
+  DashboardPengaduanLayananPublikRoute: DashboardPengaduanLayananPublikRoute,
+  DashboardSosialRoute: DashboardSosialRoute,
+  DashboardIndexRoute: DashboardIndexRoute,
+}
+
+const DashboardRouteRouteWithChildren = DashboardRouteRoute._addFileChildren(
+  DashboardRouteRouteChildren,
 )
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AdminRouteRoute: AdminRouteRouteWithChildren,
-  PengaturanRouteRoute: PengaturanRouteRouteWithChildren,
-  BantuanRoute: BantuanRoute,
-  BumdesRoute: BumdesRoute,
-  DemografiPekerjaanRoute: DemografiPekerjaanRoute,
-  JennaAnalyticRoute: JennaAnalyticRoute,
-  KeamananRoute: KeamananRoute,
-  KeuanganAnggaranRoute: KeuanganAnggaranRoute,
-  KinerjaDivisiRoute: KinerjaDivisiRoute,
-  PengaduanLayananPublikRoute: PengaduanLayananPublikRoute,
+  DashboardRouteRoute: DashboardRouteRouteWithChildren,
   SigninRoute: SigninRoute,
   SignupRoute: SignupRoute,
-  SosialRoute: SosialRoute,
   ProfileEditRoute: ProfileEditRoute,
   UsersIdRoute: UsersIdRoute,
   ProfileIndexRoute: ProfileIndexRoute,

src/routes/__root.tsx

@@ -7,20 +7,8 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createRootRoute({
 	component: RootComponent,
-	beforeLoad: async ({ location }) => {
-		// Only apply auth middleware for routes that need it
-		// Public routes: /, /signin, /signup
-		const isPublicRoute =
-			location.pathname === "/" ||
-			location.pathname === "/signin" ||
-			location.pathname === "/signup";
-
-		if (isPublicRoute) {
-			return;
-		}
-
-		// Apply protected route middleware for all other routes
-		const context = await protectedRouteMiddleware({ location });
+	beforeLoad: protectedRouteMiddleware,
+	onEnter({ context }) {
 		authStore.user = context?.user as any;
 		authStore.session = context?.session as any;
 	},
@@ -28,4 +16,4 @@ export const Route = createRootRoute({
 
 function RootComponent() {
 	return <Outlet />;
-}
+}

src/routes/bantuan.tsx

@@ -1,51 +0,0 @@
-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 HelpPage from "@/components/help-page";
-import { Sidebar } from "@/components/sidebar";
-
-export const Route = createFileRoute("/bantuan")({
-	component: BantuanPage,
-});
-
-function BantuanPage() {
-	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}>
-				<HelpPage />
-			</AppShell.Main>
-		</AppShell>
-	);
-}

src/routes/bumdes.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/bumdes")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/bumdes"!</div>;
-}

src/routes/dashboard/bantuan.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import HelpPage from "@/components/help-page";
+
+export const Route = createFileRoute("/dashboard/bantuan")({
+	component: HelpPage,
+});

src/routes/dashboard/bumdes.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import BumdesPage from "@/components/bumdes-page";
+
+export const Route = createFileRoute("/dashboard/bumdes")({
+	component: BumdesPage,
+});

src/routes/dashboard/demografi-pekerjaan.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import DemografiPekerjaan from "../../components/demografi-pekerjaan";
+
+export const Route = createFileRoute("/dashboard/demografi-pekerjaan")({
+	component: DemografiPekerjaan,
+});

src/routes/dashboard/index.ts

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { DashboardContent } from "@/components/dashboard-content";
+export const Route = createFileRoute("/dashboard/")({
+	component: DashboardContent,
+});

src/routes/dashboard/jenna-analytic.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import JennaAnalytic from "@/components/jenna-analytic";
+
+export const Route = createFileRoute("/dashboard/jenna-analytic")({
+	component: JennaAnalytic,
+});

src/routes/dashboard/keamanan.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import KeamananPage from "@/components/keamanan-page";
+
+export const Route = createFileRoute("/dashboard/keamanan")({
+	component: KeamananPage,
+});

src/routes/dashboard/keuangan-anggaran.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import KeuanganAnggaran from "@/components/keuangan-anggaran";
+
+export const Route = createFileRoute("/dashboard/keuangan-anggaran")({
+	component: KeuanganAnggaran,
+});

src/routes/dashboard/kinerja-divisi.ts

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+import KinerjaDivisi from "@/components/kinerja-divisi";
+export const Route = createFileRoute("/dashboard/kinerja-divisi")({
+	component: KinerjaDivisi,
+});

src/routes/dashboard/pengaduan-layanan-publik.ts

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+import PengaduanLayananPublik from "@/components/pengaduan-layanan-publik";
+export const Route = createFileRoute("/dashboard/pengaduan-layanan-publik")({
+	component: PengaduanLayananPublik,
+});

src/routes/dashboard/pengaturan/akses-dan-tim.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import AksesDanTimSettings from "@/components/pengaturan/akses-dan-tim";
+
+export const Route = createFileRoute("/dashboard/pengaturan/akses-dan-tim")({
+	component: AksesDanTimSettings,
+});

src/routes/dashboard/pengaturan/keamanan.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import KeamananSettings from "@/components/pengaturan/keamanan";
+
+export const Route = createFileRoute("/dashboard/pengaturan/keamanan")({
+	component: KeamananSettings,
+});

src/routes/dashboard/pengaturan/notifikasi.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import NotifikasiSettings from "@/components/pengaturan/notifikasi";
+
+export const Route = createFileRoute("/dashboard/pengaturan/notifikasi")({
+	component: NotifikasiSettings,
+});

src/routes/dashboard/pengaturan/route.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/dashboard/pengaturan")({
+	component: () => (
+		<div className="p-2">
+			<Outlet />
+		</div>
+	),
+});

src/routes/dashboard/pengaturan/umum.ts

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 import UmumSettings from "@/components/pengaturan/umum";
 
-export const Route = createFileRoute("/pengaturan/umum")({
+export const Route = createFileRoute("/dashboard/pengaturan/umum")({
 	component: UmumSettings,
 });

src/routes/dashboard/route.tsx

@@ -3,6 +3,7 @@ import {
 	Burger,
 	Group,
 	useMantineColorScheme,
+	useMantineTheme,
 } from "@mantine/core";
 import { useDisclosure, useMediaQuery } from "@mantine/hooks";
 import { createFileRoute, Outlet, useRouterState } from "@tanstack/react-router";
@@ -10,27 +11,28 @@ import { useEffect } from "react";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
 
-export const Route = createFileRoute("/pengaturan")({
-	component: PengaturanLayout,
+export const Route = createFileRoute("/dashboard")({
+	component: RouteComponent,
 });
 
-function PengaturanLayout() {
+function RouteComponent() {
 	const [opened, { toggle, close }] = useDisclosure();
 	const { colorScheme } = useMantineColorScheme();
+	const theme = useMantineTheme();
+	const routerState = useRouterState();
 
 	const isMobile = useMediaQuery("(max-width: 48em)");
-	const routerState = useRouterState();
 
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
 	const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
 
-	// Auto close navbar on route change (mobile only)
+	// ✅ AUTO CLOSE NAVBAR ON ROUTE CHANGE (MOBILE ONLY)
 	useEffect(() => {
 		if (isMobile && opened) {
 			close();
 		}
-	}, [routerState.location.pathname, isMobile, opened, close]);
+	}, [routerState.location.pathname]);
 
 	return (
 		<AppShell
@@ -43,13 +45,19 @@ function PengaturanLayout() {
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
-				<Group h="100%" px="lg" align="center" wrap="nowrap">
+				<Group
+					h="100%"
+					px="lg"
+					align="center"
+					wrap="nowrap"
+				>
 					<Burger
 						opened={opened}
 						onClick={toggle}
 						hiddenFrom="sm"
 						size="sm"
 					/>
+
 					<Header />
 				</Group>
 			</AppShell.Header>
@@ -65,9 +73,7 @@ function PengaturanLayout() {
 			</AppShell.Navbar>
 
 			<AppShell.Main bg={mainBgColor}>
-				<div className="p-2">
-					<Outlet />
-				</div>
+				<Outlet />
 			</AppShell.Main>
 		</AppShell>
 	);

src/routes/dashboard/sosial.ts

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import SocialPage from "@/components/sosial-page";
+
+export const Route = createFileRoute("/dashboard/sosial")({
+	component: SocialPage,
+});

src/routes/demografi-pekerjaan.tsx

@@ -1,51 +0,0 @@
-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 { Sidebar } from "@/components/sidebar";
-import DemografiPekerjaan from "../components/demografi-pekerjaan";
-
-export const Route = createFileRoute("/demografi-pekerjaan")({
-	component: DemografiPekerjaanPage,
-});
-
-function DemografiPekerjaanPage() {
-	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}>
-				<DemografiPekerjaan />
-			</AppShell.Main>
-		</AppShell>
-	);
-}

src/routes/index.tsx

@@ -1,51 +1,788 @@
-import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { createFileRoute } from "@tanstack/react-router";
-import { DashboardContent } from "@/components/dashboard-content";
-import { Header } from "@/components/header";
-import { Sidebar } from "@/components/sidebar";
+import {
+	ActionIcon,
+	Avatar,
+	Box,
+	Button,
+	Card,
+	Container,
+	Grid,
+	Group,
+	Image,
+	Paper,
+	rem,
+	SimpleGrid,
+	Stack,
+	Text,
+	ThemeIcon,
+	Title,
+	Transition,
+	useMantineColorScheme,
+} from "@mantine/core";
+import {
+	IconApi,
+	IconBolt,
+	IconBrandGithub,
+	IconBrandLinkedin,
+	IconBrandTwitter,
+	IconChevronRight,
+	IconLock,
+	IconMoon,
+	IconRocket,
+	IconShield,
+	IconStack2,
+	IconSun,
+} from "@tabler/icons-react";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
 
 export const Route = createFileRoute("/")({
-	component: DashboardPage,
+	component: HomePage,
 });
 
-function DashboardPage() {
-	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";
+// Navigation items
+const NAV_ITEMS = [
+	{ label: "Home", link: "/" },
+	{ label: "Features", link: "#features" },
+	{ label: "Testimonials", link: "#testimonials" },
+	{ label: "Pricing", link: "/pricing" },
+	{ label: "Contact", link: "/contact" },
+];
+
+// Features data
+const FEATURES = [
+	{
+		icon: IconBolt,
+		title: "Lightning Fast",
+		description: "Built on Bun runtime for exceptional performance and speed.",
+	},
+	{
+		icon: IconShield,
+		title: "Secure by Design",
+		description:
+			"Enterprise-grade authentication with Better Auth integration.",
+	},
+	{
+		icon: IconApi,
+		title: "RESTful API",
+		description:
+			"Full-featured API with Elysia.js for seamless backend operations.",
+	},
+	{
+		icon: IconStack2,
+		title: "Modern Stack",
+		description: "React 19, TanStack Router, and Mantine UI for the best DX.",
+	},
+	{
+		icon: IconLock,
+		title: "API Key Auth",
+		description: "Secure API key management for external integrations.",
+	},
+	{
+		icon: IconRocket,
+		title: "Production Ready",
+		description: "Type-safe, tested, and optimized for production deployment.",
+	},
+];
+
+// Testimonials data
+const TESTIMONIALS = [
+	{
+		id: "testimonial-1",
+		name: "Alex Johnson",
+		role: "Lead Developer",
+		content:
+			"This template saved us weeks of setup time. The architecture is clean and well-thought-out.",
+		avatar:
+			"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80",
+	},
+	{
+		id: "testimonial-2",
+		name: "Sarah Williams",
+		role: "CTO",
+		content:
+			"The performance improvements we saw after switching to this stack were remarkable. Highly recommended!",
+		avatar:
+			"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80",
+	},
+	{
+		id: "testimonial-3",
+		name: "Michael Chen",
+		role: "Product Manager",
+		content:
+			"The developer experience is top-notch. Everything is well-documented and easy to extend.",
+		avatar:
+			"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80",
+	},
+];
+
+function NavigationBar() {
+	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+	const [scrolled, setScrolled] = useState(false);
+
+	useEffect(() => {
+		const handleScroll = () => {
+			setScrolled(window.scrollY > 20);
+		};
+
+		window.addEventListener("scroll", handleScroll);
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, []);
 
 	return (
-		<AppShell
-			header={{ height: 60 }}
-			navbar={{
-				width: 300,
-				breakpoint: "sm",
-				collapsed: { mobile: !opened },
+		<Box
+			h={70}
+			px="md"
+			style={{
+				borderBottom: "1px solid var(--mantine-color-gray-2)",
+				transition: "all 0.3s ease",
+				boxShadow: scrolled ? "0 2px 10px rgba(0,0,0,0.1)" : "none",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
 			}}
-			padding="md"
 		>
-			<AppShell.Header bg={headerBgColor}>
-				<Group h="100%" px="md">
-					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-					<Header />
+			<Group h="100%" justify="space-between">
+				<Group>
+					<Link to="/" style={{ textDecoration: "none" }}>
+						<Title order={3} c="blue">
+							BunStack
+						</Title>
+					</Link>
+					<Group ml={50} visibleFrom="sm" gap="lg">
+						{NAV_ITEMS.map((item) => {
+							const isActive = window.location.pathname === item.link;
+							return (
+								<Box
+									key={item.label}
+									component={Link}
+									to={item.link}
+									style={{
+										textDecoration: "none",
+										fontSize: rem(16),
+										padding: `${rem(8)} ${rem(12)}`,
+										borderRadius: rem(6),
+										transition: "all 0.2s ease",
+										color: isActive
+											? "var(--mantine-color-blue-6)"
+											: "var(--mantine-color-dimmed)",
+										fontWeight: 500,
+										cursor: "pointer",
+										display: "block",
+									}}
+									className="nav-item"
+								>
+									{item.label}
+								</Box>
+							);
+						})}
+					</Group>
 				</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}>
-				<DashboardContent />
-			</AppShell.Main>
-		</AppShell>
+				<Group>
+					<ActionIcon
+						variant="default"
+						onClick={() => toggleColorScheme()}
+						size="lg"
+					>
+						{colorScheme === "dark" ? (
+							<IconSun size={18} />
+						) : (
+							<IconMoon size={18} />
+						)}
+					</ActionIcon>
+					<Button component={Link} to="/signin" variant="light" size="sm">
+						Sign In
+					</Button>
+					<Button component={Link} to="/signup" size="sm">
+						Get Started
+					</Button>
+				</Group>
+			</Group>
+		</Box>
 	);
-}
+}
+
+function HeroSection() {
+	const [loaded, setLoaded] = useState(false);
+	const [imageLoaded, setImageLoaded] = useState(false);
+
+	useEffect(() => {
+		setLoaded(true);
+	}, []);
+
+	// Simulate delay for image transition
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setImageLoaded(true);
+		}, 200);
+		return () => clearTimeout(timer);
+	}, []);
+
+	return (
+		<Box
+			pt={rem(140)} // Adjusted padding for simpler header
+			pb={rem(60)}
+		>
+			<Container size="lg">
+				<Grid gutter={{ base: rem(40), md: rem(80) }} align="center">
+					<Grid.Col span={{ base: 12, md: 6 }}>
+						<Transition
+							mounted={loaded}
+							transition="slide-up"
+							duration={600}
+							timingFunction="ease"
+						>
+							{(styles) => (
+								<Stack gap="xl" style={styles}>
+									<Title
+										order={1}
+										style={{
+											fontSize: rem(48),
+											fontWeight: 900,
+											lineHeight: 1.2,
+										}}
+									>
+										Build Faster with{" "}
+										<Text span c="blue" inherit>
+											Bun Stack
+										</Text>
+									</Title>
+									<Text size="xl" c="dimmed">
+										A modern, full-stack React template powered by Bun,
+										Elysia.js, and TanStack Router. Ship your ideas faster than
+										ever.
+									</Text>
+									<Group gap="md">
+										<Button
+											component={Link}
+											to="/admin"
+											size="lg"
+											variant="filled"
+											rightSection={<IconRocket size="1.25rem" />}
+										>
+											Get Started
+										</Button>
+										<Button
+											component={Link}
+											to="/docs"
+											size="lg"
+											variant="outline"
+										>
+											Learn More
+										</Button>
+									</Group>
+								</Stack>
+							)}
+						</Transition>
+					</Grid.Col>
+					<Grid.Col span={{ base: 12, md: 6 }}>
+						<Transition
+							mounted={imageLoaded}
+							transition="slide-left"
+							duration={800}
+							timingFunction="ease"
+						>
+							{(styles) => (
+								<Paper shadow="xl" radius="lg" p="md" withBorder style={styles}>
+									<Image
+										src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
+										alt="Code editor showing Bun Stack code"
+										radius="md"
+									/>
+								</Paper>
+							)}
+						</Transition>
+					</Grid.Col>
+				</Grid>
+			</Container>
+		</Box>
+	);
+}
+
+function AnimatedFeatureCard({
+	feature,
+	index,
+	isVisible,
+}: {
+	feature: (typeof FEATURES)[number];
+	index: number;
+	isVisible: boolean;
+}) {
+	const [isDelayedVisible, setIsDelayedVisible] = useState(isVisible);
+
+	useEffect(() => {
+		if (isVisible) {
+			const timer = setTimeout(() => {
+				setIsDelayedVisible(true);
+			}, index * 100);
+			return () => clearTimeout(timer);
+		}
+	}, [isVisible, index]);
+
+	return (
+		<Transition
+			mounted={isDelayedVisible}
+			transition="slide-up"
+			duration={500}
+			timingFunction="ease"
+		>
+			{(styles) => (
+				<Card
+					className="feature-card"
+					padding="lg"
+					radius="md"
+					withBorder
+					shadow="sm"
+					style={styles}
+				>
+					<ThemeIcon variant="light" color="blue" size={60} radius="md">
+						<feature.icon size="1.75rem" />
+					</ThemeIcon>
+					<Stack gap={8} mt="md">
+						<Title order={4}>{feature.title}</Title>
+						<Text size="sm" c="dimmed" lh={1.5}>
+							{feature.description}
+						</Text>
+					</Stack>
+				</Card>
+			)}
+		</Transition>
+	);
+}
+
+function FeaturesSection() {
+	const [visibleFeatures, setVisibleFeatures] = useState(
+		Array(FEATURES.length).fill(false),
+	);
+
+	useEffect(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry, index) => {
+					if (entry.isIntersecting) {
+						setVisibleFeatures((prev) => {
+							const newVisible = [...prev];
+							newVisible[index] = true;
+							return newVisible;
+						});
+					}
+				});
+			},
+			{ threshold: 0.1 },
+		);
+
+		const elements = document.querySelectorAll(".feature-card");
+		elements.forEach((el) => {
+			observer.observe(el);
+		});
+
+		return () => observer.disconnect();
+	}, []);
+
+	return (
+		<Container size="lg" py={rem(80)}>
+			<Stack gap="xl" align="center" mb={rem(50)}>
+				<Transition
+					mounted={true}
+					transition="fade"
+					duration={600}
+					timingFunction="ease"
+				>
+					{(styles) => (
+						<div style={styles}>
+							<Title order={2} ta="center">
+								Everything You Need
+							</Title>
+							<Text c="dimmed" size="lg" ta="center" maw={600}>
+								A complete toolkit for building modern web applications with
+								best practices built-in.
+							</Text>
+						</div>
+					)}
+				</Transition>
+			</Stack>
+			<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
+				{FEATURES.map((feature, index) => (
+					<AnimatedFeatureCard
+						key={feature.title}
+						feature={feature}
+						index={index}
+						isVisible={visibleFeatures[index]}
+					/>
+				))}
+			</SimpleGrid>
+		</Container>
+	);
+}
+
+function AnimatedTestimonialCard({
+	testimonial,
+	index,
+	isVisible,
+}: {
+	testimonial: (typeof TESTIMONIALS)[number];
+	index: number;
+	isVisible: boolean;
+}) {
+	const [isDelayedVisible, setIsDelayedVisible] = useState(isVisible);
+
+	useEffect(() => {
+		if (isVisible) {
+			const timer = setTimeout(() => {
+				setIsDelayedVisible(true);
+			}, index * 150);
+			return () => clearTimeout(timer);
+		}
+	}, [isVisible, index]);
+
+	return (
+		<Transition
+			mounted={isDelayedVisible}
+			transition="slide-up"
+			duration={500}
+			timingFunction="ease"
+		>
+			{(styles) => (
+				<Card
+					padding="lg"
+					radius="md"
+					withBorder
+					shadow="sm"
+					className="testimonial-card"
+					style={styles}
+				>
+					<Text c="dimmed" mb="md">
+						"{testimonial.content}"
+					</Text>
+					<Group>
+						<Avatar src={testimonial.avatar} size="md" radius="xl" />
+						<Stack gap={0}>
+							<Text fw={600}>{testimonial.name}</Text>
+							<Text size="sm" c="dimmed">
+								{testimonial.role}
+							</Text>
+						</Stack>
+					</Group>
+				</Card>
+			)}
+		</Transition>
+	);
+}
+
+function TestimonialsSection() {
+	const [visibleTestimonials, setVisibleTestimonials] = useState(
+		Array(TESTIMONIALS.length).fill(false),
+	);
+
+	useEffect(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry, index) => {
+					if (entry.isIntersecting) {
+						setVisibleTestimonials((prev) => {
+							const newVisible = [...prev];
+							newVisible[index] = true;
+							return newVisible;
+						});
+					}
+				});
+			},
+			{ threshold: 0.1 },
+		);
+
+		const elements = document.querySelectorAll(".testimonial-card");
+		elements.forEach((el) => {
+			observer.observe(el);
+		});
+
+		return () => observer.disconnect();
+	}, []);
+
+	return (
+		<Box py={rem(80)}>
+			<Container size="lg">
+				<Stack gap="xl" align="center" mb={rem(50)}>
+					<Transition
+						mounted={true}
+						transition="fade"
+						duration={600}
+						timingFunction="ease"
+					>
+						{(styles) => (
+							<div style={styles}>
+								<Title order={2} ta="center">
+									Loved by Developers
+								</Title>
+								<Text c="dimmed" size="lg" ta="center" maw={600}>
+									Join thousands of satisfied developers who have accelerated
+									their projects with Bun Stack.
+								</Text>
+							</div>
+						)}
+					</Transition>
+				</Stack>
+
+				<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
+					{TESTIMONIALS.map((testimonial, index) => (
+						<AnimatedTestimonialCard
+							key={testimonial.id}
+							testimonial={testimonial}
+							index={index}
+							isVisible={visibleTestimonials[index]}
+						/>
+					))}
+				</SimpleGrid>
+			</Container>
+		</Box>
+	);
+}
+
+function CtaSection() {
+	const [loaded, setLoaded] = useState(false);
+
+	useEffect(() => {
+		setLoaded(true);
+	}, []);
+
+	return (
+		<Container size="lg" py={rem(80)}>
+			<Transition
+				mounted={loaded}
+				transition="slide-up"
+				duration={600}
+				timingFunction="ease"
+			>
+				{(styles) => (
+					<Paper
+						radius="lg"
+						p={rem(60)}
+						bg="blue"
+						style={{
+							...styles,
+							background:
+								"linear-gradient(135deg, var(--mantine-color-blue-6), var(--mantine-color-indigo-6))",
+						}}
+					>
+						<Stack align="center" gap="xl" ta="center">
+							<Title c="white" order={2}>
+								Ready to get started?
+							</Title>
+							<Text c="white" size="lg" maw={600}>
+								Join thousands of developers who are building faster and more
+								reliable applications with Bun Stack.
+							</Text>
+							<Group>
+								<Button
+									component={Link}
+									to="/signup"
+									size="lg"
+									variant="white"
+									color="dark"
+									rightSection={<IconChevronRight size="1.125rem" />}
+								>
+									Create Account
+								</Button>
+								<Button
+									component={Link}
+									to="/docs"
+									size="lg"
+									variant="outline"
+									color="white"
+								>
+									View Documentation
+								</Button>
+							</Group>
+						</Stack>
+					</Paper>
+				)}
+			</Transition>
+		</Container>
+	);
+}
+
+function Footer() {
+	const [loaded, setLoaded] = useState(false);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setLoaded(true);
+		}, 300);
+		return () => clearTimeout(timer);
+	}, []);
+
+	return (
+		<Transition
+			mounted={loaded}
+			transition="slide-up"
+			duration={600}
+			timingFunction="ease"
+		>
+			{(styles) => (
+				<Box
+					py={rem(40)}
+					style={{
+						...styles,
+						borderTop: "1px solid var(--mantine-color-gray-2)",
+					}}
+				>
+					<Container size="lg">
+						<Grid gutter={{ base: rem(40), md: rem(80) }}>
+							<Grid.Col span={{ base: 12, md: 4 }}>
+								<Stack gap="md">
+									<Title order={3}>BunStack</Title>
+									<Text size="sm" c="dimmed">
+										The ultimate full-stack solution for modern web
+										applications.
+									</Text>
+									<Group>
+										<ActionIcon size="lg" variant="subtle" color="gray">
+											<IconBrandGithub size="1.25rem" />
+										</ActionIcon>
+										<ActionIcon size="lg" variant="subtle" color="gray">
+											<IconBrandTwitter size="1.25rem" />
+										</ActionIcon>
+										<ActionIcon size="lg" variant="subtle" color="gray">
+											<IconBrandLinkedin size="1.25rem" />
+										</ActionIcon>
+									</Group>
+								</Stack>
+							</Grid.Col>
+
+							<Grid.Col span={{ base: 12, md: 2 }}>
+								<Stack gap="xs">
+									<Title order={4}>Product</Title>
+									<Text
+										size="sm"
+										c="dimmed"
+										component={Link}
+										to="/features"
+										td="none"
+									>
+										Features
+									</Text>
+									<Text
+										size="sm"
+										c="dimmed"
+										component={Link}
+										to="/pricing"
+										td="none"
+									>
+										Pricing
+									</Text>
+									<Text
+										size="sm"
+										c="dimmed"
+										component={Link}
+										to="/docs"
+										td="none"
+									>
+										Documentation
+									</Text>
+								</Stack>
+							</Grid.Col>
+
+							<Grid.Col span={{ base: 12, md: 2 }}>
+								<Stack gap="xs">
+									<Title order={4}>Company</Title>
+									<Text
+										size="sm"
+										c="dimmed"
+										component={Link}
+										to="/about"
+										td="none"
+									>
+										About
+									</Text>
+									<Text
+										size="sm"
+										c="dimmed"
+										component={Link}
+										to="/blog"
+										td="none"
+									>
+										Blog
+									</Text>
+									<Text
+										size="sm"
+										c="dimmed"
+										component={Link}
+										to="/careers"
+										td="none"
+									>
+										Careers
+									</Text>
+								</Stack>
+							</Grid.Col>
+
+							<Grid.Col span={{ base: 12, md: 4 }}>
+								<Stack gap="xs">
+									<Title order={4}>Subscribe to our newsletter</Title>
+									<Text size="sm" c="dimmed">
+										Get the latest news and updates
+									</Text>
+									<Group>
+										<input
+											type="email"
+											placeholder="Your email"
+											style={{
+												padding: "8px 12px",
+												borderRadius: "4px",
+												border: "1px solid var(--mantine-color-gray-3)",
+												flex: 1,
+											}}
+										/>
+										<Button>Subscribe</Button>
+									</Group>
+								</Stack>
+							</Grid.Col>
+						</Grid>
+
+						<Box
+							pt={rem(40)}
+							style={{ borderTop: "1px solid var(--mantine-color-gray-2)" }}
+						>
+							<Group justify="space-between" align="center">
+								<Text size="sm" c="dimmed">
+									© 2024 Bun Stack. Built with Bun, Elysia, and React.
+								</Text>
+								<Group gap="lg">
+									<Text
+										component={Link}
+										to="/privacy"
+										size="sm"
+										c="dimmed"
+										style={{ textDecoration: "none" }}
+									>
+										Privacy Policy
+									</Text>
+									<Text
+										component={Link}
+										to="/terms"
+										size="sm"
+										c="dimmed"
+										style={{ textDecoration: "none" }}
+									>
+										Terms of Service
+									</Text>
+								</Group>
+							</Group>
+						</Box>
+					</Container>
+				</Box>
+			)}
+		</Transition>
+	);
+}
+
+function HomePage() {
+	return (
+		<Box>
+			<NavigationBar />
+			<HeroSection />
+			<FeaturesSection />
+			<TestimonialsSection />
+			<CtaSection />
+			<Footer />
+		</Box>
+	);
+}

src/routes/jenna-analytic.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/jenna-analytic")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/jenna-analytic"!</div>;
-}

src/routes/keamanan.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/keamanan")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/keamanan"!</div>;
-}

src/routes/keuangan-anggaran.tsx

@@ -1,51 +0,0 @@
-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 KeuanganAnggaran from "@/components/keuangan-anggaran";
-import { Sidebar } from "@/components/sidebar";
-
-export const Route = createFileRoute("/keuangan-anggaran")({
-	component: KeuanganAnggaranPage,
-});
-
-function KeuanganAnggaranPage() {
-	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}>
-				<KeuanganAnggaran />
-			</AppShell.Main>
-		</AppShell>
-	);
-}

src/routes/kinerja-divisi.tsx

@@ -1,51 +0,0 @@
-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 KinerjaDivisi from "@/components/kinerja-divisi";
-import { Sidebar } from "@/components/sidebar";
-
-export const Route = createFileRoute("/kinerja-divisi")({
-	component: KinerjaDivisiPage,
-});
-
-function KinerjaDivisiPage() {
-	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}>
-				<KinerjaDivisi />
-			</AppShell.Main>
-		</AppShell>
-	);
-}

src/routes/pengaduan-layanan-publik.tsx

@@ -1,51 +0,0 @@
-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 PengaduanLayananPublik from "@/components/pengaduan-layanan-publik";
-import { Sidebar } from "@/components/sidebar";
-
-export const Route = createFileRoute("/pengaduan-layanan-publik")({
-	component: PengaduanLayananPublikPage,
-});
-
-function PengaduanLayananPublikPage() {
-	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}>
-				<PengaduanLayananPublik />
-			</AppShell.Main>
-		</AppShell>
-	);
-}

src/routes/pengaturan/akses-dan-tim.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/pengaturan/akses-dan-tim")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/pengaturan/akses-dan-tim"!</div>;
-}

src/routes/pengaturan/keamanan.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/pengaturan/keamanan")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/pengaturan/keamanan"!</div>;
-}

src/routes/pengaturan/notifikasi.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/pengaturan/notifikasi")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/pengaturan/notifikasi"!</div>;
-}

src/routes/sosial.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/sosial")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/sosial"!</div>;
-}

src/utils/auth.ts

@@ -21,7 +21,6 @@ export const auth = betterAuth({
 			clientId: process.env.GITHUB_CLIENT_ID || "CLIENT_ID_MISSING",
 			clientSecret: process.env.GITHUB_CLIENT_SECRET || "CLIENT_SECRET_MISSING",
 			enabled: true,
-			redirectURI: `${baseUrl}/api/auth/callback/github`,
 		},
 	},
 	user: {

src/vite.ts

@@ -8,7 +8,6 @@ import { createServer as createViteServer } from "vite";
 export async function createVite() {
 	return createViteServer({
 		root: process.cwd(),
-		publicDir: "public",
 		resolve: {
 			alias: {
 				"@": path.resolve(process.cwd(), "./src"),

tailwind.config.js

@@ -1,15 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: [
-		"./src/index.html",
-		"./public/**/*.html",
-		"./src/**/*.{js,ts,jsx,tsx}",
-	],
+	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 	theme: {
 		extend: {
 			colors: {
 				"darmasaba-navy": {
-					DEFAULT: "#1E3A5F",
+					DEFAULT: "#1E3A5F", // Primary navy color
 					50: "#E1E4F2",
 					100: "#B9C2DD",
 					200: "#91A0C9",
@@ -22,7 +18,7 @@ module.exports = {
 					900: "#071833",
 				},
 				"darmasaba-blue": {
-					DEFAULT: "#3B82F6",
+					DEFAULT: "#3B82F6", // Primary blue color
 					50: "#E3F0FF",
 					100: "#B6D9FF",
 					200: "#89C2FF",