Refactor New Ui Sosial, Keamanan, & Bantuan

- Create ActivityCard component for program kegiatan cards
- Create DivisionList component for divisi teraktif with arrow icons
- Create DocumentChart component for bar chart (jumlah dokumen)
- Create ProgressChart component for pie chart (progres kegiatan)
- Create DiscussionPanel component for diskusi internal
- Create EventCard component for agenda hari ini
- Create ArchiveCard component for arsip digital perangkat desa
- Refactor main KinerjaDivisi component to use new modular components
- Implement responsive 3-column grid layout
- Add proper dark mode support with specified colors
- Add hover effects and smooth animations

New components structure:
  src/components/kinerja-divisi/
    - activity-card.tsx
    - archive-card.tsx
    - discussion-panel.tsx
    - division-list.tsx
    - document-chart.tsx
    - event-card.tsx
    - progress-chart.tsx
    - index.ts (exports)

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

.env.example

@@ -0,0 +1,19 @@
+# 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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,26 @@
+#!/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

@@ -0,0 +1,93 @@
+#!/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,6 +16,7 @@ _.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
@@ -33,6 +34,12 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 # Finder (MacOS) folder config
 .DS_Store
 
+# Dashboard-MD
+Dashboard-MD
+
+# md
+*.md
+
 # Playwright artifacts
 test-results/
 playwright-report/

Dockerfile

@@ -0,0 +1,62 @@
+# 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"]

Pengaduan-New.md

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

QWEN.md

@@ -51,11 +51,13 @@ bun install
 ```bash
 cp .env.example .env
 # Fill in your DATABASE_URL and BETTER_AUTH_SECRET
+# Optional: Set ADMIN_EMAIL and ADMIN_PASSWORD for admin user
 ```
 
 ### Database Initialization
 ```bash
 bun x prisma migrate dev
+bun run seed
 ```
 
 ### Start Development
@@ -109,4 +111,12 @@ bun run dev
 - `test:e2e`: Runs end-to-end tests
 - `build`: Builds the application for production
 - `start`: Starts the production server
-- `seed`: Seeds the database with initial data
+- `seed`: Seeds the database with admin and demo users
+
+## Default Users (after running `bun run seed`)
+
+- **Admin**: `ADMIN_EMAIL` (from env) / `ADMIN_PASSWORD` (default: `admin123`)
+- **Demo Users**: 
+  - `demo1@example.com` / `demo123` (role: user)
+  - `demo2@example.com` / `demo123` (role: user)
+  - `moderator@example.com` / `demo123` (role: moderator)

bun.lock

@@ -47,6 +47,7 @@
         "@tabler/icons-react": "^3.36.1",
         "@tailwindcss/vite": "^4.1.18",
         "@tanstack/react-router": "^1.158.1",
+        "bcryptjs": "^3.0.3",
         "better-auth": "^1.4.18",
         "class-variance-authority": "^0.7.1",
         "cmdk": "^1.0.1",
@@ -80,6 +81,7 @@
         "@tanstack/react-router-devtools": "^1.158.1",
         "@tanstack/router-cli": "1.158.1",
         "@tanstack/router-vite-plugin": "^1.158.1",
+        "@types/bcryptjs": "^3.0.0",
         "@types/bun": "latest",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -628,6 +630,8 @@
 
     "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
 
+    "@types/bcryptjs": ["@types/bcryptjs@3.0.0", "", { "dependencies": { "bcryptjs": "*" } }, "sha512-WRZOuCuaz8UcZZE4R5HXTco2goQSI2XxjGY3hbM/xDvwmqFWd4ivooImsMx65OKM6CtNKbnZ5YL+YwAwK7c1dg=="],
+
     "@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="],
 
     "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],
@@ -776,6 +780,8 @@
 
     "baseline-browser-mapping": ["baseline-browser-mapping@2.9.19", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg=="],
 
+    "bcryptjs": ["bcryptjs@3.0.3", "", { "bin": { "bcrypt": "bin/bcrypt" } }, "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g=="],
+
     "better-auth": ["better-auth@1.4.18", "", { "dependencies": { "@better-auth/core": "1.4.18", "@better-auth/telemetry": "1.4.18", "@better-auth/utils": "0.3.0", "@better-fetch/fetch": "1.1.21", "@noble/ciphers": "^2.0.0", "@noble/hashes": "^2.0.0", "better-call": "1.1.8", "defu": "^6.1.4", "jose": "^6.1.0", "kysely": "^0.28.5", "nanostores": "^1.0.1", "zod": "^4.3.5" }, "peerDependencies": { "@lynx-js/react": "*", "@prisma/client": "^5.0.0 || ^6.0.0 || ^7.0.0", "@sveltejs/kit": "^2.0.0", "@tanstack/react-start": "^1.0.0", "@tanstack/solid-start": "^1.0.0", "better-sqlite3": "^12.0.0", "drizzle-kit": ">=0.31.4", "drizzle-orm": ">=0.41.0", "mongodb": "^6.0.0 || ^7.0.0", "mysql2": "^3.0.0", "next": "^14.0.0 || ^15.0.0 || ^16.0.0", "pg": "^8.0.0", "prisma": "^5.0.0 || ^6.0.0 || ^7.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0", "solid-js": "^1.0.0", "svelte": "^4.0.0 || ^5.0.0", "vitest": "^2.0.0 || ^3.0.0 || ^4.0.0", "vue": "^3.0.0" }, "optionalPeers": ["@lynx-js/react", "@prisma/client", "@sveltejs/kit", "@tanstack/react-start", "@tanstack/solid-start", "better-sqlite3", "drizzle-kit", "drizzle-orm", "mongodb", "mysql2", "next", "pg", "prisma", "react", "react-dom", "solid-js", "svelte", "vitest", "vue"] }, "sha512-bnyifLWBPcYVltH3RhS7CM62MoelEqC6Q+GnZwfiDWNfepXoQZBjEvn4urcERC7NTKgKq5zNBM8rvPvRBa6xcg=="],
 
     "better-call": ["better-call@1.1.8", "", { "dependencies": { "@better-auth/utils": "^0.3.0", "@better-fetch/fetch": "^1.1.4", "rou3": "^0.7.10", "set-cookie-parser": "^2.7.1" }, "peerDependencies": { "zod": "^4.0.0" }, "optionalPeers": ["zod"] }, "sha512-XMQ2rs6FNXasGNfMjzbyroSwKwYbZ/T3IxruSS6U2MJRsSYh3wYtG3o6H00ZlKZ/C/UPOAD97tqgQJNsxyeTXw=="],

package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"dev": "bun run gen:api && REACT_EDITOR=antigravity bun --hot src/index.ts",
+		"dev": "lsof -ti:3000 | xargs kill -9 2>/dev/null || true; 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_*'",
+		"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",
 		"start": "NODE_ENV=production bun src/index.ts",
 		"seed": "bun prisma/seed.ts"
 	},
@@ -59,6 +59,7 @@
 		"@tabler/icons-react": "^3.36.1",
 		"@tailwindcss/vite": "^4.1.18",
 		"@tanstack/react-router": "^1.158.1",
+		"bcryptjs": "^3.0.3",
 		"better-auth": "^1.4.18",
 		"class-variance-authority": "^0.7.1",
 		"cmdk": "^1.0.1",
@@ -92,6 +93,7 @@
 		"@tanstack/react-router-devtools": "^1.158.1",
 		"@tanstack/router-cli": "1.158.1",
 		"@tanstack/router-vite-plugin": "^1.158.1",
+		"@types/bcryptjs": "^3.0.0",
 		"@types/bun": "latest",
 		"@types/react": "^19",
 		"@types/react-dom": "^19",

prisma/seed.ts

@@ -1,13 +1,16 @@
 import "dotenv/config";
+import { hash } from "bcryptjs";
+import { generateId } from "better-auth";
 import { prisma } from "@/utils/db";
 
 async function seedAdminUser() {
 	// Load environment variables
 	const adminEmail = process.env.ADMIN_EMAIL;
+	const adminPassword = process.env.ADMIN_PASSWORD || "admin123";
 
 	if (!adminEmail) {
 		console.log(
-			"No ADMIN_EMAIL environment variable found. Skipping admin role assignment.",
+			"No ADMIN_EMAIL environment variable found. Skipping admin user creation.",
 		);
 		return;
 	}
@@ -30,9 +33,35 @@ async function seedAdminUser() {
 				console.log(`User with email ${adminEmail} already has admin role.`);
 			}
 		} else {
-			console.log(
-				`No user found with email ${adminEmail}. Skipping admin role assignment.`,
-			);
+			// Create new admin user
+			const hashedPassword = await hash(adminPassword, 12);
+			const userId = generateId();
+
+			await prisma.user.create({
+				data: {
+					id: userId,
+					email: adminEmail,
+					name: "Admin User",
+					role: "admin",
+					emailVerified: true,
+					createdAt: new Date(),
+					updatedAt: new Date(),
+				},
+			});
+
+			await prisma.account.create({
+				data: {
+					id: generateId(),
+					userId,
+					accountId: userId,
+					providerId: "credential",
+					password: hashedPassword,
+					createdAt: new Date(),
+					updatedAt: new Date(),
+				},
+			});
+
+			console.log(`Admin user created with email: ${adminEmail}`);
 		}
 	} catch (error) {
 		console.error("Error seeding admin user:", error);
@@ -40,15 +69,82 @@ async function seedAdminUser() {
 	}
 }
 
+async function seedDemoUsers() {
+	const demoUsers = [
+		{ email: "demo1@example.com", name: "Demo User 1", role: "user" },
+		{ email: "demo2@example.com", name: "Demo User 2", role: "user" },
+		{
+			email: "moderator@example.com",
+			name: "Moderator User",
+			role: "moderator",
+		},
+	];
+
+	for (const userData of demoUsers) {
+		try {
+			const existingUser = await prisma.user.findUnique({
+				where: { email: userData.email },
+			});
+
+			if (!existingUser) {
+				const userId = generateId();
+				const hashedPassword = await hash("demo123", 12);
+
+				await prisma.user.create({
+					data: {
+						id: userId,
+						email: userData.email,
+						name: userData.name,
+						role: userData.role,
+						emailVerified: true,
+						createdAt: new Date(),
+						updatedAt: new Date(),
+					},
+				});
+
+				await prisma.account.create({
+					data: {
+						id: generateId(),
+						userId,
+						accountId: userId,
+						providerId: "credential",
+						password: hashedPassword,
+						createdAt: new Date(),
+						updatedAt: new Date(),
+					},
+				});
+
+				console.log(`Demo user created: ${userData.email}`);
+			} else {
+				console.log(`Demo user already exists: ${userData.email}`);
+			}
+		} catch (error) {
+			console.error(`Error seeding user ${userData.email}:`, error);
+		}
+	}
+}
+
 async function main() {
 	console.log("Seeding database...");
 
 	await seedAdminUser();
+	await seedDemoUsers();
 
 	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 };

scripts/build.ts

@@ -0,0 +1,58 @@
+#!/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

@@ -1,292 +1,38 @@
-import { useState } from "react";
-import { 
-  Card, 
-  Grid, 
-  GridCol, 
-  Group, 
-  Text, 
-  Title, 
-  Button, 
-  Badge, 
-  Table, 
-  Stack,
-  Select,
-  useMantineColorScheme
-} from "@mantine/core";
-import { IconBuildingStore, IconCategory, IconCurrency, IconUsers } from "@tabler/icons-react";
+import { Grid, GridCol, Stack } from "@mantine/core";
+import { HeaderToggle } from "./umkm/header-toggle";
+import { ProdukUnggulan } from "./umkm/produk-unggulan";
+import type { SalesData } from "./umkm/sales-table";
+import { SalesTable } from "./umkm/sales-table";
+import { SummaryCards } from "./umkm/summary-cards";
+import { TopProducts } from "./umkm/top-products";
 
 const BumdesPage = () => {
-  const { colorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
-  
-  const [timeFilter, setTimeFilter] = useState<string>("bulan");
-  
-  // Sample data for KPI cards
-  const kpiData = [
-    {
-      title: "UMKM Aktif",
-      value: 45,
-      icon: <IconUsers size={24} />,
-      color: "darmasaba-blue",
-    },
-    {
-      title: "UMKM Terdaftar",
-      value: 68,
-      icon: <IconBuildingStore size={24} />,
-      color: "darmasaba-success",
-    },
-    {
-      title: "Omzet",
-      value: "Rp 48.000.000",
-      icon: <IconCurrency size={24} />,
-      color: "darmasaba-warning",
-    },
-    {
-      title: "Kategori UMKM",
-      value: 34,
-      icon: <IconCategory size={24} />,
-      color: "darmasaba-danger",
-    },
-  ];
-
-  // Sample data for top products
-  const topProducts = [
-    {
-      rank: 1,
-      name: "Beras Premium Organik",
-      umkmOwner: "Warung Pak Joko",
-      growth: "+12%",
-    },
-    {
-      rank: 2,
-      name: "Keripik Singkong",
-      umkmOwner: "Ibu Sari Snack",
-      growth: "+8%",
-    },
-    {
-      rank: 3,
-      name: "Madu Alami",
-      umkmOwner: "Peternakan Lebah",
-      growth: "+5%",
-    },
-  ];
-
-  // Sample data for product sales
-  const productSales = [
-    {
-      produk: "Beras Premium Organik",
-      penjualanBulanIni: "Rp 8.500.000",
-      bulanLalu: "Rp 8.500.000",
-      trend: 10,
-      volume: "650 Kg",
-      stok: "850 Kg",
-    },
-    {
-      produk: "Keripik Singkong",
-      penjualanBulanIni: "Rp 4.200.000",
-      bulanLalu: "Rp 3.800.000",
-      trend: 10,
-      volume: "320 Kg",
-      stok: "120 Kg",
-    },
-    {
-      produk: "Madu Alami",
-      penjualanBulanIni: "Rp 3.750.000",
-      bulanLalu: "Rp 4.100.000",
-      trend: -8,
-      volume: "150 Liter",
-      stok: "45 Liter",
-    },
-    {
-      produk: "Kecap Tradisional",
-      penjualanBulanIni: "Rp 2.800.000",
-      bulanLalu: "Rp 2.500.000",
-      trend: 12,
-      volume: "280 Botol",
-      stok: "95 Botol",
-    },
-  ];
+	const handleDetailClick = (product: SalesData) => {
+		console.log("Detail clicked for:", product);
+		// TODO: Open modal or navigate to detail page
+	};
 
 	return (
 		<Stack gap="lg">
-      {/* KPI Cards */}
-      <Grid gutter="md">
-        {kpiData.map((kpi, index) => (
-          <GridCol key={index} span={{ base: 12, sm: 6, md: 3 }}>
-            <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-              <Group justify="space-between" align="center">
-                <Stack gap={0}>
-                  <Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-                    {kpi.title}
-                  </Text>
-                  <Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-                    {typeof kpi.value === 'number' ? kpi.value.toLocaleString() : kpi.value}
-                  </Text>
-                </Stack>
-                <Badge 
-                  variant="light" 
-                  color={kpi.color}
-                  p={8}
-                  radius="md"
-                >
-                  {kpi.icon}
-                </Badge>
-              </Group>
-            </Card>
-          </GridCol>
-        ))}
-      </Grid>
+			{/* KPI Summary Cards */}
+			<SummaryCards />
 
-      {/* Update Penjualan Produk Header */}
-      <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-        <Group justify="space-between" align="center" px="md" py="xs">
-          <Title order={3} c={dark ? "dark.0" : "black"}>
-            Update Penjualan Produk
-          </Title>
-          <Group>
-            <Button
-              variant={timeFilter === "minggu" ? "filled" : "light"}
-              onClick={() => setTimeFilter("minggu")}
-              color="darmasaba-blue"
-            >
-              Minggu ini
-            </Button>
-            <Button
-              variant={timeFilter === "bulan" ? "filled" : "light"}
-              onClick={() => setTimeFilter("bulan")}
-              color="darmasaba-blue"
-            >
-              Bulan ini
-            </Button>
-          </Group>
-        </Group>
-      </Card>
+			{/* Header with Time Range Toggle */}
+			<HeaderToggle />
 
+			{/* Main Content - 2 Column Layout */}
 			<Grid gutter="md">
-        {/* Produk Unggulan (Left Column) */}
+				{/* Left Panel - Produk Unggulan */}
 				<GridCol span={{ base: 12, lg: 4 }}>
 					<Stack gap="md">
-            {/* Total Penjualan, Produk Aktif, Total Transaksi */}
-            <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-              <Stack gap="md">
-                <Group justify="space-between">
-                  <Text size="sm" c={dark ? "dark.3" : "dimmed"}>Total Penjualan</Text>
-                  <Text size="lg" fw={700} c={dark ? "dark.0" : "black"}>Rp 28.500.000</Text>
-                </Group>
-                <Group justify="space-between">
-                  <Text size="sm" c={dark ? "dark.3" : "dimmed"}>Produk Aktif</Text>
-                  <Text size="lg" fw={700} c={dark ? "dark.0" : "black"}>124 Produk</Text>
-                </Group>
-                <Group justify="space-between">
-                  <Text size="sm" c={dark ? "dark.3" : "dimmed"}>Total Transaksi</Text>
-                  <Text size="lg" fw={700} c={dark ? "dark.0" : "black"}>1.240 Transaksi</Text>
-                </Group>
-              </Stack>
-            </Card>
-
-            {/* Top 3 Produk Terlaris */}
-            <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-              <Title order={4} mb="md" c={dark ? "dark.0" : "black"}>Top 3 Produk Terlaris</Title>
-              <Stack gap="sm">
-                {topProducts.map((product) => (
-                  <Group key={product.rank} justify="space-between" align="center">
-                    <Group gap="sm">
-                      <Badge 
-                        variant="filled" 
-                        color={product.rank === 1 ? "gold" : product.rank === 2 ? "gray" : "bronze"}
-                        radius="xl"
-                        size="lg"
-                      >
-                        {product.rank}
-                      </Badge>
-                      <Stack gap={0}>
-                        <Text fw={500} c={dark ? "dark.0" : "black"}>{product.name}</Text>
-                        <Text size="sm" c={dark ? "dark.3" : "dimmed"}>{product.umkmOwner}</Text>
-                      </Stack>
-                    </Group>
-                    <Badge 
-                      variant="light" 
-                      color={product.growth.startsWith('+') ? "green" : "red"}
-                    >
-                      {product.growth}
-                    </Badge>
-                  </Group>
-                ))}
-              </Stack>
-            </Card>
+						<ProdukUnggulan />
+						<TopProducts />
 					</Stack>
 				</GridCol>
 
-        {/* Detail Penjualan Produk (Right Column) */}
+				{/* Right Panel - Detail Penjualan Produk */}
 				<GridCol span={{ base: 12, lg: 8 }}>
-          <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-            <Group justify="space-between" mb="md">
-              <Title order={4} c={dark ? "dark.0" : "black"}>Detail Penjualan Produk</Title>
-              <Select
-                placeholder="Filter kategori"
-                data={[
-                  { value: 'semua', label: 'Semua Kategori' },
-                  { value: 'makanan', label: 'Makanan' },
-                  { value: 'minuman', label: 'Minuman' },
-                  { value: 'kerajinan', label: 'Kerajinan' },
-                ]}
-                defaultValue="semua"
-                w={200}
-              />
-            </Group>
-            
-            <Table striped highlightOnHover withColumnBorders>
-              <Table.Thead>
-                <Table.Tr>
-                  <Table.Th><Text c={dark ? "white" : "dimmed"}>Produk</Text></Table.Th>
-                  <Table.Th><Text c={dark ? "white" : "dimmed"}>Penjualan Bulan Ini</Text></Table.Th>
-                  <Table.Th><Text c={dark ? "white" : "dimmed"}>Bulan Lalu</Text></Table.Th>
-                  <Table.Th><Text c={dark ? "white" : "dimmed"}>Trend</Text></Table.Th>
-                  <Table.Th><Text c={dark ? "white" : "dimmed"}>Volume</Text></Table.Th>
-                  <Table.Th><Text c={dark ? "white" : "dimmed"}>Stok</Text></Table.Th>
-                  <Table.Th><Text c={dark ? "white" : "dimmed"}>Aksi</Text></Table.Th>
-                </Table.Tr>
-              </Table.Thead>
-              <Table.Tbody>
-                {productSales.map((product, index) => (
-                  <Table.Tr key={index}>
-                    <Table.Td>
-                      <Text fw={500} c={dark ? "dark.0" : "black"}>{product.produk}</Text>
-                    </Table.Td>
-                    <Table.Td>
-                      <Text fz={"sm"} c={dark ? "dark.0" : "black"}>{product.penjualanBulanIni}</Text>
-                    </Table.Td>
-                    <Table.Td>
-                      <Text fz={"sm"} c={dark ? "white" : "dimmed"}>{product.bulanLalu}</Text>
-                    </Table.Td>
-                    <Table.Td>
-                      <Group gap="xs">
-                        <Text c={product.trend >= 0 ? "green" : "red"}>
-                          {product.trend >= 0 ? '↑' : '↓'} {Math.abs(product.trend)}%
-                        </Text>
-                      </Group>
-                    </Table.Td>
-                    <Table.Td>
-                      <Text fz={"sm"} c={dark ? "dark.0" : "black"}>{product.volume}</Text>
-                    </Table.Td>
-                    <Table.Td>
-                      <Badge 
-                        variant="light" 
-                        color={parseInt(product.stok) > 200 ? "green" : "yellow"}
-                      >
-                        {product.stok}
-                      </Badge>
-                    </Table.Td>
-                    <Table.Td>
-                      <Button variant="subtle" size="compact-sm" color="darmasaba-blue">
-                        Detail
-                      </Button>
-                    </Table.Td>
-                  </Table.Tr>
-                ))}
-              </Table.Tbody>
-            </Table>
-          </Card>
+					<SalesTable onDetailClick={handleDetailClick} />
 				</GridCol>
 			</Grid>
 		</Stack>

src/components/dashboard-card.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from "react";
 // Import Mantine components directly
-import { Group, Text, ThemeIcon, Badge } from "@mantine/core";
+import { Badge, Group, Text, ThemeIcon } from "@mantine/core";
+import type { ReactNode } from "react";
 // Import custom Card and its sub-components
 import { Card } from "./ui/card";
 

src/components/dashboard-content.tsx

@@ -1,408 +1,117 @@
-import {
-	Calendar,
-	CheckCircle,
-	FileText,
-	MessageCircle,
-	Users,
-} from "lucide-react";
-import {
-	Bar,
-	BarChart,
-	CartesianGrid,
-	Cell,
-	Pie,
-	PieChart,
-	ResponsiveContainer,
-	XAxis,
-	YAxis,
-	Tooltip, // Added Tooltip import
-} from "recharts";
+import { Grid, Image, Stack, useMantineColorScheme } from "@mantine/core";
+import { CheckCircle, FileText, MessageCircle, Users } from "lucide-react";
+import { ActivityList } from "./dashboard/activity-list";
+import { ChartAPBDes } from "./dashboard/chart-apbdes";
+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 Mantine components
-
-import {
-	Grid,
-	Stack,
-	Group,
-	Text,
-	Title,
-	ActionIcon,
-	Progress,
-	Box,
-	Badge,
-	ThemeIcon,
-	Card, // Added for icon containers
-	useMantineColorScheme, // Add this import
-} from "@mantine/core";
-
-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 },
-];
-
-const pieChartData = [
-	{ name: "Puas", value: 25 },
-	{ name: "Cukup", value: 25 },
-	{ name: "Kurang", value: 25 },
-	{ name: "Sangat puas", value: 25 },
-];
-
-const COLORS = ["#4E5BA6", "#F4C542", "#8CC63F", "#E57373"];
-
-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 sdgsData = [
+	{
+		title: "Desa Berenergi Bersih dan Terbarukan",
+		score: 99.64,
+		image: "SDGS-7.png",
+	},
+	{
+		title: "Desa Damai Berkeadilan",
+		score: 78.65,
+		image: "SDGS-16.png",
+	},
+	{
+		title: "Desa Sehat dan Sejahtera",
+		score: 77.37,
+		image: "SDGS-3.png",
+	},
+	{
+		title: "Desa Tanpa Kemiskinan",
+		score: 52.62,
+		image: "SDGS-1.png",
+	},
 ];
 
 export function DashboardContent() {
 	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === 'dark';
+	const dark = colorScheme === "dark";
+
 	return (
 		<Stack gap="lg">
-			{/* Stats Cards */}
+			{/* Header Metrics - 4 Stat Cards */}
 			<Grid gutter="md">
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-					<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>
+					<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%" }} />}
+					/>
 				</Grid.Col>
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-					<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>
+					<StatCard
+						title="Pengaduan Aktif"
+						value={28}
+						detail="14 baru, 14 diproses"
+						icon={<MessageCircle style={{ width: "70%", height: "70%" }} />}
+					/>
 				</Grid.Col>
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-					<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>
+					<StatCard
+						title="Layanan Selesai"
+						value={156}
+						detail="bulan ini"
+						trend="+8%"
+						trendValue={8}
+						icon={<CheckCircle style={{ width: "70%", height: "70%" }} />}
+					/>
 				</Grid.Col>
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-					<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>
+					<StatCard
+						title="Kepuasan Warga"
+						value="87.2%"
+						detail="dari 482 responden"
+						icon={<Users style={{ width: "70%", height: "70%" }} />}
+					/>
 				</Grid.Col>
 			</Grid>
+
+			{/* Section 2: Chart & Division Progress */}
 			<Grid gutter="lg">
-				{/* 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 span={{ base: 12, lg: 7 }}>
+					<ChartSurat />
 				</Grid.Col>
-
-				{/* 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 span={{ base: 12, lg: 5 }}>
+					<SatisfactionChart />
 				</Grid.Col>
 			</Grid>
 
-			{/* Bottom Section */}
+			{/* Section 3: APBDes Chart */}
 			<Grid gutter="lg">
-				{/* Divisi Teraktif */}
-				<Grid.Col span={{ base: 12, lg: 6 }}>
-					<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 span={{ base: 12, lg: 7 }}>
+					<DivisionProgress />
 				</Grid.Col>
-
-				{/* Kalender */}
-				<Grid.Col span={{ base: 12, lg: 6 }}>
-					<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 span={{ base: 12, lg: 5 }}>
+					<ActivityList />
+					{/* <SatisfactionChart /> */}
 				</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">
-					<Group align="center" gap="md">
-						<Text size="sm" fw={500} w={60}>
-							Belanja
-						</Text>
-						<Progress value={70} size="lg" radius="xl" color="blue" style={{ flex: 1 }} />
-					</Group>
-					<Group align="center" gap="md">
-						<Text size="sm" fw={500} w={60}>
-							Pendapatan
-						</Text>
-						<Progress value={90} size="lg" radius="xl" color="green" style={{ flex: 1 }} />
-					</Group>
-					<Group align="center" gap="md">
-						<Text size="sm" fw={500} w={60}>
-							Pembangunan
-						</Text>
-						<Progress value={50} size="lg" radius="xl" color="orange" style={{ flex: 1 }} />
-					</Group>
-				</Stack>
-			</Card>
+			<ChartAPBDes />
+
+			{/* Section 6: SDGs Desa Cards */}
+			<Grid gutter="md">
+				{sdgsData.map((sdg, index) => (
+					<Grid.Col key={index} span={{ base: 9, md: 3 }}>
+						<SDGSCard
+							image={<Image src={sdg.image} alt={sdg.title} />}
+							title={sdg.title}
+							score={sdg.score}
+						/>
+					</Grid.Col>
+				))}
+			</Grid>
 		</Stack>
 	);
 }

src/components/dashboard/activity-list.tsx

@@ -0,0 +1,70 @@
+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)",
+			}}
+			h="100%"
+		>
+			<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

@@ -0,0 +1,75 @@
+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)",
+			}}
+			h="100%"
+		>
+			<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

@@ -0,0 +1,111 @@
+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)",
+			}}
+			h="100%"
+		>
+			<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

@@ -0,0 +1,70 @@
+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)",
+			}}
+			h="100%"
+		>
+			<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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,83 @@
+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)",
+			}}
+			h="100%"
+		>
+			<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

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

src/components/dashboard/stat-card.tsx

@@ -0,0 +1,87 @@
+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 = "#1E3A5F",
+}: 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}
+					bg={dark ? "gray" : iconColor}
+				>
+					{icon}
+				</ThemeIcon>
+			</Group>
+		</Card>
+	);
+}

src/components/demografi-pekerjaan.tsx

@@ -1,107 +1,73 @@
-import React from "react";
 import {
-	Card,
-	Title,
-	Text,
-	Group,
-	Stack,
-	Grid,
+	Badge,
 	Box,
-	Table,
+	Card,
+	Grid,
+	GridCol,
+	Group,
+	Progress,
+	Stack,
+	Text,
+	ThemeIcon,
+	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
-import { IconBabyCarriage, IconSkull, IconArrowUp, IconArrowDown } from "@tabler/icons-react";
-import { BarChart, PieChart } from "@mantine/charts";
+import {
+	Baby,
+	BarChart3,
+	Building2,
+	Home,
+	PieChart as PieChartIcon,
+	TrendingDown,
+	Users,
+} from "lucide-react";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	Cell,
+	Pie,
+	PieChart,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";
 
-// Sample Data
+// KPI Data
 const kpiData = [
 	{
 		id: 1,
 		title: "Total Penduduk",
 		value: "5.634",
-		sub: "Aktif terdaftar",
-		icon: (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				strokeWidth={1.5}
-				stroke="currentColor"
-				className="h-6 w-6 text-muted-foreground"
-				role="img"
-				aria-label="Icon penduduk"
-			>
-				<title>Total Penduduk</title>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
-				/>
-			</svg>
-		),
+		subtitle: "Aktif terdaftar",
+		icon: Users,
 	},
 	{
 		id: 2,
 		title: "Kepala Keluarga",
 		value: "1.354",
-		sub: "Total KK",
-		icon: (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				strokeWidth={1.5}
-				stroke="currentColor"
-				className="h-6 w-6 text-muted-foreground"
-				role="img"
-				aria-label="Icon kepala keluarga"
-			>
-				<title>Kepala Keluarga</title>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
-				/>
-			</svg>
-		),
+		subtitle: "Total KK",
+		icon: Home,
 	},
 	{
 		id: 3,
 		title: "Kelahiran",
 		value: "23",
-		sub: "Tahun ini",
-		icon: (
-			<IconBabyCarriage className="h-6 w-6 text-muted-foreground" role="img" aria-label="Icon kelahiran" />
-		),
+		subtitle: "Tahun ini",
+		icon: Baby,
 	},
 	{
 		id: 4,
 		title: "Kemiskinan",
 		value: "324",
-		delta: "-10% dari tahun lalu",
-		deltaType: "positive",
-		icon: (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				strokeWidth={1.5}
-				stroke="currentColor"
-				className="h-6 w-6 text-muted-foreground"
-				role="img"
-				aria-label="Icon kemiskinan"
-			>
-				<title>Kemiskinan</title>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
-				/>
-			</svg>
-		),
+		subtitle: "-10% dari tahun lalu",
+		trend: "positive",
+		icon: TrendingDown,
 	},
 ];
 
+// Age Distribution Data
 const ageDistributionData = [
 	{ ageRange: "17-25", total: 850 },
 	{ ageRange: "26-35", total: 1200 },
@@ -111,6 +77,7 @@ const ageDistributionData = [
 	{ ageRange: "65+", total: 484 },
 ];
 
+// Job Distribution Data
 const jobDistributionData = [
 	{ job: "Sipil", total: 1200 },
 	{ job: "Guru", total: 850 },
@@ -119,196 +86,597 @@ const jobDistributionData = [
 	{ job: "Wiraswasta", total: 984 },
 ];
 
+// Religion Data
 const religionData = [
-	{ religion: "Hindu", total: 4234, color: "red" },
-	{ religion: "Islam", total: 856, color: "blue" },
-	{ religion: "Kristen", total: 412, color: "green" },
-	{ religion: "Buddha", total: 202, color: "yellow" },
+	{ name: "Hindu", value: 4234, color: "#EF4444" },
+	{ name: "Islam", value: 856, color: "#3B82F6" },
+	{ name: "Kristen", value: 412, color: "#22C55E" },
+	{ name: "Buddha", value: 202, color: "#FACC15" },
 ];
 
+// Banjar Data
 const banjarData = [
-	{ banjar: "Banjar Darmasaba", population: 1200, kk: 300, poor: 45 },
-	{ banjar: "Banjar Manesa", population: 950, kk: 240, poor: 32 },
-	{ banjar: "Banjar Cabe", population: 800, kk: 200, poor: 28 },
-	{ banjar: "Banjar Penenjoan", population: 1100, kk: 280, poor: 38 },
-	{ banjar: "Banjar Baler Pasar", population: 984, kk: 250, poor: 42 },
-	{ banjar: "Banjar Bucu", population: 600, kk: 184, poor: 25 },
+	{ banjar: "Darmasaba", population: 1200, kk: 300, poor: 45 },
+	{ banjar: "Manesa", population: 950, kk: 240, poor: 32 },
+	{ banjar: "Cabe", population: 800, kk: 200, poor: 28 },
+	{ banjar: "Penenjoan", population: 1100, kk: 280, poor: 38 },
+	{ banjar: "Baler Pasar", population: 984, kk: 250, poor: 42 },
+	{ banjar: "Bucu", population: 600, kk: 184, poor: 25 },
 ];
 
+// Dynamic Stats Data
 const dynamicStats = [
-	{ title: "Kelahiran", value: "23", icon: <IconBabyCarriage size={16} />, color: "green" },
-	{ title: "Kematian", value: "12", icon: <IconSkull size={16} />, color: "red" },
-	{ title: "Pindah Masuk", value: "45", icon: <IconArrowDown size={16} />, color: "blue" },
-	{ title: "Pindah Keluar", value: "32", icon: <IconArrowUp size={16} />, color: "orange" },
+	{
+		title: "Kelahiran",
+		value: "23",
+		icon: Baby,
+		color: "#22C55E",
+	},
+	{
+		title: "Kematian",
+		value: "12",
+		icon: TrendingDown,
+		color: "#EF4444",
+	},
+	{
+		title: "Pindah Masuk",
+		value: "45",
+		icon: Users,
+		color: "#3B82F6",
+	},
+	{
+		title: "Pindah Keluar",
+		value: "32",
+		icon: Users,
+		color: "#3B82F6",
+	},
+];
+
+// Sektor Unggulan Data
+const sektorUnggulanData = [
+	{ sektor: "Pertanian", value: 65 },
+	{ sektor: "Perdagangan", value: 45 },
+	{ sektor: "Industri", value: 38 },
+	{ sektor: "Jasa", value: 52 },
 ];
 
 const DemografiPekerjaan = () => {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
+
 	return (
-		<Box className="space-y-6">
-			<Stack gap="xl">
-				{/* KPI Cards */}
-				<Grid gutter="lg">
-					{kpiData.map((kpi) => (
-						<Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-								<Group justify="space-between" align="flex-start" mb="xs">
-									<Text size="sm" fw={500} c={dark ? "dark.3" : "dimmed"}>
-										{kpi.title}
+		<Stack gap="lg">
+			{/* TOP SECTION - 4 STAT CARDS */}
+			<Grid gutter="md">
+				{kpiData.map((item) => (
+					<Grid.Col key={item.id} span={{ base: 12, sm: 6, lg: 3 }}>
+						<Card
+							p="md"
+							radius="xl"
+							withBorder
+							bg={dark ? "#1E293B" : "white"}
+							style={{
+								borderColor: dark ? "#334155" : "white",
+								boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+								transition: "transform 0.15s ease, box-shadow 0.15s ease",
+							}}
+							h="100%"
+						>
+							<Group justify="space-between" align="flex-start" w="100%">
+								<Stack gap={2}>
+									<Text size="sm" c="dimmed">
+										{item.title}
 									</Text>
-									{React.cloneElement(kpi.icon, {
-										className: "h-6 w-6",
-										color: dark ? "var(--mantine-color-dark-3)" : "var(--mantine-color-dimmed)",
-									})}
-								</Group>
-								<Title order={3} fw={700} c={dark ? "dark.0" : "black"} mt="xs">
-									{kpi.value}
-								</Title>
-								{kpi.delta && (
+									<Text size="xl" fw={700} c={dark ? "white" : "gray.9"}>
+										{item.value}
+									</Text>
+									<Group gap={4} align="flex-start">
+										{item.trend === "positive" && (
+											<TrendingDown size={14} color="#22C55E" />
+										)}
 										<Text
 											size="xs"
 											c={
-											kpi.deltaType === "positive"
+												item.trend === "positive"
 													? "green"
-												: kpi.deltaType === "negative"
-													? "red"
-													: dark ? "dark.3" : "dimmed"
+													: dark
+														? "gray.4"
+														: "gray.5"
 											}
-										mt={4}
 										>
-										{kpi.delta}
+											{item.subtitle}
 										</Text>
-								)}
-								{kpi.sub && (
-									<Text size="xs" c={dark ? "dark.3" : "dimmed"} mt={2}>
-										{kpi.sub}
-									</Text>
-								)}
-							</Card>
-						</Grid.Col>
-					))}
-				</Grid>
-
-				{/* Charts Section */}
-				<Grid gutter="lg">
-					{/* Grafik Pengelompokan Umur */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-							<Title order={3} fw={500} mb="md">
-								Grafik Pengelompokan Umur
-							</Title>
-							<BarChart
-								h={300}
-								data={ageDistributionData}
-								dataKey="ageRange"
-								series={[{ name: 'total', color: 'darmasaba-navy' }]}
-								withLegend
-							/>
-						</Card>
-					</Grid.Col>
-
-					{/* Demografi Pekerjaan */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-							<Title order={3} fw={500} mb="md">
-								Demografi Pekerjaan
-							</Title>
-							<BarChart
-								h={300}
-								data={jobDistributionData}
-								dataKey="job"
-								series={[{ name: 'total', color: 'darmasaba-navy' }]}
-								withLegend
-							/>
-						</Card>
-					</Grid.Col>
-				</Grid>
-
-				{/* Agama & Data per Banjar */}
-				<Grid gutter="lg">
-					{/* Distribusi Agama */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-							<Title order={3} fw={500} mb="md">
-								Distribusi Agama
-							</Title>
-							<PieChart
-								h={300}
-								data={religionData.map(item => ({
-									name: item.religion,
-									value: item.total,
-									color: item.color
-								}))}
-								withLabels
-								withLabelsLine
-								labelsPosition="outside"
-								labelsType="percent"
-							/>
-						</Card>
-					</Grid.Col>
-
-					{/* Data per Banjar */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-							<Title order={3} fw={500} c={dark ? "dark.0" : "black"} mb="md">
-								Data per Banjar
-							</Title>
-							<Table striped highlightOnHover>
-								<Table.Thead>
-									<Table.Tr>
-										<Table.Th><Text c={dark ? "dark.0" : "black"}>Banjar</Text></Table.Th>
-										<Table.Th><Text c={dark ? "dark.0" : "black"}>Penduduk</Text></Table.Th>
-										<Table.Th><Text c={dark ? "dark.0" : "black"}>KK</Text></Table.Th>
-										<Table.Th><Text c={dark ? "dark.0" : "black"}>Miskin</Text></Table.Th>
-									</Table.Tr>
-								</Table.Thead>
-								<Table.Tbody>
-									{banjarData.map((item, index) => (
-										<Table.Tr key={`${item.banjar}-${index}`}>
-											<Table.Td><Text c={dark ? "dark.0" : "black"}>{item.banjar}</Text></Table.Td>
-											<Table.Td><Text c={dark ? "dark.0" : "black"}>{item.population.toLocaleString()}</Text></Table.Td>
-											<Table.Td><Text c={dark ? "dark.0" : "black"}>{item.kk.toLocaleString()}</Text></Table.Td>
-											<Table.Td>
-												<Text c={dark ? "red.4" : "red"}>{item.poor.toLocaleString()}</Text>
-											</Table.Td>
-										</Table.Tr>
-									))}
-								</Table.Tbody>
-							</Table>
-						</Card>
-					</Grid.Col>
-				</Grid>
-
-				{/* Statistik Dinamika Penduduk */}
-				<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-					<Title order={3} fw={500} c={dark ? "dark.0" : "black"} mb="md">
-						Statistik Dinamika Penduduk
-					</Title>
-					<Grid gutter="md">
-						{dynamicStats.map((stat, index) => (
-							<Grid.Col key={`${stat.title}-${index}`} span={{ base: 12, md: 3 }}>
-								<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-									<Group justify="space-between" align="center">
-										<Box>
-											<Text size="sm" fw={500} c={dark ? "dark.3" : "dimmed"}>
-												{stat.title}
-											</Text>
-											<Title order={4} fw={700} c={stat.color}>
-												{stat.value}
-											</Title>
-										</Box>
-										<Box c={stat.color}>
-											{stat.icon}
-										</Box>
+									</Group>
+								</Stack>
+								<ThemeIcon
+									color="#1E3A5F"
+									variant="filled"
+									size="lg"
+									radius="xl"
+								>
+									<item.icon style={{ width: "60%", height: "60%" }} />
+								</ThemeIcon>
 							</Group>
 						</Card>
 					</Grid.Col>
 				))}
 			</Grid>
+
+			{/* ROW 2 - 3 COLUMNS */}
+			<Grid gutter="lg">
+				{/* LEFT: PENGELOMPOKAN UMUR */}
+				<Grid.Col span={{ base: 12, lg: 4 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<BarChart3 size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Pengelompokan Umur
+							</Title>
+						</Group>
+						<ResponsiveContainer width="100%" height={250}>
+							<BarChart data={ageDistributionData}>
+								<CartesianGrid
+									strokeDasharray="3 3"
+									vertical={false}
+									stroke={dark ? "#334155" : "#e5e7eb"}
+								/>
+								<XAxis
+									dataKey="ageRange"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+								/>
+								<YAxis
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+								/>
+								<Tooltip
+									contentStyle={{
+										backgroundColor: dark ? "#1E293B" : "white",
+										borderColor: dark ? "#334155" : "#e5e7eb",
+										borderRadius: "8px",
+									}}
+									labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
+								/>
+								<Bar
+									dataKey="total"
+									fill="#1E3A5F"
+									radius={[8, 8, 0, 0]}
+									maxBarSize={40}
+								/>
+							</BarChart>
+						</ResponsiveContainer>
 					</Card>
+				</Grid.Col>
+
+				{/* CENTER: DEMOGRAFI PEKERJAAN */}
+				<Grid.Col span={{ base: 12, lg: 4 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<Building2 size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Demografi Pekerjaan
+							</Title>
+						</Group>
+						<ResponsiveContainer width="100%" height={250}>
+							<BarChart data={jobDistributionData} layout="vertical">
+								<CartesianGrid
+									strokeDasharray="3 3"
+									horizontal={false}
+									stroke={dark ? "#334155" : "#e5e7eb"}
+								/>
+								<XAxis
+									type="number"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+								/>
+								<YAxis
+									type="category"
+									dataKey="job"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+									width={90}
+								/>
+								<Tooltip
+									contentStyle={{
+										backgroundColor: dark ? "#1E293B" : "white",
+										borderColor: dark ? "#334155" : "#e5e7eb",
+										borderRadius: "8px",
+									}}
+								/>
+								<Bar
+									dataKey="total"
+									fill="#1E3A5F"
+									radius={[0, 8, 8, 0]}
+									maxBarSize={30}
+								/>
+							</BarChart>
+						</ResponsiveContainer>
+					</Card>
+				</Grid.Col>
+
+				{/* RIGHT: STATISTIK DINAMIKA PENDUDUK */}
+				<Grid.Col span={{ base: 12, lg: 4 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<BarChart3 size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Dinamika Penduduk
+							</Title>
+						</Group>
+						<Grid gutter="sm">
+							{dynamicStats.map((stat, index) => (
+								<Grid.Col key={index} span={6}>
+									<Card
+										p="sm"
+										radius="lg"
+										bg={dark ? "#334155" : "#F1F5F9"}
+										style={{
+											transition: "transform 0.15s ease",
+											cursor: "pointer",
+										}}
+									>
+										<Stack gap={2} align="center">
+											<ThemeIcon
+												color={stat.color}
+												variant="filled"
+												size="md"
+												radius="lg"
+											>
+												<stat.icon size={14} />
+											</ThemeIcon>
+											<Text size="xs" c="dimmed" ta="center">
+												{stat.title}
+											</Text>
+											<Text
+												size="lg"
+												fw={700}
+												c={stat.color}
+												style={{ lineHeight: 1 }}
+											>
+												{stat.value}
+											</Text>
 										</Stack>
+									</Card>
+								</Grid.Col>
+							))}
+						</Grid>
+					</Card>
+				</Grid.Col>
+			</Grid>
+
+			{/* ROW 3 - 3 COLUMNS */}
+			<Grid gutter="lg">
+				{/* LEFT: DISTRIBUSI AGAMA */}
+				<Grid.Col span={{ base: 12, lg: 4 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<PieChartIcon size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Distribusi Agama
+							</Title>
+						</Group>
+						<ResponsiveContainer width="100%" height={250}>
+							<PieChart>
+								<Pie
+									data={religionData}
+									cx="50%"
+									cy="50%"
+									innerRadius={60}
+									outerRadius={90}
+									paddingAngle={2}
+									dataKey="value"
+								>
+									{religionData.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">
+							{religionData.map((item, index) => (
+								<Group key={index} justify="space-between">
+									<Group gap="xs">
+										<Box
+											w={10}
+											h={10}
+											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.toLocaleString()}
+									</Text>
+								</Group>
+							))}
+						</Stack>
+					</Card>
+				</Grid.Col>
+
+				{/* CENTER: DATA PER BANJAR */}
+				<Grid.Col span={{ base: 12, lg: 4 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<Users size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Data per Banjar
+							</Title>
+						</Group>
+						<Box style={{ overflowX: "auto" }}>
+							<table style={{ width: "100%", borderCollapse: "collapse" }}>
+								<thead>
+									<tr>
+										<th
+											style={{
+												textAlign: "left",
+												padding: "8px",
+												fontSize: "12px",
+												fontWeight: 600,
+												color: dark ? "#94A3B8" : "#64748B",
+												borderBottom: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
+											}}
+										>
+											Banjar
+										</th>
+										<th
+											style={{
+												textAlign: "right",
+												padding: "8px",
+												fontSize: "12px",
+												fontWeight: 600,
+												color: dark ? "#94A3B8" : "#64748B",
+												borderBottom: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
+											}}
+										>
+											Penduduk
+										</th>
+										<th
+											style={{
+												textAlign: "right",
+												padding: "8px",
+												fontSize: "12px",
+												fontWeight: 600,
+												color: dark ? "#94A3B8" : "#64748B",
+												borderBottom: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
+											}}
+										>
+											KK
+										</th>
+										<th
+											style={{
+												textAlign: "right",
+												padding: "8px",
+												fontSize: "12px",
+												fontWeight: 600,
+												color: dark ? "#94A3B8" : "#64748B",
+												borderBottom: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
+											}}
+										>
+											Miskin
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									{banjarData.map((item, index) => (
+										<tr
+											key={index}
+											style={{
+												backgroundColor:
+													index % 2 === 0
+														? dark
+															? "#334155"
+															: "#F8FAFC"
+														: "transparent",
+												transition: "background-color 0.15s ease",
+											}}
+										>
+											<td
+												style={{
+													padding: "10px 8px",
+													fontSize: "13px",
+													fontWeight: 500,
+													color: dark ? "#E2E8F0" : "#1E293B",
+												}}
+											>
+												{item.banjar}
+											</td>
+											<td
+												style={{
+													padding: "10px 8px",
+													textAlign: "right",
+													fontSize: "13px",
+													color: dark ? "#E2E8F0" : "#1E293B",
+												}}
+											>
+												{item.population.toLocaleString()}
+											</td>
+											<td
+												style={{
+													padding: "10px 8px",
+													textAlign: "right",
+													fontSize: "13px",
+													color: dark ? "#E2E8F0" : "#1E293B",
+												}}
+											>
+												{item.kk.toLocaleString()}
+											</td>
+											<td
+												style={{
+													padding: "10px 8px",
+													textAlign: "right",
+													fontSize: "13px",
+													color: "#EF4444",
+													fontWeight: 600,
+												}}
+											>
+												{item.poor.toLocaleString()}
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
 						</Box>
+					</Card>
+				</Grid.Col>
+
+				{/* RIGHT: STATISTIK SEKTOR UNGGULAN */}
+				<Grid.Col span={{ base: 12, lg: 4 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<BarChart3 size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Sektor Unggulan
+							</Title>
+						</Group>
+						<ResponsiveContainer width="100%" height={250}>
+							<BarChart data={sektorUnggulanData} layout="vertical">
+								<CartesianGrid
+									strokeDasharray="3 3"
+									horizontal={false}
+									stroke={dark ? "#334155" : "#e5e7eb"}
+								/>
+								<XAxis
+									type="number"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+								/>
+								<YAxis
+									type="category"
+									dataKey="sektor"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+									width={90}
+								/>
+								<Tooltip
+									contentStyle={{
+										backgroundColor: dark ? "#1E293B" : "white",
+										borderColor: dark ? "#334155" : "#e5e7eb",
+										borderRadius: "8px",
+									}}
+								/>
+								<Bar
+									dataKey="value"
+									fill="#1E3A5F"
+									radius={[0, 8, 8, 0]}
+									maxBarSize={40}
+								>
+									{sektorUnggulanData.map((entry, index) => (
+										<Cell key={`cell-${index}`} fill="#1E3A5F" />
+									))}
+								</Bar>
+							</BarChart>
+						</ResponsiveContainer>
+					</Card>
+				</Grid.Col>
+			</Grid>
+		</Stack>
 	);
 };
 

src/components/header.tsx

@@ -1,46 +1,59 @@
-import { useLocation } from "@tanstack/react-router";
-import { Bell, Moon, Sun, User as UserIcon } from "lucide-react"; // Renamed User to UserIcon to avoid conflict with Mantine's User component if it exists
-
 import {
+	ActionIcon,
+	Avatar,
+	Badge,
+	Box,
+	Divider,
 	Group,
 	Text,
 	Title,
-	ActionIcon,
-	Divider,
-	Avatar,
-	Box,
-	Badge,
 	useMantineColorScheme,
 } from "@mantine/core";
+import {
+	IconLayoutSidebarLeftCollapse,
+	IconUserShield,
+} from "@tabler/icons-react";
+import { useLocation, useNavigate } from "@tanstack/react-router";
+import { Bell, Moon, Sun, User as UserIcon } from "lucide-react";
 
-export function Header() {
+interface HeaderProps {
+	onSidebarToggle?: () => void;
+}
+
+export function Header({ onSidebarToggle }: HeaderProps) {
 	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 "Desa Darmasaba";
+				return "Beranda";
 			case "/kinerja-divisi":
 				return "Kinerja Divisi";
-			case "/pengaduan":
+			case "/pengaduan-layanan-publik":
 				return "Pengaduan & Layanan Publik";
-			case "/analytic":
+			case "/jenna-analytic":
 				return "Jenna Analytic";
-			case "/demografi":
+			case "/demografi-pekerjaan":
 				return "Demografi & Kependudukan";
-			case "/keuangan":
+			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";
@@ -50,12 +63,27 @@ export function Header() {
 	return (
 		<Group justify="space-between" w="100%">
 			{/* Title */}
-			<Title order={3} c={"white"}>{getPageTitle()}</Title>
+			<Group gap="md">
+				<ActionIcon
+					onClick={onSidebarToggle}
+					variant="subtle"
+					size="lg"
+					radius="xl"
+					visibleFrom="sm"
+					aria-label="Toggle sidebar"
+				>
+					<IconLayoutSidebarLeftCollapse
+						color="white"
+						style={{ width: "70%", height: "70%" }}
+					/>
+				</ActionIcon>
+				{/* <Title order={3} c={"white"}>
+					{getPageTitle()}
+				</Title> */}
+			</Group>
 
 			{/* Right Section */}
 			<Group gap="md">
-
-
 				{/* User Info */}
 				<Group gap="sm">
 					<Box ta="right">
@@ -101,6 +129,13 @@ export function Header() {
 							10
 						</Badge>
 					</ActionIcon>
+					<ActionIcon variant="subtle" size="lg" radius="xl">
+						<IconUserShield
+							color="white"
+							style={{ width: "70%", height: "70%" }}
+							onClick={() => navigate({ to: "/signin" })}
+						/>
+					</ActionIcon>
 				</Group>
 			</Group>
 		</Group>

src/components/help-page.tsx

@@ -1,81 +1,141 @@
-import { Container, Grid, Title, Text, SimpleGrid, Box, Accordion, Stack, useMantineColorScheme } from '@mantine/core';
-import { HelpCard } from '@/components/ui/help-card';
-import { IconBook, IconVideo, IconHelpCircle, IconMessage, IconFileText, IconHeadphones } from '@tabler/icons-react';
-import { useState } from 'react';
+import {
+	Accordion,
+	Box,
+	Container,
+	Grid,
+	SimpleGrid,
+	Stack,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import {
+	IconBook,
+	IconFileText,
+	IconHeadphones,
+	IconHelpCircle,
+	IconMessage,
+	IconVideo,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { HelpCard } from "@/components/ui/help-card";
 
 const HelpPage = () => {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
 	// Sample data for sections
 	const guideItems = [
-    { title: 'Cara Login', description: 'Langkah-langkah untuk login ke dashboard' },
-    { title: 'Navigasi Dashboard', description: 'Penjelasan tentang tata letak dan navigasi' },
-    { title: 'Fitur Dasar', description: 'Panduan penggunaan fitur-fitur utama' },
-    { title: 'Tips & Trik', description: 'Tips untuk meningkatkan produktivitas' },
+		{
+			title: "Cara Login",
+			description: "Langkah-langkah untuk login ke dashboard",
+		},
+		{
+			title: "Navigasi Dashboard",
+			description: "Penjelasan tentang tata letak dan navigasi",
+		},
+		{
+			title: "Fitur Dasar",
+			description: "Panduan penggunaan fitur-fitur utama",
+		},
+		{
+			title: "Tips & Trik",
+			description: "Tips untuk meningkatkan produktivitas",
+		},
 	];
 
 	const videoItems = [
-    { title: 'Dashboard Overview', duration: '5:23' },
-    { title: 'Analisis Data', duration: '8:45' },
-    { title: 'Membuat Laporan', duration: '6:12' },
-    { title: 'Export Data', duration: '4:30' },
+		{ title: "Dashboard Overview", duration: "5:23" },
+		{ title: "Analisis Data", duration: "8:45" },
+		{ title: "Membuat Laporan", duration: "6:12" },
+		{ title: "Export Data", duration: "4:30" },
 	];
 
 	const faqItems = [
-    { question: 'Bagaimana cara reset password?', answer: 'Anda dapat mereset password melalui halaman login dengan klik "Lupa Password"' },
-    { question: 'Apakah saya bisa mengakses data offline?', answer: 'Saat ini aplikasi hanya dapat diakses secara online' },
-    { question: 'Berapa lama waktu respon support?', answer: 'Tim support kami biasanya merespon dalam waktu kurang dari 24 jam' },
-    { question: 'Bagaimana cara menambahkan pengguna baru?', answer: 'Fitur penambahan pengguna dapat ditemukan di menu Pengaturan > Manajemen Pengguna' },
+		{
+			question: "Bagaimana cara reset password?",
+			answer:
+				'Anda dapat mereset password melalui halaman login dengan klik "Lupa Password"',
+		},
+		{
+			question: "Apakah saya bisa mengakses data offline?",
+			answer: "Saat ini aplikasi hanya dapat diakses secara online",
+		},
+		{
+			question: "Berapa lama waktu respon support?",
+			answer:
+				"Tim support kami biasanya merespon dalam waktu kurang dari 24 jam",
+		},
+		{
+			question: "Bagaimana cara menambahkan pengguna baru?",
+			answer:
+				"Fitur penambahan pengguna dapat ditemukan di menu Pengaturan > Manajemen Pengguna",
+		},
 	];
 
 	const documentationItems = [
-    { title: 'API Reference', description: 'Dokumentasi lengkap untuk integrasi API' },
-    { title: 'Integrasi Sistem', description: 'Cara mengintegrasikan dengan sistem eksternal' },
-    { title: 'Format Data', description: 'Spesifikasi format data yang didukung' },
-    { title: 'Best Practices', description: 'Praktik terbaik dalam penggunaan platform' },
+		{
+			title: "API Reference",
+			description: "Dokumentasi lengkap untuk integrasi API",
+		},
+		{
+			title: "Integrasi Sistem",
+			description: "Cara mengintegrasikan dengan sistem eksternal",
+		},
+		{
+			title: "Format Data",
+			description: "Spesifikasi format data yang didukung",
+		},
+		{
+			title: "Best Practices",
+			description: "Praktik terbaik dalam penggunaan platform",
+		},
 	];
 
 	const stats = [
-    { value: '150+', label: 'Artikel Panduan' },
-    { value: '50+', label: 'Video Tutorial' },
-    { value: '24/7', label: 'Support Aktif' },
+		{ value: "150+", label: "Artikel Panduan" },
+		{ value: "50+", label: "Video Tutorial" },
+		{ value: "24/7", label: "Support Aktif" },
 	];
 
 	// State for chat functionality
 	const [messages, setMessages] = useState([
-    { id: 1, text: 'Halo! Saya Jenna, asisten virtual Anda. Bagaimana saya bisa membantu hari ini?', sender: 'jenna' }
+		{
+			id: 1,
+			text: "Halo! Saya Jenna, asisten virtual Anda. Bagaimana saya bisa membantu hari ini?",
+			sender: "jenna",
+		},
 	]);
-  const [inputValue, setInputValue] = useState('');
+	const [inputValue, setInputValue] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
 
 	const handleSendMessage = () => {
-    if (inputValue.trim() === '') return;
+		if (inputValue.trim() === "") return;
 
 		// Add user message
 		const newUserMessage = {
 			id: messages.length + 1,
 			text: inputValue,
-      sender: 'user'
+			sender: "user",
 		};
 
-    setMessages(prev => [...prev, newUserMessage]);
-    setInputValue('');
+		setMessages((prev) => [...prev, newUserMessage]);
+		setInputValue("");
 		setIsLoading(true);
 
 		// Simulate Jenna's response after delay
 		setTimeout(() => {
 			const jennaResponse = {
 				id: messages.length + 2,
-        text: 'Terima kasih atas pertanyaan Anda. Saat ini saya adalah versi awal dari asisten virtual. Tim kami sedang mengembangkan kemampuan saya lebih lanjut.',
-        sender: 'jenna'
+				text: "Terima kasih atas pertanyaan Anda. Saat ini saya adalah versi awal dari asisten virtual. Tim kami sedang mengembangkan kemampuan saya lebih lanjut.",
+				sender: "jenna",
 			};
-      setMessages(prev => [...prev, jennaResponse]);
+			setMessages((prev) => [...prev, jennaResponse]);
 			setIsLoading(false);
 		}, 1000);
 	};
 
 	const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+		if (e.key === "Enter" && !e.shiftKey) {
 			e.preventDefault();
 			handleSendMessage();
 		}
@@ -83,7 +143,9 @@ const HelpPage = () => {
 
 	return (
 		<Container size="lg" py="xl">
-      <Title order={1} mb="xl" ta="center">Pusat Bantuan</Title>
+			<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>
@@ -91,9 +153,22 @@ const HelpPage = () => {
 			{/* Statistics Section */}
 			<SimpleGrid cols={3} spacing="lg" mb="xl">
 				{stats.map((stat, index) => (
-          <HelpCard key={index} bg={dark ? "#141D34" : "white"} p="lg" style={{ textAlign: 'center', borderColor: dark ? "#141D34" : "white" }} h="100%" >
-            <Text size="xl" fw={700} style={{ fontSize: '32px' }}>{stat.value}</Text>
-            <Text size="sm" color="dimmed">{stat.label}</Text>
+					<HelpCard
+						key={index}
+						bg={dark ? "#141D34" : "white"}
+						p="lg"
+						style={{
+							textAlign: "center",
+							borderColor: dark ? "#141D34" : "white",
+						}}
+						h="100%"
+					>
+						<Text size="xl" fw={700} style={{ fontSize: "32px" }}>
+							{stat.value}
+						</Text>
+						<Text size="sm" color="dimmed">
+							{stat.label}
+						</Text>
 					</HelpCard>
 				))}
 			</SimpleGrid>
@@ -103,12 +178,28 @@ const HelpPage = () => {
 					<Grid gutter="lg" justify="center">
 						{/* Panduan Memulai */}
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconBook size={24} />} title="Panduan Memulai" h="100%">
+							<HelpCard
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								bg={dark ? "#141D34" : "white"}
+								icon={<IconBook size={24} color="white" />}
+								title="Panduan Memulai"
+								h="100%"
+							>
 								<Box>
 									{guideItems.map((item, index) => (
-                    <Box key={index} py="sm" style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }} onClick={() => alert(`Navigasi ke ${item.title}`)}>
+										<Box
+											key={index}
+											py="sm"
+											style={{
+												borderBottom: "1px solid #eee",
+												cursor: "pointer",
+											}}
+											onClick={() => alert(`Navigasi ke ${item.title}`)}
+										>
 											<Text fw={500}>{item.title}</Text>
-                      <Text size="sm" color="dimmed">{item.description}</Text>
+											<Text size="sm" color="dimmed">
+												{item.description}
+											</Text>
 										</Box>
 									))}
 								</Box>
@@ -117,12 +208,28 @@ const HelpPage = () => {
 
 						{/* Video Tutorial */}
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconVideo size={24} />} title="Video Tutorial" h="100%">
+							<HelpCard
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								bg={dark ? "#141D34" : "white"}
+								icon={<IconVideo size={24} color="white" />}
+								title="Video Tutorial"
+								h="100%"
+							>
 								<Box>
 									{videoItems.map((item, index) => (
-                    <Box key={index} py="sm" style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }} onClick={() => alert(`Buka video: ${item.title}`)}>
+										<Box
+											key={index}
+											py="sm"
+											style={{
+												borderBottom: "1px solid #eee",
+												cursor: "pointer",
+											}}
+											onClick={() => alert(`Buka video: ${item.title}`)}
+										>
 											<Text fw={500}>{item.title}</Text>
-                      <Text size="sm" color="dimmed">{item.duration}</Text>
+											<Text size="sm" color="dimmed">
+												{item.duration}
+											</Text>
 										</Box>
 									))}
 								</Box>
@@ -131,10 +238,22 @@ const HelpPage = () => {
 
 						{/* FAQ */}
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconHelpCircle size={24} />} title="FAQ" h="100%">
+							<HelpCard
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								bg={dark ? "#141D34" : "white"}
+								icon={<IconHelpCircle size={24} color="white" />}
+								title="FAQ"
+								h="100%"
+							>
 								<Accordion variant="separated">
 									{faqItems.map((item, index) => (
-                    <Accordion.Item style={{ backgroundColor: dark ? "#263852ff" : "#F1F5F9" }} key={index} value={`faq-${index}`}>
+										<Accordion.Item
+											style={{
+												backgroundColor: dark ? "#263852ff" : "#F1F5F9",
+											}}
+											key={index}
+											value={`faq-${index}`}
+										>
 											<Accordion.Control>{item.question}</Accordion.Control>
 											<Accordion.Panel>
 												<Text size="sm">{item.answer}</Text>
@@ -151,31 +270,65 @@ const HelpPage = () => {
 					<Grid>
 						{/* Hubungi Support */}
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconHeadphones size={24} />} title="Hubungi Support" h="100%">
+							<HelpCard
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								bg={dark ? "#141D34" : "white"}
+								icon={<IconHeadphones size={24} color="white" />}
+								title="Hubungi Support"
+								h="100%"
+							>
 								<Box>
 									<Text fw={500}>Email</Text>
-                  <Text size="sm" color="dimmed" mb="md"><a href="mailto:support@example.com">support@example.com</a></Text>
+									<Text size="sm" color="dimmed" mb="md">
+										<a href="mailto:support@example.com">support@example.com</a>
+									</Text>
 
 									<Text fw={500}>WhatsApp</Text>
-                  <Text size="sm" color="dimmed" mb="md"><a href="https://wa.me/1234567890">+62 123 456 7890</a></Text>
+									<Text size="sm" color="dimmed" mb="md">
+										<a href="https://wa.me/1234567890">+62 123 456 7890</a>
+									</Text>
 
 									<Text fw={500}>Jam Kerja</Text>
-                  <Text size="sm" color="dimmed">Senin - Jumat, 09:00 - 17:00 WIB</Text>
+									<Text size="sm" color="dimmed">
+										Senin - Jumat, 09:00 - 17:00 WIB
+									</Text>
 
-                  <Text fw={500} mt="md">Waktu Respon</Text>
-                  <Text size="sm" color="dimmed">Rata-rata 2-4 jam kerja</Text>
+									<Text fw={500} mt="md">
+										Waktu Respon
+									</Text>
+									<Text size="sm" color="dimmed">
+										Rata-rata 2-4 jam kerja
+									</Text>
 								</Box>
 							</HelpCard>
 						</Grid.Col>
 
 						{/* Dokumentasi */}
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconFileText size={24} />} title="Dokumentasi" h="100%">
+							<HelpCard
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								bg={dark ? "#141D34" : "white"}
+								icon={<IconFileText size={24} color="white" />}
+								title="Dokumentasi"
+								h="100%"
+							>
 								<Box>
 									{documentationItems.map((item, index) => (
-                    <Box key={index} py="sm" style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }} onClick={() => alert(`Navigasi ke dokumentasi: ${item.title}`)}>
+										<Box
+											key={index}
+											py="sm"
+											style={{
+												borderBottom: "1px solid #eee",
+												cursor: "pointer",
+											}}
+											onClick={() =>
+												alert(`Navigasi ke dokumentasi: ${item.title}`)
+											}
+										>
 											<Text fw={500}>{item.title}</Text>
-                      <Text size="sm" color="dimmed">{item.description}</Text>
+											<Text size="sm" color="dimmed">
+												{item.description}
+											</Text>
 										</Box>
 									))}
 								</Box>
@@ -184,20 +337,54 @@ const HelpPage = () => {
 
 						{/* Jenna - Virtual Assistant */}
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-              <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconMessage size={24} />} title="Jenna - Virtual Assistant" h="100%">
-                <Box style={{ height: '300px', display: 'flex', flexDirection: 'column' }}>
-                  <Box style={{ flex: 1, overflowY: 'auto', marginBottom: '12px', maxHeight: '200px' }}>
+							<HelpCard
+								style={{ borderColor: dark ? "#141D34" : "white" }}
+								bg={dark ? "#141D34" : "white"}
+								icon={<IconMessage size={24} color="white" />}
+								title="Jenna - Virtual Assistant"
+								h="100%"
+							>
+								<Box
+									style={{
+										height: "300px",
+										display: "flex",
+										flexDirection: "column",
+									}}
+								>
+									<Box
+										style={{
+											flex: 1,
+											overflowY: "auto",
+											marginBottom: "12px",
+											maxHeight: "200px",
+										}}
+									>
 										{messages.map((msg) => (
 											<Box
 												key={msg.id}
 												style={{
-                          alignSelf: msg.sender === 'user' ? 'flex-end' : 'flex-start',
-                          backgroundColor: msg.sender === 'user' ? dark ? "#263852ff" : "#F1F5F9" : dark ? "#263852ff" : "#F1F5F9",
-                          color: msg.sender === 'user' ? dark ? "#F1F5F9" : "#263852ff" : dark ? "#F1F5F9" : "#263852ff",
-                          padding: '8px 12px',
-                          borderRadius: '8px',
-                          marginBottom: '8px',
-                          maxWidth: '80%'
+													alignSelf:
+														msg.sender === "user" ? "flex-end" : "flex-start",
+													backgroundColor:
+														msg.sender === "user"
+															? dark
+																? "#263852ff"
+																: "#F1F5F9"
+															: dark
+																? "#263852ff"
+																: "#F1F5F9",
+													color:
+														msg.sender === "user"
+															? dark
+																? "#F1F5F9"
+																: "#263852ff"
+															: dark
+																? "#F1F5F9"
+																: "#263852ff",
+													padding: "8px 12px",
+													borderRadius: "8px",
+													marginBottom: "8px",
+													maxWidth: "80%",
 												}}
 											>
 												{msg.text}
@@ -205,7 +392,7 @@ const HelpPage = () => {
 										))}
 									</Box>
 
-                  <Box style={{ display: 'flex', gap: '8px' }}>
+									<Box style={{ display: "flex", gap: "8px" }}>
 										<input
 											type="text"
 											value={inputValue}
@@ -214,22 +401,22 @@ const HelpPage = () => {
 											placeholder="Ketik pesan Anda..."
 											style={{
 												flex: 1,
-                        padding: '8px 12px',
-                        borderRadius: '20px',
-                        border: '1px solid #ccc',
+												padding: "8px 12px",
+												borderRadius: "20px",
+												border: "1px solid #ccc",
 											}}
 											disabled={isLoading}
 										/>
 										<button
 											onClick={handleSendMessage}
-                      disabled={isLoading || inputValue.trim() === ''}
+											disabled={isLoading || inputValue.trim() === ""}
 											style={{
-                        padding: '8px 16px',
-                        borderRadius: '20px',
-                        backgroundColor: '#3B82F6',
-                        color: 'white',
-                        border: 'none',
-                        cursor: 'pointer',
+												padding: "8px 16px",
+												borderRadius: "20px",
+												backgroundColor: "#3B82F6",
+												color: "white",
+												border: "none",
+												cursor: "pointer",
 											}}
 										>
 											Kirim

src/components/jenna-analytic.tsx

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

src/components/keamanan-page.tsx

@@ -1,30 +1,30 @@
-import { useState } from "react";
 import {
+	Badge,
+	Box,
 	Card,
 	Grid,
 	GridCol,
 	Group,
-  Text, 
-  Title, 
-  Stack,
-  useMantineColorScheme,
-  Badge,
 	List,
+	Stack,
+	Text,
 	ThemeIcon,
-  Box
+	Title,
+	useMantineColorScheme,
 } from "@mantine/core";
 import {
-  IconCamera, 
 	IconAlertTriangle,
-  IconMapPin, 
+	IconCamera,
 	IconClock,
 	IconEye,
-  IconShieldLock
+	IconMapPin,
+	IconShieldLock,
 } from "@tabler/icons-react";
+import { useState } from "react";
 
 const KeamananPage = () => {
 	const { colorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
+	const dark = colorScheme === "dark";
 
 	// Sample data for KPI cards
 	const kpiData = [
@@ -46,10 +46,38 @@ const KeamananPage = () => {
 
 	// Sample data for CCTV locations
 	const cctvLocations = [
-    { id: "CCTV-01", lat: -8.5, lng: 115.2, status: "active", lastSeen: "2 jam yang lalu", location: "Balai Desa" },
-    { id: "CCTV-02", lat: -8.6, lng: 115.3, status: "active", lastSeen: "1 jam yang lalu", location: "Pintu Masuk Desa" },
-    { id: "CCTV-03", lat: -8.4, lng: 115.1, status: "offline", lastSeen: "1 hari yang lalu", location: "Taman Desa" },
-    { id: "CCTV-04", lat: -8.7, lng: 115.4, status: "active", lastSeen: "30 menit yang lalu", location: "Pasar Desa" },
+		{
+			id: "CCTV-01",
+			lat: -8.5,
+			lng: 115.2,
+			status: "active",
+			lastSeen: "2 jam yang lalu",
+			location: "Balai Desa",
+		},
+		{
+			id: "CCTV-02",
+			lat: -8.6,
+			lng: 115.3,
+			status: "active",
+			lastSeen: "1 jam yang lalu",
+			location: "Pintu Masuk Desa",
+		},
+		{
+			id: "CCTV-03",
+			lat: -8.4,
+			lng: 115.1,
+			status: "offline",
+			lastSeen: "1 hari yang lalu",
+			location: "Taman Desa",
+		},
+		{
+			id: "CCTV-04",
+			lat: -8.7,
+			lng: 115.4,
+			status: "active",
+			lastSeen: "30 menit yang lalu",
+			location: "Pasar Desa",
+		},
 	];
 
 	// Sample data for security reports
@@ -97,11 +125,24 @@ const KeamananPage = () => {
 				</Title>
 			</Group>
 
+
+
+			<Grid gutter="md">
+				{/* Peta Keamanan CCTV */}
+				<GridCol span={{ base: 12, lg: 6 }}>
+					<Stack gap={"xs"}>
 						{/* KPI Cards */}
 						<Grid gutter="md">
 							{kpiData.map((kpi, index) => (
 								<GridCol key={index} span={{ base: 12, sm: 6, md: 6 }}>
-            <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
+									<Card
+										p="md"
+										radius="md"
+										withBorder
+										bg={dark ? "#141D34" : "white"}
+										style={{ borderColor: dark ? "#141D34" : "white" }}
+										h="100%"
+									>
 										<Group justify="space-between" align="center">
 											<Stack gap={0}>
 												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
@@ -116,7 +157,12 @@ const KeamananPage = () => {
 													</Text>
 												</Group>
 											</Stack>
-                <ThemeIcon variant="light" color={kpi.color} size="xl" radius="xl">
+											<ThemeIcon
+												variant="light"
+												color={kpi.color}
+												size="xl"
+												radius="xl"
+											>
 												{kpi.icon}
 											</ThemeIcon>
 										</Group>
@@ -124,41 +170,66 @@ const KeamananPage = () => {
 								</GridCol>
 							))}
 						</Grid>
-
-      <Grid gutter="md">
-        {/* Peta Keamanan CCTV */}
-        <GridCol span={{ base: 12, lg: 6 }}>
-          <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
-            <Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Peta Keamanan CCTV</Title>
-            <Text size="sm" c={dark ? "dark.3" : "dimmed"} mb="md">Titik Lokasi CCTV</Text>
+						<Card
+							p="md"
+							radius="md"
+							withBorder
+							bg={dark ? "#141D34" : "white"}
+							style={{ borderColor: dark ? "#141D34" : "white" }}
+							h="100%"
+						>
+							<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
+								Peta Keamanan CCTV
+							</Title>
+							<Text size="sm" c={dark ? "dark.3" : "dimmed"} mb="md">
+								Titik Lokasi CCTV
+							</Text>
 
 							{/* Placeholder for map */}
 							<Box
 								style={{
-                backgroundColor: dark ? '#2d3748' : '#e2e8f0', 
-                borderRadius: '8px',
-                height: '400px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center'
+									backgroundColor: dark ? "#2d3748" : "#e2e8f0",
+									borderRadius: "8px",
+									height: "400px",
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
 								}}
 							>
 								<Stack align="center">
-                <IconMapPin size={48} stroke={1.5} color={dark ? '#94a3b8' : '#64748b'} />
+									<IconMapPin
+										size={48}
+										stroke={1.5}
+										color={dark ? "#94a3b8" : "#64748b"}
+									/>
 									<Text c={dark ? "dark.3" : "dimmed"}>Peta Lokasi CCTV</Text>
-                <Text size="sm" c={dark ? "dark.3" : "dimmed"} ta="center">Integrasi dengan Google Maps atau Mapbox akan ditampilkan di sini</Text>
+									<Text size="sm" c={dark ? "dark.3" : "dimmed"} ta="center">
+										Integrasi dengan Google Maps atau Mapbox akan ditampilkan di
+										sini
+									</Text>
 								</Stack>
 							</Box>
 
 							{/* CCTV Locations List */}
 							<Stack mt="md" gap="sm">
-              <Title order={4} c={dark ? "dark.0" : "black"}>Daftar CCTV</Title>
+								<Title order={4} c={dark ? "dark.0" : "black"}>
+									Daftar CCTV
+								</Title>
 								{cctvLocations.map((cctv, index) => (
-                <Card key={index} p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
+									<Card
+										key={index}
+										p="md"
+										radius="md"
+										withBorder
+										bg={dark ? "#263852ff" : "#F1F5F9"}
+										style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+									>
 										<Group justify="space-between">
 											<Stack gap={0}>
 												<Group gap="xs">
-                        <Text fw={500} c={dark ? "dark.0" : "black"}>{cctv.id}</Text>
+													<Text fw={500} c={dark ? "dark.0" : "black"}>
+														{cctv.id}
+													</Text>
 													<Badge
 														variant="dot"
 														color={cctv.status === "active" ? "green" : "gray"}
@@ -166,34 +237,60 @@ const KeamananPage = () => {
 														{cctv.status === "active" ? "Online" : "Offline"}
 													</Badge>
 												</Group>
-                      <Text size="sm" c={dark ? "dark.3" : "dimmed"}>{cctv.location}</Text>
+												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+													{cctv.location}
+												</Text>
 											</Stack>
 											<Group gap="xs">
 												<IconClock size={16} stroke={1.5} />
-                      <Text size="sm" c={dark ? "dark.3" : "dimmed"}>{cctv.lastSeen}</Text>
+												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+													{cctv.lastSeen}
+												</Text>
 											</Group>
 										</Group>
 									</Card>
 								))}
 							</Stack>
 						</Card>
+					</Stack>
 				</GridCol>
 
 				{/* Daftar Laporan Keamanan */}
 				<GridCol span={{ base: 12, lg: 6 }}>
-          <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
-            <Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Laporan Keamanan Lingkungan</Title>
+					<Card
+						p="md"
+						radius="md"
+						withBorder
+						bg={dark ? "#141D34" : "white"}
+						style={{ borderColor: dark ? "#141D34" : "white" }}
+						h="100%"
+					>
+						<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
+							Laporan Keamanan Lingkungan
+						</Title>
 
 						<Stack gap="sm">
 							{securityReports.map((report, index) => (
-                <Card key={index} p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
+								<Card
+									key={index}
+									p="md"
+									radius="md"
+									withBorder
+									bg={dark ? "#263852ff" : "#F1F5F9"}
+									style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+								>
 									<Group justify="space-between" mb="sm">
-                    <Text fw={500} c={dark ? "dark.0" : "black"}>{report.title}</Text>
+										<Text fw={500} c={dark ? "dark.0" : "black"}>
+											{report.title}
+										</Text>
 										<Badge
 											variant="light"
 											color={
-                        report.status === "baru" ? "red" : 
-                        report.status === "diproses" ? "yellow" : "green"
+												report.status === "baru"
+													? "red"
+													: report.status === "diproses"
+														? "yellow"
+														: "green"
 											}
 										>
 											{report.status}
@@ -203,15 +300,21 @@ const KeamananPage = () => {
 									<Group justify="space-between">
 										<Group gap="xs">
 											<IconMapPin size={16} stroke={1.5} />
-                      <Text size="sm" c={dark ? "dark.3" : "dimmed"}>{report.location}</Text>
+											<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+												{report.location}
+											</Text>
 										</Group>
 										<Group gap="xs">
 											<IconClock size={16} stroke={1.5} />
-                      <Text size="sm" c={dark ? "dark.3" : "dimmed"}>{report.reportedAt}</Text>
+											<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+												{report.reportedAt}
+											</Text>
 										</Group>
 									</Group>
 
-                  <Text size="sm" c={dark ? "dark.3" : "dimmed"} mt="sm">{report.date}</Text>
+									<Text size="sm" c={dark ? "dark.3" : "dimmed"} mt="sm">
+										{report.date}
+									</Text>
 								</Card>
 							))}
 						</Stack>

src/components/keuangan-anggaran.tsx

@@ -1,75 +1,70 @@
-import React from "react";
 import {
-	Button,
-	Card,
 	Badge,
-	Title,
-	Text,
+	Box,
+	Card,
+	Grid,
+	GridCol,
 	Group,
 	Stack,
-	Grid,
-	Box,
-	Progress,
+	Text,
+	ThemeIcon,
+	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
-import { IconTrendingUp, IconTrendingDown, IconCurrency } from "@tabler/icons-react";
-import { BarChart } from "@mantine/charts";
+import {
+	CheckCircle,
+	Coins,
+	PieChart as PieChartIcon,
+	Receipt,
+	TrendingDown,
+	TrendingUp,
+} from "lucide-react";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	Line,
+	LineChart,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";
 
-// Sample Data
+// KPI Data
 const kpiData = [
 	{
 		id: 1,
 		title: "Total APBDes",
 		value: "Rp 5.2M",
-		sub: "Tahun 2025",
-		icon: (
-			<IconCurrency className="h-6 w-6 text-muted-foreground" />
-		),
+		subtitle: "Tahun 2025",
+		icon: Coins,
 	},
 	{
 		id: 2,
 		title: "Realisasi",
 		value: "68%",
-		sub: "Rp 3.5M dari 5.2M",
-		icon: (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				strokeWidth={1.5}
-				stroke="currentColor"
-				className="h-6 w-6 text-muted-foreground"
-			>
-				<path
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.473-1.688 3.342-.48.485-.926.97-1.378 1.44c-1.472 1.58-2.306 2.787-2.91 3.514-.15.18-.207.33-.207.33A.75.75 0 0 1 15 21h-3c-1.104 0-2.08-.542-2.657-1.455-.139-.201-.264-.406-.38-.614l-.014-.025C8.85 18.067 8.156 17.2 7.5 16.325.728 12.56.728 7.44 7.5 3.675c3.04-.482 5.584.47 7.042 1.956.674.672 1.228 1.462 1.696 2.307.426.786.793 1.582 1.113 2.392h.001Z"
-				/>
-			</svg>
-		),
+		subtitle: "Rp 3.5M dari 5.2M",
+		icon: CheckCircle,
 	},
 	{
 		id: 3,
 		title: "Pemasukan",
 		value: "Rp 580jt",
-		sub: "Bulan ini",
-		delta: "+8%",
-		deltaType: "positive",
-		icon: (
-			<IconTrendingUp className="h-6 w-6 text-muted-foreground" />
-		),
+		subtitle: "Bulan ini",
+		trend: "+8%",
+		icon: TrendingUp,
 	},
 	{
 		id: 4,
 		title: "Pengeluaran",
 		value: "Rp 520jt",
-		sub: "Bulan ini",
-		icon: (
-			<IconTrendingDown className="h-6 w-6 text-muted-foreground" />
-		),
+		subtitle: "Bulan ini",
+		icon: TrendingDown,
 	},
 ];
 
+// Income & Expense Data
 const incomeExpenseData = [
 	{ month: "Apr", income: 450, expense: 380 },
 	{ month: "Mei", income: 520, expense: 420 },
@@ -80,6 +75,7 @@ const incomeExpenseData = [
 	{ month: "Okt", income: 580, expense: 520 },
 ];
 
+// Sector Allocation Data
 const allocationData = [
 	{ sector: "Pembangunan", amount: 1200 },
 	{ sector: "Kesehatan", amount: 800 },
@@ -89,13 +85,7 @@ const allocationData = [
 	{ sector: "Teknologi", amount: 300 },
 ];
 
-const assistanceFundData = [
-	{ source: "Dana Desa (DD)", amount: 1800, status: "cair" },
-	{ source: "Alokasi Dana Desa (ADD)", amount: 950, status: "cair" },
-	{ source: "Bagi Hasil Pajak", amount: 450, status: "cair" },
-	{ source: "Hibah Provinsi", amount: 300, status: "proses" },
-];
-
+// APBDes Report Data
 const apbdReport = {
 	income: [
 		{ category: "Dana Desa", amount: 1800 },
@@ -115,192 +105,410 @@ const apbdReport = {
 	totalExpenses: 2155,
 };
 
+// Aid & Grants Data
+const assistanceFundData = [
+	{ source: "Dana Desa (DD)", amount: 1800, status: "cair" },
+	{ source: "Alokasi Dana Desa (ADD)", amount: 950, status: "cair" },
+	{ source: "Bagi Hasil Pajak", amount: 450, status: "cair" },
+	{ source: "Hibah Provinsi", amount: 300, status: "proses" },
+];
+
 const KeuanganAnggaran = () => {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
+
 	return (
-		<Box>
-			<Stack gap="xl">
-				{/* KPI Cards */}
-				<Grid gutter="lg">
-					{kpiData.map((kpi) => (
-						<Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
-								<Group justify="space-between" align="flex-start" mb="xs">
-									<Text size="sm" fw={500} c="dimmed">
-										{kpi.title}
+		<Stack gap="lg">
+			{/* TOP SECTION - 4 STAT CARDS */}
+			<Grid gutter="md">
+				{kpiData.map((item) => (
+					<Grid.Col key={item.id} span={{ base: 12, sm: 6, lg: 3 }}>
+						<Card
+							p="md"
+							radius="xl"
+							withBorder
+							bg={dark ? "#1E293B" : "white"}
+							style={{
+								borderColor: dark ? "#334155" : "white",
+								boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+								transition: "transform 0.15s ease, box-shadow 0.15s ease",
+							}}
+							h="100%"
+						>
+							<Group justify="space-between" align="flex-start" w="100%">
+								<Stack gap={2}>
+									<Text size="sm" c="dimmed">
+										{item.title}
 									</Text>
-									{React.cloneElement(kpi.icon, {
-										className: "h-6 w-6",
-										color: "var(--mantine-color-dimmed)",
-									})}
-								</Group>
-								<Title order={3} fw={700} mt="xs">
-									{kpi.value}
-								</Title>
-								{kpi.delta && (
+									<Text size="xl" fw={700} c={dark ? "white" : "gray.9"}>
+										{item.value}
+									</Text>
+									<Group gap={4} align="flex-start">
+										{item.trend && <TrendingUp size={14} color="#22C55E" />}
 										<Text
 											size="xs"
-										c={
-											kpi.deltaType === "positive"
-												? "green"
-												: kpi.deltaType === "negative"
-													? "red"
-													: "dimmed"
-										}
-										mt={4}
+											c={item.trend ? "green" : dark ? "gray.4" : "gray.5"}
 										>
-										{kpi.delta}
+											{item.subtitle}
 										</Text>
-								)}
-								{kpi.sub && (
-									<Text size="xs" c="dimmed" mt="auto">
-										{kpi.sub}
-									</Text>
-								)}
+									</Group>
+								</Stack>
+								<ThemeIcon
+									color="#1E3A5F"
+									variant="filled"
+									size="lg"
+									radius="xl"
+								>
+									<item.icon style={{ width: "60%", height: "60%" }} />
+								</ThemeIcon>
+							</Group>
 						</Card>
 					</Grid.Col>
 				))}
 			</Grid>
 
-				{/* Charts Section */}
+			{/* MAIN CHART SECTION */}
 			<Grid gutter="lg">
-					{/* Grafik Pemasukan vs Pengeluaran */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-							<Title order={3} fw={500} mb="md">
-								Pemasukan vs Pengeluaran
+				{/* LEFT: PEMASUKAN DAN PENGELUARAN (70%) */}
+				<Grid.Col span={{ base: 12, lg: 8 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<PieChartIcon size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Pemasukan dan Pengeluaran
 							</Title>
-							<BarChart
-								h={300}
-								data={incomeExpenseData}
-								dataKey="month"
-								series={[
-									{ name: 'income', color: 'green', label: 'Pemasukan' },
-									{ name: 'expense', color: 'red', label: 'Pengeluaran' },
-								]}
-								withLegend
+						</Group>
+						<ResponsiveContainer width="100%" height={300}>
+							<LineChart data={incomeExpenseData}>
+								<CartesianGrid
+									strokeDasharray="3 3"
+									vertical={false}
+									stroke={dark ? "#334155" : "#e5e7eb"}
 								/>
+								<XAxis
+									dataKey="month"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+								/>
+								<YAxis
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+									tickFormatter={(value) => `Rp ${value}jt`}
+								/>
+								<Tooltip
+									contentStyle={{
+										backgroundColor: dark ? "#1E293B" : "white",
+										borderColor: dark ? "#334155" : "#e5e7eb",
+										borderRadius: "8px",
+									}}
+									labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
+									formatter={(value: number | undefined) => [
+										`Rp ${value}jt`,
+										"",
+									]}
+								/>
+								<Line
+									type="monotone"
+									dataKey="income"
+									stroke="#22C55E"
+									strokeWidth={2}
+									dot={{ fill: "#22C55E", strokeWidth: 2, r: 4 }}
+									activeDot={{ r: 6 }}
+									name="Pemasukan"
+								/>
+								<Line
+									type="monotone"
+									dataKey="expense"
+									stroke="#EF4444"
+									strokeWidth={2}
+									dot={{ fill: "#EF4444", strokeWidth: 2, r: 4 }}
+									activeDot={{ r: 6 }}
+									name="Pengeluaran"
+								/>
+							</LineChart>
+						</ResponsiveContainer>
 					</Card>
 				</Grid.Col>
 
-					{/* Alokasi Anggaran Per Sektor */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-							<Title order={3} fw={500} mb="md">
+				{/* RIGHT: ALOKASI ANGGARAN PER SEKTOR (30%) */}
+				<Grid.Col span={{ base: 12, lg: 4 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<PieChartIcon size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
 								Alokasi Anggaran Per Sektor
 							</Title>
-							<BarChart
-								h={300}
-								data={allocationData}
-								dataKey="sector"
-								series={[{ name: 'amount', color: 'darmasaba-navy', label: 'Jumlah' }]}
-								withLegend
-								orientation="horizontal"
+						</Group>
+						<ResponsiveContainer width="100%" height={300}>
+							<BarChart data={allocationData} layout="vertical">
+								<CartesianGrid
+									strokeDasharray="3 3"
+									horizontal={false}
+									stroke={dark ? "#334155" : "#e5e7eb"}
 								/>
+								<XAxis
+									type="number"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 12,
+									}}
+									tickFormatter={(value) => `${value}`}
+								/>
+								<YAxis
+									type="category"
+									dataKey="sector"
+									axisLine={false}
+									tickLine={false}
+									tick={{
+										fill: dark ? "#E2E8F0" : "#374151",
+										fontSize: 11,
+									}}
+									width={100}
+								/>
+								<Tooltip
+									contentStyle={{
+										backgroundColor: dark ? "#1E293B" : "white",
+										borderColor: dark ? "#334155" : "#e5e7eb",
+										borderRadius: "8px",
+									}}
+									formatter={(value: number | undefined) => [
+										`Rp ${value}jt`,
+										"Jumlah",
+									]}
+								/>
+								<Bar
+									dataKey="amount"
+									fill="#1E3A5F"
+									radius={[0, 8, 8, 0]}
+									maxBarSize={30}
+								/>
+							</BarChart>
+						</ResponsiveContainer>
 					</Card>
 				</Grid.Col>
 			</Grid>
 
+			{/* BOTTOM SECTION */}
 			<Grid gutter="lg">
-					{/* Dana Bantuan & Hibah */}
+				{/* LEFT: LAPORAN APBDES */}
 				<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-							<Title order={3} fw={500} mb="md">
-								Dana Bantuan & Hibah
-							</Title>
-							<Stack gap="sm">
-								{assistanceFundData.map((fund, index) => (
-									<Group
-										key={index}
-										justify="space-between"
-										align="center"
-										p="sm"
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
 						style={{
-											border: "1px solid var(--mantine-color-gray-3)",
-											borderRadius: "var(--mantine-radius-sm)",
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<Receipt size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Laporan APBDes
+							</Title>
+						</Group>
+
+						<Grid gutter="md">
+							{/* Pendapatan */}
+							<Grid.Col span={6}>
+								<Card p="sm" radius="lg" bg={dark ? "#064E3B" : "#DCFCE7"}>
+									<Title order={5} c="#22C55E" mb="sm">
+										Pendapatan
+									</Title>
+									<Stack gap="xs">
+										{apbdReport.income.map((item, index) => (
+											<Group key={index} justify="space-between">
+												<Text size="sm" c={dark ? "gray.3" : "gray.7"}>
+													{item.category}
+												</Text>
+												<Text size="sm" fw={600} c="#22C55E">
+													Rp {item.amount.toLocaleString()}jt
+												</Text>
+											</Group>
+										))}
+										<Group
+											justify="space-between"
+											mt="sm"
+											pt="sm"
+											style={{
+												borderTop: `1px solid ${dark ? "#065F46" : "#86EFAC"}`,
 											}}
 										>
+											<Text fw={700} c="#22C55E">
+												Total:
+											</Text>
+											<Text fw={700} c="#22C55E">
+												Rp {apbdReport.totalIncome.toLocaleString()}jt
+											</Text>
+										</Group>
+									</Stack>
+								</Card>
+							</Grid.Col>
+
+							{/* Belanja */}
+							<Grid.Col span={6}>
+								<Card p="sm" radius="lg" bg={dark ? "#7F1D1D" : "#FEE2E2"}>
+									<Title order={5} c="#EF4444" mb="sm">
+										Belanja
+									</Title>
+									<Stack gap="xs">
+										{apbdReport.expenses.map((item, index) => (
+											<Group key={index} justify="space-between">
+												<Text size="sm" c={dark ? "gray.3" : "gray.7"}>
+													{item.category}
+												</Text>
+												<Text size="sm" fw={600} c="#EF4444">
+													Rp {item.amount.toLocaleString()}jt
+												</Text>
+											</Group>
+										))}
+										<Group
+											justify="space-between"
+											mt="sm"
+											pt="sm"
+											style={{
+												borderTop: `1px solid ${dark ? "#991B1B" : "#FCA5A5"}`,
+											}}
+										>
+											<Text fw={700} c="#EF4444">
+												Total:
+											</Text>
+											<Text fw={700} c="#EF4444">
+												Rp {apbdReport.totalExpenses.toLocaleString()}jt
+											</Text>
+										</Group>
+									</Stack>
+								</Card>
+							</Grid.Col>
+						</Grid>
+
+						{/* Saldo */}
+						<Group
+							justify="space-between"
+							mt="md"
+							pt="md"
+							style={{
+								borderTop: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
+							}}
+						>
+							<Text fw={700} c={dark ? "white" : "gray.9"}>
+								Saldo:
+							</Text>
+							<Text
+								fw={700}
+								size="lg"
+								c={
+									apbdReport.totalIncome > apbdReport.totalExpenses
+										? "#22C55E"
+										: "#EF4444"
+								}
+							>
+								Rp{" "}
+								{(
+									apbdReport.totalIncome - apbdReport.totalExpenses
+								).toLocaleString()}
+								jt
+							</Text>
+						</Group>
+					</Card>
+				</Grid.Col>
+
+				{/* RIGHT: DANA BANTUAN DAN HIBAH */}
+				<Grid.Col span={{ base: 12, lg: 6 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Group gap="xs" mb="md">
+							<ThemeIcon color="#1E3A5F" variant="filled" size="sm" radius="sm">
+								<Coins size={14} />
+							</ThemeIcon>
+							<Title order={4} c={dark ? "white" : "gray.9"}>
+								Dana Bantuan dan Hibah
+							</Title>
+						</Group>
+						<Stack gap="sm">
+							{assistanceFundData.map((fund, index) => (
+								<Card
+									key={index}
+									p="sm"
+									radius="lg"
+									bg={dark ? "#334155" : "#F1F5F9"}
+									style={{
+										borderColor: "transparent",
+										transition: "background-color 0.15s ease",
+									}}
+								>
+									<Group justify="space-between" align="center">
 										<Box>
-											<Text size="sm" fw={500}>
+											<Text size="sm" fw={600} c={dark ? "white" : "gray.9"}>
 												{fund.source}
 											</Text>
-											<Text size="sm" c="dimmed">
+											<Text size="xs" c="dimmed">
 												Rp {fund.amount.toLocaleString()}jt
 											</Text>
 										</Box>
 										<Badge
 											variant="light"
 											color={fund.status === "cair" ? "green" : "yellow"}
+											radius="sm"
+											fw={600}
 										>
-											{fund.status}
+											{fund.status === "cair" ? "Cair" : "Proses"}
 										</Badge>
 									</Group>
-								))}
-							</Stack>
 								</Card>
-					</Grid.Col>
-
-					{/* Laporan APBDes */}
-					<Grid.Col span={{ base: 12, lg: 6 }}>
-						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-							<Title order={3} fw={500} mb="md">
-								Laporan APBDes
-							</Title>
-
-							<Box mb="md">
-								<Title order={4} mb="sm">Pendapatan</Title>
-								<Stack gap="xs">
-									{apbdReport.income.map((item, index) => (
-										<Group key={index} justify="space-between">
-											<Text size="sm">{item.category}</Text>
-											<Text size="sm" c="green">
-												Rp {item.amount.toLocaleString()}jt
-											</Text>
-										</Group>
 							))}
-									<Group justify="space-between" mt="sm">
-										<Text fw={700}>Total Pendapatan:</Text>
-										<Text fw={700} c="green">
-											Rp {apbdReport.totalIncome.toLocaleString()}jt
-										</Text>
-									</Group>
 						</Stack>
-							</Box>
-
-							<Box>
-								<Title order={4} mb="sm">Belanja</Title>
-								<Stack gap="xs">
-									{apbdReport.expenses.map((item, index) => (
-										<Group key={index} justify="space-between">
-											<Text size="sm">{item.category}</Text>
-											<Text size="sm" c="red">
-												Rp {item.amount.toLocaleString()}jt
-											</Text>
-										</Group>
-									))}
-									<Group justify="space-between" mt="sm">
-										<Text fw={700}>Total Belanja:</Text>
-										<Text fw={700} c="red">
-											Rp {apbdReport.totalExpenses.toLocaleString()}jt
-										</Text>
-									</Group>
-								</Stack>
-							</Box>
-
-							<Box mt="md" pt="md" style={{ borderTop: '1px solid var(--mantine-color-gray-3)' }}>
-								<Group justify="space-between">
-									<Text fw={700}>Saldo:</Text>
-									<Text fw={700} c={apbdReport.totalIncome > apbdReport.totalExpenses ? "green" : "red"}>
-										Rp {(apbdReport.totalIncome - apbdReport.totalExpenses).toLocaleString()}jt
-									</Text>
-								</Group>
-							</Box>
 					</Card>
 				</Grid.Col>
 			</Grid>
 		</Stack>
-		</Box>
 	);
 };
 

src/components/kinerja-divisi.tsx

@@ -1,341 +1,97 @@
-import {
-	Stack,
-	Grid,
-	GridCol,
-	Group,
-	Text,
-	Title,
-	ActionIcon,
-	Progress as MantineProgress,
-	Box,
-	Badge as MantineBadge,
-	Card,
-	useMantineColorScheme,
-	ThemeIcon,
-	List,
-	Divider,
-	Skeleton
-} from "@mantine/core";
-import { Button } from "@/components/ui/button";
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts";
+import { Grid, Stack } from "@mantine/core";
+import { ActivityCard } from "./kinerja-divisi/activity-card";
+import { ArchiveCard } from "./kinerja-divisi/archive-card";
+import { DiscussionPanel } from "./kinerja-divisi/discussion-panel";
+import { DivisionList } from "./kinerja-divisi/division-list";
+import { DocumentChart } from "./kinerja-divisi/document-chart";
+import { EventCard } from "./kinerja-divisi/event-card";
+import { ProgressChart } from "./kinerja-divisi/progress-chart";
+
+// 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" },
+];
 
 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 },
-		{ name: "Dikerjakan", value: 8 },
-		{ name: "Segera Dikerjakan", value: 5 },
-		{ name: "Dibatalkan", value: 2 },
-	];
-
-	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">
-			{/* 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"} />
-						<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>
-
-			{/* Ringkasan Tugas per Divisi */}
+			{/* SECTION 1 — PROGRAM KEGIATAN */}
 			<Grid gutter="md">
-				{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>
+				{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}
+						/>
+					</Grid.Col>
 				))}
 			</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>
+			{/* SECTION 2 — GRID DASHBOARD (3 Columns) */}
+			<Grid gutter="lg">
+				{/* Left Column - Division List */}
+				<Grid.Col span={{ base: 12, lg: 3 }}>
+					<DivisionList />
+				</Grid.Col>
 
-			{/* 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>
+				{/* Middle Column - Document Chart */}
+				<Grid.Col span={{ base: 12, lg: 5 }}>
+					<DocumentChart />
+				</Grid.Col>
 
-			{/* 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>
-								<Pie
-									data={activityProgressStats}
-									cx="50%"
-									cy="50%"
-									labelLine={false}
-									outerRadius={80}
-									fill="#8884d8"
-									dataKey="value"
-									label={({ name, percent }) => `${name}: ${percent ? (percent * 100).toFixed(0) : '0'}%`}
-								>
-									{activityProgressStats.map((entry, index) => (
-										<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-									))}
-								</Pie>
-								<Tooltip
-									contentStyle={dark
-										? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
-										: {}}
-								/>
-							</PieChart>
-						</ResponsiveContainer>
-					</Card>
-				</GridCol>
+				{/* Right Column - Progress Chart */}
+				<Grid.Col span={{ base: 12, lg: 4 }}>
+					<ProgressChart />
+				</Grid.Col>
 			</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>
+			{/* SECTION 3 — DISCUSSION PANEL */}
+			<DiscussionPanel />
 
-			{/* 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>
+			{/* SECTION 4 — ACARA HARI INI */}
+			<EventCard />
+
+			{/* SECTION 5 — ARSIP DIGITAL PERANGKAT DESA */}
+			<Grid gutter="md">
+				{archiveData.map((item, index) => (
+					<Grid.Col key={index} span={{ base: 12, md: 6 }}>
+						<ArchiveCard item={item} />
+					</Grid.Col>
 				))}
-					</Stack>
-				) : (
-					<Text c="dimmed" ta="center" py="md">
-						Tidak ada acara hari ini
-					</Text>
-				)}
-			</Card>
+			</Grid>
 		</Stack>
 	);
 };

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

@@ -0,0 +1,89 @@
+import { Box, Card, Group, Progress, Text } from "@mantine/core";
+
+interface ActivityCardProps {
+	title: string;
+	date: string;
+	progress: number;
+	status: "Selesai" | "Berjalan" | "Tertunda";
+}
+
+export function ActivityCard({
+	title,
+	date,
+	progress,
+	status,
+}: ActivityCardProps) {
+	const getStatusColor = () => {
+		switch (status) {
+			case "Selesai":
+				return "#22C55E";
+			case "Berjalan":
+				return "#3B82F6";
+			case "Tertunda":
+				return "#EF4444";
+			default:
+				return "#9CA3AF";
+		}
+	};
+
+	return (
+		<Card
+			radius="xl"
+			p={0}
+			withBorder={false}
+			style={{
+				backgroundColor: "#F3F4F6",
+				overflow: "hidden",
+			}}
+		>
+			{/* 🔵 HEADER */}
+			<Box
+				style={{
+					backgroundColor: "#1E3A5F",
+					padding: "16px",
+					textAlign: "center",
+				}}
+			>
+				<Text c="white" fw={700} size="md">
+					{title}
+				</Text>
+			</Box>
+
+			{/* CONTENT */}
+			<Box p="md">
+				{/* PROGRESS */}
+				<Progress
+					value={progress}
+					radius="xl"
+					size="lg"
+					color="orange"
+					styles={{
+						root: {
+							height: 16,
+						},
+					}}
+				/>
+
+				{/* FOOTER */}
+				<Group justify="space-between" mt="md">
+					<Text size="sm" fw={500}>
+						{date}
+					</Text>
+
+					<Box
+						style={{
+							backgroundColor: getStatusColor(),
+							color: "white",
+							padding: "4px 12px",
+							borderRadius: 999,
+							fontSize: 12,
+							fontWeight: 600,
+						}}
+					>
+						{status}
+					</Box>
+				</Group>
+			</Box>
+		</Card>
+	);
+}

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

@@ -0,0 +1,42 @@
+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",
+			}}
+			h="100%"
+			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

@@ -0,0 +1,93 @@
+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)",
+			}}
+			h="100%"
+		>
+			<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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,74 @@
+import { Card, Text, useMantineColorScheme } from "@mantine/core";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	Cell,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";
+
+const documentData = [
+	{ name: "Gambar", jumlah: 300, color: "#FACC15" },
+	{ name: "Dokumen", jumlah: 310, color: "#22C55E" },
+];
+
+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="jumlah" radius={[4, 4, 0, 0]}>
+						{documentData.map((entry, index) => (
+							<Cell key={`cell-${index}`} fill={entry.color} />
+						))}
+					</Bar>
+				</BarChart>
+			</ResponsiveContainer>
+		</Card>
+	);
+}

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

@@ -0,0 +1,66 @@
+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)",
+			}}
+			h="100%"
+		>
+			<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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,84 @@
+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: "#F59E0B" },
+	{ 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

@@ -1,48 +1,69 @@
-import type React from "react";
-import { useState } from "react";
 import {
+	Badge,
 	Button,
 	Card,
 	Grid,
-	GridCol,
 	Group,
-	Text,
-	Title,
-	TextInput,
-	Textarea,
-	Select,
-	Table,
-	Badge,
 	Stack,
+	Text,
+	ThemeIcon,
+	Title,
 	useMantineColorScheme,
-	List,
-	Divider,
-	ActionIcon,
-	Box
 } from "@mantine/core";
-import { IconMessage, IconAlertTriangle, IconClock, IconCheck, IconChevronRight } from "@tabler/icons-react";
-import { Line, LineChart, Bar, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
-
-const PengaduanLayananPublik = () => {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === 'dark';
+import { CheckCircle, Clock, FileText, MessageCircle } from "lucide-react";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	Line,
+	LineChart,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";
 
 // Summary data
-	const summaryData = {
-		total: 42,
-		baru: 14,
-		diproses: 14,
-		selesai: 14
-	};
+const summaryData = [
+	{
+		title: "Total Pengaduan",
+		value: 42,
+		subtitle: "Bulan ini",
+		icon: MessageCircle,
+		color: "#1E3A5F",
+	},
+	{
+		title: "Baru",
+		value: 14,
+		subtitle: "Belum diproses",
+		icon: FileText,
+		color: "#1E3A5F",
+	},
+	{
+		title: "Diproses",
+		value: 14,
+		subtitle: "Sedang ditangani",
+		icon: Clock,
+		color: "#1E3A5F",
+	},
+	{
+		title: "Selesai",
+		value: 14,
+		subtitle: "Terselesaikan",
+		icon: CheckCircle,
+		color: "#1E3A5F",
+	},
+];
 
 // Tren pengaduan data
 const trenData = [
-		{ bulan: "Jan", jumlah: 30 },
-		{ bulan: "Feb", jumlah: 50 },
-		{ bulan: "Mar", jumlah: 42 },
-		{ bulan: "Apr", jumlah: 38 },
-		{ bulan: "Mei", jumlah: 45 },
-		{ bulan: "Jun", jumlah: 42 }
+	{ bulan: "Apr", jumlah: 35 },
+	{ bulan: "Mei", jumlah: 48 },
+	{ bulan: "Jun", jumlah: 42 },
+	{ bulan: "Jul", jumlah: 55 },
+	{ bulan: "Agu", jumlah: 50 },
+	{ bulan: "Sep", jumlah: 58 },
+	{ bulan: "Okt", jumlah: 52 },
 ];
 
 // Surat terbanyak data
@@ -51,593 +72,358 @@ const PengaduanLayananPublik = () => {
 	{ jenis: "KK", jumlah: 18 },
 	{ jenis: "Domisili", jumlah: 15 },
 	{ jenis: "Usaha", jumlah: 12 },
-		{ jenis: "Lainnya", jumlah: 8 }
+	{ jenis: "Lainnya", jumlah: 8 },
 ];
 
 // Pengajuan terbaru data
 const pengajuanTerbaru = [
-		{ nama: "Budi Santoso", jenis: "Ketertiban Umum", waktu: "2 jam yang lalu", status: "baru" },
-		{ nama: "Siti Rahayu", jenis: "Pelayanan Kesehatan", waktu: "5 jam yang lalu", status: "diproses" },
-		{ nama: "Ahmad Fauzi", jenis: "Infrastruktur", waktu: "1 hari yang lalu", status: "selesai" },
-		{ nama: "Dewi Lestari", jenis: "Administrasi", waktu: "1 hari yang lalu", status: "baru" },
-		{ nama: "Joko Widodo", jenis: "Keamanan", waktu: "2 hari yang lalu", status: "diproses" }
+	{
+		nama: "Budi Santoso",
+		jenis: "Ketertiban Umum",
+		waktu: "2 jam yang lalu",
+		status: "baru",
+	},
+	{
+		nama: "Siti Rahayu",
+		jenis: "Pelayanan Kesehatan",
+		waktu: "5 jam yang lalu",
+		status: "proses",
+	},
+	{
+		nama: "Ahmad Fauzi",
+		jenis: "Infrastruktur",
+		waktu: "1 hari yang lalu",
+		status: "selesai",
+	},
+	{
+		nama: "Dewi Lestari",
+		jenis: "Administrasi",
+		waktu: "1 hari yang lalu",
+		status: "baru",
+	},
+	{
+		nama: "Joko Widodo",
+		jenis: "Keamanan",
+		waktu: "2 hari yang lalu",
+		status: "proses",
+	},
 ];
 
 // Ide inovatif data
 const ideInovatif = [
-		{ nama: "Andi Prasetyo", judul: "Penerapan Smart Village", kategori: "Teknologi" },
-		{ nama: "Rina Kusuma", judul: "Program Ekowisata Desa", kategori: "Ekonomi" },
-		{ nama: "Bambang Suryono", judul: "Peningkatan Sanitasi", kategori: "Kesehatan" },
-		{ nama: "Lina Marlina", judul: "Pusat Kreatif Anak Muda", kategori: "Pendidikan" }
-	];
-
-	const [activeTab, setActiveTab] = useState<"complaints" | "services">(
-		"complaints",
-	);
-	const [newComplaint, setNewComplaint] = useState({
-		title: "",
-		category: "",
-		description: "",
-	});
-
-	// Sample data for complaints
-	const complaints = [
 	{
-			id: 1,
-			title: "Jalan Rusak di Jalan Raya",
-			category: "Infrastruktur",
-			status: "Pending",
-			priority: "High",
-			date: "2024-02-01",
-			reporter: "Bapak Ahmad",
+		nama: "Andi Prasetyo",
+		judul: "Penerapan Smart Village",
+		waktu: "3 hari yang lalu",
+		kategori: "Teknologi",
 	},
 	{
-			id: 2,
-			title: "Pemadaman Listrik Berkelanjutan",
-			category: "Utilitas",
-			status: "In Progress",
-			priority: "Medium",
-			date: "2024-02-03",
-			reporter: "Ibu Sari",
+		nama: "Rina Kusuma",
+		judul: "Program Ekowisata Desa",
+		waktu: "5 hari yang lalu",
+		kategori: "Ekonomi",
 	},
 	{
-			id: 3,
-			title: "Pelayanan Administrasi Lambat",
-			category: "Administrasi",
-			status: "Resolved",
-			priority: "Low",
-			date: "2024-01-28",
-			reporter: "Pak Joko",
+		nama: "Bambang Suryono",
+		judul: "Peningkatan Sanitasi",
+		waktu: "1 minggu yang lalu",
+		kategori: "Kesehatan",
 	},
 	{
-			id: 4,
-			title: "Kebersihan Lingkungan",
-			category: "Sanitasi",
-			status: "Pending",
-			priority: "Medium",
-			date: "2024-02-05",
-			reporter: "Bu Dewi",
+		nama: "Lina Marlina",
+		judul: "Pusat Kreatif Anak Muda",
+		waktu: "2 minggu yang lalu",
+		kategori: "Pendidikan",
 	},
 ];
 
-	// Sample data for public services
-	const services = [
-		{
-			id: 1,
-			name: "Pembuatan KTP",
-			description:
-				"Pelayanan pembuatan Kartu Tanda Penduduk baru atau perpanjangan",
-			status: "Available",
-			category: "Administrasi",
-			lastUpdated: "2024-02-01",
-		},
-		{
-			id: 2,
-			name: "Pembuatan Surat Keterangan Usaha",
-			description: "Surat keterangan untuk keperluan usaha atau perizinan",
-			status: "Available",
-			category: "Administrasi",
-			lastUpdated: "2024-02-02",
-		},
-		{
-			id: 3,
-			name: "Pelayanan Kesehatan",
-			description: "Pelayanan kesehatan dasar di puskesmas desa",
-			status: "Available",
-			category: "Kesehatan",
-			lastUpdated: "2024-01-30",
-		},
-		{
-			id: 4,
-			name: "Program Bantuan Sosial",
-			description:
-				"Informasi dan pendaftaran program bantuan sosial dari pemerintah",
-			status: "Limited",
-			category: "Sosial",
-			lastUpdated: "2024-02-04",
-		},
-	];
-
-	const handleInputChange = (
-		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-	) => {
-		const { name, value } = e.target;
-		setNewComplaint((prev) => ({
-			...prev,
-			[name]: value,
-		}));
-	};
-
-	const handleSelectChange = (value: string | null) => {
-		setNewComplaint((prev) => ({
-			...prev,
-			category: value || "", // Ensure category is always a string
-		}));
-	};
-
-	const handleSubmitComplaint = (e: React.FormEvent) => {
-		e.preventDefault();
-		console.log("Submitting complaint:", newComplaint);
-		// Here you would typically send the complaint to your backend
-		alert("Pengaduan berhasil dikirim!");
-		setNewComplaint({ title: "", category: "", description: "" });
-	};
-
-	// Render complaint table rows
-	const complaintRows = complaints.map((complaint) => (
-		<Table.Tr key={complaint.id}>
-			<Table.Td className="font-medium">
-				<Text c={dark ? "white" : "dark.3"}>{complaint.title}</Text>
-			</Table.Td>
-			<Table.Td>
-				<Text c={dark ? "white" : "dark.3"}>{complaint.category}</Text>
-			</Table.Td>
-			<Table.Td>
-				<Badge
-					variant="filled"
-					color={
-						complaint.status === "Resolved"
-							? "green"
-							: complaint.status === "In Progress"
-								? "yellow"
-								: "red"
-					}
-				>
-					{complaint.status}
-				</Badge>
-			</Table.Td>
-			<Table.Td>
-				<Badge
-					variant="filled"
-					color={
-						complaint.priority === "High"
-							? "red"
-							: complaint.priority === "Medium"
-								? "yellow"
-								: "blue"
-					}
-				>
-					{complaint.priority}
-				</Badge>
-			</Table.Td>
-			<Table.Td>
-				<Text c={dark ? "white" : "dark.3"}>{complaint.date}</Text>
-			</Table.Td>
-		</Table.Tr>
-	));
-
-	// Status badge color mapping
 const getStatusColor = (status: string) => {
 	switch (status) {
-			case 'baru': return 'red';
-			case 'diproses': return 'yellow';
-			case 'selesai': return 'green';
-			default: return 'gray';
+		case "baru":
+			return "red";
+		case "proses":
+			return "blue";
+		case "selesai":
+			return "green";
+		default:
+			return "gray";
 	}
 };
 
+const PengaduanLayananPublik = () => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
 	return (
 		<Stack gap="lg">
-			{activeTab === "complaints" ? (
-				<>
-					{/* Summary Cards */}
+			{/* TOP SECTION - 4 STAT CARDS */}
 			<Grid gutter="md">
-						<GridCol span={{ base: 12, md: 6, lg: 3 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
-								<Group justify="space-between" align="center">
-									<Stack gap={0}>
-										<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-											Total Pengaduan
+				{summaryData.map((item, index) => (
+					<Grid.Col key={index} span={{ base: 12, sm: 6, lg: 3 }}>
+						<Card
+							p="md"
+							radius="xl"
+							withBorder
+							bg={dark ? "#1E293B" : "white"}
+							style={{
+								borderColor: dark ? "#334155" : "white",
+								boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+								transition: "transform 0.15s ease, box-shadow 0.15s ease",
+							}}
+							h="100%"
+						>
+							<Group justify="space-between" align="center" w="100%">
+								<Stack gap={2}>
+									<Text size="sm" c="dimmed">
+										{item.title}
 									</Text>
-										<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-											{summaryData.total}
+									<Text size="xl" fw={700} c={dark ? "white" : "gray.9"}>
+										{item.value}
+									</Text>
+									<Text size="xs" c="dimmed">
+										{item.subtitle}
 									</Text>
 								</Stack>
-									<Badge
-										variant="light"
-										color="darmasaba-blue"
-										p={8}
-										radius="md"
+								<ThemeIcon
+									color={item.color}
+									variant="filled"
+									size="lg"
+									radius="xl"
+									style={{
+										transition: "transform 0.15s ease",
+									}}
 								>
-										<IconMessage size={20} />
-									</Badge>
+									<item.icon style={{ width: "60%", height: "60%" }} />
+								</ThemeIcon>
 							</Group>
 						</Card>
-						</GridCol>
-
-						<GridCol span={{ base: 12, md: 6, lg: 3 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
-								<Group justify="space-between" align="center">
-									<Stack gap={0}>
-										<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-											Baru
-										</Text>
-										<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-											{summaryData.baru}
-										</Text>
-									</Stack>
-									<Badge
-										variant="light"
-										color="red"
-										p={8}
-										radius="md"
-									>
-										<IconAlertTriangle size={20} />
-									</Badge>
-								</Group>
-							</Card>
-						</GridCol>
-
-						<GridCol span={{ base: 12, md: 6, lg: 3 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
-								<Group justify="space-between" align="center">
-									<Stack gap={0}>
-										<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-											Diproses
-										</Text>
-										<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-											{summaryData.diproses}
-										</Text>
-									</Stack>
-									<Badge
-										variant="light"
-										color="yellow"
-										p={8}
-										radius="md"
-									>
-										<IconClock size={20} />
-									</Badge>
-								</Group>
-							</Card>
-						</GridCol>
-
-						<GridCol span={{ base: 12, md: 6, lg: 3 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
-								<Group justify="space-between" align="center">
-									<Stack gap={0}>
-										<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-											Selesai
-										</Text>
-										<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-											{summaryData.selesai}
-										</Text>
-									</Stack>
-									<Badge
-										variant="light"
-										color="green"
-										p={8}
-										radius="md"
-									>
-										<IconCheck size={20} />
-									</Badge>
-								</Group>
-							</Card>
-						</GridCol>
+					</Grid.Col>
+				))}
 			</Grid>
 
-					{/* Grafik Tren Pengaduan */}
-					<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} >
-						<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
-							Grafik Tren Pengaduan
+			{/* MAIN CHART - TREN PENGADUAN */}
+			<Card
+				p="md"
+				radius="xl"
+				withBorder
+				bg={dark ? "#1E293B" : "white"}
+				style={{
+					borderColor: dark ? "#334155" : "white",
+					boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				}}
+			>
+				<Group justify="space-between" mb="md">
+					<Title order={4} c={dark ? "white" : "gray.9"}>
+						Tren Pengaduan
 					</Title>
+				</Group>
 				<ResponsiveContainer width="100%" height={300}>
 					<LineChart data={trenData}>
 						<CartesianGrid
 							strokeDasharray="3 3"
 							vertical={false}
-									stroke={dark ? "var(--mantine-color-gray-7)" : "var(--mantine-color-gray-3)"}
+							stroke={dark ? "#334155" : "#e5e7eb"}
 						/>
 						<XAxis
 							dataKey="bulan"
 							axisLine={false}
 							tickLine={false}
-									tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+							tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
 						/>
 						<YAxis
 							axisLine={false}
 							tickLine={false}
-									tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+							tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
 						/>
 						<Tooltip
-									contentStyle={dark
-										? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
-										: {}}
+							contentStyle={{
+								backgroundColor: dark ? "#1E293B" : "white",
+								borderColor: dark ? "#334155" : "#e5e7eb",
+								borderRadius: "8px",
+							}}
+							labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
 						/>
 						<Line
 							type="monotone"
 							dataKey="jumlah"
-									stroke={dark ? "var(--mantine-color-blue-6)" : "var(--mantine-color-blue-filled)"}
+							stroke="#1E3A5F"
 							strokeWidth={2}
-									dot={{ stroke: dark ? "var(--mantine-color-blue-6)" : "var(--mantine-color-blue-filled)", strokeWidth: 2, r: 4 }}
-									activeDot={{ r: 6, stroke: '#fff', strokeWidth: 2 }}
+							dot={{
+								fill: "#1E3A5F",
+								strokeWidth: 2,
+								r: 4,
+							}}
+							activeDot={{ r: 6 }}
 						/>
 					</LineChart>
 				</ResponsiveContainer>
 			</Card>
 
-					{/* Surat Terbanyak & Pengajuan Terbaru & Ide Inovatif */}
+			{/* BOTTOM SECTION - 3 COLUMNS */}
 			<Grid gutter="md">
-						{/* Surat Terbanyak */}
-						<GridCol span={{ base: 12, lg: 4 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
-								<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
+				{/* LEFT: SURAT TERBANYAK */}
+				<Grid.Col span={{ base: 12, lg: 4 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Title order={4} c={dark ? "white" : "gray.9"} mb="md">
 							Surat Terbanyak
 						</Title>
 						<ResponsiveContainer width="100%" height={250}>
-									<BarChart data={suratData} layout="horizontal">
+							<BarChart data={suratData} layout="vertical">
 								<CartesianGrid
 									strokeDasharray="3 3"
 									horizontal={false}
-											stroke={dark ? "var(--mantine-color-gray-7)" : "var(--mantine-color-gray-3)"}
+									stroke={dark ? "#334155" : "#e5e7eb"}
 								/>
 								<XAxis
-											dataKey="jumlah"
+									type="number"
 									axisLine={false}
 									tickLine={false}
-											tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+									tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
 								/>
 								<YAxis
-											dataKey="jenis"
 									type="category"
+									dataKey="jenis"
 									axisLine={false}
 									tickLine={false}
-											tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+									tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
 									width={80}
 								/>
 								<Tooltip
-											contentStyle={dark
-												? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
-												: {}}
-										/>
-										<Bar
-											dataKey="jumlah"
-											fill={dark ? "var(--mantine-color-blue-6)" : "var(--mantine-color-blue-filled)"}
-											radius={[0, 4, 4, 0]}
+									contentStyle={{
+										backgroundColor: dark ? "#1E293B" : "white",
+										borderColor: dark ? "#334155" : "#e5e7eb",
+										borderRadius: "8px",
+									}}
 								/>
+								<Bar dataKey="jumlah" fill="#1E3A5F" radius={[0, 4, 4, 0]} />
 							</BarChart>
 						</ResponsiveContainer>
 					</Card>
-						</GridCol>
+				</Grid.Col>
 
-						{/* Pengajuan Terbaru */}
-						<GridCol span={{ base: 12, lg: 4 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
-								<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
+				{/* CENTER: PENGAJUAN TERBARU */}
+				<Grid.Col span={{ base: 12, lg: 4 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Title order={4} c={dark ? "white" : "gray.9"} mb="md">
 							Pengajuan Terbaru
 						</Title>
+						<Stack gap="sm">
 							{pengajuanTerbaru.map((item, index) => (
-									<Box key={index}>
+								<Card
+									key={index}
+									p="sm"
+									radius="md"
+									withBorder
+									bg={dark ? "#334155" : "#F1F5F9"}
+									style={{
+										borderColor: "transparent",
+										transition: "background-color 0.15s ease",
+									}}
+								>
 									<Group justify="space-between">
 										<Stack gap={0}>
-												<Text fw={500} c={dark ? "dark.0" : "black"}>{item.nama}</Text>
-												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>{item.jenis}</Text>
+											<Text fw={600} c={dark ? "white" : "gray.9"}>
+												{item.nama}
+											</Text>
+											<Text size="sm" c="dimmed">
+												{item.jenis}
+											</Text>
 										</Stack>
 										<Stack gap={0} align="flex-end">
-												<Badge color={getStatusColor(item.status)} variant="light">
+											<Badge
+												color={getStatusColor(item.status)}
+												variant="light"
+												radius="sm"
+											>
 												{item.status}
 											</Badge>
-												<Text size="xs" c={dark ? "dark.4" : "dimmed"}>{item.waktu}</Text>
+											<Text size="xs" c="dimmed">
+												{item.waktu}
+											</Text>
 										</Stack>
 									</Group>
-										<Divider my="sm" />
-									</Box>
-								))}
 								</Card>
-						</GridCol>
+							))}
+						</Stack>
+					</Card>
+				</Grid.Col>
 
-						{/* Ajuan Ide Inovatif */}
-						<GridCol span={{ base: 12, lg: 4 }}>
-							<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}  h="100%">
-								<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
+				{/* RIGHT: AJUAN IDE INOVATIF */}
+				<Grid.Col span={{ base: 12, lg: 4 }}>
+					<Card
+						p="md"
+						radius="xl"
+						withBorder
+						bg={dark ? "#1E293B" : "white"}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+						}}
+						h="100%"
+					>
+						<Title order={4} c={dark ? "white" : "gray.9"} mb="md">
 							Ajuan Ide Inovatif
 						</Title>
+						<Stack gap="sm">
 							{ideInovatif.map((item, index) => (
-									<Box key={index}>
+								<Card
+									key={index}
+									p="sm"
+									radius="md"
+									withBorder
+									bg={dark ? "#334155" : "#F1F5F9"}
+									style={{
+										borderColor: "transparent",
+										transition: "background-color 0.15s ease",
+									}}
+								>
 									<Group justify="space-between">
 										<Stack gap={0}>
-												<Text fw={500} c={dark ? "dark.0" : "black"}>{item.judul}</Text>
-												<Text size="sm" c={dark ? "dark.3" : "dimmed"}>{item.nama}</Text>
-											</Stack>
-											<Group>
-												<Badge color="blue" variant="light">
-													{item.kategori}
-												</Badge>
-												<ActionIcon variant="subtle" color="darmasaba-blue">
-													<IconChevronRight size={16} />
-												</ActionIcon>
-											</Group>
-										</Group>
-										<Divider my="sm" />
-									</Box>
-								))}
-							</Card>
-						</GridCol>
-					</Grid>
-
-					{/* Complaint Submission Form and List */}
-					<Grid gutter="md">
-						{/* Complaint Submission Form */}
-						<GridCol span={{ base: 12, lg: 4 }}>
-							<Card p="md" withBorder radius="md" h="100%" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-								<Card.Section withBorder inheritPadding py="xs">
-									<Title order={3} py="xs">Ajukan Pengaduan</Title>
-								</Card.Section>
-								<Card.Section>
-									<form onSubmit={handleSubmitComplaint}>
-										<Stack gap="md" p={"sm"}>
-											<TextInput
-												label="Judul Pengaduan"
-												id="title"
-												name="title"
-												value={newComplaint.title}
-												onChange={handleInputChange}
-												placeholder="Masukkan judul pengaduan"
-												required
-												withAsterisk
-											/>
-
-											<Select
-												label="Kategori"
-												id="category"
-												name="category"
-												value={newComplaint.category}
-												onChange={handleSelectChange}
-												placeholder="Pilih kategori"
-												data={[
-													{ value: "infrastruktur", label: "Infrastruktur" },
-													{ value: "administrasi", label: "Administrasi" },
-													{ value: "utilitas", label: "Utilitas" },
-													{ value: "sanitasi", label: "Sanitasi" },
-													{ value: "kesehatan", label: "Kesehatan" },
-													{ value: "pendidikan", label: "Pendidikan" },
-												]}
-												clearable
-											/>
-
-											<Textarea
-												label="Deskripsi"
-												id="description"
-												name="description"
-												value={newComplaint.description}
-												onChange={handleInputChange}
-												placeholder="Jelaskan pengaduan Anda secara detail..."
-												minRows={4}
-												required
-												withAsterisk
-											/>
-
-											<Button type="submit" mt="md" color="darmasaba-blue">
-												Kirim Pengaduan
-											</Button>
-										</Stack>
-									</form>
-								</Card.Section>
-							</Card>
-						</GridCol>
-
-						{/* Complaints List */}
-						<GridCol span={{ base: 12, lg: 8 }}>
-							<Card withBorder radius="md" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-								<Card.Section withBorder inheritPadding py="xs">
-									<Title order={3} py="xs">Daftar Pengaduan</Title>
-								</Card.Section>
-								<Card.Section py="md" px="xs">
-									<Table withColumnBorders>
-										<Table.Thead>
-											<Table.Tr>
-												<Table.Th><Text c={dark ? "white" : "dark.3" }>Judul</Text></Table.Th>
-												<Table.Th><Text c={dark ? "white" : "dark.3" }>Kategori</Text></Table.Th>
-												<Table.Th><Text c={dark ? "white" : "dark.3" }>Status</Text></Table.Th>
-												<Table.Th><Text c={dark ? "white" : "dark.3" }>Prioritas</Text></Table.Th>
-												<Table.Th><Text c={dark ? "white" : "dark.3" }>Tanggal</Text></Table.Th>
-											</Table.Tr>
-										</Table.Thead>
-										<Table.Tbody>
-											{complaintRows}
-										</Table.Tbody>
-									</Table>
-								</Card.Section>
-							</Card>
-						</GridCol>
-					</Grid>
-				</>
-			) : (
-				<Stack gap="lg">
-					<Card withBorder radius="md">
-						<Card.Section withBorder inheritPadding py="xs">
-							<Title order={3} py="xs">Layanan Publik Tersedia</Title>
-						</Card.Section>
-						<Card.Section pt="md">
-							<Grid gutter="md">
-								{services.map((service) => (
-									<GridCol key={service.id} span={{ base: 12, md: 6, lg: 4 }}>
-										<Card withBorder radius="md" h="100%">
-											<Title order={4} mb="sm">{service.name}</Title>
-											<Text size="sm" c={dark ? "white" : "dark.3" } mb="md">
-												{service.description}
+											<Text fw={600} c={dark ? "white" : "gray.9"}>
+												{item.judul}
 											</Text>
-											<Group justify="space-between">
-												<Badge
-													variant="filled"
-													color={
-														service.status === "Available"
-															? "green"
-															: service.status === "Limited"
-																? "yellow"
-																: "red"
-													}
+											<Text size="sm" c="dimmed">
+												{item.nama}
+											</Text>
+											<Text size="xs" c="dimmed">
+												{item.waktu}
+											</Text>
+										</Stack>
+										<Button
+											size="xs"
+											variant="light"
+											color="darmasaba-blue"
+											radius="md"
 										>
-													{service.status}
-												</Badge>
-												<Text size="sm" c={dark ? "white" : "dark.3" }>
-													{service.category}
-												</Text>
+											Detail
+										</Button>
 									</Group>
-											<Text size="xs" c={dark ? "white" : "dark.3" } mt="sm">
-												Terakhir diperbarui: {service.lastUpdated}
-											</Text>
 								</Card>
-									</GridCol>
 							))}
-							</Grid>
-						</Card.Section>
-					</Card>
-
-					<Card withBorder radius="md">
-						<Card.Section withBorder inheritPadding py="xs">
-							<Title order={3} py="xs">Statistik Layanan</Title>
-						</Card.Section>
-						<Card.Section pt="md">
-							<Grid gutter="md">
-								<GridCol span={{ base: 12, md: 4 }}>
-									<Card p="md" bg={dark ? "dark.7" : "gray.0"} radius="md">
-										<Title order={4} mb="xs">Jumlah Layanan Tersedia</Title>
-										<Text size="xl" fw={700} c="darmasaba-blue">
-											12
-										</Text>
-									</Card>
-								</GridCol>
-								<GridCol span={{ base: 12, md: 4 }}>
-									<Card p="md" bg={dark ? "dark.7" : "gray.0"} radius="md">
-										<Title order={4} mb="xs">Layanan Terpopuler</Title>
-										<Text size="xl" fw={700} c="darmasaba-success">
-											4
-										</Text>
-									</Card>
-								</GridCol>
-								<GridCol span={{ base: 12, md: 4 }}>
-									<Card p="md" bg={dark ? "dark.7" : "gray.0"} radius="md">
-										<Title order={4} mb="xs">Permintaan Baru</Title>
-										<Text size="xl" fw={700} c="darmasaba-warning">
-											23
-										</Text>
-									</Card>
-								</GridCol>
-							</Grid>
-						</Card.Section>
-					</Card>
 						</Stack>
-			)}
+					</Card>
+				</Grid.Col>
+			</Grid>
 		</Stack>
 	);
 };

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

@@ -1,30 +1,80 @@
-import { Card, Title, Text, Space, Button, Group, Alert, Table, ActionIcon, Modal, TextInput, Select, useMantineColorScheme } from '@mantine/core';
-import { IconInfoCircle, IconUserPlus, IconTrash, IconEdit, IconUser } from '@tabler/icons-react';
-import { useState } from 'react';
+import {
+	ActionIcon,
+	Alert,
+	Button,
+	Card,
+	Group,
+	Modal,
+	Select,
+	Space,
+	Table,
+	Text,
+	TextInput,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import {
+	IconEdit,
+	IconInfoCircle,
+	IconTrash,
+	IconUser,
+	IconUserPlus,
+} from "@tabler/icons-react";
+import { useState } from "react";
 
 const AksesDanTimSettings = () => {
 	const [opened, setOpened] = useState(false);
 	const { colorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
+	const dark = colorScheme === "dark";
 
 	// Sample team members data
 	const teamMembers = [
-    { id: 1, name: 'Admin Utama', email: 'admin@desa.go.id', role: 'Administrator', status: 'Aktif' },
-    { id: 2, name: 'Operator Desa', email: 'operator@desa.go.id', role: 'Operator', status: 'Aktif' },
-    { id: 3, name: 'Staff Keuangan', email: 'keuangan@desa.go.id', role: 'Keuangan', status: 'Aktif' },
-    { id: 4, name: 'Staff Umum', email: 'umum@desa.go.id', role: 'Umum', status: 'Nonaktif' },
+		{
+			id: 1,
+			name: "Admin Utama",
+			email: "admin@desa.go.id",
+			role: "Administrator",
+			status: "Aktif",
+		},
+		{
+			id: 2,
+			name: "Operator Desa",
+			email: "operator@desa.go.id",
+			role: "Operator",
+			status: "Aktif",
+		},
+		{
+			id: 3,
+			name: "Staff Keuangan",
+			email: "keuangan@desa.go.id",
+			role: "Keuangan",
+			status: "Aktif",
+		},
+		{
+			id: 4,
+			name: "Staff Umum",
+			email: "umum@desa.go.id",
+			role: "Umum",
+			status: "Nonaktif",
+		},
 	];
 
 	const roles = [
-    { value: 'administrator', label: 'Administrator' },
-    { value: 'operator', label: 'Operator' },
-    { value: 'keuangan', label: 'Keuangan' },
-    { value: 'umum', label: 'Umum' },
-    { value: 'keamanan', label: 'Keamanan' },
+		{ value: "administrator", label: "Administrator" },
+		{ value: "operator", label: "Operator" },
+		{ value: "keuangan", label: "Keuangan" },
+		{ value: "umum", label: "Umum" },
+		{ value: "keamanan", label: "Keamanan" },
 	];
 
 	return (
-    <Card withBorder radius="md" p="xl" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+		<Card
+			withBorder
+			radius="md"
+			p="xl"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "white" }}
+		>
 			<Modal
 				opened={opened}
 				onClose={() => setOpened(false)}
@@ -48,19 +98,28 @@ const AksesDanTimSettings = () => {
 					mb="md"
 				/>
 				<Group justify="flex-end" mt="xl">
-          <Button variant="outline" onClick={() => setOpened(false)}>Batal</Button>
+					<Button variant="outline" onClick={() => setOpened(false)}>
+						Batal
+					</Button>
 					<Button>Undang Anggota</Button>
 				</Group>
 			</Modal>
 
-      <Title order={2} mb="lg">Akses & Tim</Title>
-      <Text color="dimmed" mb="xl">Kelola akses dan anggota tim Anda</Text>
+			<Title order={2} mb="lg">
+				Akses & Tim
+			</Title>
+			<Text color="dimmed" mb="xl">
+				Kelola akses dan anggota tim Anda
+			</Text>
 
 			<Space h="lg" />
 
 			<Group justify="space-between" mb="md">
 				<Title order={4}>Anggota Tim</Title>
-        <Button leftSection={<IconUserPlus size={16} />} onClick={() => setOpened(true)}>
+				<Button
+					leftSection={<IconUserPlus size={16} />}
+					onClick={() => setOpened(true)}
+				>
 					Tambah Anggota
 				</Button>
 			</Group>
@@ -89,7 +148,7 @@ const AksesDanTimSettings = () => {
 								<Text fw={500}>{member.role}</Text>
 							</Table.Td>
 							<Table.Td>
-                <Text c={member.status === 'Aktif' ? 'green' : 'red'} fw={500}>
+								<Text c={member.status === "Aktif" ? "green" : "red"} fw={500}>
 									{member.status}
 								</Text>
 							</Table.Td>
@@ -110,8 +169,14 @@ const AksesDanTimSettings = () => {
 
 			<Space h="xl" />
 
-      <Alert icon={<IconInfoCircle size={16} />} title="Informasi" color="blue" mb="md">
-        Administrator memiliki akses penuh ke semua fitur. Peran lainnya memiliki akses terbatas sesuai kebutuhan.
+			<Alert
+				icon={<IconInfoCircle size={16} />}
+				title="Informasi"
+				color="blue"
+				mb="md"
+			>
+				Administrator memiliki akses penuh ke semua fitur. Peran lainnya
+				memiliki akses terbatas sesuai kebutuhan.
 			</Alert>
 
 			<Group justify="flex-end" mt="xl">

src/components/pengaturan/keamanan.tsx

@@ -1,13 +1,34 @@
-import { Card, Title, Text, Space, Button, Group, Alert, PasswordInput, Switch, useMantineColorScheme } from '@mantine/core';
-import { IconInfoCircle, IconLock } from '@tabler/icons-react';
+import {
+	Alert,
+	Button,
+	Card,
+	Group,
+	PasswordInput,
+	Space,
+	Switch,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { IconInfoCircle, IconLock } from "@tabler/icons-react";
 
 const KeamananSettings = () => {
 	const { colorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
+	const dark = colorScheme === "dark";
 	return (
-    <Card withBorder radius="md" p="xl" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-      <Title order={2} mb="lg">Pengaturan Keamanan</Title>
-      <Text color="dimmed" mb="xl">Kelola keamanan akun Anda</Text>
+		<Card
+			withBorder
+			radius="md"
+			p="xl"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "white" }}
+		>
+			<Title order={2} mb="lg">
+				Pengaturan Keamanan
+			</Title>
+			<Text color="dimmed" mb="xl">
+				Kelola keamanan akun Anda
+			</Text>
 
 			<Space h="lg" />
 
@@ -38,12 +59,24 @@ const KeamananSettings = () => {
 
 			<Space h="md" />
 
-      <Alert icon={<IconLock size={16} />} title="Keamanan" color="orange" mb="md">
-        Gunakan kata sandi yang kuat dan unik. Hindari menggunakan kata sandi yang sama di banyak layanan.
+			<Alert
+				icon={<IconLock size={16} />}
+				title="Keamanan"
+				color="orange"
+				mb="md"
+			>
+				Gunakan kata sandi yang kuat dan unik. Hindari menggunakan kata sandi
+				yang sama di banyak layanan.
 			</Alert>
 
-      <Alert icon={<IconInfoCircle size={16} />} title="Informasi" color="blue" mb="md">
-        Setelah mengganti kata sandi, Anda akan diminta logout dari semua perangkat.
+			<Alert
+				icon={<IconInfoCircle size={16} />}
+				title="Informasi"
+				color="blue"
+				mb="md"
+			>
+				Setelah mengganti kata sandi, Anda akan diminta logout dari semua
+				perangkat.
 			</Alert>
 
 			<Group justify="flex-end" mt="xl">

src/components/pengaturan/notifikasi.tsx

@@ -1,18 +1,41 @@
-import { Card, Title, Text, Space, Switch, Group, Alert, Checkbox, Button, useMantineColorScheme } from '@mantine/core';
-import { IconInfoCircle } from '@tabler/icons-react';
+import {
+	Alert,
+	Button,
+	Card,
+	Checkbox,
+	Group,
+	Space,
+	Switch,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
 
 const NotifikasiSettings = () => {
 	const { colorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
+	const dark = colorScheme === "dark";
 	return (
-    <Card withBorder radius="md" p="xl" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-      <Title order={2} mb="lg">Pengaturan Notifikasi</Title>
-      <Text color="dimmed" mb="xl">Kelola preferensi notifikasi Anda</Text>
+		<Card
+			withBorder
+			radius="md"
+			p="xl"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "white" }}
+		>
+			<Title order={2} mb="lg">
+				Pengaturan Notifikasi
+			</Title>
+			<Text color="dimmed" mb="xl">
+				Kelola preferensi notifikasi Anda
+			</Text>
 
 			<Space h="lg" />
 
-      <Checkbox.Group defaultValue={['email', 'push']} mb="md">
-        <Title order={4} mb="sm">Metode Notifikasi</Title>
+			<Checkbox.Group defaultValue={["email", "push"]} mb="md">
+				<Title order={4} mb="sm">
+					Metode Notifikasi
+				</Title>
 				<Group>
 					<Checkbox value="email" label="Email" />
 					<Checkbox value="push" label="Notifikasi Push" />
@@ -29,7 +52,9 @@ const NotifikasiSettings = () => {
 
 			<Space h="md" />
 
-      <Title order={4} mb="sm">Jenis Notifikasi</Title>
+			<Title order={4} mb="sm">
+				Jenis Notifikasi
+			</Title>
 			<Group align="start">
 				<Switch label="Pengaduan Baru" defaultChecked />
 				<Switch label="Update Status Pengaduan" defaultChecked />
@@ -40,8 +65,14 @@ const NotifikasiSettings = () => {
 
 			<Space h="md" />
 
-      <Alert icon={<IconInfoCircle size={16} />} title="Tip" color="blue" mb="md">
-        Anda dapat menyesuaikan frekuensi notifikasi mingguan sesuai kebutuhan Anda.
+			<Alert
+				icon={<IconInfoCircle size={16} />}
+				title="Tip"
+				color="blue"
+				mb="md"
+			>
+				Anda dapat menyesuaikan frekuensi notifikasi mingguan sesuai kebutuhan
+				Anda.
 			</Alert>
 
 			<Group justify="flex-end" mt="xl">

src/components/pengaturan/umum.tsx

@@ -1,13 +1,35 @@
-import { Card, Title, Text, Space, TextInput, Select, Button, Group, Switch, Alert, useMantineColorScheme } from '@mantine/core';
-import { IconInfoCircle } from '@tabler/icons-react';
+import {
+	Alert,
+	Button,
+	Card,
+	Group,
+	Select,
+	Space,
+	Switch,
+	Text,
+	TextInput,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
 
 const UmumSettings = () => {
 	const { colorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
+	const dark = colorScheme === "dark";
 	return (
-    <Card withBorder radius="md" p="xl" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-      <Title order={2} mb="lg">Pengaturan Umum</Title>
-      <Text color="dimmed" mb="xl">Kelola pengaturan umum aplikasi Anda</Text>
+		<Card
+			withBorder
+			radius="md"
+			p="xl"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "white" }}
+		>
+			<Title order={2} mb="lg">
+				Pengaturan Umum
+			</Title>
+			<Text color="dimmed" mb="xl">
+				Kelola pengaturan umum aplikasi Anda
+			</Text>
 
 			<Space h="lg" />
 
@@ -21,8 +43,8 @@ const UmumSettings = () => {
 			<Select
 				label="Bahasa Aplikasi"
 				data={[
-          { value: 'id', label: 'Indonesia' },
-          { value: 'en', label: 'English' },
+					{ value: "id", label: "Indonesia" },
+					{ value: "en", label: "English" },
 				]}
 				defaultValue="id"
 				mb="md"
@@ -31,9 +53,9 @@ const UmumSettings = () => {
 			<Select
 				label="Zona Waktu"
 				data={[
-          { value: 'Asia/Jakarta', label: 'Asia/Jakarta (GMT+7)' },
-          { value: 'Asia/Makassar', label: 'Asia/Makassar (GMT+8)' },
-          { value: 'Asia/Jayapura', label: 'Asia/Jayapura (GMT+9)' },
+					{ value: "Asia/Jakarta", label: "Asia/Jakarta (GMT+7)" },
+					{ value: "Asia/Makassar", label: "Asia/Makassar (GMT+8)" },
+					{ value: "Asia/Jayapura", label: "Asia/Jayapura (GMT+9)" },
 				]}
 				defaultValue="Asia/Jakarta"
 				mb="md"
@@ -43,8 +65,14 @@ const UmumSettings = () => {
 				<Switch label="Notifikasi Email" defaultChecked />
 			</Group>
 
-      <Alert icon={<IconInfoCircle size={16} />} title="Informasi" color="blue" mb="md">
-        Beberapa pengaturan mungkin memerlukan restart aplikasi untuk diterapkan sepenuhnya.
+			<Alert
+				icon={<IconInfoCircle size={16} />}
+				title="Informasi"
+				color="blue"
+				mb="md"
+			>
+				Beberapa pengaturan mungkin memerlukan restart aplikasi untuk diterapkan
+				sepenuhnya.
 			</Alert>
 
 			<Group justify="flex-end" mt="xl">

src/components/sidebar.tsx

@@ -1,16 +1,17 @@
-import { useNavigate, useLocation } from "@tanstack/react-router";
-import { Search, ChevronDown, ChevronUp } from "lucide-react";
 import {
-	Stack,
-	Group,
-	Text,
 	Badge,
+	Box,
+	Collapse,
+	Group,
+	Image,
 	Input,
 	NavLink as MantineNavLink,
-	Box,
+	Stack,
+	Text,
 	useMantineColorScheme,
-	Collapse,
 } from "@mantine/core";
+import { useLocation, useNavigate } from "@tanstack/react-router";
+import { ChevronDown, ChevronUp, Search } from "lucide-react";
 import { useState } from "react";
 
 interface SidebarProps {
@@ -21,66 +22,46 @@ export function Sidebar({ className }: SidebarProps) {
 	const location = useLocation();
 	const navigate = useNavigate();
 	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === 'dark';
-	const isActiveBg = colorScheme === 'dark' ? "#182949" : "#E6F0FF";
-	const isActiveBorder = colorScheme === 'dark' ? "#00398D" : "#1F41AE";
+	const dark = colorScheme === "dark";
+	const isActiveBg = colorScheme === "dark" ? "#182949" : "#E6F0FF";
+	const isActiveBorder = colorScheme === "dark" ? "#00398D" : "#1F41AE";
 
 	// State for settings submenu collapse
 	const [settingsOpen, setSettingsOpen] = useState(
-		location.pathname.startsWith('/dashboard/pengaturan')
+		location.pathname.startsWith("/pengaturan"),
 	);
 
 	// Define menu items with their paths
 	const menuItems = [
-		{ 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" },
+		{ 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" },
 	];
 
 	// Settings submenu items
 	const settingsItems = [
-		{ 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" },
+		{ name: "Umum", path: "/pengaturan/umum" },
+		{ name: "Notifikasi", path: "/pengaturan/notifikasi" },
+		{ name: "Keamanan", path: "/pengaturan/keamanan" },
+		{ name: "Akses & Tim", path: "/pengaturan/akses-dan-tim" },
 	];
 
 	// Check if any settings submenu is active
-	const isSettingsActive = settingsItems.some(item => 
-		location.pathname === item.path
+	const isSettingsActive = settingsItems.some(
+		(item) => location.pathname === item.path,
 	);
 
 	return (
 		<Box className={className}>
 			{/* Logo */}
-			<Box p="md" style={{ borderBottom: "1px solid var(--mantine-color-gray-3)" }}>
-				<Group gap="xs">
-					<Badge
-						color="dark"
-						variant="filled"
-						size="xl"
-						radius="md"
-						py="xs"
-						px="md"
-						style={{ fontSize: "1.5rem", fontWeight: "bold" }}
-					>
-						DESA
-					</Badge>
-					<Badge color="green" variant="filled" size="md" radius="md">
-						+
-					</Badge>
-				</Group>
-				<Text size="xs" c="dimmed" mt="xs">
-					Digitalisasi Desa Transparansi Kerja
-				</Text>
-			</Box>
+			<Image src={dark ? "/white.png" : "/light-mode.png"} alt="Logo" />
 
 			{/* Search */}
 			<Box p="md">
@@ -112,7 +93,9 @@ export function Sidebar({ className }: SidebarProps) {
 							style={{
 								background: isActive ? isActiveBg : "transparent",
 								fontWeight: isActive ? "bold" : "normal",
-								borderLeft: isActive ? `4px solid ${isActiveBorder}` : "4px solid transparent",
+								borderLeft: isActive
+									? `4px solid ${isActiveBorder}`
+									: "4px solid transparent",
 								borderRadius: "8px",
 								transition: "all 200ms ease",
 								margin: "2px 0",
@@ -121,8 +104,8 @@ export function Sidebar({ className }: SidebarProps) {
 								body: {
 									"&:hover": {
 										background: "#F1F5F9",
-									}
-								}
+									},
+								},
 							}}
 						/>
 					);
@@ -132,7 +115,9 @@ export function Sidebar({ className }: SidebarProps) {
 				<Box>
 					<MantineNavLink
 						onClick={() => setSettingsOpen(!settingsOpen)}
-						rightSection={settingsOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+						rightSection={
+							settingsOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />
+						}
 						label="Pengaturan"
 						active={isSettingsActive}
 						variant="subtle"
@@ -140,7 +125,9 @@ export function Sidebar({ className }: SidebarProps) {
 						style={{
 							background: isSettingsActive ? isActiveBg : "transparent",
 							fontWeight: isSettingsActive ? "bold" : "normal",
-							borderLeft: isSettingsActive ? `4px solid ${isActiveBorder}` : "4px solid transparent",
+							borderLeft: isSettingsActive
+								? `4px solid ${isActiveBorder}`
+								: "4px solid transparent",
 							borderRadius: "8px",
 							transition: "all 200ms ease",
 							margin: "2px 0",
@@ -149,12 +136,16 @@ export function Sidebar({ className }: SidebarProps) {
 							body: {
 								"&:hover": {
 									background: "#F1F5F9",
-								}
-							}
+								},
+							},
 						}}
 					/>
 					<Collapse in={settingsOpen}>
-						<Stack gap={0} ml="lg" style={{ overflowY: 'auto', maxHeight: '200px' }}>
+						<Stack
+							gap={0}
+							ml="lg"
+							style={{ overflowY: "auto", maxHeight: "200px" }}
+						>
 							{settingsItems.map((item, index) => {
 								const isActive = location.pathname === item.path;
 								return (
@@ -168,7 +159,9 @@ export function Sidebar({ className }: SidebarProps) {
 										style={{
 											background: isActive ? isActiveBg : "transparent",
 											fontWeight: isActive ? "bold" : "normal",
-											borderLeft: isActive ? `4px solid ${isActiveBorder}` : "4px solid transparent",
+											borderLeft: isActive
+												? `4px solid ${isActiveBorder}`
+												: "4px solid transparent",
 											borderRadius: "8px",
 											transition: "all 200ms ease",
 											margin: "2px 0",
@@ -177,8 +170,8 @@ export function Sidebar({ className }: SidebarProps) {
 											body: {
 												"&:hover": {
 													background: "#F1F5F9",
-												}
-											}
+												},
+											},
 										}}
 									/>
 								);

src/components/sosial-page.tsx

@@ -1,287 +1,45 @@
-import { useState } from "react";
-import { 
-  Card, 
-  Grid, 
-  GridCol, 
-  Group, 
-  Text, 
-  Title, 
-  Progress, 
-  Stack,
-  useMantineColorScheme,
-  Badge,
-  List,
-  ThemeIcon
-} from "@mantine/core";
-import { 
-  IconHeartbeat, 
-  IconBabyCarriage, 
-  IconStethoscope, 
-  IconMedicalCross, 
-  IconSchool, 
-  IconBook, 
-  IconCalendarEvent, 
-  IconAward
-} from "@tabler/icons-react";
+import { Grid, GridCol, Stack } from "@mantine/core";
+import { SummaryCards } from "./sosial/summary-cards";
+import { HealthStats } from "./sosial/health-stats";
+import { PosyanduSchedule } from "./sosial/posyandu-schedule";
+import { Pendidikan } from "./sosial/pendidikan";
+import { Beasiswa } from "./sosial/beasiswa";
+import { EventCalendar } from "./sosial/event-calendar";
 
 const SosialPage = () => {
-  const { colorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
-  
-  // Sample data for health statistics
-  const healthStats = {
-    ibuHamil: 87,
-    balita: 342,
-    alertStunting: 12,
-    posyanduAktif: 8,
-  };
-
-  // Sample data for health progress
-  const healthProgress = [
-    { label: "Imunisasi Lengkap", value: 92, color: "green" },
-    { label: "Pemeriksaan Rutin", value: 88, color: "blue" },
-    { label: "Gizi Baik", value: 86, color: "teal" },
-    { label: "Target Stunting", value: 14, color: "red" },
-  ];
-
-  // Sample data for posyandu schedule
-  const posyanduSchedule = [
-    { nama: "Posyandu Mawar", tanggal: "Senin, 15 Feb 2026", jam: "08:00 - 11:00" },
-    { nama: "Posyandu Melati", tanggal: "Selasa, 16 Feb 2026", jam: "08:00 - 11:00" },
-    { nama: "Posyandu Dahlia", tanggal: "Rabu, 17 Feb 2026", jam: "08:00 - 11:00" },
-    { nama: "Posyandu Anggrek", tanggal: "Kamis, 18 Feb 2026", jam: "08:00 - 11:00" },
-  ];
-
-  // Sample data for education stats
-  const educationStats = {
-    siswa: {
-      tk: 125,
-      sd: 480,
-      smp: 210,
-      sma: 150,
-    },
-    sekolah: {
-      jumlah: 8,
-      guru: 42,
-    }
-  };
-
-  // Sample data for scholarships
-  const scholarshipData = {
-    penerima: 45,
-    dana: "Rp 1.200.000.000",
-    tahunAjaran: "2025/2026",
-  };
-
-  // Sample data for cultural events
-  const culturalEvents = [
-    { nama: "Hari Kesaktian Pancasila", tanggal: "1 Oktober 2025", lokasi: "Balai Desa" },
-    { nama: "Festival Budaya Desa", tanggal: "20 Mei 2026", lokasi: "Lapangan Desa" },
-    { nama: "Perayaan HUT Desa", tanggal: "17 Agustus 2026", lokasi: "Balai Desa" },
-  ];
-
 	return (
 		<Stack gap="lg">
-      {/* Health Statistics Cards */}
+			{/* Top Summary Cards - 4 Grid */}
+			<SummaryCards />
+
+			{/* Second Row - 2 Column Grid */}
 			<Grid gutter="md">
-        <GridCol span={{ base: 12, sm: 6, md: 3 }}>
-          <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-            <Group justify="space-between" align="center">
-              <Stack gap={0}>
-                <Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-                  Ibu Hamil Aktif
-                </Text>
-                <Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-                  {healthStats.ibuHamil}
-                </Text>
-              </Stack>
-              <ThemeIcon variant="light" color="darmasaba-blue" size="xl" radius="xl">
-                <IconHeartbeat size={24} />
-              </ThemeIcon>
-            </Group>
-          </Card>
+				{/* Left - Statistik Kesehatan */}
+				<GridCol span={{ base: 12, lg: 6 }}>
+					<HealthStats />
 				</GridCol>
 
-        <GridCol span={{ base: 12, sm: 6, md: 3 }}>
-          <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-            <Group justify="space-between" align="center">
-              <Stack gap={0}>
-                <Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-                  Balita Terdaftar
-                </Text>
-                <Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-                  {healthStats.balita}
-                </Text>
-              </Stack>
-              <ThemeIcon variant="light" color="darmasaba-success" size="xl" radius="xl">
-                <IconBabyCarriage size={24} />
-              </ThemeIcon>
-            </Group>
-          </Card>
-        </GridCol>
-
-        <GridCol span={{ base: 12, sm: 6, md: 3 }}>
-          <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-            <Group justify="space-between" align="center">
-              <Stack gap={0}>
-                <Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-                  Alert Stunting
-                </Text>
-                <Text size="xl" fw={700} c="red">
-                  {healthStats.alertStunting}
-                </Text>
-              </Stack>
-              <ThemeIcon variant="light" color="red" size="xl" radius="xl">
-                <IconStethoscope size={24} />
-              </ThemeIcon>
-            </Group>
-          </Card>
-        </GridCol>
-
-        <GridCol span={{ base: 12, sm: 6, md: 3 }}>
-          <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-            <Group justify="space-between" align="center">
-              <Stack gap={0}>
-                <Text size="sm" c={dark ? "dark.3" : "dimmed"}>
-                  Posyandu Aktif
-                </Text>
-                <Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
-                  {healthStats.posyanduAktif}
-                </Text>
-              </Stack>
-              <ThemeIcon variant="light" color="darmasaba-warning" size="xl" radius="xl">
-                <IconMedicalCross size={24} />
-              </ThemeIcon>
-            </Group>
-          </Card>
+				{/* Right - Jadwal Posyandu */}
+				<GridCol span={{ base: 12, lg: 6 }}>
+					<PosyanduSchedule />
 				</GridCol>
 			</Grid>
 
-      {/* Health Progress Bars */}
-      <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-        <Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Statistik Kesehatan</Title>
-        <Stack gap="md">
-          {healthProgress.map((item, index) => (
-            <div key={index}>
-              <Group justify="space-between" mb={5}>
-                <Text size="sm" fw={500} c={dark ? "dark.0" : "black"}>
-                  {item.label}
-                </Text>
-                <Text size="sm" fw={600} c={dark ? "dark.0" : "black"}>
-                  {item.value}%
-                </Text>
-              </Group>
-              <Progress
-                value={item.value}
-                size="lg"
-                radius="xl"
-                color={item.color}
-              />
-            </div>
-          ))}
-        </Stack>
-      </Card>
-
+			{/* Third Row - 2 Column Grid */}
 			<Grid gutter="md">
-        {/* Jadwal Posyandu */}
+				{/* Left - Pendidikan */}
 				<GridCol span={{ base: 12, lg: 6 }}>
-          <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
-            <Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Jadwal Posyandu</Title>
-            <Stack gap="sm">
-              {posyanduSchedule.map((item, index) => (
-                <Card key={index} p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }} h="100%">
-                  <Group justify="space-between">
-                    <Stack gap={0}>
-                      <Text fw={500} c={dark ? "dark.0" : "black"}>{item.nama}</Text>
-                      <Text size="sm" c={dark ? "dark.0" : "black"}>{item.tanggal}</Text>
-                    </Stack>
-                    <Badge variant="light" color="darmasaba-blue">
-                      {item.jam}
-                    </Badge>
-                  </Group>
-                </Card>
-              ))}
-            </Stack>
-          </Card>
+					<Pendidikan />
 				</GridCol>
 
-        {/* Pendidikan */}
+				{/* Right - Beasiswa Desa */}
 				<GridCol span={{ base: 12, lg: 6 }}>
-          <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%"> 
-            <Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Pendidikan</Title>
-            <Stack gap="md">
-              <Group justify="space-between">
-                <Text fw={500} c={dark ? "dark.0" : "black"}>TK / PAUD</Text>
-                <Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.siswa.tk}</Text>
-              </Group>
-              <Group justify="space-between">
-                <Text fw={500} c={dark ? "dark.0" : "black"}>SD</Text>
-                <Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.siswa.sd}</Text>
-              </Group>
-              <Group justify="space-between">
-                <Text fw={500} c={dark ? "dark.0" : "black"}>SMP</Text>
-                <Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.siswa.smp}</Text>
-              </Group>
-              <Group justify="space-between">
-                <Text fw={500} c={dark ? "dark.0" : "black"}>SMA</Text>
-                <Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.siswa.sma}</Text>
-              </Group>
-              
-              <Card withBorder radius="md" p="md" mt="md" bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
-                <Group justify="space-between">
-                  <Text fw={500} c={dark ? "dark.0" : "black"}>Jumlah Lembaga Pendidikan</Text>
-                  <Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.sekolah.jumlah}</Text>
-                </Group>
-                <Group justify="space-between" mt="sm">
-                  <Text fw={500} c={dark ? "dark.0" : "black"}>Jumlah Tenaga Pengajar</Text>
-                  <Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.sekolah.guru}</Text>
-                </Group>
-              </Card>
-            </Stack>
-          </Card>
+					<Beasiswa />
 				</GridCol>
 			</Grid>
 
-      <Grid gutter="md">
-        {/* Beasiswa Desa */}
-        <GridCol span={{ base: 12, lg: 6 }}>
-          <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
-            <Group justify="space-between" align="center">
-              <Stack gap={0}>
-                <Text size="sm" c={dark ? "dark.3" : "dimmed"}>Beasiswa Desa</Text>
-                <Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>Penerima: {scholarshipData.penerima}</Text>
-              </Stack>
-              <ThemeIcon variant="light" color="darmasaba-success" size="xl" radius="xl">
-                <IconAward size={24} />
-              </ThemeIcon>
-            </Group>
-            <Text mt="md" c={dark ? "dark.0" : "black"}>Dana Tersalurkan: <Text span fw={700}>{scholarshipData.dana}</Text></Text>
-            <Text mt="sm" c={dark ? "dark.3" : "dimmed"}>Tahun Ajaran: {scholarshipData.tahunAjaran}</Text>
-          </Card>
-        </GridCol>
-
-        {/* Kalender Event Budaya */}
-        <GridCol span={{ base: 12, lg: 6 }}>
-          <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
-            <Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Kalender Event Budaya</Title>
-            <List spacing="sm">
-              {culturalEvents.map((event, index) => (
-                <List.Item key={index} icon={
-                  <ThemeIcon color="darmasaba-blue" size={24} radius="xl">
-                    <IconCalendarEvent size={12} />
-                  </ThemeIcon>
-                }>
-                  <Group justify="space-between">
-                    <Text fw={500} c={dark ? "dark.0" : "black"}>{event.nama}</Text>
-                    <Text size="sm" c={dark ? "dark.3" : "dimmed"}>{event.lokasi}</Text>
-                  </Group>
-                  <Text size="sm" c={dark ? "dark.3" : "dimmed"}>{event.tanggal}</Text>
-                </List.Item>
-              ))}
-            </List>
-          </Card>
-        </GridCol>
-      </Grid>
+			{/* Bottom Section - Event Budaya */}
+			<EventCalendar />
 		</Stack>
 	);
 };

src/components/sosial/beasiswa.tsx

@@ -0,0 +1,69 @@
+import { Card, Group, Stack, Text, ThemeIcon, Title } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
+import { IconAward } from "@tabler/icons-react";
+
+interface ScholarshipData {
+	penerima: number;
+	dana: string;
+	tahunAjaran: string;
+}
+
+interface BeasiswaProps {
+	data?: ScholarshipData;
+}
+
+export const Beasiswa = ({ data }: BeasiswaProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData: ScholarshipData = {
+		penerima: 45,
+		dana: "Rp 1.200.000.000",
+		tahunAjaran: "2025/2026",
+	};
+
+	const displayData = data || defaultData;
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			h={"100%"}
+		>
+			<Group justify="space-between" align="center">
+				<Stack gap={2}>
+					<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+						Beasiswa Desa
+					</Text>
+					<Text size="xl" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						Penerima: {displayData.penerima}
+					</Text>
+				</Stack>
+				<ThemeIcon
+					variant="light"
+					color="darmasaba-success"
+					size="xl"
+					radius="xl"
+				>
+					<IconAward size={24} />
+				</ThemeIcon>
+			</Group>
+			<Stack gap="xs" mt="md">
+				<Group justify="space-between">
+					<Text c={dark ? "dark.3" : "dimmed"}>Dana Tersalurkan:</Text>
+					<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						{displayData.dana}
+					</Text>
+				</Group>
+				<Group justify="space-between">
+					<Text c={dark ? "dark.3" : "dimmed"}>Tahun Ajaran:</Text>
+					<Text c={dark ? "dark.0" : "#1e3a5f"}>{displayData.tahunAjaran}</Text>
+				</Group>
+			</Stack>
+		</Card>
+	);
+};

src/components/sosial/event-calendar.tsx

@@ -0,0 +1,94 @@
+import { Card, Group, Stack, Text, Title, ThemeIcon } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
+import { IconCalendarEvent } from "@tabler/icons-react";
+
+interface EventItem {
+	id: string;
+	nama: string;
+	tanggal: string;
+	lokasi: string;
+}
+
+interface EventCalendarProps {
+	data?: EventItem[];
+}
+
+export const EventCalendar = ({ data }: EventCalendarProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData: EventItem[] = [
+		{
+			id: "1",
+			nama: "Hari Kesaktian Pancasila",
+			tanggal: "1 Oktober 2025",
+			lokasi: "Balai Desa",
+		},
+		{
+			id: "2",
+			nama: "Festival Budaya Desa",
+			tanggal: "20 Mei 2026",
+			lokasi: "Lapangan Desa",
+		},
+		{
+			id: "3",
+			nama: "Perayaan HUT Desa",
+			tanggal: "17 Agustus 2026",
+			lokasi: "Balai Desa",
+		},
+	];
+
+	const displayData = data || defaultData;
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
+				Kalender Event Budaya
+			</Title>
+			<Stack gap="sm">
+				{displayData.map((event) => (
+					<Card
+						key={event.id}
+						p="md"
+						radius="md"
+						withBorder
+						bg={dark ? "#263852ff" : "#F1F5F9"}
+						style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+						hoverable
+					>
+						<Group justify="space-between" mb="xs">
+							<Group gap="sm" align="center">
+								<ThemeIcon
+									color="darmasaba-blue"
+									size="md"
+									radius="xl"
+									variant="light"
+								>
+									<IconCalendarEvent size={16} />
+								</ThemeIcon>
+								<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+									{event.nama}
+								</Text>
+							</Group>
+							<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+								{event.lokasi}
+							</Text>
+						</Group>
+						<Group pl={36}>
+							<Text size="sm" c={dark ? "dark.4" : "gray.6"}>
+								{event.tanggal}
+							</Text>
+						</Group>
+					</Card>
+				))}
+			</Stack>
+		</Card>
+	);
+};

src/components/sosial/health-stats.tsx

@@ -0,0 +1,66 @@
+import { Card, Group, Progress, Stack, Text, Title } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
+
+interface HealthProgressItem {
+	label: string;
+	value: number;
+	color: string;
+}
+
+interface HealthStatsProps {
+	data?: HealthProgressItem[];
+}
+
+export const HealthStats = ({ data }: HealthStatsProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData: HealthProgressItem[] = [
+		{ label: "Imunisasi Lengkap", value: 92, color: "green" },
+		{ label: "Pemeriksaan Rutin", value: 88, color: "blue" },
+		{ label: "Gizi Baik", value: 86, color: "teal" },
+		{ label: "Target Stunting", value: 14, color: "red" },
+	];
+
+	const displayData = data || defaultData;
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			h={'100%'}
+		>
+			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
+				Statistik Kesehatan
+			</Title>
+			<Stack gap="md">
+				{displayData.map((item, index) => (
+					<div key={index}>
+						<Group justify="space-between" mb={5}>
+							<Text size="sm" fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+								{item.label}
+							</Text>
+							<Text
+								size="sm"
+								fw={600}
+								c={item.color === "red" ? "red" : dark ? "dark.0" : "#1e3a5f"}
+							>
+								{item.value}%
+							</Text>
+						</Group>
+						<Progress
+							value={item.value}
+							size="lg"
+							radius="xl"
+							color={item.color}
+						/>
+					</div>
+				))}
+			</Stack>
+		</Card>
+	);
+};

src/components/sosial/pendidikan.tsx

@@ -0,0 +1,114 @@
+import { Card, Group, Stack, Text, Title } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
+
+interface EducationData {
+	siswa: {
+		tk: number;
+		sd: number;
+		smp: number;
+		sma: number;
+	};
+	sekolah: {
+		jumlah: number;
+		guru: number;
+	};
+}
+
+interface PendidikanProps {
+	data?: EducationData;
+}
+
+export const Pendidikan = ({ data }: PendidikanProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData: EducationData = {
+		siswa: {
+			tk: 125,
+			sd: 480,
+			smp: 210,
+			sma: 150,
+		},
+		sekolah: {
+			jumlah: 8,
+			guru: 42,
+		},
+	};
+
+	const displayData = data || defaultData;
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
+				Pendidikan
+			</Title>
+			<Stack gap="md">
+				<Group justify="space-between">
+					<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+						TK / PAUD
+					</Text>
+					<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						{displayData.siswa.tk}
+					</Text>
+				</Group>
+				<Group justify="space-between">
+					<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+						SD
+					</Text>
+					<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						{displayData.siswa.sd}
+					</Text>
+				</Group>
+				<Group justify="space-between">
+					<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+						SMP
+					</Text>
+					<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						{displayData.siswa.smp}
+					</Text>
+				</Group>
+				<Group justify="space-between">
+					<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+						SMA
+					</Text>
+					<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						{displayData.siswa.sma}
+					</Text>
+				</Group>
+
+				<Card
+					withBorder
+					radius="md"
+					p="md"
+					mt="md"
+					bg={dark ? "#263852ff" : "#F1F5F9"}
+					style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+				>
+					<Group justify="space-between">
+						<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+							Jumlah Lembaga Pendidikan
+						</Text>
+						<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+							{displayData.sekolah.jumlah}
+						</Text>
+					</Group>
+					<Group justify="space-between" mt="sm">
+						<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
+							Jumlah Tenaga Pengajar
+						</Text>
+						<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+							{displayData.sekolah.guru}
+						</Text>
+					</Group>
+				</Card>
+			</Stack>
+		</Card>
+	);
+};

src/components/sosial/posyandu-schedule.tsx

@@ -0,0 +1,89 @@
+import { Badge, Card, Group, Stack, Text, Title } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
+
+interface PosyanduItem {
+	id: string;
+	nama: string;
+	tanggal: string;
+	jam: string;
+}
+
+interface PosyanduScheduleProps {
+	data?: PosyanduItem[];
+}
+
+export const PosyanduSchedule = ({ data }: PosyanduScheduleProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData: PosyanduItem[] = [
+		{
+			id: "1",
+			nama: "Posyandu Mawar",
+			tanggal: "Senin, 15 Feb 2026",
+			jam: "08:00 - 11:00",
+		},
+		{
+			id: "2",
+			nama: "Posyandu Melati",
+			tanggal: "Selasa, 16 Feb 2026",
+			jam: "08:00 - 11:00",
+		},
+		{
+			id: "3",
+			nama: "Posyandu Dahlia",
+			tanggal: "Rabu, 17 Feb 2026",
+			jam: "08:00 - 11:00",
+		},
+		{
+			id: "4",
+			nama: "Posyandu Anggrek",
+			tanggal: "Kamis, 18 Feb 2026",
+			jam: "08:00 - 11:00",
+		},
+	];
+
+	const displayData = data || defaultData;
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
+				Jadwal Posyandu
+			</Title>
+			<Stack gap="sm">
+				{displayData.map((item) => (
+					<Card
+						key={item.id}
+						p="md"
+						radius="md"
+						withBorder
+						bg={dark ? "#263852ff" : "#F1F5F9"}
+						style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
+						hoverable
+					>
+						<Group justify="space-between">
+							<Stack gap={0}>
+								<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+									{item.nama}
+								</Text>
+								<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+									{item.tanggal}
+								</Text>
+							</Stack>
+							<Badge variant="light" color="darmasaba-blue" size="md">
+								{item.jam}
+							</Badge>
+						</Group>
+					</Card>
+				))}
+			</Stack>
+		</Card>
+	);
+};

src/components/sosial/summary-cards.tsx

@@ -0,0 +1,132 @@
+import { Card, Grid, GridCol, Group, Stack, Text, ThemeIcon } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
+import {
+	IconBabyCarriage,
+	IconHeartbeat,
+	IconMedicalCross,
+	IconStethoscope,
+} from "@tabler/icons-react";
+
+interface SummaryCardProps {
+	title: string;
+	value: number;
+	subtitle?: string;
+	icon: React.ReactNode;
+	color: string;
+	highlight?: boolean;
+	backgroundColor: string;
+}
+
+const SummaryCard = ({
+	title,
+	value,
+	subtitle,
+	icon,
+	color,
+	highlight = false,
+	backgroundColor,
+}: SummaryCardProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Group justify="space-between" align="center">
+				<Stack gap={2}>
+					<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+						{title}
+					</Text>
+					<Text
+						size="xl"
+						fw={700}
+						c={highlight ? "red" : dark ? "dark.0" : "#1e3a5f"}
+					>
+						{value}
+					</Text>
+					{subtitle && (
+						<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+							{subtitle}
+						</Text>
+					)}
+				</Stack>
+				<ThemeIcon bg={backgroundColor} color={color} size="xl" radius="xl">
+					{icon}
+				</ThemeIcon>
+			</Group>
+		</Card>
+	);
+};
+
+interface HealthSummaryData {
+	ibuHamil: number;
+	balita: number;
+	alertStunting: number;
+	posyanduAktif: number;
+}
+
+interface SummaryCardsProps {
+	data?: HealthSummaryData;
+}
+
+export const SummaryCards = ({ data }: SummaryCardsProps) => {
+	const defaultData: HealthSummaryData = {
+		ibuHamil: 87,
+		balita: 342,
+		alertStunting: 12,
+		posyanduAktif: 8,
+	};
+
+	const displayData = data || defaultData;
+
+	return (
+		<Grid gutter="md">
+			<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
+				<SummaryCard
+					title="Ibu Hamil Aktif"
+					value={displayData.ibuHamil}
+					subtitle="Aktif"
+					icon={<IconHeartbeat size={20} />}
+					color= "white"
+					backgroundColor= "#1E3A5F"
+				/>
+			</GridCol>
+			<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
+				<SummaryCard
+					title="Balita Terdaftar"
+					value={displayData.balita}
+					subtitle="Terdaftar"
+					icon={<IconBabyCarriage size={20} />}
+					color= "white"
+					backgroundColor= "#1E3A5F"
+				/>
+			</GridCol>
+			<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
+				<SummaryCard
+					title="Alert Stunting"
+					value={displayData.alertStunting}
+					subtitle="Perhatian"
+					icon={<IconStethoscope size={20} />}
+					color= "white"
+					backgroundColor= "#1E3A5F"
+				/>
+			</GridCol>
+			<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
+				<SummaryCard
+					title="Posyandu Aktif"
+					value={displayData.posyanduAktif}
+					subtitle="Aktif"
+					icon={<IconMedicalCross size={20} />}
+					color= "white"
+					backgroundColor= "#1E3A5F"
+				/>
+			</GridCol>
+		</Grid>
+	);
+};

src/components/ui/card.tsx

@@ -2,7 +2,6 @@ import {
 	Box,
 	Card as MantineCard,
 	type CardProps as MantineCardProps,
-
 	Title,
 } from "@mantine/core";
 import type React from "react";

src/components/ui/help-card.tsx

@@ -1,6 +1,6 @@
-import { Card, useMantineTheme, useComputedColorScheme } from '@mantine/core';
-import type { CardProps } from '@mantine/core';
-import type { ReactNode } from 'react';
+import type { CardProps } from "@mantine/core";
+import { Card, useComputedColorScheme, useMantineTheme } from "@mantine/core";
+import type { ReactNode } from "react";
 
 interface HelpCardProps extends CardProps {
 	children: ReactNode;
@@ -13,12 +13,12 @@ export const HelpCard = ({
 	children,
 	icon,
 	title,
-  minHeight = 'auto', // Default to auto, but allow override
+	minHeight = "auto", // Default to auto, but allow override
 	...props
 }: HelpCardProps) => {
 	const theme = useMantineTheme();
-  const colorScheme = useComputedColorScheme('light');
-  const isDark = colorScheme === 'dark';
+	const colorScheme = useComputedColorScheme("light");
+	const isDark = colorScheme === "dark";
 
 	return (
 		<Card
@@ -28,37 +28,37 @@ export const HelpCard = ({
 			withBorder
 			style={{
 				backgroundColor: isDark ? theme.colors.dark[7] : theme.white,
-        borderRadius: '16px',
-        transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+				borderRadius: "16px",
+				transition: "transform 0.2s ease, box-shadow 0.2s ease",
 				border: `1px solid ${
 					isDark ? theme.colors.dark[4] : theme.colors.gray[3]
 				}`,
 				minHeight, // Apply the minimum height
-        display: 'flex',
-        flexDirection: 'column',
+				display: "flex",
+				flexDirection: "column",
 			}}
 			{...props}
 		>
 			{(icon || title) && (
 				<div
 					style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '12px',
-            marginBottom: '16px',
+						display: "flex",
+						alignItems: "center",
+						gap: "12px",
+						marginBottom: "16px",
 					}}
 				>
 					{icon && (
 						<div
 							style={{
 								backgroundColor: isDark
-                  ? theme.colors.blue[8]
-                  : theme.colors.blue[0],
-                borderRadius: '8px',
-                padding: '8px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
+									? "#263852ff"
+									: "#1E3A5F",
+								borderRadius: "8px",
+								padding: "8px",
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
 							}}
 						>
 							{icon}
@@ -69,11 +69,9 @@ export const HelpCard = ({
 						<h3
 							style={{
 								margin: 0,
-                fontSize: '16px',
+								fontSize: "16px",
 								fontWeight: 600,
-                color: isDark
-                  ? theme.colors.dark[0]
-                  : theme.colors.dark[9],
+								color: isDark ? theme.colors.dark[0] : theme.colors.dark[9],
 							}}
 						>
 							{title}
@@ -82,9 +80,7 @@ export const HelpCard = ({
 				</div>
 			)}
 
-      <div style={{ flex: 1 }}>
-        {children}
-      </div>
+			<div style={{ flex: 1 }}>{children}</div>
 		</Card>
 	);
 };

src/components/umkm/header-toggle.tsx

@@ -0,0 +1,75 @@
+import {
+	Button,
+	Card,
+	Group,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { useSnapshot } from "valtio";
+import { setRange, umkmStore } from "../../store/umkm";
+
+type TimeRange = "minggu" | "bulan";
+
+interface HeaderToggleProps {
+	title?: string;
+	onRangeChange?: (range: TimeRange) => void;
+}
+
+export const HeaderToggle = ({
+	title = "Update Penjualan Produk",
+	onRangeChange,
+}: HeaderToggleProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+	const { selectedRange } = useSnapshot(umkmStore);
+
+	const handleRangeChange = (range: TimeRange) => {
+		setRange(range);
+		onRangeChange?.(range);
+	};
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#1e3a5f" : "#1e3a5f"}
+			style={{ borderColor: dark ? "#1e3a5f" : "#1e3a5f" }}
+		>
+			<Group justify="space-between" align="center" px="md" py="xs">
+				<Title order={3} c="white">
+					{title}
+				</Title>
+				<Group gap="xs">
+					<Button
+						variant={selectedRange === "minggu" ? "white" : "transparent"}
+						onClick={() => handleRangeChange("minggu")}
+						c={selectedRange === "minggu" ? "#1e3a5f" : "white"}
+						fw={600}
+						radius="xl"
+						size="sm"
+						style={{
+							opacity: selectedRange === "minggu" ? 1 : 0.8,
+						}}
+					>
+						Minggu ini
+					</Button>
+					<Button
+						variant={selectedRange === "bulan" ? "white" : "transparent"}
+						onClick={() => handleRangeChange("bulan")}
+						c={selectedRange === "bulan" ? "#1e3a5f" : "white"}
+						fw={600}
+						radius="xl"
+						size="sm"
+						style={{
+							opacity: selectedRange === "bulan" ? 1 : 0.8,
+						}}
+					>
+						Bulan ini
+					</Button>
+				</Group>
+			</Group>
+		</Card>
+	);
+};

src/components/umkm/produk-unggulan.tsx

@@ -0,0 +1,100 @@
+import { Card, Group, Stack, Text, useMantineColorScheme } from "@mantine/core";
+
+interface MetricCardProps {
+	title: string;
+	value: string | number;
+	trend?: {
+		value: number;
+		label: string;
+	};
+}
+
+const MetricCard = ({ title, value, trend }: MetricCardProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	return (
+		<Group justify="space-between" align="center">
+			<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+				{title}
+			</Text>
+			<Stack gap={0} align="flex-end">
+				<Text size="lg" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+					{value}
+				</Text>
+				{trend && (
+					<Text size="xs" c={trend.value >= 0 ? "green" : "red"} fw={600}>
+						{trend.value >= 0 ? "↑" : "↓"} {Math.abs(trend.value)}%{" "}
+						{trend.label}
+					</Text>
+				)}
+			</Stack>
+		</Group>
+	);
+};
+
+interface ProdukUnggulanProps {
+	data?: {
+		totalPenjualan: number;
+		produkAktif: number;
+		totalTransaksi: number;
+		trend?: {
+			value: number;
+			label: string;
+		};
+	};
+}
+
+export const ProdukUnggulan = ({ data }: ProdukUnggulanProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData = {
+		totalPenjualan: 30900000,
+		produkAktif: 7,
+		totalTransaksi: 500,
+		trend: {
+			value: 18,
+			label: "vs bulan lalu",
+		},
+	};
+
+	const displayData = data || defaultData;
+
+	const formatCurrency = (value: number) => {
+		if (value >= 1000000) {
+			return `Rp ${(value / 1000000).toFixed(1)}M`;
+		}
+		if (value >= 1000) {
+			return `Rp ${(value / 1000).toFixed(0)}K`;
+		}
+		return `Rp ${value.toLocaleString()}`;
+	};
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Stack gap="lg">
+				<MetricCard
+					title="Total Penjualan"
+					value={formatCurrency(displayData.totalPenjualan)}
+					trend={displayData.trend}
+				/>
+				<MetricCard
+					title="Produk Aktif"
+					value={`${displayData.produkAktif} kategori`}
+				/>
+				<MetricCard
+					title="Total Transaksi"
+					value={`${displayData.totalTransaksi} transaksi`}
+				/>
+			</Stack>
+		</Card>
+	);
+};

src/components/umkm/sales-table.tsx

@@ -0,0 +1,260 @@
+import {
+	Badge,
+	Button,
+	Card,
+	Group,
+	Select,
+	Table,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { IconArrowDown, IconArrowUp } from "@tabler/icons-react";
+
+export interface SalesData {
+	id: string;
+	produk: string;
+	penjualanBulanIni: number;
+	bulanLalu: number;
+	trend: number;
+	volume: string;
+	stok: number;
+	unit: string;
+}
+
+interface SalesTableProps {
+	data?: SalesData[];
+	onDetailClick?: (product: SalesData) => void;
+}
+
+export const SalesTable = ({ data, onDetailClick }: SalesTableProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultData: SalesData[] = [
+		{
+			id: "1",
+			produk: "Beras Premium Organik",
+			penjualanBulanIni: 8500000,
+			bulanLalu: 7600000,
+			trend: 12,
+			volume: "650 Kg",
+			stok: 850,
+			unit: "Kg",
+		},
+		{
+			id: "2",
+			produk: "Keripik Singkong",
+			penjualanBulanIni: 4200000,
+			bulanLalu: 3800000,
+			trend: 11,
+			volume: "320 Kg",
+			stok: 120,
+			unit: "Kg",
+		},
+		{
+			id: "3",
+			produk: "Madu Alami",
+			penjualanBulanIni: 3750000,
+			bulanLalu: 4100000,
+			trend: -9,
+			volume: "150 Liter",
+			stok: 45,
+			unit: "Liter",
+		},
+		{
+			id: "4",
+			produk: "Kecap Tradisional",
+			penjualanBulanIni: 2800000,
+			bulanLalu: 2500000,
+			trend: 12,
+			volume: "280 Botol",
+			stok: 95,
+			unit: "Botol",
+		},
+		{
+			id: "5",
+			produk: "Sambal Bu Rudy",
+			penjualanBulanIni: 2100000,
+			bulanLalu: 2300000,
+			trend: -9,
+			volume: "180 Botol",
+			stok: 35,
+			unit: "Botol",
+		},
+	];
+
+	const displayData = data || defaultData;
+
+	const formatCurrency = (value: number) => {
+		if (value >= 1000000) {
+			return `Rp ${(value / 1000000).toFixed(1)}M`;
+		}
+		if (value >= 1000) {
+			return `Rp ${(value / 1000).toFixed(0)}K`;
+		}
+		return `Rp ${value.toLocaleString()}`;
+	};
+
+	const getStockStatus = (stock: number) => {
+		if (stock > 200) return { color: "green", label: "Aman" };
+		if (stock > 50) return { color: "yellow", label: "Sedang" };
+		return { color: "red", label: "Rendah" };
+	};
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Group justify="space-between" mb="md">
+				<Title order={4} c={dark ? "dark.0" : "#1e3a5f"}>
+					Detail Penjualan Produk
+				</Title>
+				<Group gap="xs">
+					<Select
+						placeholder="Filter kategori"
+						data={[
+							{ value: "semua", label: "Semua Kategori" },
+							{ value: "makanan", label: "Makanan" },
+							{ value: "minuman", label: "Minuman" },
+							{ value: "kerajinan", label: "Kerajinan" },
+						]}
+						defaultValue="semua"
+						w={180}
+						size="sm"
+					/>
+					<Select
+						placeholder="Filter UMKM"
+						data={[
+							{ value: "semua", label: "Semua UMKM" },
+							{ value: "umkm1", label: "Warung Pak Joko" },
+							{ value: "umkm2", label: "Ibu Sari Snack" },
+						]}
+						defaultValue="semua"
+						w={180}
+						size="sm"
+					/>
+				</Group>
+			</Group>
+
+			<Table
+				stickyHeader
+				stickyHeaderOffset={60}
+				highlightOnHover
+				withRowBorders={false}
+				verticalSpacing="sm"
+			>
+				<Table.Thead>
+					<Table.Tr>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Produk
+							</Text>
+						</Table.Th>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Penjualan Bulan Ini
+							</Text>
+						</Table.Th>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Bulan Lalu
+							</Text>
+						</Table.Th>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Trend
+							</Text>
+						</Table.Th>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Volume
+							</Text>
+						</Table.Th>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Stok
+							</Text>
+						</Table.Th>
+						<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
+							<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
+								Aksi
+							</Text>
+						</Table.Th>
+					</Table.Tr>
+				</Table.Thead>
+				<Table.Tbody>
+					{displayData.map((product) => {
+						const stockStatus = getStockStatus(product.stok);
+						return (
+							<Table.Tr
+								key={product.id}
+								style={{
+									backgroundColor: dark ? "#141D34" : "white",
+								}}
+							>
+								<Table.Td>
+									<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+										{product.produk}
+									</Text>
+								</Table.Td>
+								<Table.Td>
+									<Text size="sm" fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+										{formatCurrency(product.penjualanBulanIni)}
+									</Text>
+								</Table.Td>
+								<Table.Td>
+									<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+										{formatCurrency(product.bulanLalu)}
+									</Text>
+								</Table.Td>
+								<Table.Td>
+									<Group gap="xs">
+										{product.trend >= 0 ? (
+											<IconArrowUp size={16} color="green" />
+										) : (
+											<IconArrowDown size={16} color="red" />
+										)}
+										<Text
+											size="sm"
+											fw={600}
+											c={product.trend >= 0 ? "green" : "red"}
+										>
+											{Math.abs(product.trend)}%
+										</Text>
+									</Group>
+								</Table.Td>
+								<Table.Td>
+									<Text size="sm" c={dark ? "dark.0" : "#1e3a5f"}>
+										{product.volume}
+									</Text>
+								</Table.Td>
+								<Table.Td>
+									<Badge variant="light" color={stockStatus.color} size="sm">
+										{product.stok} {product.unit} ({stockStatus.label})
+									</Badge>
+								</Table.Td>
+								<Table.Td>
+									<Button
+										variant="subtle"
+										size="compact-sm"
+										color="darmasaba-blue"
+										radius="xl"
+										onClick={() => onDetailClick?.(product)}
+									>
+										Detail
+									</Button>
+								</Table.Td>
+							</Table.Tr>
+						);
+					})}
+				</Table.Tbody>
+			</Table>
+		</Card>
+	);
+};

src/components/umkm/summary-cards.tsx

@@ -0,0 +1,148 @@
+import {
+	Avatar,
+	Card,
+	Grid,
+	GridCol,
+	Group,
+	Stack,
+	Text,
+	useMantineColorScheme
+} from "@mantine/core";
+import {
+	IconCategory,
+	IconCurrencyDollar,
+	IconTrendingUp,
+	IconUsers
+} from "@tabler/icons-react";
+
+interface KpiCardProps {
+	title: string;
+	value: string | number;
+	subtitle?: string;
+	icon: React.ReactNode;
+	color: string;
+	backgroundColor: string;
+}
+
+const KpiCard = ({ title, value, subtitle, icon, color, backgroundColor }: KpiCardProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const formatValue = (val: string | number) => {
+		if (typeof val === "number") {
+			if (val >= 1000000) {
+				return `${(val / 1000000).toFixed(1)}M`;
+			}
+			if (val >= 1000) {
+				return `${(val / 1000).toFixed(1)}K`;
+			}
+			return val.toLocaleString();
+		}
+		return val;
+	};
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Group justify="space-between" align="center">
+				<Stack gap={2}>
+					<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
+						{title}
+					</Text>
+					<Text size="xl" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
+						{formatValue(value)}
+					</Text>
+					{subtitle && (
+						<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+							{subtitle}
+						</Text>
+					)}
+				</Stack>
+				<Avatar
+					color={color}
+					bg={backgroundColor}
+					size={40}
+					radius="xl"
+					style={{
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+					}}
+				>
+					{icon}
+				</Avatar>
+			</Group>
+		</Card>
+	);
+};
+
+interface SummaryCardsProps {
+	data?: {
+		umkmAktif: number;
+		umkmTerdaftar: number;
+		omzet: number;
+		kategoriTerbanyak: { count: number; name: string };
+	};
+}
+
+export const SummaryCards = ({ data }: SummaryCardsProps) => {
+	const defaultData = {
+		umkmAktif: 45,
+		umkmTerdaftar: 68,
+		omzet: 48000000,
+		kategoriTerbanyak: { count: 34, name: "Kuliner" },
+	};
+
+	const displayData = data || defaultData;
+
+	const kpiData: KpiCardProps[] = [
+		{
+			title: "UMKM Aktif",
+			value: displayData.umkmAktif,
+			subtitle: "Beroperasi",
+			icon: <IconCurrencyDollar size={25} />,
+			color: "white",
+			backgroundColor: "#1E3A5F"
+		},
+		{
+			title: "UMKM Terdaftar",
+			value: displayData.umkmTerdaftar,
+			subtitle: "Total registrasi",
+			icon: <IconUsers size={25} />,
+			color: "white",
+			backgroundColor: "#1E3A5F"
+		},
+		{
+			title: "Omzet",
+			value: displayData.omzet,
+			subtitle: "Omzet BUMDes per bulan",
+			icon: <IconTrendingUp size={25} />,
+			color: "white",
+			backgroundColor: "#1E3A5F"
+		},
+		{
+			title: "UMKM Terbanyak",
+			value: displayData.kategoriTerbanyak.count,
+			subtitle: `Kategori ${displayData.kategoriTerbanyak.name}`,
+			icon: <IconTrendingUp size={25} />,
+			color: "white",
+			backgroundColor: "#1E3A5F"
+		},
+	];
+
+	return (
+		<Grid gutter="md">
+			{kpiData.map((kpi, index) => (
+				<GridCol key={index} span={{ base: 12, sm: 6, lg: 3 }}>
+					<KpiCard {...kpi} />
+				</GridCol>
+			))}
+		</Grid>
+	);
+};

src/components/umkm/top-products.tsx

@@ -0,0 +1,140 @@
+import {
+	Badge,
+	Card,
+	Group,
+	Stack,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+
+interface TopProduct {
+	rank: number;
+	name: string;
+	umkmName: string;
+	revenue: number;
+	quantitySold: number;
+	trend: number;
+}
+
+interface TopProductsProps {
+	products?: TopProduct[];
+}
+
+const formatCurrency = (value: number) => {
+	if (value >= 1000000) {
+		return `${(value / 1000000).toFixed(1)}M`;
+	}
+	if (value >= 1000) {
+		return `${(value / 1000).toFixed(0)}K`;
+	}
+	return value.toString();
+};
+
+const formatNumber = (value: number) => {
+	if (value >= 1000) {
+		return `${(value / 1000).toFixed(1)}K`;
+	}
+	return value.toString();
+};
+
+export const TopProducts = ({ products }: TopProductsProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const defaultProducts: TopProduct[] = [
+		{
+			rank: 1,
+			name: "Beras Premium Organik",
+			umkmName: "Warung Pak Joko",
+			revenue: 8500000,
+			quantitySold: 650,
+			trend: 12,
+		},
+		{
+			rank: 2,
+			name: "Keripik Singkong",
+			umkmName: "Ibu Sari Snack",
+			revenue: 4200000,
+			quantitySold: 320,
+			trend: 8,
+		},
+		{
+			rank: 3,
+			name: "Madu Alami",
+			umkmName: "Peternakan Lebah",
+			revenue: 3750000,
+			quantitySold: 150,
+			trend: 5,
+		},
+	];
+
+	const displayProducts = products || defaultProducts;
+
+	const getRankColor = (rank: number) => {
+		if (rank === 1) return "yellow";
+		if (rank === 2) return "gray";
+		if (rank === 3) return "orange";
+		return "blue";
+	};
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#141D34" : "white"}
+			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+		>
+			<Title order={4} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
+				Top 3 Produk Terlaris
+			</Title>
+			<Stack gap="sm">
+				{displayProducts.map((product) => (
+					<Group key={product.rank} justify="space-between" align="center">
+						<Group gap="sm">
+							<Badge
+								variant="filled"
+								color={getRankColor(product.rank)}
+								radius="xl"
+								size="lg"
+								w={30}
+								h={30}
+							>
+								{product.rank}
+							</Badge>
+							<Stack gap={0}>
+								<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
+									{product.name}
+								</Text>
+								<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
+									{product.umkmName}
+								</Text>
+								<Group gap="xs" mt={2}>
+									<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+										Rp {formatCurrency(product.revenue)}
+									</Text>
+									<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+										•
+									</Text>
+									<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
+										{formatNumber(product.quantitySold)} terjual
+									</Text>
+								</Group>
+							</Stack>
+						</Group>
+						<Badge
+							variant="light"
+							color={product.trend >= 0 ? "green" : "red"}
+							size="sm"
+						>
+							{product.trend >= 0 ? "+" : ""}
+							{product.trend}%
+						</Badge>
+					</Group>
+				))}
+			</Stack>
+		</Card>
+	);
+};

src/frontend.tsx

@@ -14,10 +14,9 @@ import { Inspector } from "react-dev-inspector";
 import { createRoot } from "react-dom/client";
 import { routeTree } from "./routeTree.gen";
 import "./index.css";
-import '@mantine/charts/styles.css';
+import "@mantine/charts/styles.css";
 import { IS_DEV, VITE_PUBLIC_URL } from "./utils/env";
 
-
 // Create a new router instance
 export const router = createRouter({
 	routeTree,
@@ -102,8 +101,6 @@ const theme = createTheme({
 	primaryColor: "darmasaba-blue",
 });
 
-
-
 const InspectorWrapper = IS_DEV
 	? Inspector
 	: ({ children }: { children: React.ReactNode }) => <>{children}</>;

src/hooks/use-sidebar-fullscreen.ts

@@ -0,0 +1,25 @@
+import { useDisclosure } from "@mantine/hooks";
+
+export function useSidebarFullscreen() {
+	const [opened, { toggle: toggleMobile }] = useDisclosure();
+	const [sidebarCollapsed, setSidebarCollapsed] = useDisclosure(false);
+
+	const toggleSidebar = () => {
+		setSidebarCollapsed.toggle();
+	};
+
+	const handleMainClick = () => {
+		if (!sidebarCollapsed) {
+			toggleSidebar();
+		}
+	};
+
+	return {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+		isCollapsed: sidebarCollapsed,
+	};
+}

src/index.ts

@@ -6,8 +6,22 @@ import { Elysia } from "elysia";
 import api from "./api";
 import { openInEditor } from "./utils/open-in-editor";
 
+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) {
@@ -81,10 +95,25 @@ if (!isProduction) {
 				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") {
@@ -144,6 +173,11 @@ if (!isProduction) {
 			if (fs.existsSync(srcPath)) {
 				filePath = srcPath;
 			}
+			// Check public folder for static assets
+			const publicPath = path.join("public", pathname);
+			if (fs.existsSync(publicPath)) {
+				filePath = publicPath;
+			}
 		}
 
 		// 2. If not found and looks like an asset (has extension), try root of dist or src
@@ -159,8 +193,18 @@ if (!isProduction) {
 				) {
 					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
-				else if (pathname.includes("assetlinks.json")) {
+				if (pathname.includes("assetlinks.json")) {
 					const srcFilename = pathname.includes("assetlinks.json")
 						? ".well-known/assetlinks.json"
 						: filename;
@@ -198,10 +242,10 @@ if (!isProduction) {
 	});
 }
 
-app.listen(3000);
+app.listen(PORT);
 
 console.log(
-	`🚀 Server running at http://localhost:3000 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,16 +60,39 @@ 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 === "/dashboard" || p.startsWith("/dashboard/"),
+		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"),
 		requireAuth: true,
 		requiredRole: "admin",
-		redirectTo: "/profile",
+		redirectTo: "/signin",
 	},
 ];
 
@@ -98,15 +121,22 @@ 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);
 		}

src/routeTree.gen.ts

@@ -9,35 +9,38 @@
 // 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 DashboardRouteRouteImport } from './routes/dashboard/route'
+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 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 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 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 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',
@@ -48,9 +51,49 @@ const SigninRoute = SigninRouteImport.update({
   path: '/signin',
   getParentRoute: () => rootRouteImport,
 } as any)
-const DashboardRouteRoute = DashboardRouteRouteImport.update({
-  id: '/dashboard',
-  path: '/dashboard',
+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',
   getParentRoute: () => rootRouteImport,
 } as any)
 const AdminRouteRoute = AdminRouteRouteImport.update({
@@ -73,11 +116,6 @@ 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: '/',
@@ -93,53 +131,25 @@ const ProfileEditRoute = ProfileEditRouteImport.update({
   path: '/profile/edit',
   getParentRoute: () => rootRouteImport,
 } as any)
-const DashboardSosialRoute = DashboardSosialRouteImport.update({
-  id: '/sosial',
-  path: '/sosial',
-  getParentRoute: () => DashboardRouteRoute,
+const PengaturanUmumRoute = PengaturanUmumRouteImport.update({
+  id: '/umum',
+  path: '/umum',
+  getParentRoute: () => PengaturanRouteRoute,
 } as any)
-const DashboardPengaduanLayananPublikRoute =
-  DashboardPengaduanLayananPublikRouteImport.update({
-    id: '/pengaduan-layanan-publik',
-    path: '/pengaduan-layanan-publik',
-    getParentRoute: () => DashboardRouteRoute,
+const PengaturanNotifikasiRoute = PengaturanNotifikasiRouteImport.update({
+  id: '/notifikasi',
+  path: '/notifikasi',
+  getParentRoute: () => PengaturanRouteRoute,
 } as any)
-const DashboardKinerjaDivisiRoute = DashboardKinerjaDivisiRouteImport.update({
-  id: '/kinerja-divisi',
-  path: '/kinerja-divisi',
-  getParentRoute: () => DashboardRouteRoute,
-} as any)
-const DashboardKeuanganAnggaranRoute =
-  DashboardKeuanganAnggaranRouteImport.update({
-    id: '/keuangan-anggaran',
-    path: '/keuangan-anggaran',
-    getParentRoute: () => DashboardRouteRoute,
-  } as any)
-const DashboardKeamananRoute = DashboardKeamananRouteImport.update({
+const PengaturanKeamananRoute = PengaturanKeamananRouteImport.update({
   id: '/keamanan',
   path: '/keamanan',
-  getParentRoute: () => DashboardRouteRoute,
+  getParentRoute: () => PengaturanRouteRoute,
 } as any)
-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,
+const PengaturanAksesDanTimRoute = PengaturanAksesDanTimRouteImport.update({
+  id: '/akses-dan-tim',
+  path: '/akses-dan-tim',
+  getParentRoute: () => PengaturanRouteRoute,
 } as any)
 const AdminUsersRoute = AdminUsersRouteImport.update({
   id: '/users',
@@ -156,222 +166,192 @@ 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
-  '/dashboard': typeof DashboardRouteRouteWithChildren
+  '/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
-  '/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
+  '/sosial': typeof SosialRoute
   '/admin/apikey': typeof AdminApikeyRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/admin/users': typeof AdminUsersRoute
-  '/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
+  '/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
+  '/pengaturan/keamanan': typeof PengaturanKeamananRoute
+  '/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
+  '/pengaturan/umum': typeof PengaturanUmumRoute
   '/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
-  '/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
+  '/sosial': typeof SosialRoute
   '/admin/apikey': typeof AdminApikeyRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/admin/users': typeof AdminUsersRoute
-  '/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
+  '/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
+  '/pengaturan/keamanan': typeof PengaturanKeamananRoute
+  '/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
+  '/pengaturan/umum': typeof PengaturanUmumRoute
   '/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
-  '/dashboard': typeof DashboardRouteRouteWithChildren
+  '/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
-  '/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
+  '/sosial': typeof SosialRoute
   '/admin/apikey': typeof AdminApikeyRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/admin/users': typeof AdminUsersRoute
-  '/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
+  '/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
+  '/pengaturan/keamanan': typeof PengaturanKeamananRoute
+  '/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
+  '/pengaturan/umum': typeof PengaturanUmumRoute
   '/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'
-    | '/dashboard'
+    | '/pengaturan'
+    | '/bantuan'
+    | '/bumdes'
+    | '/demografi-pekerjaan'
+    | '/jenna-analytic'
+    | '/keamanan'
+    | '/keuangan-anggaran'
+    | '/kinerja-divisi'
+    | '/pengaduan-layanan-publik'
     | '/signin'
     | '/signup'
-    | '/dashboard/pengaturan'
+    | '/sosial'
     | '/admin/apikey'
     | '/admin/settings'
     | '/admin/users'
-    | '/dashboard/bantuan'
-    | '/dashboard/bumdes'
-    | '/dashboard/demografi-pekerjaan'
-    | '/dashboard/jenna-analytic'
-    | '/dashboard/keamanan'
-    | '/dashboard/keuangan-anggaran'
-    | '/dashboard/kinerja-divisi'
-    | '/dashboard/pengaduan-layanan-publik'
-    | '/dashboard/sosial'
+    | '/pengaturan/akses-dan-tim'
+    | '/pengaturan/keamanan'
+    | '/pengaturan/notifikasi'
+    | '/pengaturan/umum'
     | '/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'
-    | '/dashboard/pengaturan'
+    | '/sosial'
     | '/admin/apikey'
     | '/admin/settings'
     | '/admin/users'
-    | '/dashboard/bantuan'
-    | '/dashboard/bumdes'
-    | '/dashboard/demografi-pekerjaan'
-    | '/dashboard/jenna-analytic'
-    | '/dashboard/keamanan'
-    | '/dashboard/keuangan-anggaran'
-    | '/dashboard/kinerja-divisi'
-    | '/dashboard/pengaduan-layanan-publik'
-    | '/dashboard/sosial'
+    | '/pengaturan/akses-dan-tim'
+    | '/pengaturan/keamanan'
+    | '/pengaturan/notifikasi'
+    | '/pengaturan/umum'
     | '/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'
-    | '/dashboard'
+    | '/pengaturan'
+    | '/bantuan'
+    | '/bumdes'
+    | '/demografi-pekerjaan'
+    | '/jenna-analytic'
+    | '/keamanan'
+    | '/keuangan-anggaran'
+    | '/kinerja-divisi'
+    | '/pengaduan-layanan-publik'
     | '/signin'
     | '/signup'
-    | '/dashboard/pengaturan'
+    | '/sosial'
     | '/admin/apikey'
     | '/admin/settings'
     | '/admin/users'
-    | '/dashboard/bantuan'
-    | '/dashboard/bumdes'
-    | '/dashboard/demografi-pekerjaan'
-    | '/dashboard/jenna-analytic'
-    | '/dashboard/keamanan'
-    | '/dashboard/keuangan-anggaran'
-    | '/dashboard/kinerja-divisi'
-    | '/dashboard/pengaduan-layanan-publik'
-    | '/dashboard/sosial'
+    | '/pengaturan/akses-dan-tim'
+    | '/pengaturan/keamanan'
+    | '/pengaturan/notifikasi'
+    | '/pengaturan/umum'
     | '/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
-  DashboardRouteRoute: typeof DashboardRouteRouteWithChildren
+  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
   SigninRoute: typeof SigninRoute
   SignupRoute: typeof SignupRoute
+  SosialRoute: typeof SosialRoute
   ProfileEditRoute: typeof ProfileEditRoute
   UsersIdRoute: typeof UsersIdRoute
   ProfileIndexRoute: typeof ProfileIndexRoute
@@ -380,6 +360,13 @@ 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'
@@ -394,11 +381,67 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SigninRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/dashboard': {
-      id: '/dashboard'
-      path: '/dashboard'
-      fullPath: '/dashboard'
-      preLoaderRoute: typeof DashboardRouteRouteImport
+    '/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
       parentRoute: typeof rootRouteImport
     }
     '/admin': {
@@ -429,13 +472,6 @@ 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: '/'
@@ -457,68 +493,33 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProfileEditRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/dashboard/sosial': {
-      id: '/dashboard/sosial'
-      path: '/sosial'
-      fullPath: '/dashboard/sosial'
-      preLoaderRoute: typeof DashboardSosialRouteImport
-      parentRoute: typeof DashboardRouteRoute
+    '/pengaturan/umum': {
+      id: '/pengaturan/umum'
+      path: '/umum'
+      fullPath: '/pengaturan/umum'
+      preLoaderRoute: typeof PengaturanUmumRouteImport
+      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/notifikasi': {
+      id: '/pengaturan/notifikasi'
+      path: '/notifikasi'
+      fullPath: '/pengaturan/notifikasi'
+      preLoaderRoute: typeof PengaturanNotifikasiRouteImport
+      parentRoute: typeof PengaturanRouteRoute
     }
-    '/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'
+    '/pengaturan/keamanan': {
+      id: '/pengaturan/keamanan'
       path: '/keamanan'
-      fullPath: '/dashboard/keamanan'
-      preLoaderRoute: typeof DashboardKeamananRouteImport
-      parentRoute: typeof DashboardRouteRoute
+      fullPath: '/pengaturan/keamanan'
+      preLoaderRoute: typeof PengaturanKeamananRouteImport
+      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
+    '/pengaturan/akses-dan-tim': {
+      id: '/pengaturan/akses-dan-tim'
+      path: '/akses-dan-tim'
+      fullPath: '/pengaturan/akses-dan-tim'
+      preLoaderRoute: typeof PengaturanAksesDanTimRouteImport
+      parentRoute: typeof PengaturanRouteRoute
     }
     '/admin/users': {
       id: '/admin/users'
@@ -541,41 +542,6 @@ 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
-    }
   }
 }
 
@@ -597,64 +563,39 @@ const AdminRouteRouteWithChildren = AdminRouteRoute._addFileChildren(
   AdminRouteRouteChildren,
 )
 
-interface DashboardPengaturanRouteRouteChildren {
-  DashboardPengaturanAksesDanTimRoute: typeof DashboardPengaturanAksesDanTimRoute
-  DashboardPengaturanKeamananRoute: typeof DashboardPengaturanKeamananRoute
-  DashboardPengaturanNotifikasiRoute: typeof DashboardPengaturanNotifikasiRoute
-  DashboardPengaturanUmumRoute: typeof DashboardPengaturanUmumRoute
+interface PengaturanRouteRouteChildren {
+  PengaturanAksesDanTimRoute: typeof PengaturanAksesDanTimRoute
+  PengaturanKeamananRoute: typeof PengaturanKeamananRoute
+  PengaturanNotifikasiRoute: typeof PengaturanNotifikasiRoute
+  PengaturanUmumRoute: typeof PengaturanUmumRoute
 }
 
-const DashboardPengaturanRouteRouteChildren: DashboardPengaturanRouteRouteChildren =
-  {
-    DashboardPengaturanAksesDanTimRoute: DashboardPengaturanAksesDanTimRoute,
-    DashboardPengaturanKeamananRoute: DashboardPengaturanKeamananRoute,
-    DashboardPengaturanNotifikasiRoute: DashboardPengaturanNotifikasiRoute,
-    DashboardPengaturanUmumRoute: DashboardPengaturanUmumRoute,
+const PengaturanRouteRouteChildren: PengaturanRouteRouteChildren = {
+  PengaturanAksesDanTimRoute: PengaturanAksesDanTimRoute,
+  PengaturanKeamananRoute: PengaturanKeamananRoute,
+  PengaturanNotifikasiRoute: PengaturanNotifikasiRoute,
+  PengaturanUmumRoute: PengaturanUmumRoute,
 }
 
-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 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 PengaturanRouteRouteWithChildren = PengaturanRouteRoute._addFileChildren(
+  PengaturanRouteRouteChildren,
 )
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AdminRouteRoute: AdminRouteRouteWithChildren,
-  DashboardRouteRoute: DashboardRouteRouteWithChildren,
+  PengaturanRouteRoute: PengaturanRouteRouteWithChildren,
+  BantuanRoute: BantuanRoute,
+  BumdesRoute: BumdesRoute,
+  DemografiPekerjaanRoute: DemografiPekerjaanRoute,
+  JennaAnalyticRoute: JennaAnalyticRoute,
+  KeamananRoute: KeamananRoute,
+  KeuanganAnggaranRoute: KeuanganAnggaranRoute,
+  KinerjaDivisiRoute: KinerjaDivisiRoute,
+  PengaduanLayananPublikRoute: PengaduanLayananPublikRoute,
   SigninRoute: SigninRoute,
   SignupRoute: SignupRoute,
+  SosialRoute: SosialRoute,
   ProfileEditRoute: ProfileEditRoute,
   UsersIdRoute: UsersIdRoute,
   ProfileIndexRoute: ProfileIndexRoute,

src/routes/__root.tsx

@@ -7,8 +7,20 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createRootRoute({
 	component: RootComponent,
-	beforeLoad: protectedRouteMiddleware,
-	onEnter({ context }) {
+	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 });
 		authStore.user = context?.user as any;
 		authStore.session = context?.session as any;
 	},

src/routes/admin/route.tsx

@@ -154,7 +154,6 @@ function DashboardLayout() {
 					</Group>
 
 					<Group gap="md">
-
 						<Menu
 							shadow="md"
 							width={200}

src/routes/bantuan.tsx

@@ -0,0 +1,66 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import HelpPage from "@/components/help-page";
+import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
+
+export const Route = createFileRoute("/bantuan")({
+	component: BantuanRoute,
+});
+
+function BantuanRoute() {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
+	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, desktop: sidebarCollapsed },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
+				</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}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				<HelpPage />
+			</AppShell.Main>
+		</AppShell>
+	);
+}

src/routes/bumdes.tsx

@@ -0,0 +1,66 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { createFileRoute } from "@tanstack/react-router";
+import BumdesPage from "@/components/bumdes-page";
+import { Header } from "@/components/header";
+import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
+
+export const Route = createFileRoute("/bumdes")({
+	component: BumdesRoute,
+});
+
+function BumdesRoute() {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
+	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, desktop: sidebarCollapsed },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
+				</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}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				<BumdesPage />
+			</AppShell.Main>
+		</AppShell>
+	);
+}

src/routes/dashboard/bantuan.ts

@@ -1,7 +0,0 @@
-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

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

src/routes/dashboard/demografi-pekerjaan.ts

@@ -1,7 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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,7 +0,0 @@
-import UmumSettings from '@/components/pengaturan/umum'
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/dashboard/pengaturan/umum')({
-  component: UmumSettings,
-})
-

src/routes/dashboard/route.tsx

@@ -1,45 +0,0 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router";
-import { Header } from "@/components/header";
-import { Sidebar } from "@/components/sidebar";
-import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-
-export const Route = createFileRoute("/dashboard")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	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}>
-				<Outlet />
-			</AppShell.Main>
-		</AppShell>
-	);
-}

src/routes/dashboard/sosial.ts

@@ -1,8 +0,0 @@
-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

@@ -0,0 +1,66 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
+import DemografiPekerjaan from "../components/demografi-pekerjaan";
+
+export const Route = createFileRoute("/demografi-pekerjaan")({
+	component: DemografiPekerjaanPage,
+});
+
+function DemografiPekerjaanPage() {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
+	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, desktop: sidebarCollapsed },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
+				</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}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				<DemografiPekerjaan />
+			</AppShell.Main>
+		</AppShell>
+	);
+}

src/routes/index.tsx

@@ -1,788 +1,62 @@
-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";
+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";
 
 export const Route = createFileRoute("/")({
-	component: HomePage,
+	component: DashboardPage,
 });
 
-// Navigation items
-const NAV_ITEMS = [
-	{ label: "Home", link: "/" },
-	{ label: "Features", link: "#features" },
-	{ label: "Testimonials", link: "#testimonials" },
-	{ label: "Pricing", link: "/pricing" },
-	{ label: "Contact", link: "/contact" },
-];
+function DashboardPage() {
+	const [opened, { toggle }] = useDisclosure();
+	const [sidebarCollapsed, setSidebarCollapsed] = useDisclosure(false);
+	const { colorScheme } = useMantineColorScheme();
+	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
+	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
+	const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
 
-// 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);
+	const handleMainClick = () => {
+		if (!sidebarCollapsed) {
+			setSidebarCollapsed.toggle();
+		}
 	};
 
-		window.addEventListener("scroll", handleScroll);
-		return () => window.removeEventListener("scroll", handleScroll);
-	}, []);
-
 	return (
-		<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",
+		<AppShell
+			header={{ height: 60 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
 			}}
+			padding="md"
 		>
-			<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>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+					<Header onSidebarToggle={setSidebarCollapsed.toggle} />
 				</Group>
+			</AppShell.Header>
 
-				<Group>
-					<ActionIcon
-						variant="default"
-						onClick={() => toggleColorScheme()}
-						size="lg"
+			<AppShell.Navbar
+				p="md"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
 			>
-						{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 style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
 				</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>
+			</AppShell.Navbar>
+
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				<DashboardContent />
+			</AppShell.Main>
+		</AppShell>
 	);
 }

src/routes/jenna-analytic.tsx

@@ -0,0 +1,66 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import JennaAnalytic from "@/components/jenna-analytic";
+import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
+
+export const Route = createFileRoute("/jenna-analytic")({
+	component: JennaAnalyticPage,
+});
+
+function JennaAnalyticPage() {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
+	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, desktop: sidebarCollapsed },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
+				</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}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				<JennaAnalytic />
+			</AppShell.Main>
+		</AppShell>
+	);
+}

src/routes/keamanan.tsx

@@ -0,0 +1,66 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import KeamananPage from "@/components/keamanan-page";
+import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
+
+export const Route = createFileRoute("/keamanan")({
+	component: KeamananRoute,
+});
+
+function KeamananRoute() {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
+	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, desktop: sidebarCollapsed },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
+				</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}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				<KeamananPage />
+			</AppShell.Main>
+		</AppShell>
+	);
+}

src/routes/keuangan-anggaran.tsx

@@ -0,0 +1,66 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import KeuanganAnggaran from "@/components/keuangan-anggaran";
+import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
+
+export const Route = createFileRoute("/keuangan-anggaran")({
+	component: KeuanganAnggaranPage,
+});
+
+function KeuanganAnggaranPage() {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
+	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, desktop: sidebarCollapsed },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
+				</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}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				<KeuanganAnggaran />
+			</AppShell.Main>
+		</AppShell>
+	);
+}

src/routes/kinerja-divisi.tsx

@@ -0,0 +1,66 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import KinerjaDivisi from "@/components/kinerja-divisi";
+import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
+
+export const Route = createFileRoute("/kinerja-divisi")({
+	component: KinerjaDivisiPage,
+});
+
+function KinerjaDivisiPage() {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
+	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, desktop: sidebarCollapsed },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
+				</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}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				<KinerjaDivisi />
+			</AppShell.Main>
+		</AppShell>
+	);
+}

src/routes/pengaduan-layanan-publik.tsx

@@ -0,0 +1,66 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import { createFileRoute } from "@tanstack/react-router";
+import { Header } from "@/components/header";
+import PengaduanLayananPublik from "@/components/pengaduan-layanan-publik";
+import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
+
+export const Route = createFileRoute("/pengaduan-layanan-publik")({
+	component: PengaduanLayananPublikPage,
+});
+
+function PengaduanLayananPublikPage() {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
+	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, desktop: sidebarCollapsed },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
+				</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}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				<PengaduanLayananPublik />
+			</AppShell.Main>
+		</AppShell>
+	);
+}