Fix New UI Pengaduan

- 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,9 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 # Finder (MacOS) folder config
 .DS_Store
 
+# Dashboard-MD
+Dashboard-MD
+
 # Playwright artifacts
 test-results/
 playwright-report/

Dockerfile

@@ -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"]

Kinerja-Divisi-New.md

@@ -0,0 +1,139 @@
+Create a modern admin dashboard UI for a village management system using React 19 + Vite + TailwindCSS + Mantine components + Recharts.
+
+Design style:
+- Clean, soft UI with rounded corners (2xl)
+- Light gray background (#f5f6f8)
+- Card-based layout with subtle shadow
+- Smooth spacing and consistent padding
+- Professional government-style but still modern
+- Use Inter or system font
+- Primary color: dark blue
+- Accent color: orange for progress
+- Success color: green
+- Use Mantine components where possible
+
+Layout:
+- Responsive grid layout (desktop-first)
+- 4 summary cards on top (horizontal)
+- 2 columns main content below
+- Left sidebar for division list
+- Right content for charts and activity
+
+---
+
+## 🔹 TOP CARDS (4 ITEMS)
+Each card contains:
+- Title (e.g: "Rakor 2025")
+- Progress bar (orange)
+- Date (small text)
+- Status badge "Selesai" (green)
+
+Use:
+- Mantine Card
+- Mantine Progress
+- Mantine Badge
+
+---
+
+## 🔹 LEFT PANEL - "Divisi teraktif"
+Vertical list of divisions:
+- Each item is clickable
+- Show division name + number of activities
+- Rounded container with hover effect
+- Chevron icon on right
+
+Example items:
+- Kesejahteraan (37 kegiatan)
+- Pemerintahan (26 kegiatan)
+- Keuangan (17 kegiatan)
+- etc
+
+Use:
+- Scrollable container
+- Soft border + hover highlight
+
+---
+
+## 🔹 CENTER - BAR CHART (Jumlah Dokumen)
+- Use Recharts
+- Two bars:
+  - Gambar
+  - Dokumen
+- Color:
+  - Yellow/orange
+  - Green
+- Show Y axis scale (0–400)
+
+---
+
+## 🔹 RIGHT - PIE CHART (Progres Kegiatan)
+- Use Recharts PieChart
+- Segments:
+  - Selesai (green ~83%)
+  - Dikerjakan (orange ~16%)
+  - Segera dikerjakan (blue)
+  - Dibatalkan (red)
+- Include legend below
+
+---
+
+## 🔹 BOTTOM LEFT - Diskusi Panel
+- List of discussion messages
+- Each item:
+  - Title
+  - Sender name
+  - Date
+- Styled like notification cards
+- Compact and clean
+
+---
+
+## 🔹 BOTTOM RIGHT - "Acara Hari Ini"
+- Empty state
+- Show text: "Tidak ada acara hari ini"
+- Centered, muted text
+
+---
+
+## ⚙️ TECH REQUIREMENTS
+
+- Use React functional components
+- Use TanStack Router (file-based or route config)
+- Use Mantine for UI components
+- Use Tailwind for layout and spacing
+- Use Recharts for charts
+- State management: Valtio (simple global state)
+- Date formatting: dayjs
+- Icons: lucide-react
+
+---
+
+## 📁 COMPONENT STRUCTURE
+
+- components/
+  - DashboardCard.tsx
+  - DivisionList.tsx
+  - BarChartCard.tsx
+  - PieChartCard.tsx
+  - DiscussionList.tsx
+  - EmptyState.tsx
+
+- routes/
+  - dashboard.tsx
+
+---
+
+## ✨ EXTRA (IMPORTANT FOR VIBE CODING)
+
+- Add subtle hover animations (scale 1.02)
+- Smooth transitions (150–200ms)
+- Keep spacing consistent (gap-4 / gap-6)
+- Avoid clutter, prioritize readability
+- Make it feel "calm and productive"
+
+---
+
+Output:
+- Full React component code (modular, not monolithic)
+- Clean, readable, production-ready
+- No unnecessary comments

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

PromptDashboard.md

@@ -0,0 +1,302 @@
+Buat halaman dashboard admin modern untuk sistem pemerintahan desa bernama **Darmasaba Dashboard NOC**.
+
+Gunakan stack berikut:
+
+Frontend:
+
+* React 19
+* Bun runtime
+* Vite
+* TailwindCSS
+* Mantine UI
+* Mantine Charts atau Recharts
+* Tabler Icons
+* TanStack Router
+* Dayjs
+
+UI harus modular dengan reusable components.
+
+Gunakan **TailwindCSS sebagai styling utama** dengan warna dari konfigurasi berikut:
+
+Primary:
+darmasaba-navy (#1E3A5F)
+
+Secondary:
+darmasaba-blue (#3B82F6)
+
+Success:
+#22C55E
+
+Warning:
+#FACC15
+
+Danger:
+#EF4444
+
+Background:
+#F5F8FB
+
+Dashboard harus memiliki **Light Mode dan Dark Mode**.
+
+Dark Mode Color Rules:
+background: #0F172A
+card: #1E293B
+border: #334155
+text: #E2E8F0
+
+Card style:
+
+* rounded-xl
+* soft shadow
+* padding besar
+* border subtle
+* smooth hover animation
+
+Gunakan grid layout responsive.
+
+---
+
+SECTION 1 — PROGRAM KEGIATAN
+
+Buat 4 card horizontal di bagian atas yang menampilkan kegiatan desa.
+
+Setiap card memiliki:
+
+* header biru
+* progress bar kegiatan
+* tanggal kegiatan
+* badge status
+
+Data card:
+
+1.
+
+Judul: Rakor 2025
+Tanggal: 3 Juli 2025
+Progress: 90%
+Status: selesai
+
+2.
+
+Judul: Pemutakhiran Indeks Desa
+Tanggal: 3 Juli 2025
+Progress: 85%
+Status: selesai
+
+3.
+
+Judul: Mengurus Akta Cerai Warga
+Tanggal: 3 Juli 2025
+Progress: 80%
+Status: selesai
+
+4.
+
+Judul: Pasek 7 Desa Adat
+Tanggal: 3 Juli 2025
+Progress: 92%
+Status: selesai
+
+Progress bar:
+
+* rounded
+* warna warning
+* animasi smooth
+
+Status badge:
+
+* success color
+
+---
+
+SECTION 2 — GRID DASHBOARD
+
+Layout:
+
+3 column grid.
+
+Left column (sidebar style):
+Divisi Teraktif
+
+List item card dengan arrow icon.
+
+Data:
+
+Kesejahteraan — 37 kegiatan
+Pemerintahan — 26 kegiatan
+Keuangan — 17 kegiatan
+Sekretaris Desa — 15 kegiatan
+Tata Usaha TK — 14 kegiatan
+Perangkat Kewilayahan — 12 kegiatan
+Pelayanan — 10 kegiatan
+Perencanaan — 9 kegiatan
+Tata Usaha & Umum — 7 kegiatan
+
+Setiap item:
+
+* rounded
+* hover effect
+* arrow icon kanan
+
+---
+
+Middle column:
+
+Jumlah Dokumen
+
+Gunakan **Bar Chart**.
+
+Kategori:
+
+* Gambar
+* Dokumen
+
+Nilai:
+
+* Gambar: 300
+* Dokumen: 310
+
+Gunakan:
+Recharts atau Mantine Charts.
+
+---
+
+Right column:
+
+Progres Kegiatan
+
+Gunakan **Pie Chart**.
+
+Data:
+
+Selesai — 83.33%
+Dikerjakan — 16.67%
+Segera Dikerjakan — 0%
+Dibatalkan — 0%
+
+Legend harus berwarna.
+
+---
+
+SECTION 3 — DISCUSSION PANEL
+
+Judul: Diskusi
+
+Tampilkan list diskusi internal staf.
+
+Item card memiliki:
+
+* icon chat
+* judul pesan
+* nama pengirim
+* tanggal
+
+Contoh data:
+
+"Kepada Pelayanan, mohon di cek..."
+Pengirim: I.B Surya Prabhawa Manu
+Tanggal: 12 Apr 2025
+
+"Kepada staf perencanaan @suar..."
+Pengirim: Ni Nyoman Yuliani
+Tanggal: 14 Jun 2025
+
+"ijin atau mohon kepada KBD sar..."
+Pengirim: Ni Wayan Martini
+Tanggal: 12 Apr 2025
+
+---
+
+SECTION 4 — ACARA HARI INI
+
+Card sederhana.
+
+Jika tidak ada acara tampilkan:
+
+"Tidak ada acara hari ini"
+
+---
+
+SECTION 5 — ARSIP DIGITAL PERANGKAT DESA
+
+Grid 2 column.
+
+Menu arsip:
+
+Surat Keputusan
+Dokumentasi
+Laporan Keuangan
+Notulensi Rapat
+
+Setiap item berupa card clickable dengan:
+
+* icon dokumen
+* border
+* hover effect
+
+---
+
+DESIGN STYLE
+
+Gunakan gaya:
+
+Modern Government Dashboard
+Clean UI
+Soft shadow
+Rounded-xl
+Spacing besar
+Minimalistic
+
+---
+
+RESPONSIVE RULES
+
+Desktop:
+12 column grid
+
+Tablet:
+6 column grid
+
+Mobile:
+single column stack
+
+---
+
+COMPONENT STRUCTURE
+
+src/components/dashboard
+
+activity-card.tsx
+division-list.tsx
+document-chart.tsx
+progress-chart.tsx
+discussion-panel.tsx
+event-card.tsx
+archive-card.tsx
+
+src/pages
+
+dashboard.tsx
+
+---
+
+CODE QUALITY
+
+Gunakan:
+
+* React hooks
+* reusable components
+* Mantine components jika perlu
+* Tailwind utility classes
+* dark mode support
+* responsive layout
+* clean TypeScript
+
+---
+
+Output:
+
+* Halaman dashboard lengkap
+* Semua komponen reusable
+* Chart sudah bekerja
+* Layout identik dengan desain dashboard modern pemerintahan

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.");
 }
 
-main().catch((error) => {
-	console.error("Error during seeding:", error);
-	process.exit(1);
-});
+// 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/dashboard-content.tsx

@@ -1,523 +1,117 @@
-import {
-	Calendar,
-	CheckCircle,
-	FileText,
-	MessageCircle,
-	Users,
-} from "lucide-react";
-import {
-	Bar,
-	BarChart,
-	CartesianGrid,
-	Cell,
-	Pie,
-	PieChart,
-	ResponsiveContainer,
-	Tooltip, // Added Tooltip import
-	XAxis,
-	YAxis,
-} from "recharts";
+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 {
-	ActionIcon,
-	Badge,
-	Box,
-	Card, // Added for icon containers
-	Grid,
-	Group,
-	Progress,
-	Stack,
-	Text,
-	ThemeIcon,
-	Title,
-	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";
+
 	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 }}
+			<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}
 						/>
-					</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>
+					</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,86 @@
+import {
+	Box,
+	Card,
+	Group,
+	Text,
+	ThemeIcon,
+	useMantineColorScheme,
+} from "@mantine/core";
+import type { ReactNode } from "react";
+
+interface StatCardProps {
+	title: string;
+	value: string | number;
+	detail?: string;
+	trend?: string;
+	trendValue?: number;
+	icon: ReactNode;
+	iconColor?: string;
+}
+
+export function StatCard({
+	title,
+	value,
+	detail,
+	trend,
+	trendValue,
+	icon,
+	iconColor = "darmasaba-blue",
+}: StatCardProps) {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const isPositiveTrend = trendValue ? trendValue >= 0 : true;
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			bg={dark ? "#1E293B" : "white"}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: dark
+					? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
+					: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+			}}
+			h="100%"
+		>
+			<Group justify="space-between" align="flex-start" w="100%">
+				<Box style={{ flex: 1 }}>
+					<Text size="sm" c="dimmed" mb="xs">
+						{title}
+					</Text>
+					<Group align="baseline" gap="xs">
+						<Text size="xl" fw={700} c={dark ? "white" : "gray.9"}>
+							{value}
+						</Text>
+					</Group>
+					{detail && (
+						<Text size="sm" c="dimmed" mt="xs">
+							{detail}
+						</Text>
+					)}
+					{trend && (
+						<Text
+							size="sm"
+							c={isPositiveTrend ? "green" : "red"}
+							mt="xs"
+							fw={500}
+						>
+							{trend}
+						</Text>
+					)}
+				</Box>
+				<ThemeIcon
+					variant="filled"
+					size="xl"
+					radius="xl"
+					color={dark ? "gray" : iconColor}
+				>
+					{icon}
+				</ThemeIcon>
+			</Group>
+		</Card>
+	);
+}

src/components/kinerja-divisi.tsx

@@ -1,543 +1,98 @@
-import {
-	ActionIcon,
-	Box,
-	Card,
-	Divider,
-	Grid,
-	GridCol,
-	Group,
-	List,
-	Badge as MantineBadge,
-	Progress as MantineProgress,
-	Skeleton,
-	Stack,
-	Text,
-	ThemeIcon,
-	Title,
-	useMantineColorScheme,
-} from "@mantine/core";
-import {
-	Bar,
-	BarChart,
-	CartesianGrid,
-	Cell,
-	Pie,
-	PieChart,
-	ResponsiveContainer,
-	Tooltip,
-	XAxis,
-	YAxis,
-} from "recharts";
-import { Button } from "@/components/ui/button";
+import { Grid, Stack } from "@mantine/core";
+import { ActivityCard } from "./kinerja-divisi/activity-card";
+import { DivisionList } from "./kinerja-divisi/division-list";
+import { DocumentChart } from "./kinerja-divisi/document-chart";
+import { ProgressChart } from "./kinerja-divisi/progress-chart";
+import { DiscussionPanel } from "./kinerja-divisi/discussion-panel";
+import { EventCard } from "./kinerja-divisi/event-card";
+import { ArchiveCard } from "./kinerja-divisi/archive-card";
+
+
+// Data for program kegiatan (Section 1)
+const programKegiatanData = [
+	{
+		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>
-						))}
-					</Stack>
-				) : (
-					<Text c="dimmed" ta="center" py="md">
-						Tidak ada acara hari ini
-					</Text>
-				)}
-			</Card>
+			{/* 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>
+				))}
+			</Grid>
 		</Stack>
 	);
 };

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

@@ -0,0 +1,89 @@
+import { Card, Text, Progress, Group, Box } 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/sidebar.tsx

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

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/routes/pengaturan/route.tsx

@@ -1,6 +1,11 @@
 import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { useDisclosure, useMediaQuery } from "@mantine/hooks";
+import {
+	createFileRoute,
+	Outlet,
+	useRouterState,
+} from "@tanstack/react-router";
+import { useEffect } from "react";
 import { Header } from "@/components/header";
 import { Sidebar } from "@/components/sidebar";
 
@@ -9,12 +14,23 @@ export const Route = createFileRoute("/pengaturan")({
 });
 
 function PengaturanLayout() {
-	const [opened, { toggle }] = useDisclosure();
+	const [opened, { toggle, close }] = useDisclosure();
 	const { colorScheme } = useMantineColorScheme();
+
+	const isMobile = useMediaQuery("(max-width: 48em)");
+	const routerState = useRouterState();
+
 	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
 	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
 	const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
 
+	// Auto close navbar on route change (mobile only)
+	useEffect(() => {
+		if (isMobile && opened) {
+			close();
+		}
+	}, [routerState.location.pathname, isMobile, opened, close]);
+
 	return (
 		<AppShell
 			header={{ height: 60 }}
@@ -26,7 +42,7 @@ function PengaturanLayout() {
 			padding="md"
 		>
 			<AppShell.Header bg={headerBgColor}>
-				<Group h="100%" px="md">
+				<Group h="100%" px="lg" align="center" wrap="nowrap">
 					<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
 					<Header />
 				</Group>

src/utils/api-client.ts

@@ -2,11 +2,7 @@ import createClient from "openapi-fetch";
 import type { paths } from "../../generated/api";
 import { VITE_PUBLIC_URL } from "./env";
 
-const baseUrl =
-	VITE_PUBLIC_URL ||
-	(typeof window !== "undefined"
-		? window.location.origin
-		: "http://localhost:3000");
+const baseUrl = VITE_PUBLIC_URL;
 
 export const apiClient = createClient<paths>({
 	baseUrl: baseUrl,

src/utils/auth.ts

@@ -1,16 +1,11 @@
 import { betterAuth } from "better-auth";
 import { prismaAdapter } from "better-auth/adapters/prisma";
 import { PrismaClient } from "../../generated/prisma";
-import logger from "./logger";
+import { VITE_PUBLIC_URL } from "./env";
 
-const baseUrl = process.env.VITE_PUBLIC_URL;
+const baseUrl = VITE_PUBLIC_URL;
 const prisma = new PrismaClient();
 
-if (!baseUrl) {
-	logger.error("VITE_PUBLIC_URL is not defined");
-	throw new Error("VITE_PUBLIC_URL is not defined");
-}
-
 // logger.info('Initializing Better Auth with Prisma adapter');
 export const auth = betterAuth({
 	baseURL: baseUrl,
@@ -26,6 +21,7 @@ export const auth = betterAuth({
 			clientId: process.env.GITHUB_CLIENT_ID || "CLIENT_ID_MISSING",
 			clientSecret: process.env.GITHUB_CLIENT_SECRET || "CLIENT_SECRET_MISSING",
 			enabled: true,
+			redirectURI: `${baseUrl}/api/auth/callback/github`,
 		},
 	},
 	user: {
@@ -37,8 +33,24 @@ export const auth = betterAuth({
 			},
 		},
 	},
+	databaseHooks: {
+		user: {
+			create: {
+				before: async (user) => {
+					if (user.email === process.env.ADMIN_EMAIL) {
+						return {
+							data: {
+								...user,
+								role: "admin",
+							},
+						};
+					}
+					return { data: user };
+				},
+			},
+		},
+	},
 	secret: process.env.BETTER_AUTH_SECRET,
-	trustedOrigins: ["http://localhost:5173", "http://localhost:3000"],
 	session: {
 		cookieCache: {
 			enabled: true,
@@ -48,5 +60,6 @@ export const auth = betterAuth({
 	},
 	advanced: {
 		cookiePrefix: "bun-react",
+		trustProxy: true,
 	},
 });

src/utils/env.ts

@@ -20,10 +20,21 @@ export const getEnv = (key: string, defaultValue = ""): string => {
 	return defaultValue;
 };
 
-export const VITE_PUBLIC_URL = getEnv(
-	"VITE_PUBLIC_URL",
-	"http://localhost:3000",
-);
+export const VITE_PUBLIC_URL = (() => {
+	// Priority:
+	// 1. BETTER_AUTH_URL (standard for better-auth)
+	// 2. VITE_PUBLIC_URL (our app standard)
+	// 3. window.location.origin (browser fallback)
+	const envUrl = getEnv("BETTER_AUTH_URL") || getEnv("VITE_PUBLIC_URL");
+	if (envUrl) return envUrl;
+
+	// Fallback for browser
+	if (typeof window !== "undefined") {
+		return window.location.origin;
+	}
+
+	return "http://localhost:3000";
+})();
 
 export const IS_DEV = (() => {
 	try {

src/vite.ts

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

tailwind.config.js

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