chore: bump version to 0.1.15

Sebelumnya push ke origin (Gitea) dengan branch build/stg, seharusnya ke
remote build (GitHub) branch stg.

.env.example

@@ -1,6 +1,7 @@
 # App
 PORT=3000
 NODE_ENV=development
+BUN_PUBLIC_BASE_URL=http://localhost:3000
 
 # Dev Inspector
 REACT_EDITOR=code
@@ -13,9 +14,20 @@ DIRECT_URL=postgresql://user:password@localhost:5432/base-template
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
-# Role
+# Super Admin (comma-separated emails)
 SUPER_ADMIN_EMAIL=admin@example.com
 
-# Telegram Notification (optional)
-TELEGRAM_NOTIFY_TOKEN=
-TELEGRAM_NOTIFY_CHAT_ID=
+# API Key for external clients (e.g. mobile apps)
+API_KEY=your-secret-api-key-here
+
+# MinIO (object storage for bug report images)
+MINIO_ENDPOINT=
+MINIO_PORT=443
+MINIO_USE_SSL=true
+MINIO_ACCESS_KEY=
+MINIO_SECRET_KEY=
+MINIO_BUCKET=
+MINIO_UPLOAD_DIR=bug-reports
+
+# Redis (optional — enables App Logs feature on /dev)
+REDIS_URL=

.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,120 @@
+#!/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}"
+
+# Timeout total: MAX_RETRY * SLEEP_INTERVAL detik
+MAX_RETRY=60   # 60 × 10s = 10 menit
+SLEEP_INTERVAL=10
+
+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!"
+  exit 1
+fi
+
+STACK_ID=$(echo "$STACK" | jq -r .Id)
+ENDPOINT_ID=$(echo "$STACK" | jq -r .EndpointId)
+ENV=$(echo "$STACK" | jq '.Env // []')
+
+# ── Catat container ID lama sebelum redeploy ──────────────────────────────────
+echo "📸 Mencatat container aktif sebelum redeploy..."
+CONTAINERS_BEFORE=$(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}")
+
+OLD_IDS=$(echo "$CONTAINERS_BEFORE" | jq -r '[.[] | .Id] | join(",")')
+echo "   Container lama: $(echo "$CONTAINERS_BEFORE" | jq -r '[.[] | .Names[0]] | join(", ")')"
+
+# ── Ambil compose file lalu trigger redeploy ─────────────────────────────────
+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 "🚀 Triggering redeploy $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 image selesai di-pull dan container baru running..."
+echo "   (Timeout: $((MAX_RETRY * SLEEP_INTERVAL)) detik)"
+
+COUNT=0
+while [ $COUNT -lt $MAX_RETRY ]; do
+  sleep $SLEEP_INTERVAL
+  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}")
+
+  # Container baru = ID tidak ada di daftar container lama
+  NEW_RUNNING=$(echo "$CONTAINERS" | jq \
+    --arg old "$OLD_IDS" \
+    '[.[] | select(.State == "running" and ((.Id) as $id | ($old | split(",") | index($id)) == null))] | length')
+
+  FAILED=$(echo "$CONTAINERS" | jq \
+    '[.[] | select(.State == "exited" and (.Status | test("Exited \\(0\\)") | not) and (.Names[0] | test("seed") | not))] | length')
+
+  echo "🔄 [$((COUNT * SLEEP_INTERVAL))s / $((MAX_RETRY * SLEEP_INTERVAL))s] Container baru running: ${NEW_RUNNING} | Gagal: ${FAILED}"
+  echo "$CONTAINERS" | jq -r '.[] | "   → \(.Names[0]) | \(.State) | \(.Status) | id: \(.Id[:12])"'
+
+  if [ "$FAILED" -gt "0" ]; then
+    echo ""
+    echo "❌ Ada container yang crash!"
+    echo "$CONTAINERS" | jq -r '.[] | select(.State == "exited" and (.Status | test("Exited \\(0\\)") | not) and (.Names[0] | test("seed") | not)) | "   → \(.Names[0]) | \(.Status)"'
+    exit 1
+  fi
+
+  if [ "$NEW_RUNNING" -gt "0" ]; then    
+    # Cleanup dangling images setelah redeploy sukses
+    echo "🧹 Membersihkan dangling images..."
+    curl -s -X POST "https://${PORTAINER_URL}/api/endpoints/${ENDPOINT_ID}/docker/images/prune" \
+      -H "Authorization: Bearer ${TOKEN}" \
+      -H "Content-Type: application/json" \
+      -d '{"filters":{"dangling":["true"]}}' | jq -r '"   Reclaimed: \(.SpaceReclaimed // 0 | . / 1073741824 | tostring | .[0:5]) GB"'
+    
+    echo "✅ Cleanup selesai!"
+    echo ""
+    echo "✅ Stack $STACK_NAME berhasil di-redeploy dengan image baru dan running!"
+    exit 0
+  fi
+
+  
+done
+
+echo ""
+echo "❌ Timeout $((MAX_RETRY * SLEEP_INTERVAL))s! Container baru tidak kunjung running."
+echo "   Kemungkinan image masih dalam proses pull atau ada error di server."
+exit 1

.mcp.json

@@ -0,0 +1,16 @@
+{
+  "mcpServers": {
+    "deploy-stg": {
+      "type": "stdio",
+      "command": "bun",
+      "args": ["scripts/mcp-deploy.ts"],
+      "env": {
+        "GH_TOKEN": "${GH_TOKEN}",
+        "STACK_NAME": "monitoring-app",
+        "BASE_URL": "https://api.github.com/repos/bipprojectbali/monitoring-app",
+        "STG_URL": "https://monitoring-stg.wibudev.com",
+        "VERSION_PATH": "/api/system/version"
+      }
+    }
+  }
+}

.playwright-mcp/console-2026-04-14T09-51-59-546Z.log

@@ -0,0 +1,17 @@
+[     665ms] [INFO] %cDownload the React DevTools for a better development experience: https://react.dev/link/react-devtools font-weight:bold @ http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=bf7d8134:14336
+[     708ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     709ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     715ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     715ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     715ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     715ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     715ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     715ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     715ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     715ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     715ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     716ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     716ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     716ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     716ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     716ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644

.playwright-mcp/console-2026-04-14T09-52-33-736Z.log

@@ -0,0 +1,17 @@
+[     358ms] [INFO] %cDownload the React DevTools for a better development experience: https://react.dev/link/react-devtools font-weight:bold @ http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=bf7d8134:14336
+[     375ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     375ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     379ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     379ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     379ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     379ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     380ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     380ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     380ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     380ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     380ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     380ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     380ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     380ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     380ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     380ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644

.playwright-mcp/console-2026-04-14T09-53-25-466Z.log

@@ -0,0 +1,20 @@
+[     137ms] [INFO] %cDownload the React DevTools for a better development experience: https://react.dev/link/react-devtools font-weight:bold @ http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=bf7d8134:14336
+[     143ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     143ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     145ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     145ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     145ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     145ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     145ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     145ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     145ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     145ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     145ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     145ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     145ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     145ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     146ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     146ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     175ms] [ERROR] Failed to load resource: the server responded with a status of 401 (Unauthorized) @ http://localhost:3000/api/auth/session:0
+[   43606ms] [ERROR] Failed to load resource: the server responded with a status of 401 (Unauthorized) @ http://localhost:3000/api/auth/login:0
+[   77901ms] [ERROR] Unsupported style property %s. Did you mean %s? &[data-active] &[dataActive] @ http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=bf7d8134:1804

.playwright-mcp/console-2026-04-15T00-10-32-890Z.log

@@ -0,0 +1,18 @@
+[     240ms] [INFO] %cDownload the React DevTools for a better development experience: https://react.dev/link/react-devtools font-weight:bold @ http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=bf7d8134:14336
+[     265ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     265ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     272ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     272ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     272ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     272ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     272ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     272ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     272ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     272ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     272ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     272ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     272ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     272ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     273ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     273ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     428ms] [ERROR] Unsupported style property %s. Did you mean %s? &[data-active] &[dataActive] @ http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=bf7d8134:1804

.playwright-mcp/console-2026-04-15T00-12-16-354Z.log

@@ -0,0 +1,18 @@
+[     193ms] [INFO] %cDownload the React DevTools for a better development experience: https://react.dev/link/react-devtools font-weight:bold @ http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=bf7d8134:14336
+[     216ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     216ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     222ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     222ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     223ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     223ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     223ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     223ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     223ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     223ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     223ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     223ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     223ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     223ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     223ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     223ms] [ERROR] forwardRef render functions accept exactly two parameters: props and ref. %s Did you forget to use the ref parameter? @ http://localhost:3000/node_modules/.vite/deps/react-B6J-hxuQ.js?v=bf7d8134:644
+[     279ms] [ERROR] Unsupported style property %s. Did you mean %s? &[data-active] &[dataActive] @ http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=bf7d8134:1804

.playwright-mcp/page-2026-04-14T09-52-00-449Z.yml

@@ -0,0 +1,21 @@
+- generic [active] [ref=e1]:
+  - generic:
+    - generic:
+      - generic: Loading...
+  - generic [ref=e4]:
+    - generic [ref=e5]:
+      - img [ref=e6]
+      - img [ref=e8]
+    - heading "Bun + Elysia + Vite + React" [level=1] [ref=e16]
+    - paragraph [ref=e17]: Full-stack starter template with Mantine UI, TanStack Router, and session-based auth.
+    - generic [ref=e18]:
+      - link "Login" [ref=e19] [cursor=pointer]:
+        - /url: /login
+        - generic [ref=e20]:
+          - img [ref=e22]
+          - generic [ref=e26]: Login
+      - link "Dashboard" [ref=e27] [cursor=pointer]:
+        - /url: /dashboard
+        - generic [ref=e28]:
+          - img [ref=e30]
+          - generic [ref=e34]: Dashboard

.playwright-mcp/page-2026-04-14T09-52-34-199Z.yml

@@ -0,0 +1,4 @@
+- generic [active]:
+  - generic:
+    - generic:
+      - generic: Loading...

.playwright-mcp/page-2026-04-14T09-53-25-737Z.yml

@@ -0,0 +1,39 @@
+- generic [active] [ref=e1]:
+  - generic:
+    - generic:
+      - generic: Loading...
+  - generic [ref=e6]:
+    - heading "Login" [level=2] [ref=e7]
+    - paragraph [ref=e8]:
+      - text: "Demo:"
+      - strong [ref=e9]: superadmin@example.com
+      - text: /
+      - strong [ref=e10]: superadmin123
+      - text: "or:"
+      - strong [ref=e11]: user@example.com
+      - text: /
+      - strong [ref=e12]: user123
+    - generic [ref=e13]:
+      - generic [ref=e14]: Email *
+      - generic [ref=e15]:
+        - img [ref=e17]
+        - textbox "Email" [ref=e20]:
+          - /placeholder: email@example.com
+    - generic [ref=e21]:
+      - generic [ref=e22]: Password *
+      - generic [ref=e23]:
+        - img [ref=e25]
+        - textbox "Password" [ref=e30]
+        - button [ref=e32] [cursor=pointer]:
+          - img [ref=e34]
+    - button "Sign in" [ref=e36] [cursor=pointer]:
+      - generic [ref=e37]:
+        - img [ref=e39]
+        - generic [ref=e43]: Sign in
+    - separator [ref=e44]:
+      - generic [ref=e45]: or
+    - link "Login with Google" [ref=e46] [cursor=pointer]:
+      - /url: /api/auth/google
+      - generic [ref=e47]:
+        - img [ref=e49]
+        - generic [ref=e54]: Login with Google

.playwright-mcp/page-2026-04-14T09-54-11-031Z.yml

@@ -0,0 +1,40 @@
+- generic [ref=e6]:
+  - heading "Login" [level=2] [ref=e7]
+  - paragraph [ref=e8]:
+    - text: "Demo:"
+    - strong [ref=e9]: superadmin@example.com
+    - text: /
+    - strong [ref=e10]: superadmin123
+    - text: "or:"
+    - strong [ref=e11]: user@example.com
+    - text: /
+    - strong [ref=e12]: user123
+  - alert [ref=e55]:
+    - generic [ref=e56]:
+      - img [ref=e58]
+      - generic [ref=e61]: Email atau password salah
+  - generic [ref=e13]:
+    - generic [ref=e14]: Email *
+    - generic [ref=e15]:
+      - img [ref=e17]
+      - textbox "Email" [ref=e20]:
+        - /placeholder: email@example.com
+        - text: superadmin@example.com
+  - generic [ref=e21]:
+    - generic [ref=e22]: Password *
+    - generic [ref=e23]:
+      - img [ref=e25]
+      - textbox "Password" [ref=e30]: superadmin123
+      - button [ref=e32] [cursor=pointer]:
+        - img [ref=e34]
+  - button "Sign in" [ref=e36] [cursor=pointer]:
+    - generic [ref=e37]:
+      - img [ref=e39]
+      - generic [ref=e43]: Sign in
+  - separator [ref=e44]:
+    - generic [ref=e45]: or
+  - link "Login with Google" [ref=e46] [cursor=pointer]:
+    - /url: /api/auth/google
+    - generic [ref=e47]:
+      - img [ref=e49]
+      - generic [ref=e54]: Login with Google

.playwright-mcp/page-2026-04-15T00-10-33-255Z.yml

@@ -0,0 +1,4 @@
+- generic [active]:
+  - generic:
+    - generic:
+      - generic: Loading...

.playwright-mcp/page-2026-04-15T00-12-16-729Z.yml

@@ -0,0 +1,131 @@
+- generic [active] [ref=e1]:
+  - generic:
+    - generic:
+      - generic: Loading...
+  - generic [ref=e3]:
+    - banner [ref=e4]:
+      - generic [ref=e5]:
+        - generic [ref=e6]:
+          - button [ref=e7] [cursor=pointer]
+          - generic [ref=e9]:
+            - img [ref=e11]
+            - paragraph [ref=e13]: Monitoring System
+        - generic [ref=e14]:
+          - button "Toggle color scheme" [ref=e15] [cursor=pointer]:
+            - img [ref=e17]
+          - generic "User" [ref=e20] [cursor=pointer]:
+            - img [ref=e21]
+    - navigation [ref=e23]:
+      - generic [ref=e24]:
+        - link "Dashboard" [ref=e25] [cursor=pointer]:
+          - /url: /dashboard
+          - img [ref=e27]
+          - generic [ref=e31]: Dashboard
+          - img [ref=e33]
+        - link "Applications" [ref=e35] [cursor=pointer]:
+          - /url: /apps
+          - img [ref=e37]
+          - generic [ref=e41]: Applications
+          - img [ref=e43]
+        - link "Log Activity" [ref=e45] [cursor=pointer]:
+          - /url: /logs
+          - img [ref=e47]
+          - generic [ref=e50]: Log Activity
+          - img [ref=e52]
+        - link "Error Reports" [ref=e54] [cursor=pointer]:
+          - /url: /bug-reports
+          - img [ref=e56]
+          - generic [ref=e58]: Error Reports
+          - img [ref=e60]
+        - link "Users" [ref=e62] [cursor=pointer]:
+          - /url: /users
+          - img [ref=e64]
+          - generic [ref=e67]: Users
+          - img [ref=e69]
+      - generic [ref=e72]:
+        - generic [ref=e73]:
+          - paragraph [ref=e74]: SYSTEM STATUS
+          - paragraph [ref=e77]: All Systems Operational
+        - button "Log out" [ref=e78] [cursor=pointer]:
+          - generic [ref=e79]:
+            - img [ref=e81]
+            - generic [ref=e85]: Log out
+    - main [ref=e86]:
+      - generic [ref=e88]:
+        - generic [ref=e90]:
+          - heading "Overview Dashboard" [level=2] [ref=e91]
+          - paragraph [ref=e92]: Welcome back, Super Admin. Here is what's happening today.
+        - generic [ref=e93]:
+          - generic [ref=e94]:
+            - img [ref=e97]
+            - generic [ref=e101]:
+              - paragraph [ref=e102]: Total Applications
+              - paragraph [ref=e103]: "1"
+          - generic [ref=e104]:
+            - img [ref=e107]
+            - generic [ref=e109]:
+              - paragraph [ref=e110]: New Errors
+              - paragraph [ref=e111]: "1"
+          - generic [ref=e112]:
+            - img [ref=e115]
+            - generic [ref=e120]:
+              - paragraph [ref=e121]: Users
+              - paragraph [ref=e122]: "4"
+        - generic [ref=e123]:
+          - heading "Registered Applications" [level=3] [ref=e124]
+          - link "View All Apps" [ref=e125] [cursor=pointer]:
+            - /url: /apps
+            - generic [ref=e126]:
+              - generic [ref=e127]: View All Apps
+              - img [ref=e129]
+        - generic [ref=e132]:
+          - generic [ref=e133]:
+            - generic [ref=e134]:
+              - img [ref=e137]
+              - generic [ref=e139]:
+                - paragraph [ref=e140]: Desa+
+                - paragraph [ref=e141]: VERSION 2.4.1
+            - generic [ref=e143]: ACTIVE
+          - link "View" [ref=e144] [cursor=pointer]:
+            - /url: /apps/desa-plus
+            - generic [ref=e145]:
+              - generic [ref=e146]: View
+              - img [ref=e148]
+        - generic [ref=e150]:
+          - heading "Recent Error Reports" [level=3] [ref=e151]
+          - link "View All Errors" [ref=e152] [cursor=pointer]:
+            - /url: /bug-reports
+            - generic [ref=e153]:
+              - generic [ref=e154]: View All Errors
+              - img [ref=e156]
+        - table [ref=e159]:
+          - rowgroup [ref=e160]:
+            - row "Application Error Message Version Time Severity" [ref=e161]:
+              - columnheader "Application" [ref=e162]
+              - columnheader "Error Message" [ref=e163]
+              - columnheader "Version" [ref=e164]
+              - columnheader "Time" [ref=e165]
+              - columnheader "Severity" [ref=e166]
+          - rowgroup [ref=e167]:
+            - row "desa-plus error saat menambah data project v2.1 1 days ago ON_HOLD" [ref=e168]:
+              - cell "desa-plus" [ref=e169]:
+                - paragraph [ref=e170]: desa-plus
+              - cell "error saat menambah data project" [ref=e171]:
+                - paragraph [ref=e172]: error saat menambah data project
+              - cell "v2.1" [ref=e173]:
+                - generic [ref=e175]: v2.1
+              - cell "1 days ago" [ref=e176]:
+                - paragraph [ref=e177]: 1 days ago
+              - cell "ON_HOLD" [ref=e178]:
+                - generic [ref=e180]: ON_HOLD
+            - row "desa-plus error pada saat login v2.1.0 1 days ago OPEN" [ref=e181]:
+              - cell "desa-plus" [ref=e182]:
+                - paragraph [ref=e183]: desa-plus
+              - cell "error pada saat login" [ref=e184]:
+                - paragraph [ref=e185]: error pada saat login
+              - cell "v2.1.0" [ref=e186]:
+                - generic [ref=e188]: v2.1.0
+              - cell "1 days ago" [ref=e189]:
+                - paragraph [ref=e190]: 1 days ago
+              - cell "OPEN" [ref=e191]:
+                - generic [ref=e193]: OPEN

.qwen/settings.json

@@ -0,0 +1,13 @@
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": [
+        "@playwright/mcp@latest",
+        "--headless"
+      ],
+      "timeout": 30000
+    }
+  },
+  "$version": 3
+}

.qwen/settings.json.orig

@@ -0,0 +1,9 @@
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest", "--headless"],
+      "timeout": 30000
+    }
+  }
+}

CLAUDE.md

@@ -1,73 +1,34 @@
-Default to using Bun instead of Node.js.
+# CLAUDE.md
 
-- Use `bun <file>` instead of `node <file>` or `ts-node <file>`
-- Use `bun test` instead of `jest` or `vitest`
-- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install`
-- Use `bun run <script>` instead of `npm run <script>`
-- Use `bunx <package> <command>` instead of `npx <package> <command>`
-- Bun automatically loads .env, so don't use dotenv.
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-## Server
+## Runtime
 
-Elysia.js as the HTTP framework, running on Bun. API routes are in `src/app.ts` (exported as `createApp()`), frontend serving and dev tools are in `src/index.tsx`.
+Default to Bun instead of Node.js everywhere:
 
-- `src/app.ts` — Elysia app factory with all API routes (auth, hello, health, Google OAuth). Testable via `app.handle(request)`.
-- `src/index.tsx` — Server entry. Adds Vite middleware (dev) or static file serving (prod), click-to-source editor integration, and `.listen()`.
-- `src/serve.ts` — Dev entry (`bun --watch src/serve.ts`). Dynamic import workaround for Bun EADDRINUSE race.
+- `bun <file>` not `node` / `ts-node`
+- `bun test` not `jest` / `vitest`
+- `bun install` not `npm install` / `yarn` / `pnpm`
+- `bun run <script>` not `npm run`
+- `bunx <pkg>` not `npx`
+- Bun auto-loads `.env` — never use dotenv.
 
-## Database
+## Commands
 
-PostgreSQL via Prisma v6. Client generated to `./generated/prisma` (gitignored).
+See @docs/COMMANDS.md
 
-- Schema: `prisma/schema.prisma` — User (id, name, email, password, timestamps) + Session (id, token, userId, expiresAt)
-- Client singleton: `src/lib/db.ts` — import `{ prisma }` from here
-- Seed: `prisma/seed.ts` — demo users with `Bun.password.hash` bcrypt
-- Commands: `bun run db:migrate`, `bun run db:seed`, `bun run db:generate`
+## Architecture
 
-## Auth
-
-Session-based auth with HttpOnly cookies stored in DB.
-
-- Login: `POST /api/auth/login` — finds user by email, verifies password with `Bun.password.verify`, creates Session record
-- Google OAuth: `GET /api/auth/google` → Google → `GET /api/auth/callback/google` — upserts user, creates session
-- Session: `GET /api/auth/session` — looks up session by cookie token, returns user or 401, auto-deletes expired
-- Logout: `POST /api/auth/logout` — deletes session from DB, clears cookie
-
-## Frontend
-
-React 19 + Vite 8 (middleware mode in dev). File-based routing with TanStack Router.
-
-- Entry: `src/frontend.tsx` — renders App, removes splash screen, DevInspector in dev
-- App: `src/frontend/App.tsx` — MantineProvider (dark, forced), QueryClientProvider, RouterProvider
-- Routes: `src/frontend/routes/` — `__root.tsx`, `index.tsx`, `login.tsx`, `dashboard.tsx`
-- Auth hooks: `src/frontend/hooks/useAuth.ts` — `useSession()`, `useLogin()`, `useLogout()`
-- UI: Mantine v8 (dark theme `#242424`), react-icons
-- Splash: `index.html` has inline dark CSS + spinner, removed on React mount
-
-## Dev Tools
-
-- Click-to-source: `Ctrl+Shift+Cmd+C` toggles inspector. Custom Vite plugin (`inspectorPlugin` in `src/vite.ts`) injects `data-inspector-*` attributes. Reads original file from disk for accurate line numbers.
-- HMR: Vite 8 with `@vitejs/plugin-react` v6. `dedupeRefreshPlugin` fixes double React Refresh injection.
-- Editor: `REACT_EDITOR` env var. `zed` and `subl` use `file:line:col`, others use `--goto file:line:col`.
+See @docs/ARCHITECTURE.md
 
 ## Testing
 
-Tests use `bun:test`. Three levels:
+See @docs/TESTING.md
 
-```bash
-bun run test              # All tests
-bun run test:unit         # tests/unit/ — env, db connection, bcrypt
-bun run test:integration  # tests/integration/ — API endpoints via app.handle()
-bun run test:e2e          # tests/e2e/ — browser tests via Lightpanda CDP
-```
+## Dev Tools
 
-- `tests/helpers.ts` — `createTestApp()`, `seedTestUser()`, `createTestSession()`, `cleanupTestData()`
-- Integration tests use `createApp().handle(new Request(...))` — no server needed
-- E2E tests use Lightpanda browser (Docker, `ws://127.0.0.1:9222`). App URLs use `host.docker.internal` from container. Lightpanda executes JS but POST fetch returns 407 — use integration tests for mutations.
+See @docs/DEV_TOOLS.md
 
-## APIs
+## Frontend Conventions
 
-- `Bun.password.hash()` / `Bun.password.verify()` for bcrypt
-- `Bun.file()` for static file serving in production
-- `Bun.which()` / `Bun.spawn()` for editor integration
-- `crypto.randomUUID()` for session tokens
+See @docs/CONVENTIONS.md

Dockerfile

@@ -0,0 +1,35 @@
+FROM oven/bun:1 AS base
+WORKDIR /app
+
+# Install dependencies
+FROM base AS deps
+COPY package.json bun.lock ./
+RUN bun install --frozen-lockfile
+
+# Generate Prisma client
+FROM deps AS prisma
+COPY prisma ./prisma
+RUN bunx prisma generate
+
+# Build frontend (Vite → dist/)
+FROM prisma AS builder
+ARG VITE_URL_API_DESA_PLUS
+ENV VITE_URL_API_DESA_PLUS=$VITE_URL_API_DESA_PLUS
+COPY . .
+RUN bun run build
+
+# Runtime
+FROM base AS runner
+WORKDIR /app
+
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/generated ./generated
+COPY --from=builder /app/prisma ./prisma
+COPY --from=builder /app/src ./src
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/package.json ./
+
+ENV NODE_ENV=production
+EXPOSE 3000
+
+CMD ["bun", "src/index.tsx"]

PLAYWRIGHT_MCP.md

@@ -0,0 +1,100 @@
+# Playwright MCP Setup
+
+This project includes Playwright MCP (Model Context Protocol) for AI-assisted browser automation.
+
+## What is Playwright MCP?
+
+Playwright MCP allows AI assistants (like Claude) to interact with a real browser through the Model Context Protocol. This enables:
+- Automated browser testing
+- Web scraping and data extraction
+- Visual testing and screenshots
+- Navigation and interaction with web pages
+
+## Setup
+
+All dependencies are already installed:
+- `@playwright/mcp` - MCP server for Playwright
+- `@playwright/test` - Playwright test framework
+- `playwright` - Browser automation library
+- Chromium browser (downloaded via `bunx playwright install`)
+
+## Configuration
+
+### Qwen Code MCP Config (`.qwen/settings.json`)
+
+Qwen Code automatically loads this file on new session start:
+```json
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest", "--headless"],
+      "timeout": 30000
+    }
+  }
+}
+```
+
+### Playwright Config (`playwright.config.ts`)
+Standard E2E test configuration with:
+- Chromium browser
+- Base URL: http://localhost:3000
+- Auto-starts dev server for testing
+
+## Usage
+
+### Start MCP Server
+```bash
+bun run mcp:playwright
+```
+
+This starts the MCP server on port 3000 in headless mode. AI assistants can connect to this server to control the browser.
+
+### Run E2E Tests
+```bash
+# Using Playwright's test runner
+bunx playwright test
+
+# Using the existing test suite
+bun run test:e2e
+```
+
+### Install/Update Browsers
+```bash
+# Install all browsers
+bunx playwright install
+
+# Install specific browser
+bunx playwright install chromium
+```
+
+## Integration with AI Assistants
+
+When using an AI assistant that supports MCP:
+1. Start your app: `bun run dev`
+2. Start the MCP server: `bun run mcp:playwright`
+3. The AI assistant can now:
+   - Navigate to your app
+   - Take screenshots
+   - Click elements and fill forms
+   - Test user flows
+   - Debug UI issues
+
+## Available MCP Tools
+
+The Playwright MCP server provides tools for:
+- `browser_navigate` - Navigate to a URL
+- `browser_screenshot` - Take a screenshot
+- `browser_click` - Click an element
+- `browser_type` - Type text into an element
+- `browser_select_option` - Select dropdown options
+- `browser_hover` - Hover over elements
+- `browser_evaluate` - Execute JavaScript
+- `browser_snapshot` - Get page accessibility snapshot
+- And more...
+
+## Files
+
+- `mcp.json` - MCP server configuration
+- `playwright.config.ts` - Playwright test configuration
+- `tests/e2e/` - E2E test files

bun.lock

@@ -1,19 +1,28 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "bun-react-template",
       "dependencies": {
         "@elysiajs/cors": "^1.4.1",
+        "@elysiajs/eden": "^1.4.9",
         "@elysiajs/html": "^1.4.0",
-        "@mantine/charts": "^9.0.0",
+        "@elysiajs/swagger": "^1.3.1",
+        "@mantine/charts": "^8.3.0",
         "@mantine/core": "^8.3.18",
+        "@mantine/dates": "^8.3.0",
         "@mantine/hooks": "^8.3.18",
+        "@mantine/modals": "^8.3.18",
+        "@mantine/notifications": "^8.3.18",
+        "@modelcontextprotocol/sdk": "^1.29.0",
         "@prisma/client": "6",
         "@tanstack/react-query": "^5.95.2",
         "@tanstack/react-router": "^1.168.10",
+        "@xyflow/react": "^12.6.4",
+        "dayjs": "^1.11.20",
+        "elkjs": "^0.9.3",
         "elysia": "^1.4.28",
+        "minio": "^8.0.7",
         "postcss": "^8.5.8",
         "postcss-preset-mantine": "^1.18.0",
         "postcss-simple-vars": "^7.0.1",
@@ -21,14 +30,18 @@
         "react-dom": "^19",
         "react-icons": "^5.6.0",
         "recharts": "^3.8.1",
+        "swr": "^2.4.1",
       },
       "devDependencies": {
         "@biomejs/biome": "^2.4.10",
+        "@playwright/mcp": "^0.0.70",
+        "@playwright/test": "^1.59.1",
         "@tanstack/router-vite-plugin": "^1.166.27",
         "@types/bun": "latest",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "@vitejs/plugin-react": "^6.0.1",
+        "playwright": "^1.59.1",
         "prisma": "6",
         "puppeteer-core": "^24.40.0",
         "typescript": "^6.0.2",
@@ -99,8 +112,12 @@
 
     "@elysiajs/cors": ["@elysiajs/cors@1.4.1", "", { "peerDependencies": { "elysia": ">= 1.4.0" } }, "sha512-lQfad+F3r4mNwsxRKbXyJB8Jg43oAOXjRwn7sKUL6bcOW3KjUqUimTS+woNpO97efpzjtDE0tEjGk9DTw8lqTQ=="],
 
+    "@elysiajs/eden": ["@elysiajs/eden@1.4.9", "", { "peerDependencies": { "elysia": ">=1.4.19" } }, "sha512-3CKVD4ycVjB8nCNssfmhnUuq3SzSHkUES3v5PNCFr9LxIrx39/HVRAZ8z2sLxrFqzUs48dCBZaxoZzJ5UUVHDA=="],
+
     "@elysiajs/html": ["@elysiajs/html@1.4.0", "", { "dependencies": { "@kitajs/html": "^4.1.0", "@kitajs/ts-html-plugin": "^4.0.1" }, "peerDependencies": { "elysia": ">= 1.4.0" } }, "sha512-j4jFqGEkIC8Rg2XiTOujb9s0WLnz1dnY/4uqczyCdOVruDeJtGP+6+GvF0A76SxEvltn8UR1yCUnRdLqRi3vuw=="],
 
+    "@elysiajs/swagger": ["@elysiajs/swagger@1.3.1", "", { "dependencies": { "@scalar/themes": "^0.9.52", "@scalar/types": "^0.0.12", "openapi-types": "^12.1.3", "pathe": "^1.1.2" }, "peerDependencies": { "elysia": ">= 1.3.0" } }, "sha512-LcbLHa0zE6FJKWPWKsIC/f+62wbDv3aXydqcNPVPyqNcaUgwvCajIi+5kHEU6GO3oXUCpzKaMsb3gsjt8sLzFQ=="],
+
     "@emnapi/core": ["@emnapi/core@1.9.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.0", "tslib": "^2.4.0" } }, "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA=="],
 
     "@emnapi/runtime": ["@emnapi/runtime@1.9.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA=="],
@@ -169,6 +186,8 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.11", "", {}, "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="],
 
+    "@hono/node-server": ["@hono/node-server@1.19.14", "", { "peerDependencies": { "hono": "^4" } }, "sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw=="],
+
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
     "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -183,16 +202,32 @@
 
     "@kitajs/ts-html-plugin": ["@kitajs/ts-html-plugin@4.1.4", "", { "dependencies": { "chalk": "^5.6.2", "tslib": "^2.8.1", "yargs": "^18.0.0" }, "peerDependencies": { "@kitajs/html": "^4.2.10", "typescript": "^5.9.3" }, "bin": { "xss-scan": "dist/cli.js", "ts-html-plugin": "dist/cli.js" } }, "sha512-xK5mNrhnIy73kJFKx5yVGChJyWFRGmIaE0sjlVxVYllk5dyaEYVCrIh1N8AfnseEHka8gAqzPGW95HlkhDvnJA=="],
 
-    "@mantine/charts": ["@mantine/charts@9.0.0", "", { "peerDependencies": { "@mantine/core": "9.0.0", "@mantine/hooks": "9.0.0", "react": "^19.2.0", "react-dom": "^19.2.0", "recharts": ">=3.2.1" } }, "sha512-TnbjiT2tXZDAQWZrv/+Xu3JKYjPiTfO5jSIbcwnxZSVtLI+PIxA7zrSps+it/Nx3ch8GHpDizJ7UArC0UfmNkQ=="],
+    "@mantine/charts": ["@mantine/charts@8.3.18", "", { "peerDependencies": { "@mantine/core": "8.3.18", "@mantine/hooks": "8.3.18", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x", "recharts": ">=2.13.3" } }, "sha512-oudif3EUH7Nb9DPm0abAPxpFYDWWjR3k2S5ll0/CcB+pJzlhwaBG19QwpOJaRA6VAvAXDDKOXCO4mi9XCEN78g=="],
 
     "@mantine/core": ["@mantine/core@8.3.18", "", { "dependencies": { "@floating-ui/react": "^0.27.16", "clsx": "^2.1.1", "react-number-format": "^5.4.4", "react-remove-scroll": "^2.7.1", "react-textarea-autosize": "8.5.9", "type-fest": "^4.41.0" }, "peerDependencies": { "@mantine/hooks": "8.3.18", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-9tph1lTVogKPjTx02eUxDUOdXacPzK62UuSqb4TdGliI54/Xgxftq0Dfqu6XuhCxn9J5MDJaNiLDvL/1KRkYqA=="],
 
+    "@mantine/dates": ["@mantine/dates@8.3.18", "", { "dependencies": { "clsx": "^2.1.1" }, "peerDependencies": { "@mantine/core": "8.3.18", "@mantine/hooks": "8.3.18", "dayjs": ">=1.0.0", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-FHx5teJOhupI0gO2o5evtVYQEdqOjayOkLRhEQfB5Nc5DvcysfPfmNILGkc1Nrp9ZQeQWKLT9qr+CkcCXwHOaw=="],
+
     "@mantine/hooks": ["@mantine/hooks@8.3.18", "", { "peerDependencies": { "react": "^18.x || ^19.x" } }, "sha512-QoWr9+S8gg5050TQ06aTSxtlpGjYOpIllRbjYYXlRvZeTsUqiTbVfvQROLexu4rEaK+yy9Wwriwl9PMRgbLqPw=="],
 
+    "@mantine/modals": ["@mantine/modals@8.3.18", "", { "peerDependencies": { "@mantine/core": "8.3.18", "@mantine/hooks": "8.3.18", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-JfPDS4549L314SxFPC1x6CbKwzh82OdnIzwgMxPCVNsWLKV2vEHHUH/fzUYj4Wli6IBrsW4cufjMj9BTj3hm3Q=="],
+
+    "@mantine/notifications": ["@mantine/notifications@8.3.18", "", { "dependencies": { "@mantine/store": "8.3.18", "react-transition-group": "4.4.5" }, "peerDependencies": { "@mantine/core": "8.3.18", "@mantine/hooks": "8.3.18", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-IpQ0lmwbigTBbZCR6iSYWqIOKEx1tlcd7PcEJ5M5X1qeVSY/N3mmDQt1eJmObvcyDeL5cTJMbSA9UPqhRqo9jw=="],
+
+    "@mantine/store": ["@mantine/store@8.3.18", "", { "peerDependencies": { "react": "^18.x || ^19.x" } }, "sha512-i+QRTLmZzLldea0egtUVnGALd6UMIu8jd44nrNWBSNIXJU/8B6rMlC6gyX+l4szopZSuOaaNJIXkqRdC1gQsVg=="],
+
+    "@modelcontextprotocol/sdk": ["@modelcontextprotocol/sdk@1.29.0", "", { "dependencies": { "@hono/node-server": "^1.19.9", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "content-type": "^1.0.5", "cors": "^2.8.5", "cross-spawn": "^7.0.5", "eventsource": "^3.0.2", "eventsource-parser": "^3.0.0", "express": "^5.2.1", "express-rate-limit": "^8.2.1", "hono": "^4.11.4", "jose": "^6.1.3", "json-schema-typed": "^8.0.2", "pkce-challenge": "^5.0.0", "raw-body": "^3.0.0", "zod": "^3.25 || ^4.0", "zod-to-json-schema": "^3.25.1" }, "peerDependencies": { "@cfworker/json-schema": "^4.1.1" }, "optionalPeers": ["@cfworker/json-schema"] }, "sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ=="],
+
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.2", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw=="],
 
+    "@nodable/entities": ["@nodable/entities@2.1.0", "", {}, "sha512-nyT7T3nbMyBI/lvr6L5TyWbFJAI9FTgVRakNoBqCD+PmID8DzFrrNdLLtHMwMszOtqZa8PAOV24ZqDnQrhQINA=="],
+
     "@oxc-project/types": ["@oxc-project/types@0.122.0", "", {}, "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA=="],
 
+    "@playwright/mcp": ["@playwright/mcp@0.0.70", "", { "dependencies": { "playwright": "1.60.0-alpha-1774999321000", "playwright-core": "1.60.0-alpha-1774999321000" }, "bin": { "playwright-mcp": "cli.js" } }, "sha512-Kl0a6l9VL8rvT1oBou3hS5yArjwWV9UlwAkq+0skfK1YVg8XfmmNaAmwZhMeNx/ZhGiWXfCllo6rD/jvZz+WuA=="],
+
+    "@playwright/test": ["@playwright/test@1.59.1", "", { "dependencies": { "playwright": "1.59.1" }, "bin": { "playwright": "cli.js" } }, "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg=="],
+
     "@prisma/client": ["@prisma/client@6.19.2", "", { "peerDependencies": { "prisma": "*", "typescript": ">=5.1.0" }, "optionalPeers": ["prisma", "typescript"] }, "sha512-gR2EMvfK/aTxsuooaDA32D8v+us/8AAet+C3J1cc04SW35FPdZYgLF+iN4NDLUgAaUGTKdAB0CYenu1TAgGdMg=="],
 
     "@prisma/config": ["@prisma/config@6.19.2", "", { "dependencies": { "c12": "3.1.0", "deepmerge-ts": "7.1.5", "effect": "3.18.4", "empathic": "2.0.0" } }, "sha512-kadBGDl+aUswv/zZMk9Mx0C8UZs1kjao8H9/JpI4Wh4SHZaM7zkTwiKn/iFLfRg+XtOAo/Z/c6pAYhijKl0nzQ=="],
@@ -243,6 +278,12 @@
 
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.7", "", {}, "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA=="],
 
+    "@scalar/openapi-types": ["@scalar/openapi-types@0.1.1", "", {}, "sha512-NMy3QNk6ytcCoPUGJH0t4NNr36OWXgZhA3ormr3TvhX1NDgoF95wFyodGVH8xiHeUyn2/FxtETm8UBLbB5xEmg=="],
+
+    "@scalar/themes": ["@scalar/themes@0.9.86", "", { "dependencies": { "@scalar/types": "0.1.7" } }, "sha512-QUHo9g5oSWi+0Lm1vJY9TaMZRau8LHg+vte7q5BVTBnu6NuQfigCaN+ouQ73FqIVd96TwMO6Db+dilK1B+9row=="],
+
+    "@scalar/types": ["@scalar/types@0.0.12", "", { "dependencies": { "@scalar/openapi-types": "0.1.1", "@unhead/schema": "^1.9.5" } }, "sha512-XYZ36lSEx87i4gDqopQlGCOkdIITHHEvgkuJFrXFATQs9zHARop0PN0g4RZYWj+ZpCUclOcaOjbCt8JGe22mnQ=="],
+
     "@sinclair/typebox": ["@sinclair/typebox@0.34.49", "", {}, "sha512-brySQQs7Jtn0joV8Xh9ZV/hZb9Ozb0pmazDIASBkYKCjXrXU3mpcFahmK/z4YDhGkQvP9mWJbVyahdtU5wQA+A=="],
 
     "@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
@@ -287,6 +328,8 @@
 
     "@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
 
+    "@types/d3-drag": ["@types/d3-drag@3.0.7", "", { "dependencies": { "@types/d3-selection": "*" } }, "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ=="],
+
     "@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],
 
     "@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
@@ -295,12 +338,18 @@
 
     "@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],
 
+    "@types/d3-selection": ["@types/d3-selection@3.0.11", "", {}, "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w=="],
+
     "@types/d3-shape": ["@types/d3-shape@3.1.8", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w=="],
 
     "@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],
 
     "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
 
+    "@types/d3-transition": ["@types/d3-transition@3.0.9", "", { "dependencies": { "@types/d3-selection": "*" } }, "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg=="],
+
+    "@types/d3-zoom": ["@types/d3-zoom@3.0.8", "", { "dependencies": { "@types/d3-interpolate": "*", "@types/d3-selection": "*" } }, "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw=="],
+
     "@types/node": ["@types/node@25.5.0", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw=="],
 
     "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
@@ -311,12 +360,24 @@
 
     "@types/yauzl": ["@types/yauzl@2.10.3", "", { "dependencies": { "@types/node": "*" } }, "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q=="],
 
+    "@unhead/schema": ["@unhead/schema@1.11.20", "", { "dependencies": { "hookable": "^5.5.3", "zhead": "^2.2.4" } }, "sha512-0zWykKAaJdm+/Y7yi/Yds20PrUK7XabLe9c3IRcjnwYmSWY6z0Cr19VIs3ozCj8P+GhR+/TI2mwtGlueCEYouA=="],
+
     "@vitejs/plugin-react": ["@vitejs/plugin-react@6.0.1", "", { "dependencies": { "@rolldown/pluginutils": "1.0.0-rc.7" }, "peerDependencies": { "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0", "babel-plugin-react-compiler": "^1.0.0", "vite": "^8.0.0" }, "optionalPeers": ["@rolldown/plugin-babel", "babel-plugin-react-compiler"] }, "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ=="],
 
+    "@xyflow/react": ["@xyflow/react@12.10.2", "", { "dependencies": { "@xyflow/system": "0.0.76", "classcat": "^5.0.3", "zustand": "^4.4.0" }, "peerDependencies": { "react": ">=17", "react-dom": ">=17" } }, "sha512-CgIi6HwlcHXwlkTpr0fxLv/0sRVNZ8IdwKLzzeCscaYBwpvfcH1QFOCeaTCuEn1FQEs/B8CjnTSjhs8udgmBgQ=="],
+
+    "@xyflow/system": ["@xyflow/system@0.0.76", "", { "dependencies": { "@types/d3-drag": "^3.0.7", "@types/d3-interpolate": "^3.0.4", "@types/d3-selection": "^3.0.10", "@types/d3-transition": "^3.0.8", "@types/d3-zoom": "^3.0.8", "d3-drag": "^3.0.0", "d3-interpolate": "^3.0.1", "d3-selection": "^3.0.0", "d3-zoom": "^3.0.0" } }, "sha512-hvwvnRS1B3REwVDlWexsq7YQaPZeG3/mKo1jv38UmnpWmxihp14bW6VtEOuHEwJX2FvzFw8k77LyKSk/wiZVNA=="],
+
+    "accepts": ["accepts@2.0.0", "", { "dependencies": { "mime-types": "^3.0.0", "negotiator": "^1.0.0" } }, "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng=="],
+
     "acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
 
     "agent-base": ["agent-base@7.1.4", "", {}, "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ=="],
 
+    "ajv": ["ajv@8.20.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA=="],
+
+    "ajv-formats": ["ajv-formats@3.0.1", "", { "dependencies": { "ajv": "^8.0.0" } }, "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ=="],
+
     "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
     "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
@@ -327,6 +388,8 @@
 
     "ast-types": ["ast-types@0.16.1", "", { "dependencies": { "tslib": "^2.0.1" } }, "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg=="],
 
+    "async": ["async@3.2.6", "", {}, "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA=="],
+
     "b4a": ["b4a@1.8.0", "", { "peerDependencies": { "react-native-b4a": "*" }, "optionalPeers": ["react-native-b4a"] }, "sha512-qRuSmNSkGQaHwNbM7J78Wwy+ghLEYF1zNrSeMxj4Kgw6y33O3mXcQ6Ie9fRvfU/YnxWkOchPXbaLb73TkIsfdg=="],
 
     "babel-dead-code-elimination": ["babel-dead-code-elimination@1.0.12", "", { "dependencies": { "@babel/core": "^7.23.7", "@babel/parser": "^7.23.6", "@babel/traverse": "^7.23.7", "@babel/types": "^7.23.6" } }, "sha512-GERT7L2TiYcYDtYk1IpD+ASAYXjKbLTDPhBtYj7X1NuRMDTMtAx9kyBenub1Ev41lo91OHCKdmP+egTDmfQ7Ig=="],
@@ -349,16 +412,28 @@
 
     "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
 
+    "block-stream2": ["block-stream2@2.1.0", "", { "dependencies": { "readable-stream": "^3.4.0" } }, "sha512-suhjmLI57Ewpmq00qaygS8UgEq2ly2PCItenIyhMqVjo4t4pGzqMvfgJuX8iWTeSDdfSSqS6j38fL4ToNL7Pfg=="],
+
+    "body-parser": ["body-parser@2.2.2", "", { "dependencies": { "bytes": "^3.1.2", "content-type": "^1.0.5", "debug": "^4.4.3", "http-errors": "^2.0.0", "iconv-lite": "^0.7.0", "on-finished": "^2.4.1", "qs": "^6.14.1", "raw-body": "^3.0.1", "type-is": "^2.0.1" } }, "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA=="],
+
     "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
 
+    "browser-or-node": ["browser-or-node@2.1.1", "", {}, "sha512-8CVjaLJGuSKMVTxJ2DpBl5XnlNDiT4cQFeuCJJrvJmts9YrTZDizTX7PjC2s6W4x+MBGZeEY6dGMrF04/6Hgqg=="],
+
     "browserslist": ["browserslist@4.28.1", "", { "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", "electron-to-chromium": "^1.5.263", "node-releases": "^2.0.27", "update-browserslist-db": "^1.2.0" }, "bin": { "browserslist": "cli.js" } }, "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA=="],
 
-    "buffer-crc32": ["buffer-crc32@0.2.13", "", {}, "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ=="],
+    "buffer-crc32": ["buffer-crc32@1.0.0", "", {}, "sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w=="],
 
     "bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
 
+    "bytes": ["bytes@3.1.2", "", {}, "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="],
+
     "c12": ["c12@3.1.0", "", { "dependencies": { "chokidar": "^4.0.3", "confbox": "^0.2.2", "defu": "^6.1.4", "dotenv": "^16.6.1", "exsolve": "^1.0.7", "giget": "^2.0.0", "jiti": "^2.4.2", "ohash": "^2.0.11", "pathe": "^2.0.3", "perfect-debounce": "^1.0.0", "pkg-types": "^2.2.0", "rc9": "^2.1.2" }, "peerDependencies": { "magicast": "^0.3.5" }, "optionalPeers": ["magicast"] }, "sha512-uWoS8OU1MEIsOv8p/5a82c3H31LsWVR5qiyXVfBNOzfffjUWtPnhAb4BYI2uG2HfGmZmFjCtui5XNWaps+iFuw=="],
 
+    "call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
+
+    "call-bound": ["call-bound@1.0.4", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "get-intrinsic": "^1.3.0" } }, "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg=="],
+
     "camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],
 
     "caniuse-lite": ["caniuse-lite@1.0.30001782", "", {}, "sha512-dZcaJLJeDMh4rELYFw1tvSn1bhZWYFOt468FcbHHxx/Z/dFidd1I6ciyFdi3iwfQCyOjqo9upF6lGQYtMiJWxw=="],
@@ -371,6 +446,8 @@
 
     "citty": ["citty@0.1.6", "", { "dependencies": { "consola": "^3.2.3" } }, "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ=="],
 
+    "classcat": ["classcat@5.0.5", "", {}, "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="],
+
     "cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
 
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
@@ -383,12 +460,22 @@
 
     "consola": ["consola@3.4.2", "", {}, "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA=="],
 
+    "content-disposition": ["content-disposition@1.1.0", "", {}, "sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g=="],
+
+    "content-type": ["content-type@1.0.5", "", {}, "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA=="],
+
     "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
     "cookie": ["cookie@1.1.1", "", {}, "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ=="],
 
     "cookie-es": ["cookie-es@2.0.0", "", {}, "sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg=="],
 
+    "cookie-signature": ["cookie-signature@1.2.2", "", {}, "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg=="],
+
+    "cors": ["cors@2.8.6", "", { "dependencies": { "object-assign": "^4", "vary": "^1" } }, "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw=="],
+
+    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
+
     "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
 
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
@@ -397,6 +484,10 @@
 
     "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
 
+    "d3-dispatch": ["d3-dispatch@3.0.1", "", {}, "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="],
+
+    "d3-drag": ["d3-drag@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-selection": "3" } }, "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg=="],
+
     "d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
 
     "d3-format": ["d3-format@3.1.2", "", {}, "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg=="],
@@ -407,6 +498,8 @@
 
     "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
 
+    "d3-selection": ["d3-selection@3.0.0", "", {}, "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="],
+
     "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
 
     "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
@@ -415,18 +508,30 @@
 
     "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
 
+    "d3-transition": ["d3-transition@3.0.1", "", { "dependencies": { "d3-color": "1 - 3", "d3-dispatch": "1 - 3", "d3-ease": "1 - 3", "d3-interpolate": "1 - 3", "d3-timer": "1 - 3" }, "peerDependencies": { "d3-selection": "2 - 3" } }, "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w=="],
+
+    "d3-zoom": ["d3-zoom@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-drag": "2 - 3", "d3-interpolate": "1 - 3", "d3-selection": "2 - 3", "d3-transition": "2 - 3" } }, "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw=="],
+
     "data-uri-to-buffer": ["data-uri-to-buffer@6.0.2", "", {}, "sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw=="],
 
+    "dayjs": ["dayjs@1.11.20", "", {}, "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ=="],
+
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
 
+    "decode-uri-component": ["decode-uri-component@0.2.2", "", {}, "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="],
+
     "deepmerge-ts": ["deepmerge-ts@7.1.5", "", {}, "sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw=="],
 
     "defu": ["defu@6.1.4", "", {}, "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="],
 
     "degenerator": ["degenerator@5.0.1", "", { "dependencies": { "ast-types": "^0.13.4", "escodegen": "^2.1.0", "esprima": "^4.0.1" } }, "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ=="],
 
+    "depd": ["depd@2.0.0", "", {}, "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="],
+
+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
+
     "destr": ["destr@2.0.5", "", {}, "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA=="],
 
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
@@ -437,26 +542,44 @@
 
     "diff": ["diff@8.0.4", "", {}, "sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw=="],
 
+    "dom-helpers": ["dom-helpers@5.2.1", "", { "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" } }, "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="],
+
     "dotenv": ["dotenv@16.6.1", "", {}, "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow=="],
 
+    "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
+
+    "ee-first": ["ee-first@1.1.1", "", {}, "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="],
+
     "effect": ["effect@3.18.4", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "fast-check": "^3.23.1" } }, "sha512-b1LXQJLe9D11wfnOKAk3PKxuqYshQ0Heez+y5pnkd3jLj1yx9QhM72zZ9uUrOQyNvrs2GZZd/3maL0ZV18YuDA=="],
 
     "electron-to-chromium": ["electron-to-chromium@1.5.329", "", {}, "sha512-/4t+AS1l4S3ZC0Ja7PHFIWeBIxGA3QGqV8/yKsP36v7NcyUCl+bIcmw6s5zVuMIECWwBrAK/6QLzTmbJChBboQ=="],
 
+    "elkjs": ["elkjs@0.9.3", "", {}, "sha512-f/ZeWvW/BCXbhGEf1Ujp29EASo/lk1FDnETgNKwJrsVvGZhUWCZyg3xLJjAsxfOmt8KjswHmI5EwCQcPMpOYhQ=="],
+
     "elysia": ["elysia@1.4.28", "", { "dependencies": { "cookie": "^1.1.1", "exact-mirror": "^0.2.7", "fast-decode-uri-component": "^1.0.1", "memoirist": "^0.4.0" }, "peerDependencies": { "@sinclair/typebox": ">= 0.34.0 < 1", "@types/bun": ">= 1.2.0", "file-type": ">= 20.0.0", "openapi-types": ">= 12.0.0", "typescript": ">= 5.0.0" }, "optionalPeers": ["@types/bun", "typescript"] }, "sha512-Vrx8sBnvq8squS/3yNBzR1jBXI+SgmnmvwawPjNuEHndUe5l1jV2Gp6JJ4ulDkEB8On6bWmmuyPpA+bq4t+WYg=="],
 
     "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
     "empathic": ["empathic@2.0.0", "", {}, "sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA=="],
 
+    "encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="],
+
     "end-of-stream": ["end-of-stream@1.4.5", "", { "dependencies": { "once": "^1.4.0" } }, "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg=="],
 
+    "es-define-property": ["es-define-property@1.0.1", "", {}, "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="],
+
+    "es-errors": ["es-errors@1.3.0", "", {}, "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="],
+
+    "es-object-atoms": ["es-object-atoms@1.1.1", "", { "dependencies": { "es-errors": "^1.3.0" } }, "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA=="],
+
     "es-toolkit": ["es-toolkit@1.45.1", "", {}, "sha512-/jhoOj/Fx+A+IIyDNOvO3TItGmlMKhtX8ISAHKE90c4b/k1tqaqEZ+uUqfpU8DMnW5cgNJv606zS55jGvza0Xw=="],
 
     "esbuild": ["esbuild@0.27.4", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.4", "@esbuild/android-arm": "0.27.4", "@esbuild/android-arm64": "0.27.4", "@esbuild/android-x64": "0.27.4", "@esbuild/darwin-arm64": "0.27.4", "@esbuild/darwin-x64": "0.27.4", "@esbuild/freebsd-arm64": "0.27.4", "@esbuild/freebsd-x64": "0.27.4", "@esbuild/linux-arm": "0.27.4", "@esbuild/linux-arm64": "0.27.4", "@esbuild/linux-ia32": "0.27.4", "@esbuild/linux-loong64": "0.27.4", "@esbuild/linux-mips64el": "0.27.4", "@esbuild/linux-ppc64": "0.27.4", "@esbuild/linux-riscv64": "0.27.4", "@esbuild/linux-s390x": "0.27.4", "@esbuild/linux-x64": "0.27.4", "@esbuild/netbsd-arm64": "0.27.4", "@esbuild/netbsd-x64": "0.27.4", "@esbuild/openbsd-arm64": "0.27.4", "@esbuild/openbsd-x64": "0.27.4", "@esbuild/openharmony-arm64": "0.27.4", "@esbuild/sunos-x64": "0.27.4", "@esbuild/win32-arm64": "0.27.4", "@esbuild/win32-ia32": "0.27.4", "@esbuild/win32-x64": "0.27.4" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-Rq4vbHnYkK5fws5NF7MYTU68FPRE1ajX7heQ/8QXXWqNgqqJ/GkmmyxIzUnf2Sr/bakf8l54716CcMGHYhMrrQ=="],
 
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
+    "escape-html": ["escape-html@1.0.3", "", {}, "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="],
+
     "escodegen": ["escodegen@2.1.0", "", { "dependencies": { "esprima": "^4.0.1", "estraverse": "^5.2.0", "esutils": "^2.0.2" }, "optionalDependencies": { "source-map": "~0.6.1" }, "bin": { "esgenerate": "bin/esgenerate.js", "escodegen": "bin/escodegen.js" } }, "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w=="],
 
     "esprima": ["esprima@4.0.1", "", { "bin": { "esparse": "./bin/esparse.js", "esvalidate": "./bin/esvalidate.js" } }, "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="],
@@ -465,12 +588,22 @@
 
     "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
 
+    "etag": ["etag@1.8.1", "", {}, "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="],
+
     "eventemitter3": ["eventemitter3@5.0.4", "", {}, "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="],
 
     "events-universal": ["events-universal@1.0.1", "", { "dependencies": { "bare-events": "^2.7.0" } }, "sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw=="],
 
+    "eventsource": ["eventsource@3.0.7", "", { "dependencies": { "eventsource-parser": "^3.0.1" } }, "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA=="],
+
+    "eventsource-parser": ["eventsource-parser@3.0.8", "", {}, "sha512-70QWGkr4snxr0OXLRWsFLeRBIRPuQOvt4s8QYjmUlmlkyTZkRqS7EDVRZtzU3TiyDbXSzaOeF0XUKy8PchzukQ=="],
+
     "exact-mirror": ["exact-mirror@0.2.7", "", { "peerDependencies": { "@sinclair/typebox": "^0.34.15" }, "optionalPeers": ["@sinclair/typebox"] }, "sha512-+MeEmDcLA4o/vjK2zujgk+1VTxPR4hdp23qLqkWfStbECtAq9gmsvQa3LW6z/0GXZyHJobrCnmy1cdeE7BjsYg=="],
 
+    "express": ["express@5.2.1", "", { "dependencies": { "accepts": "^2.0.0", "body-parser": "^2.2.1", "content-disposition": "^1.0.0", "content-type": "^1.0.5", "cookie": "^0.7.1", "cookie-signature": "^1.2.1", "debug": "^4.4.0", "depd": "^2.0.0", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "etag": "^1.8.1", "finalhandler": "^2.1.0", "fresh": "^2.0.0", "http-errors": "^2.0.0", "merge-descriptors": "^2.0.0", "mime-types": "^3.0.0", "on-finished": "^2.4.1", "once": "^1.4.0", "parseurl": "^1.3.3", "proxy-addr": "^2.0.7", "qs": "^6.14.0", "range-parser": "^1.2.1", "router": "^2.2.0", "send": "^1.1.0", "serve-static": "^2.2.0", "statuses": "^2.0.1", "type-is": "^2.0.1", "vary": "^1.1.2" } }, "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw=="],
+
+    "express-rate-limit": ["express-rate-limit@8.4.1", "", { "dependencies": { "ip-address": "10.1.0" }, "peerDependencies": { "express": ">= 4.11" } }, "sha512-NGVYwQSAyEQgzxX1iCM978PP9AdO/hW93gMcF6ZwQCm+rFvLsBH6w4xcXWTcliS8La5EPRN3p9wzItqBwJrfNw=="],
+
     "exsolve": ["exsolve@1.0.8", "", {}, "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA=="],
 
     "extract-zip": ["extract-zip@2.0.1", "", { "dependencies": { "debug": "^4.1.1", "get-stream": "^5.1.0", "yauzl": "^2.10.0" }, "optionalDependencies": { "@types/yauzl": "^2.9.1" }, "bin": { "extract-zip": "cli.js" } }, "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg=="],
@@ -479,8 +612,16 @@
 
     "fast-decode-uri-component": ["fast-decode-uri-component@1.0.1", "", {}, "sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg=="],
 
+    "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
+
     "fast-fifo": ["fast-fifo@1.3.2", "", {}, "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ=="],
 
+    "fast-uri": ["fast-uri@3.1.0", "", {}, "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA=="],
+
+    "fast-xml-builder": ["fast-xml-builder@1.1.5", "", { "dependencies": { "path-expression-matcher": "^1.1.3" } }, "sha512-4TJn/8FKLeslLAH3dnohXqE3QSoxkhvaMzepOIZytwJXZO69Bfz0HBdDHzOTOon6G59Zrk6VQ2bEiv1t61rfkA=="],
+
+    "fast-xml-parser": ["fast-xml-parser@5.7.1", "", { "dependencies": { "@nodable/entities": "^2.1.0", "fast-xml-builder": "^1.1.5", "path-expression-matcher": "^1.5.0", "strnum": "^2.2.3" }, "bin": { "fxparser": "src/cli/cli.js" } }, "sha512-8Cc3f8GUGUULg34pBch/KGyPLglS+OFs05deyOlY7fL2MTagYPKrVQNmR1fLF/yJ9PH5ZSTd3YDF6pnmeZU+zA=="],
+
     "fd-slicer": ["fd-slicer@1.1.0", "", { "dependencies": { "pend": "~1.2.0" } }, "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g=="],
 
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
@@ -489,7 +630,17 @@
 
     "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
 
-    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+    "filter-obj": ["filter-obj@1.1.0", "", {}, "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="],
+
+    "finalhandler": ["finalhandler@2.1.1", "", { "dependencies": { "debug": "^4.4.0", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "on-finished": "^2.4.1", "parseurl": "^1.3.3", "statuses": "^2.0.1" } }, "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA=="],
+
+    "forwarded": ["forwarded@0.2.0", "", {}, "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="],
+
+    "fresh": ["fresh@2.0.0", "", {}, "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A=="],
+
+    "fsevents": ["fsevents@2.3.2", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],
+
+    "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
 
     "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
 
@@ -497,8 +648,12 @@
 
     "get-east-asian-width": ["get-east-asian-width@1.5.0", "", {}, "sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA=="],
 
+    "get-intrinsic": ["get-intrinsic@1.3.0", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ=="],
+
     "get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],
 
+    "get-proto": ["get-proto@1.0.1", "", { "dependencies": { "dunder-proto": "^1.0.1", "es-object-atoms": "^1.0.0" } }, "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g=="],
+
     "get-stream": ["get-stream@5.2.0", "", { "dependencies": { "pump": "^3.0.0" } }, "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA=="],
 
     "get-tsconfig": ["get-tsconfig@4.13.7", "", { "dependencies": { "resolve-pkg-maps": "^1.0.0" } }, "sha512-7tN6rFgBlMgpBML5j8typ92BKFi2sFQvIdpAqLA2beia5avZDrMs0FLZiM5etShWq5irVyGcGMEA1jcDaK7A/Q=="],
@@ -509,18 +664,36 @@
 
     "glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
+    "gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
+
+    "has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="],
+
+    "hasown": ["hasown@2.0.3", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg=="],
+
+    "hono": ["hono@4.12.15", "", {}, "sha512-qM0jDhFEaCBb4TxoW7f53Qrpv9RBiayUHo0S52JudprkhvpjIrGoU1mnnr29Fvd1U335ZFPZQY1wlkqgfGXyLg=="],
+
+    "hookable": ["hookable@5.5.3", "", {}, "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="],
+
+    "http-errors": ["http-errors@2.0.1", "", { "dependencies": { "depd": "~2.0.0", "inherits": "~2.0.4", "setprototypeof": "~1.2.0", "statuses": "~2.0.2", "toidentifier": "~1.0.1" } }, "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ=="],
+
     "http-proxy-agent": ["http-proxy-agent@7.0.2", "", { "dependencies": { "agent-base": "^7.1.0", "debug": "^4.3.4" } }, "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig=="],
 
     "https-proxy-agent": ["https-proxy-agent@7.0.6", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "4" } }, "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw=="],
 
+    "iconv-lite": ["iconv-lite@0.7.2", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw=="],
+
     "ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],
 
     "immer": ["immer@10.2.0", "", {}, "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw=="],
 
+    "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
+
     "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
 
     "ip-address": ["ip-address@10.1.0", "", {}, "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q=="],
 
+    "ipaddr.js": ["ipaddr.js@2.3.0", "", {}, "sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg=="],
+
     "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
 
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
@@ -531,14 +704,24 @@
 
     "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
 
+    "is-promise": ["is-promise@4.0.0", "", {}, "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ=="],
+
     "isbot": ["isbot@5.1.37", "", {}, "sha512-5bcicX81xf6NlTEV8rWdg7Pk01LFizDetuYGHx6d/f6y3lR2/oo8IfxjzJqn1UdDEyCcwT9e7NRloj8DwCYujQ=="],
 
+    "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+
     "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
 
+    "jose": ["jose@6.2.3", "", {}, "sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw=="],
+
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
     "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
 
+    "json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
+
+    "json-schema-typed": ["json-schema-typed@8.0.2", "", {}, "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA=="],
+
     "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
 
     "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
@@ -565,16 +748,34 @@
 
     "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
 
+    "lodash": ["lodash@4.18.1", "", {}, "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q=="],
+
+    "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
+
     "lru-cache": ["lru-cache@7.18.3", "", {}, "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA=="],
 
+    "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
+
+    "media-typer": ["media-typer@1.1.0", "", {}, "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw=="],
+
     "memoirist": ["memoirist@0.4.0", "", {}, "sha512-zxTgA0mSYELa66DimuNQDvyLq36AwDlTuVRbnQtB+VuTcKWm5Qc4z3WkSpgsFWHNhexqkIooqpv4hdcqrX5Nmg=="],
 
+    "merge-descriptors": ["merge-descriptors@2.0.0", "", {}, "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g=="],
+
+    "mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],
+
+    "mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
+
+    "minio": ["minio@8.0.7", "", { "dependencies": { "async": "^3.2.4", "block-stream2": "^2.1.0", "browser-or-node": "^2.1.1", "buffer-crc32": "^1.0.0", "eventemitter3": "^5.0.1", "fast-xml-parser": "^5.3.4", "ipaddr.js": "^2.0.1", "lodash": "^4.17.21", "mime-types": "^2.1.35", "query-string": "^7.1.3", "stream-json": "^1.8.0", "through2": "^4.0.2", "xml2js": "^0.5.0 || ^0.6.2" } }, "sha512-E737MgufW8CeQAsTAtnEMrxZ9scMSf29kkhZoXzDTKj/Jszzo2SfeZUH9wbDQH2Rsq6TCtl/yQL0+XdVKZansQ=="],
+
     "mitt": ["mitt@3.0.1", "", {}, "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="],
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
+    "negotiator": ["negotiator@1.0.0", "", {}, "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg=="],
+
     "netmask": ["netmask@2.0.2", "", {}, "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg=="],
 
     "node-fetch-native": ["node-fetch-native@1.6.7", "", {}, "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q=="],
@@ -585,8 +786,14 @@
 
     "nypm": ["nypm@0.6.5", "", { "dependencies": { "citty": "^0.2.0", "pathe": "^2.0.3", "tinyexec": "^1.0.2" }, "bin": { "nypm": "dist/cli.mjs" } }, "sha512-K6AJy1GMVyfyMXRVB88700BJqNUkByijGJM8kEHpLdcAt+vSQAVfkWWHYzuRXHSY6xA2sNc5RjTj0p9rE2izVQ=="],
 
+    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
+
+    "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="],
+
     "ohash": ["ohash@2.0.11", "", {}, "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ=="],
 
+    "on-finished": ["on-finished@2.4.1", "", { "dependencies": { "ee-first": "1.1.1" } }, "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg=="],
+
     "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="],
 
     "openapi-types": ["openapi-types@12.1.3", "", {}, "sha512-N4YtSYJqghVu4iek2ZUvcN/0aqH1kRDuNqzcycDxhOUpg7GdvLa2F3DgS6yBNhInhv2r/6I0Flkn7CqL8+nIcw=="],
@@ -595,7 +802,15 @@
 
     "pac-resolver": ["pac-resolver@7.0.1", "", { "dependencies": { "degenerator": "^5.0.0", "netmask": "^2.0.2" } }, "sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg=="],
 
-    "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+    "parseurl": ["parseurl@1.3.3", "", {}, "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="],
+
+    "path-expression-matcher": ["path-expression-matcher@1.5.0", "", {}, "sha512-cbrerZV+6rvdQrrD+iGMcZFEiiSrbv9Tfdkvnusy6y0x0GKBXREFg/Y65GhIfm0tnLntThhzCnfKwp1WRjeCyQ=="],
+
+    "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
+
+    "path-to-regexp": ["path-to-regexp@8.4.2", "", {}, "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA=="],
+
+    "pathe": ["pathe@1.1.2", "", {}, "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="],
 
     "pend": ["pend@1.2.0", "", {}, "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg=="],
 
@@ -605,8 +820,14 @@
 
     "picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
 
+    "pkce-challenge": ["pkce-challenge@5.0.1", "", {}, "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ=="],
+
     "pkg-types": ["pkg-types@2.3.0", "", { "dependencies": { "confbox": "^0.2.2", "exsolve": "^1.0.7", "pathe": "^2.0.3" } }, "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig=="],
 
+    "playwright": ["playwright@1.59.1", "", { "dependencies": { "playwright-core": "1.59.1" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw=="],
+
+    "playwright-core": ["playwright-core@1.60.0-alpha-1774999321000", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-ams3Zo4VXxeOg5ZTTh16GkE8g48Bmxo/9pg9gXl9SVKlVohCU7Jaog7XntY8yFuzENA6dJc1Fz7Z/NNTm9nGEw=="],
+
     "postcss": ["postcss@8.5.8", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg=="],
 
     "postcss-js": ["postcss-js@4.1.0", "", { "dependencies": { "camelcase-css": "^2.0.1" }, "peerDependencies": { "postcss": "^8.4.21" } }, "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw=="],
@@ -627,6 +848,10 @@
 
     "progress": ["progress@2.0.3", "", {}, "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="],
 
+    "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
+
+    "proxy-addr": ["proxy-addr@2.0.7", "", { "dependencies": { "forwarded": "0.2.0", "ipaddr.js": "1.9.1" } }, "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg=="],
+
     "proxy-agent": ["proxy-agent@6.5.0", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "^4.3.4", "http-proxy-agent": "^7.0.1", "https-proxy-agent": "^7.0.6", "lru-cache": "^7.14.1", "pac-proxy-agent": "^7.1.0", "proxy-from-env": "^1.1.0", "socks-proxy-agent": "^8.0.5" } }, "sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A=="],
 
     "proxy-from-env": ["proxy-from-env@1.1.0", "", {}, "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="],
@@ -637,6 +862,14 @@
 
     "pure-rand": ["pure-rand@6.1.0", "", {}, "sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA=="],
 
+    "qs": ["qs@6.15.1", "", { "dependencies": { "side-channel": "^1.1.0" } }, "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg=="],
+
+    "query-string": ["query-string@7.1.3", "", { "dependencies": { "decode-uri-component": "^0.2.2", "filter-obj": "^1.1.0", "split-on-first": "^1.0.0", "strict-uri-encode": "^2.0.0" } }, "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg=="],
+
+    "range-parser": ["range-parser@1.2.1", "", {}, "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="],
+
+    "raw-body": ["raw-body@3.0.2", "", { "dependencies": { "bytes": "~3.1.2", "http-errors": "~2.0.1", "iconv-lite": "~0.7.0", "unpipe": "~1.0.0" } }, "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA=="],
+
     "rc9": ["rc9@2.1.2", "", { "dependencies": { "defu": "^6.1.4", "destr": "^2.0.3" } }, "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg=="],
 
     "react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="],
@@ -659,6 +892,10 @@
 
     "react-textarea-autosize": ["react-textarea-autosize@8.5.9", "", { "dependencies": { "@babel/runtime": "^7.20.13", "use-composed-ref": "^1.3.0", "use-latest": "^1.2.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A=="],
 
+    "react-transition-group": ["react-transition-group@4.4.5", "", { "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", "prop-types": "^15.6.2" }, "peerDependencies": { "react": ">=16.6.0", "react-dom": ">=16.6.0" } }, "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g=="],
+
+    "readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
+
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
     "recast": ["recast@0.23.11", "", { "dependencies": { "ast-types": "^0.16.1", "esprima": "~4.0.0", "source-map": "~0.6.1", "tiny-invariant": "^1.3.3", "tslib": "^2.0.1" } }, "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA=="],
@@ -671,20 +908,48 @@
 
     "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
 
+    "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
+
     "reselect": ["reselect@5.1.1", "", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],
 
     "resolve-pkg-maps": ["resolve-pkg-maps@1.0.0", "", {}, "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw=="],
 
     "rolldown": ["rolldown@1.0.0-rc.12", "", { "dependencies": { "@oxc-project/types": "=0.122.0", "@rolldown/pluginutils": "1.0.0-rc.12" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.0-rc.12", "@rolldown/binding-darwin-arm64": "1.0.0-rc.12", "@rolldown/binding-darwin-x64": "1.0.0-rc.12", "@rolldown/binding-freebsd-x64": "1.0.0-rc.12", "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.12", "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.12", "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-x64-musl": "1.0.0-rc.12", "@rolldown/binding-openharmony-arm64": "1.0.0-rc.12", "@rolldown/binding-wasm32-wasi": "1.0.0-rc.12", "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.12", "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12" }, "bin": { "rolldown": "bin/cli.mjs" } }, "sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A=="],
 
+    "router": ["router@2.2.0", "", { "dependencies": { "debug": "^4.4.0", "depd": "^2.0.0", "is-promise": "^4.0.0", "parseurl": "^1.3.3", "path-to-regexp": "^8.0.0" } }, "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ=="],
+
+    "safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
+
+    "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
+
+    "sax": ["sax@1.6.0", "", {}, "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA=="],
+
     "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
 
     "semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
 
+    "send": ["send@1.2.1", "", { "dependencies": { "debug": "^4.4.3", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "etag": "^1.8.1", "fresh": "^2.0.0", "http-errors": "^2.0.1", "mime-types": "^3.0.2", "ms": "^2.1.3", "on-finished": "^2.4.1", "range-parser": "^1.2.1", "statuses": "^2.0.2" } }, "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ=="],
+
     "seroval": ["seroval@1.5.1", "", {}, "sha512-OwrZRZAfhHww0WEnKHDY8OM0U/Qs8OTfIDWhUD4BLpNJUfXK4cGmjiagGze086m+mhI+V2nD0gfbHEnJjb9STA=="],
 
     "seroval-plugins": ["seroval-plugins@1.5.1", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-4FbuZ/TMl02sqv0RTFexu0SP6V+ywaIe5bAWCCEik0fk17BhALgwvUDVF7e3Uvf9pxmwCEJsRPmlkUE6HdzLAw=="],
 
+    "serve-static": ["serve-static@2.2.1", "", { "dependencies": { "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "parseurl": "^1.3.3", "send": "^1.2.0" } }, "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw=="],
+
+    "setprototypeof": ["setprototypeof@1.2.0", "", {}, "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="],
+
+    "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
+
+    "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
+
+    "side-channel": ["side-channel@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "object-inspect": "^1.13.3", "side-channel-list": "^1.0.0", "side-channel-map": "^1.0.1", "side-channel-weakmap": "^1.0.2" } }, "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw=="],
+
+    "side-channel-list": ["side-channel-list@1.0.1", "", { "dependencies": { "es-errors": "^1.3.0", "object-inspect": "^1.13.4" } }, "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w=="],
+
+    "side-channel-map": ["side-channel-map@1.0.1", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.5", "object-inspect": "^1.13.3" } }, "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA=="],
+
+    "side-channel-weakmap": ["side-channel-weakmap@1.0.2", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.5", "object-inspect": "^1.13.3", "side-channel-map": "^1.0.1" } }, "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A=="],
+
     "smart-buffer": ["smart-buffer@4.2.0", "", {}, "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg=="],
 
     "socks": ["socks@2.8.7", "", { "dependencies": { "ip-address": "^10.0.1", "smart-buffer": "^4.2.0" } }, "sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A=="],
@@ -695,16 +960,32 @@
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
+    "split-on-first": ["split-on-first@1.1.0", "", {}, "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="],
+
+    "statuses": ["statuses@2.0.2", "", {}, "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw=="],
+
+    "stream-chain": ["stream-chain@2.2.5", "", {}, "sha512-1TJmBx6aSWqZ4tx7aTpBDXK0/e2hhcNSTV8+CbFJtDjbb+I1mZ8lHit0Grw9GRT+6JbIrrDd8esncgBi8aBXGA=="],
+
+    "stream-json": ["stream-json@1.9.1", "", { "dependencies": { "stream-chain": "^2.2.5" } }, "sha512-uWkjJ+2Nt/LO9Z/JyKZbMusL8Dkh97uUBTv3AJQ74y07lVahLY4eEFsPsE97pxYBwr8nnjMAIch5eqI0gPShyw=="],
+
     "streamx": ["streamx@2.25.0", "", { "dependencies": { "events-universal": "^1.0.0", "fast-fifo": "^1.3.2", "text-decoder": "^1.1.0" } }, "sha512-0nQuG6jf1w+wddNEEXCF4nTg3LtufWINB5eFEN+5TNZW7KWJp6x87+JFL43vaAUPyCfH1wID+mNVyW6OHtFamg=="],
 
+    "strict-uri-encode": ["strict-uri-encode@2.0.0", "", {}, "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="],
+
     "string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 
+    "string_decoder": ["string_decoder@1.3.0", "", { "dependencies": { "safe-buffer": "~5.2.0" } }, "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA=="],
+
     "strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
+    "strnum": ["strnum@2.2.3", "", {}, "sha512-oKx6RUCuHfT3oyVjtnrmn19H1SiCqgJSg+54XqURKp5aCMbrXrhLjRN9TjuwMjiYstZ0MzDrHqkGZ5dFTKd+zg=="],
+
     "strtok3": ["strtok3@10.3.5", "", { "dependencies": { "@tokenizer/token": "^0.3.0" } }, "sha512-ki4hZQfh5rX0QDLLkOCj+h+CVNkqmp/CMf8v8kZpkNVK6jGQooMytqzLZYUVYIZcFZ6yDB70EfD8POcFXiF5oA=="],
 
     "sugarss": ["sugarss@5.0.1", "", { "peerDependencies": { "postcss": "^8.3.3" } }, "sha512-ctS5RYCBVvPoZAnzIaX5QSShK8ZiZxD5HUqSxlusvEMC+QZQIPCPOIJg6aceFX+K2rf4+SH89eu++h1Zmsr2nw=="],
 
+    "swr": ["swr@2.4.1", "", { "dependencies": { "dequal": "^2.0.3", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-2CC6CiKQtEwaEeNiqWTAw9PGykW8SR5zZX8MZk6TeAvEAnVS7Visz8WzphqgtQ8v2xz/4Q5K+j+SeMaKXeeQIA=="],
+
     "tabbable": ["tabbable@6.4.0", "", {}, "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg=="],
 
     "tar-fs": ["tar-fs@3.1.2", "", { "dependencies": { "pump": "^3.0.0", "tar-stream": "^3.1.5" }, "optionalDependencies": { "bare-fs": "^4.0.1", "bare-path": "^3.0.0" } }, "sha512-QGxxTxxyleAdyM3kpFs14ymbYmNFrfY+pHj7Z8FgtbZ7w2//VAgLMac7sT6nRpIHjppXO2AwwEOg0bPFVRcmXw=="],
@@ -715,6 +996,8 @@
 
     "text-decoder": ["text-decoder@1.2.7", "", { "dependencies": { "b4a": "^1.6.4" } }, "sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ=="],
 
+    "through2": ["through2@4.0.2", "", { "dependencies": { "readable-stream": "3" } }, "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw=="],
+
     "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
 
     "tinyexec": ["tinyexec@1.0.4", "", {}, "sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw=="],
@@ -723,6 +1006,8 @@
 
     "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
 
+    "toidentifier": ["toidentifier@1.0.1", "", {}, "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="],
+
     "token-types": ["token-types@6.1.2", "", { "dependencies": { "@borewit/text-codec": "^0.2.1", "@tokenizer/token": "^0.3.0", "ieee754": "^1.2.1" } }, "sha512-dRXchy+C0IgK8WPC6xvCHFRIWYUbqqdEIKPaKo/AcTUNzwLTK6AH7RjdLWsEZcAN/TBdtfUw3PYEgPr5VPr6ww=="],
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
@@ -731,6 +1016,8 @@
 
     "type-fest": ["type-fest@4.41.0", "", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="],
 
+    "type-is": ["type-is@2.0.1", "", { "dependencies": { "content-type": "^1.0.5", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw=="],
+
     "typed-query-selector": ["typed-query-selector@2.12.1", "", {}, "sha512-uzR+FzI8qrUEIu96oaeBJmd9E7CFEiQ3goA5qCVgc4s5llSubcfGHq9yUstZx/k4s9dXHVKsE35YWoFyvEqEHA=="],
 
     "typescript": ["typescript@6.0.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ=="],
@@ -739,6 +1026,8 @@
 
     "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
 
+    "unpipe": ["unpipe@1.0.0", "", {}, "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="],
+
     "unplugin": ["unplugin@2.3.11", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "acorn": "^8.15.0", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww=="],
 
     "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
@@ -757,6 +1046,8 @@
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
+    "vary": ["vary@1.1.2", "", {}, "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="],
+
     "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
 
     "vite": ["vite@8.0.3", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.12", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ=="],
@@ -765,12 +1056,18 @@
 
     "webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],
 
+    "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+
     "wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
     "wrappy": ["wrappy@1.0.2", "", {}, "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="],
 
     "ws": ["ws@8.20.0", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA=="],
 
+    "xml2js": ["xml2js@0.6.2", "", { "dependencies": { "sax": ">=0.6.0", "xmlbuilder": "~11.0.0" } }, "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA=="],
+
+    "xmlbuilder": ["xmlbuilder@11.0.1", "", {}, "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="],
+
     "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
 
     "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
@@ -781,8 +1078,14 @@
 
     "yauzl": ["yauzl@2.10.0", "", { "dependencies": { "buffer-crc32": "~0.2.3", "fd-slicer": "~1.1.0" } }, "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g=="],
 
+    "zhead": ["zhead@2.2.4", "", {}, "sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag=="],
+
     "zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
+    "zod-to-json-schema": ["zod-to-json-schema@3.25.2", "", { "peerDependencies": { "zod": "^3.25.28 || ^4" } }, "sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA=="],
+
+    "zustand": ["zustand@4.5.7", "", { "dependencies": { "use-sync-external-store": "^1.2.2" }, "peerDependencies": { "@types/react": ">=16.8", "immer": ">=9.0.6", "react": ">=16.8" }, "optionalPeers": ["@types/react", "immer", "react"] }, "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw=="],
+
     "@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
     "@babel/helper-compilation-targets/lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
@@ -791,32 +1094,82 @@
 
     "@kitajs/ts-html-plugin/yargs": ["yargs@18.0.0", "", { "dependencies": { "cliui": "^9.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "string-width": "^7.2.0", "y18n": "^5.0.5", "yargs-parser": "^22.0.0" } }, "sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg=="],
 
+    "@playwright/mcp/playwright": ["playwright@1.60.0-alpha-1774999321000", "", { "dependencies": { "playwright-core": "1.60.0-alpha-1774999321000" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-Bd5DkzYKG+2g1jLO6NeTXmGLbBYSFffJIOsR4l4hUBkJvzvGGdLZ7jZb2tOtb0WIoWXQKdQj3Ap6WthV4DBS8w=="],
+
     "@reduxjs/toolkit/immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
 
+    "@scalar/themes/@scalar/types": ["@scalar/types@0.1.7", "", { "dependencies": { "@scalar/openapi-types": "0.2.0", "@unhead/schema": "^1.11.11", "nanoid": "^5.1.5", "type-fest": "^4.20.0", "zod": "^3.23.8" } }, "sha512-irIDYzTQG2KLvFbuTI8k2Pz/R4JR+zUUSykVTbEMatkzMmVFnn1VzNSMlODbadycwZunbnL2tA27AXed9URVjw=="],
+
+    "@tanstack/router-utils/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+
+    "accepts/mime-types": ["mime-types@3.0.2", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A=="],
+
     "anymatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
 
     "c12/chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
 
+    "c12/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+
+    "chokidar/fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
     "degenerator/ast-types": ["ast-types@0.13.4", "", { "dependencies": { "tslib": "^2.0.1" } }, "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w=="],
 
     "escodegen/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
 
+    "express/cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
+
+    "express/mime-types": ["mime-types@3.0.2", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A=="],
+
+    "giget/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+
     "nypm/citty": ["citty@0.2.1", "", {}, "sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg=="],
 
+    "nypm/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+
+    "pkg-types/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+
+    "playwright/playwright-core": ["playwright-core@1.59.1", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg=="],
+
+    "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
+
+    "proxy-addr/ipaddr.js": ["ipaddr.js@1.9.1", "", {}, "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="],
+
     "readdirp/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
 
     "recast/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
 
     "rolldown/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.12", "", {}, "sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw=="],
 
+    "send/mime-types": ["mime-types@3.0.2", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A=="],
+
+    "tsx/fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "type-is/mime-types": ["mime-types@3.0.2", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A=="],
+
+    "vite/fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "yauzl/buffer-crc32": ["buffer-crc32@0.2.13", "", {}, "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ=="],
+
     "@kitajs/ts-html-plugin/yargs/cliui": ["cliui@9.0.1", "", { "dependencies": { "string-width": "^7.2.0", "strip-ansi": "^7.1.0", "wrap-ansi": "^9.0.0" } }, "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w=="],
 
     "@kitajs/ts-html-plugin/yargs/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
 
     "@kitajs/ts-html-plugin/yargs/yargs-parser": ["yargs-parser@22.0.0", "", {}, "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw=="],
 
+    "@scalar/themes/@scalar/types/@scalar/openapi-types": ["@scalar/openapi-types@0.2.0", "", { "dependencies": { "zod": "^3.23.8" } }, "sha512-waiKk12cRCqyUCWTOX0K1WEVX46+hVUK+zRPzAahDJ7G0TApvbNkuy5wx7aoUyEk++HHde0XuQnshXnt8jsddA=="],
+
+    "@scalar/themes/@scalar/types/nanoid": ["nanoid@5.1.9", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-ZUvP7KeBLe3OZ1ypw6dI/TzYJuvHP77IM4Ry73waSQTLn8/g8rpdjfyVAh7t1/+FjBtG4lCP42MEbDxOsRpBMw=="],
+
+    "accepts/mime-types/mime-db": ["mime-db@1.54.0", "", {}, "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ=="],
+
     "c12/chokidar/readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
 
+    "express/mime-types/mime-db": ["mime-db@1.54.0", "", {}, "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ=="],
+
+    "send/mime-types/mime-db": ["mime-db@1.54.0", "", {}, "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ=="],
+
+    "type-is/mime-types/mime-db": ["mime-db@1.54.0", "", {}, "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ=="],
+
     "@kitajs/ts-html-plugin/yargs/cliui/strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
 
     "@kitajs/ts-html-plugin/yargs/cliui/wrap-ansi": ["wrap-ansi@9.0.2", "", { "dependencies": { "ansi-styles": "^6.2.1", "string-width": "^7.0.0", "strip-ansi": "^7.1.0" } }, "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww=="],

compose.yml

@@ -0,0 +1,78 @@
+services:
+  monitoring-app:
+    image: ghcr.io/bipprojectbali/monitoring-app:stg-latest
+    container_name: monitoring-app-stg
+    restart: unless-stopped
+    environment:
+      # App
+      - PORT=${PORT:-3000}
+      - NODE_ENV=${NODE_ENV:-production}
+      - BUN_PUBLIC_BASE_URL=${BUN_PUBLIC_BASE_URL}
+      # Database
+      - DATABASE_URL=${DATABASE_URL}
+      - DIRECT_URL=${DIRECT_URL}
+      # Google OAuth
+      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
+      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
+      # Super Admin
+      - SUPER_ADMIN_EMAIL=${SUPER_ADMIN_EMAIL}
+      # API Key
+      - API_KEY=${API_KEY}
+      # MinIO (object storage)
+      - MINIO_ENDPOINT=${MINIO_ENDPOINT}
+      - MINIO_PORT=${MINIO_PORT:-443}
+      - MINIO_USE_SSL=${MINIO_USE_SSL:-true}
+      - MINIO_ACCESS_KEY=${MINIO_ACCESS_KEY}
+      - MINIO_SECRET_KEY=${MINIO_SECRET_KEY}
+      - MINIO_BUCKET=${MINIO_BUCKET}
+      - MINIO_UPLOAD_DIR=${MINIO_UPLOAD_DIR:-bug-reports}
+      # Redis (optional — app logs feature)
+      - REDIS_URL=${REDIS_URL:-}
+    networks:
+      - public-net
+      - postgres-net-stg
+    depends_on:
+      migrate:
+        condition: service_completed_successfully
+    deploy:
+      resources:
+        limits:
+          cpus: '1.0'
+          memory: 1G
+        reservations:
+          memory: 512M
+    logging:
+      driver: json-file
+      options:
+        max-size: "10m"
+        max-file: "3"
+    labels:
+      - "traefik.enable=true"
+      - "traefik.docker.network=public-net"
+      - "traefik.http.routers.monitoring-app.rule=Host(`monitoring-stg.wibudev.com`)"
+      - "traefik.http.routers.monitoring-app.entrypoints=websecure"
+      - "traefik.http.routers.monitoring-app.tls=true"
+      - "traefik.http.routers.monitoring-app.tls.certresolver=letsencrypt"
+      - "traefik.http.services.monitoring-app.loadbalancer.server.port=3000"
+
+  migrate:
+    image: ghcr.io/bipprojectbali/monitoring-app:stg-latest
+    container_name: monitoring-app-stg-migrate
+    restart: "no"
+    # `migrate deploy` only applies existing migrations from prisma/migrations/.
+    # Safer than `migrate dev --name auto` which auto-generates new migrations
+    # from schema diff (risk of drift in production).
+    # Seed runs only if SEED_ON_DEPLOY=true (idempotent — wipe-and-reseed by
+    # design; recommend leaving false for production with real customer data).
+    entrypoint: ["sh", "-c", "bunx prisma migrate deploy && if [ \"$$SEED_ON_DEPLOY\" = \"true\" ]; then bun prisma/seed.ts; fi"]
+    environment:
+      - DATABASE_URL=${DIRECT_URL}
+      - SEED_ON_DEPLOY=${SEED_ON_DEPLOY:-false}
+    networks:
+      - postgres-net-stg
+
+networks:
+  public-net:
+    external: true
+  postgres-net-stg:
+    external: true

docs/ARCHITECTURE.md

@@ -0,0 +1,66 @@
+# Architecture
+
+## Server
+
+Elysia.js on Bun. All API routes are in `src/app.ts` as `createApp()` — testable via `app.handle(request)` without starting a server. `src/index.tsx` adds Vite middleware (dev) or static serving (prod) and calls `.listen()`. `src/serve.ts` is the dev entry point (dynamic import workaround for Bun EADDRINUSE race).
+
+## Database
+
+PostgreSQL via Prisma v6. Client generated to `./generated/prisma` (gitignored — run `bun run db:generate` after checkout or schema changes).
+
+**Schema models:** `User`, `Session`, `App`, `Log`, `Bug`, `BugImage`, `BugLog`
+
+**Enums:** `Role` (ADMIN, DEVELOPER), `BugStatus` (OPEN, ON_HOLD, IN_PROGRESS, RESOLVED, RELEASED, CLOSED), `BugSource` (QC, SYSTEM, USER), `LogType` (CREATE, UPDATE, DELETE, LOGIN, LOGOUT)
+
+Import the singleton: `import { prisma } from './lib/db'`
+
+## Auth & Roles
+
+Session-based auth with HttpOnly cookies stored in the DB (24h expiry). Two roles: `DEVELOPER` (super admin) and `ADMIN`. Users listed in `SUPER_ADMIN_EMAIL` env var are auto-promoted to DEVELOPER on login.
+
+Endpoints: `POST /api/auth/login`, `POST /api/auth/logout`, `GET /api/auth/session`
+
+Auth state on the frontend is managed via `useSession()` / `useLogin()` / `useLogout()` in `src/frontend/hooks/useAuth.ts` (TanStack Query).
+
+## Frontend
+
+React 19 + Vite 8 (middleware mode in dev). TanStack Router with file-based routing in `src/frontend/routes/`. All routes are wrapped in `DashboardLayout` from `src/frontend/components/DashboardLayout.tsx`.
+
+**Route structure:**
+- `/` → redirect
+- `/login` → login page
+- `/dashboard` → stats overview
+- `/apps` → app list
+- `/apps/$appId` → per-app layout with nested routes: `index`, `errors`, `logs`, `users`, `villages`, `orders`, `products`, `payments`
+- `/users` → operator management
+- `/logs` → system activity log
+- `/bug-reports` → cross-app bug reports
+- `/profile` → user profile
+
+**App configs** are defined in `src/frontend/config/appMenus.ts` — each app has an ID and a menu list. Currently active: `desa-plus`. Add new app entries here to register them.
+
+**routeTree.gen.ts** is auto-generated by the TanStack Router Vite plugin — never edit it manually.
+
+**UI:** Mantine v8, dark theme forced (`#242424`). Charts use `@mantine/charts` (recharts under the hood). Icons from `react-icons/tb`.
+
+## API Structure
+
+All API routes live in `src/app.ts`. Key groups:
+- `/api/auth/*` — authentication
+- `/api/dashboard/*` — stats and recent errors
+- `/api/apps`, `/api/apps/:appId` — app listing and detail
+- `/api/bugs`, `/api/bugs/:id/status`, `/api/bugs/:id/feedback` — bug report CRUD
+- `/api/operators`, `/api/operators/:id` — user management
+- `/api/logs` — system activity log
+- `/api/system/status` — health check with DB connectivity
+
+## Logging
+
+`createSystemLog(userId, type, message)` from `src/lib/logger.ts` writes to the `Log` model. Call it for any significant user action (login/logout/CRUD). Logging errors are swallowed so they never break the main flow.
+
+## Environment Variables
+
+Required: `DATABASE_URL`, `GOOGLE_CLIENT_ID`, `GOOGLE_CLIENT_SECRET`
+Optional: `PORT` (default 3000), `NODE_ENV`, `REACT_EDITOR`, `SUPER_ADMIN_EMAIL` (comma-separated)
+
+Validated at startup in `src/lib/env.ts` — missing required vars throw immediately.

docs/COMMANDS.md

@@ -0,0 +1,25 @@
+# Commands
+
+```bash
+bun run dev          # dev server with hot reload (bun --watch src/serve.ts)
+bun run build        # Vite production build
+bun run start        # production server (NODE_ENV=production)
+bun run typecheck    # tsc --noEmit
+bun run lint         # biome check src/
+bun run lint:fix     # biome check --write src/
+
+# Database
+bun run db:migrate   # prisma migrate dev
+bun run db:seed      # seed demo data
+bun run db:generate  # regenerate prisma client
+bun run db:studio    # Prisma Studio GUI
+bun run db:push      # push schema without migration
+
+# Tests
+bun run test              # all tests
+bun run test:unit         # tests/unit/
+bun run test:integration  # tests/integration/ — no server needed
+bun run test:e2e          # tests/e2e/ — requires Lightpanda Docker
+```
+
+Run a single test file: `bun test tests/integration/auth.test.ts`

docs/CONVENTIONS.md

@@ -0,0 +1,66 @@
+# Frontend Conventions
+
+## Data Fetching
+
+- **SWR** for read-only data in route components (tables, lists, charts).
+- **TanStack Query** (`useQuery`, `useMutation`) for auth state — see `src/frontend/hooks/useAuth.ts`.
+- Never mix both in the same component/page.
+- Debounce search inputs: `useDebouncedValue(search, 400)` + `useEffect` that only triggers when length >= 3 or === 0.
+
+## API URL Builder
+
+All URLs go through `src/frontend/config/api.ts` → `API_URLS`. Add new entries there, never inline URLs in components.
+
+Desa+ endpoints are proxied via `/api/proxy/desa-plus` → `DESA_PLUS_PROXY` constant. The actual API source is at:
+`/Users/wibu04/Documents/Projects/sistem-desa-mandiri/src/app/api/monitoring/[[...slug]]/route.ts`
+
+## Filters & Pagination Pattern
+
+Server-side filtering — always pass filter params to the API, never filter client-side on paginated data.
+
+State pattern for a filtered table page:
+```ts
+const [page, setPage] = useState(1)
+const [search, setSearch] = useState('')          // raw input
+const [searchQuery, setSearchQuery] = useState('') // debounced, sent to API
+const [debouncedSearch] = useDebouncedValue(search, 400)
+
+useEffect(() => {
+  if (debouncedSearch.length >= 3 || debouncedSearch.length === 0) {
+    setSearchQuery(debouncedSearch)
+    setPage(1)
+  }
+}, [debouncedSearch])
+
+useEffect(() => { setPage(1) }, [filterA, filterB]) // reset page on filter change
+```
+
+## Mantine Components
+
+- Dark theme forced (`#242424`). Never add light-mode conditionals.
+- `radius="md"` on inputs, `radius="2xl"` on container `Paper`.
+- `className="glass"` on `Paper` cards for the frosted glass effect.
+- `size="sm"` on table inputs and selects.
+- Icons from `react-icons/tb` only — no other icon libraries.
+- `DatePickerInput` from `@mantine/dates` with `type="range"` returns `[string | null, string | null]`, not Date objects.
+
+## Route Files
+
+File-based routing via TanStack Router Vite plugin. Files in `src/frontend/routes/`:
+
+| Pattern | Route |
+|---|---|
+| `apps.$appId.tsx` | Layout wrapper for per-app pages |
+| `apps.$appId.index.tsx` | Overview/dashboard for an app |
+| `apps.$appId.users.index.tsx` | User management |
+| `apps.$appId.logs.tsx` | Activity logs |
+| `apps.$appId.villages.tsx` | Villages layout |
+| `apps.$appId.villages.index.tsx` | Village list |
+| `apps.$appId.villages.$villageId.tsx` | Village detail |
+
+`routeTree.gen.ts` is auto-generated — never edit it manually.
+
+## App Registration
+
+App configs (ID, menu items) live in `src/frontend/config/appMenus.ts`. Add new apps there to register them.
+Currently active app: `desa-plus`.

docs/DEV_TOOLS.md

@@ -0,0 +1,6 @@
+# Dev Tools
+
+- **Click-to-source:** `Ctrl+Shift+Cmd+C` toggles inspector. Custom Vite plugin in `src/vite.ts` injects `data-inspector-*` attributes; reads original source from disk for accurate line numbers.
+- **HMR:** Vite 8 + `@vitejs/plugin-react` v6. `dedupeRefreshPlugin` in `src/vite.ts` prevents double React Refresh injection.
+- **Editor:** Set `REACT_EDITOR` env var. `zed`/`subl` use `file:line:col`; others get `--goto file:line:col`.
+- **Playwright MCP:** `bun run mcp:playwright` starts headless browser MCP server (config in `.qwen/settings.json`).

docs/TESTING.md

@@ -0,0 +1,6 @@
+# Testing
+
+- **Unit:** env, DB connection, bcrypt — in `tests/unit/`
+- **Integration:** `createApp().handle(new Request(...))` — no running server needed, use these for mutations
+- **E2E:** Lightpanda browser via CDP (`ws://127.0.0.1:9222`). App URLs use `host.docker.internal` from inside Docker. Lightpanda executes JS but POST fetch returns 407 — use integration tests for anything that writes data.
+- **Helpers:** `tests/helpers.ts` — `createTestApp()`, `seedTestUser()`, `createTestSession()`, `cleanupTestData()`

index.html

@@ -4,9 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="dark" />
+    <meta name="description" content="Monitoring System — real-time dashboard for your applications" />
     <base href="/" />
     <link rel="icon" type="image/svg+xml" href="/src/logo.svg" />
-    <title>My App</title>
+    <title>Monitoring System</title>
     <style>
       /* Prevent white flash — dark background immediately */
       html, body {
@@ -25,7 +26,7 @@
         align-items: center;
         justify-content: center;
         background-color: #242424;
-        transition: opacity 0.3s ease;
+        transition: opacity 0.4s ease;
       }
       #splash.fade-out {
         opacity: 0;
@@ -35,32 +36,79 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 24px;
+        gap: 18px;
       }
-      .splash-spinner {
-        width: 40px;
-        height: 40px;
-        border: 3px solid #3a3a3a;
-        border-top-color: #339af0;
-        border-radius: 50%;
-        animation: spin 0.8s linear infinite;
+      .splash-logo {
+        animation: logo-breathe 2.4s ease-in-out infinite;
       }
-      .splash-text {
+      .splash-logo svg {
+        display: block;
+        border-radius: 14px;
+        filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.45));
+      }
+      .splash-title {
         font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-        font-size: 14px;
-        color: #909296;
-        letter-spacing: 0.5px;
+        font-size: 17px;
+        font-weight: 700;
+        letter-spacing: -0.3px;
+        background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
       }
-      @keyframes spin {
-        to { transform: rotate(360deg); }
+      .splash-dots {
+        display: flex;
+        gap: 7px;
+        align-items: center;
+      }
+      .splash-dots span {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #2563EB, #7C3AED);
+        animation: dot-pulse 1.2s ease-in-out infinite;
+      }
+      .splash-dots span:nth-child(2) { animation-delay: 0.2s; }
+      .splash-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+      @keyframes logo-breathe {
+        0%, 100% { transform: scale(1);    opacity: 1;    }
+        50%       { transform: scale(1.05); opacity: 0.9;  }
+      }
+      @keyframes dot-pulse {
+        0%, 80%, 100% { transform: scale(0.5); opacity: 0.25; }
+        40%           { transform: scale(1);   opacity: 1;    }
       }
     </style>
   </head>
   <body>
     <div id="splash">
       <div class="splash-content">
-        <div class="splash-spinner"></div>
-        <div class="splash-text">Loading...</div>
+        <div class="splash-logo">
+          <svg width="64" height="64" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <linearGradient id="sl" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#2563EB"/>
+                <stop offset="1" stop-color="#7C3AED"/>
+              </linearGradient>
+            </defs>
+            <rect width="32" height="32" rx="7" fill="url(#sl)"/>
+            <polyline
+              points="3,16 9,16 12,8 16,24 19,16 29,16"
+              stroke="white"
+              stroke-width="2.2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              fill="none"
+            />
+          </svg>
+        </div>
+        <div class="splash-title">Monitoring System</div>
+        <div class="splash-dots">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
       </div>
     </div>
     <div id="root"></div>

login-snapshot.yml

@@ -0,0 +1,35 @@
+- generic [ref=e6]:
+  - heading "Login" [level=2] [ref=e7]
+  - paragraph [ref=e8]:
+    - text: "Demo:"
+    - strong [ref=e9]: superadmin@example.com
+    - text: /
+    - strong [ref=e10]: superadmin123
+    - text: "or:"
+    - strong [ref=e11]: user@example.com
+    - text: /
+    - strong [ref=e12]: user123
+  - generic [ref=e13]:
+    - generic [ref=e14]: Email *
+    - generic [ref=e15]:
+      - img [ref=e17]
+      - textbox "Email" [ref=e20]:
+        - /placeholder: email@example.com
+  - generic [ref=e21]:
+    - generic [ref=e22]: Password *
+    - generic [ref=e23]:
+      - img [ref=e25]
+      - textbox "Password" [ref=e30]
+      - button [ref=e32] [cursor=pointer]:
+        - img [ref=e34]
+  - button "Sign in" [ref=e36] [cursor=pointer]:
+    - generic [ref=e37]:
+      - img [ref=e39]
+      - generic [ref=e43]: Sign in
+  - separator [ref=e44]:
+    - generic [ref=e45]: or
+  - link "Login with Google" [ref=e46] [cursor=pointer]:
+    - /url: /api/auth/google
+    - generic [ref=e47]:
+      - img [ref=e49]
+      - generic [ref=e54]: Login with Google

package.json

@@ -1,9 +1,10 @@
 {
   "name": "bun-react-template",
-  "version": "0.1.0",
+  "version": "0.1.15",
   "private": true,
   "type": "module",
   "scripts": {
+    "claude": "set -a && source .env && set +a && claude",
     "dev": "bun --watch src/serve.ts",
     "build": "vite build",
     "start": "NODE_ENV=production bun src/index.tsx",
@@ -18,33 +19,48 @@
     "db:seed": "bun run prisma/seed.ts",
     "db:studio": "bunx prisma studio",
     "db:generate": "bunx prisma generate",
-    "db:push": "bunx prisma db push"
+    "db:push": "bunx prisma db push",
+    "mcp:playwright": "playwright-mcp --headless --port 3000"
   },
   "dependencies": {
     "@elysiajs/cors": "^1.4.1",
+    "@elysiajs/eden": "^1.4.9",
     "@elysiajs/html": "^1.4.0",
-    "@mantine/charts": "^9.0.0",
+    "@elysiajs/swagger": "^1.3.1",
+    "@mantine/charts": "^8.3.0",
     "@mantine/core": "^8.3.18",
+    "@mantine/dates": "^8.3.0",
     "@mantine/hooks": "^8.3.18",
+    "@mantine/modals": "^8.3.18",
+    "@mantine/notifications": "^8.3.18",
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "@prisma/client": "6",
     "@tanstack/react-query": "^5.95.2",
     "@tanstack/react-router": "^1.168.10",
+    "@xyflow/react": "^12.6.4",
+    "dayjs": "^1.11.20",
+    "elkjs": "^0.9.3",
     "elysia": "^1.4.28",
+    "minio": "^8.0.7",
     "postcss": "^8.5.8",
     "postcss-preset-mantine": "^1.18.0",
     "postcss-simple-vars": "^7.0.1",
     "react": "^19",
     "react-dom": "^19",
     "react-icons": "^5.6.0",
-    "recharts": "^3.8.1"
+    "recharts": "^3.8.1",
+    "swr": "^2.4.1"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.10",
+    "@playwright/mcp": "^0.0.70",
+    "@playwright/test": "^1.59.1",
     "@tanstack/router-vite-plugin": "^1.166.27",
     "@types/bun": "latest",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^6.0.1",
+    "playwright": "^1.59.1",
     "prisma": "6",
     "puppeteer-core": "^24.40.0",
     "typescript": "^6.0.2",

playwright.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  webServer: {
+    command: 'bun run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});

prisma/migrations/20260406032748_tambah_tb_bug/migration.sql

@@ -0,0 +1,82 @@
+-- CreateEnum
+CREATE TYPE "App" AS ENUM ('desa_plus', 'hipmi');
+
+-- CreateEnum
+CREATE TYPE "BugSource" AS ENUM ('QC', 'SYSTEM', 'USER');
+
+-- CreateEnum
+CREATE TYPE "BugStatus" AS ENUM ('OPEN', 'ON_HOLD', 'IN_PROGRESS', 'RESOLVED', 'RELEASED', 'CLOSED');
+
+-- AlterEnum
+ALTER TYPE "Role" ADD VALUE 'DEVELOPER';
+
+-- AlterTable
+ALTER TABLE "user" ADD COLUMN     "active" BOOLEAN NOT NULL DEFAULT true;
+
+-- CreateTable
+CREATE TABLE "log" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "message" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "log_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "bug" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT,
+    "app" "App" NOT NULL,
+    "affectedVersion" TEXT NOT NULL,
+    "device" TEXT NOT NULL,
+    "os" TEXT NOT NULL,
+    "status" "BugStatus" NOT NULL,
+    "source" "BugSource" NOT NULL,
+    "description" TEXT NOT NULL,
+    "stackTrace" TEXT,
+    "fixedVersion" TEXT,
+    "feedBack" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "bug_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "bug_image" (
+    "id" TEXT NOT NULL,
+    "bugId" TEXT NOT NULL,
+    "imageUrl" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "bug_image_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "bug_log" (
+    "id" TEXT NOT NULL,
+    "bugId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "status" "BugStatus" NOT NULL,
+    "description" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "bug_log_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "log" ADD CONSTRAINT "log_userId_fkey" FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "bug" ADD CONSTRAINT "bug_userId_fkey" FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "bug_image" ADD CONSTRAINT "bug_image_bugId_fkey" FOREIGN KEY ("bugId") REFERENCES "bug"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "bug_log" ADD CONSTRAINT "bug_log_bugId_fkey" FOREIGN KEY ("bugId") REFERENCES "bug"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "bug_log" ADD CONSTRAINT "bug_log_userId_fkey" FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/20260413034305_add/migration.sql

@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - Changed the type of `type` on the `log` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
+
+*/
+-- CreateEnum
+CREATE TYPE "LogType" AS ENUM ('CREATE', 'UPDATE', 'DELETE', 'LOGIN', 'LOGOUT');
+
+-- AlterTable
+ALTER TABLE "log" DROP COLUMN "type",
+ADD COLUMN     "type" "LogType" NOT NULL;

prisma/migrations/20260413044057_add/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "user" ADD COLUMN     "image" TEXT;

prisma/migrations/20260413071605_add/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "bug_log" ALTER COLUMN "userId" DROP NOT NULL;

prisma/migrations/20260413085051_update_type_data/migration.sql

@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - The `app` column on the `bug` table would be dropped and recreated. This will lead to data loss if there is data in the column.
+
+*/
+-- AlterTable
+ALTER TABLE "bug" DROP COLUMN "app",
+ADD COLUMN     "app" TEXT;
+
+-- DropEnum
+DROP TYPE "App";

prisma/migrations/20260415014750_tambah_table_app_and_enum_role/migration.sql

@@ -0,0 +1,40 @@
+/*
+  Warnings:
+
+  - The values [USER,SUPER_ADMIN] on the enum `Role` will be removed. If these variants are still used in the database, this will fail.
+  - You are about to drop the column `app` on the `bug` table. All the data in the column will be lost.
+
+*/
+-- AlterEnum
+BEGIN;
+CREATE TYPE "Role_new" AS ENUM ('ADMIN', 'DEVELOPER');
+ALTER TABLE "public"."user" ALTER COLUMN "role" DROP DEFAULT;
+ALTER TABLE "user" ALTER COLUMN "role" TYPE "Role_new" USING ("role"::text::"Role_new");
+ALTER TYPE "Role" RENAME TO "Role_old";
+ALTER TYPE "Role_new" RENAME TO "Role";
+DROP TYPE "public"."Role_old";
+ALTER TABLE "user" ALTER COLUMN "role" SET DEFAULT 'ADMIN';
+COMMIT;
+
+-- AlterTable
+ALTER TABLE "bug" DROP COLUMN "app",
+ADD COLUMN     "appId" TEXT;
+
+-- AlterTable
+ALTER TABLE "user" ALTER COLUMN "role" SET DEFAULT 'ADMIN';
+
+-- CreateTable
+CREATE TABLE "App" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "version" TEXT NOT NULL,
+    "minVersion" TEXT NOT NULL,
+    "maintenance" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "App_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "bug" ADD CONSTRAINT "bug_appId_fkey" FOREIGN KEY ("appId") REFERENCES "App"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/migrations/20260415024317_update_enum_app/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "App" ALTER COLUMN "version" DROP NOT NULL,
+ALTER COLUMN "minVersion" DROP NOT NULL;

prisma/migrations/20260428144413_add_google_oauth_user_role/migration.sql

@@ -0,0 +1,21 @@
+-- AlterEnum: add USER back to Role
+BEGIN;
+CREATE TYPE "Role_new" AS ENUM ('USER', 'ADMIN', 'DEVELOPER');
+ALTER TABLE "public"."user" ALTER COLUMN "role" DROP DEFAULT;
+ALTER TABLE "user" ALTER COLUMN "role" TYPE "Role_new" USING ("role"::text::"Role_new");
+ALTER TYPE "Role" RENAME TO "Role_old";
+ALTER TYPE "Role_new" RENAME TO "Role";
+DROP TYPE "public"."Role_old";
+ALTER TABLE "user" ALTER COLUMN "role" SET DEFAULT 'USER';
+COMMIT;
+
+-- AlterTable: make password nullable, change default role
+ALTER TABLE "user"
+  ALTER COLUMN "password" DROP NOT NULL,
+  ALTER COLUMN "role" SET DEFAULT 'USER';
+
+-- AlterTable: add googleId column
+ALTER TABLE "user" ADD COLUMN "googleId" TEXT;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "user_googleId_key" ON "user"("googleId");

prisma/migrations/20260429074454_add_app_config/migration.sql

@@ -0,0 +1,8 @@
+-- CreateTable
+CREATE TABLE "app_config" (
+    "key" TEXT NOT NULL,
+    "value" TEXT NOT NULL,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "app_config_pkey" PRIMARY KEY ("key")
+);

prisma/migrations/20260430025602_remove_app_config_add_url_api_to_app/migration.sql

@@ -0,0 +1,15 @@
+-- AlterTable: tambah urlApi dan apiKey ke App
+ALTER TABLE "App" ADD COLUMN "urlApi" TEXT;
+ALTER TABLE "App" ADD COLUMN "apiKey" TEXT;
+
+-- DataMigration: pindahkan nilai dari app_config ke App sebelum drop
+UPDATE "App"
+SET "urlApi" = (SELECT value FROM app_config WHERE key = 'URL_API_DESA_PLUS')
+WHERE id = 'desa-plus';
+
+UPDATE "App"
+SET "apiKey" = (SELECT value FROM app_config WHERE key = 'API_KEY_DESA_PLUS')
+WHERE id = 'desa-plus';
+
+-- DropTable
+DROP TABLE "app_config";

prisma/migrations/20260430035000_add_active_to_app/migration.sql

@@ -0,0 +1 @@
+ALTER TABLE "App" ADD COLUMN "active" BOOLEAN NOT NULL DEFAULT true;

prisma/migrations/20260430060000_add_client_api_key_to_app/migration.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "App" ADD COLUMN "clientApiKey" TEXT;
+CREATE UNIQUE INDEX "App_clientApiKey_key" ON "App"("clientApiKey");

prisma/schema.prisma

@@ -11,19 +11,49 @@ datasource db {
 enum Role {
   USER
   ADMIN
-  SUPER_ADMIN
+  DEVELOPER
+}
+
+
+enum BugSource{
+  QC
+  SYSTEM
+  USER
+}
+
+enum BugStatus{
+  OPEN
+  ON_HOLD
+  IN_PROGRESS
+  RESOLVED
+  RELEASED
+  CLOSED
+}
+
+enum LogType{
+  CREATE
+  UPDATE
+  DELETE
+  LOGIN
+  LOGOUT
 }
 
 model User {
   id        String   @id @default(uuid())
   name      String
   email     String   @unique
-  password  String
+  password  String?
+  googleId  String?  @unique
   role      Role     @default(USER)
+  active    Boolean  @default(true)
+  image     String?
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
   sessions Session[]
+  logs     Log[]
+  bugs     Bug[]
+  bugLogs  BugLog[]
 
   @@map("user")
 }
@@ -40,3 +70,82 @@ model Session {
   @@index([token])
   @@map("session")
 }
+
+model App {
+  id          String   @id @default(uuid())
+  name        String
+  version     String?
+  minVersion  String?
+  maintenance Boolean  @default(false)
+  active        Boolean  @default(true)
+  urlApi        String?
+  apiKey        String?
+  clientApiKey  String?  @unique
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+
+  bugs Bug[]
+}
+
+model Log {
+  id        String   @id @default(uuid())
+  userId    String
+  type      LogType
+  message   String
+  createdAt DateTime @default(now())
+
+  user User @relation(fields: [userId], references: [id])
+  
+  @@map("log")
+}
+
+model Bug {
+  id        String   @id @default(uuid())
+  userId    String?
+  appId     String?   
+  affectedVersion   String
+  device    String
+  os        String
+  status    BugStatus
+  source    BugSource
+  description String
+  stackTrace String?
+  fixedVersion String?
+  feedBack String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  user User? @relation(fields: [userId], references: [id])
+  app  App?  @relation(fields: [appId], references: [id])
+
+  images BugImage[]
+  logs BugLog[]
+
+  @@map("bug")
+}
+
+model BugImage {
+  id        String   @id @default(uuid())
+  bugId     String
+  imageUrl  String
+  createdAt DateTime @default(now())
+
+  bug Bug @relation(fields: [bugId], references: [id], onDelete: Cascade)
+
+  @@map("bug_image")
+}
+
+model BugLog {
+  id        String   @id @default(uuid())
+  bugId     String
+  userId    String?
+  status    BugStatus
+  description  String
+  createdAt DateTime @default(now())
+
+  bug Bug @relation(fields: [bugId], references: [id], onDelete: Cascade)
+  user User? @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@map("bug_log")
+}
+

prisma/seed.ts

@@ -6,9 +6,7 @@ const SUPER_ADMIN_EMAILS = (process.env.SUPER_ADMIN_EMAIL ?? '').split(',').map(
 
 async function main() {
   const users = [
-    { name: 'Super Admin', email: 'superadmin@example.com', password: 'superadmin123', role: 'SUPER_ADMIN' as const },
     { name: 'Admin', email: 'admin@example.com', password: 'admin123', role: 'ADMIN' as const },
-    { name: 'User', email: 'user@example.com', password: 'user123', role: 'USER' as const },
   ]
 
   for (const u of users) {
@@ -21,13 +19,28 @@ async function main() {
     console.log(`Seeded: ${u.email} (${u.role})`)
   }
 
-  // Promote super admin emails from env
+  // Promote DEVELOPER emails from env
   for (const email of SUPER_ADMIN_EMAILS) {
-    const user = await prisma.user.findUnique({ where: { email } })
-    if (user && user.role !== 'SUPER_ADMIN') {
-      await prisma.user.update({ where: { email }, data: { role: 'SUPER_ADMIN' } })
-      console.log(`Promoted to SUPER_ADMIN: ${email}`)
-    }
+    const password = await Bun.password.hash('developer123', { algorithm: 'bcrypt' })
+    await prisma.user.upsert({
+      where: { email },
+      update: { role: 'DEVELOPER', password },
+      create: { name: email.split('@')[0].toUpperCase(), email, password, role: 'DEVELOPER' },
+    })
+    console.log(`Promoted to DEVELOPER: ${email}`)
+  }
+
+  const apps = [
+    { id: 'desa-plus', name: 'Desa+' },
+  ]
+
+  for (const a of apps) {
+    await prisma.app.upsert({
+      where: { id: a.id },
+      update: { name: a.name },
+      create: { id: a.id, name: a.name },
+    })
+    console.log(`Seeded: ${a.name}`)
   }
 }
 

scripts/mcp-deploy.ts

@@ -0,0 +1,231 @@
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
+import { z } from 'zod'
+
+const GH_TOKEN    = process.env.GH_TOKEN    ?? ''
+const STACK_NAME  = process.env.STACK_NAME  ?? ''
+const BASE_URL    = process.env.BASE_URL    ?? ''  // https://api.github.com/repos/owner/repo
+const STG_URL     = process.env.STG_URL     ?? ''  // https://monitoring-stg.example.com
+const VERSION_PATH = process.env.VERSION_PATH ?? '/api/system/version'
+
+// ─── GitHub API helpers ────────────────────────────────────────────────────────
+
+const ghHeaders = {
+  Authorization: `Bearer ${GH_TOKEN}`,
+  Accept: 'application/vnd.github+json',
+  'Content-Type': 'application/json',
+  'X-GitHub-Api-Version': '2022-11-28',
+}
+
+async function triggerWorkflow(workflow: string, inputs: Record<string, string>) {
+  const res = await fetch(`${BASE_URL}/actions/workflows/${workflow}/dispatches`, {
+    method: 'POST',
+    headers: ghHeaders,
+    body: JSON.stringify({ ref: 'main', inputs }),
+  })
+  if (!res.ok) throw new Error(`GitHub API error ${res.status}: ${await res.text()}`)
+}
+
+async function waitForWorkflow(
+  workflow: string,
+  afterTime: Date,
+  timeoutMs = 600_000,
+): Promise<{ conclusion: string; url: string }> {
+  const deadline = Date.now() + timeoutMs
+  await Bun.sleep(8_000) // tunggu run muncul di API
+
+  while (Date.now() < deadline) {
+    const res = await fetch(`${BASE_URL}/actions/workflows/${workflow}/runs?per_page=5`, {
+      headers: ghHeaders,
+    })
+    const data = await res.json() as { workflow_runs: any[] }
+    const run = data.workflow_runs?.find(
+      (r: any) => new Date(r.created_at) >= afterTime,
+    )
+
+    if (run) {
+      if (run.status === 'completed') {
+        return { conclusion: run.conclusion ?? 'failure', url: run.html_url }
+      }
+    }
+
+    await Bun.sleep(12_000)
+  }
+
+  throw new Error(`Workflow ${workflow} timeout setelah ${timeoutMs / 1000}s`)
+}
+
+// ─── Shell helpers ─────────────────────────────────────────────────────────────
+
+async function sh(cmd: string[]): Promise<{ out: string; err: string; ok: boolean }> {
+  const proc = Bun.spawn(cmd, { stdout: 'pipe', stderr: 'pipe', cwd: process.cwd() })
+  const [out, err, code] = await Promise.all([
+    new Response(proc.stdout).text(),
+    new Response(proc.stderr).text(),
+    proc.exited,
+  ])
+  return { out: out.trim(), err: err.trim(), ok: code === 0 }
+}
+
+// ─── MCP Server ────────────────────────────────────────────────────────────────
+
+const server = new McpServer({ name: 'deploy-stg', version: '1.0.0' })
+
+// ─── Tool: publish (manual, single step) ──────────────────────────────────────
+
+server.tool(
+  'publish',
+  'Trigger publish.yml untuk build & push Docker image staging',
+  { tag: z.string().describe('Image tag, contoh: 1.0.0') },
+  async ({ tag }) => {
+    await triggerWorkflow('publish.yml', { stack_env: 'stg', tag })
+    return { content: [{ type: 'text', text: `✅ publish.yml dipicu → stg-${tag}` }] }
+  },
+)
+
+// ─── Tool: repull (manual, single step) ───────────────────────────────────────
+
+server.tool(
+  'repull',
+  'Trigger re-pull.yml untuk redeploy stack staging di Portainer',
+  {},
+  async () => {
+    await triggerWorkflow('re-pull.yml', { stack_name: STACK_NAME, stack_env: 'stg' })
+    return { content: [{ type: 'text', text: `✅ re-pull.yml dipicu → ${STACK_NAME}-stg` }] }
+  },
+)
+
+// ─── Tool: deploy (full pipeline) ─────────────────────────────────────────────
+
+server.tool(
+  'deploy',
+  [
+    'Full deploy pipeline ke staging:',
+    '1. Cek pending migrations',
+    '2. Version bump di package.json',
+    '3. Commit & push ke build/stg',
+    '4. Trigger publish.yml → tunggu selesai',
+    '5. Trigger re-pull.yml → tunggu selesai',
+    '6. Cek version di staging & local untuk konfirmasi',
+  ].join('\n'),
+  { tag: z.string().describe('Versi baru, contoh: 1.2.3') },
+  async ({ tag }) => {
+    const log: string[] = []
+
+    // ── 1. Cek & jalankan migrasi jika ada ─────────────────────────────────
+    const migrateStatus = await sh(['bunx', 'prisma', 'migrate', 'status'])
+    if (!migrateStatus.ok || migrateStatus.out.includes('not yet been applied')) {
+      log.push('⏳ Ada pending migrations — menjalankan migrate deploy...')
+      const migrateRun = await sh(['bunx', 'prisma', 'migrate', 'deploy'])
+      if (!migrateRun.ok) {
+        return {
+          content: [{
+            type: 'text',
+            text: [
+              ...log,
+              '❌ Migrate deploy gagal:',
+              migrateRun.err || migrateRun.out,
+            ].join('\n'),
+          }],
+        }
+      }
+      log.push('✅ Migrations: deployed')
+    } else {
+      log.push('✅ Migrations: up to date')
+    }
+
+    // ── 2. Version bump ──────────────────────────────────────────────────────
+    const pkgPath = `${process.cwd()}/package.json`
+    const pkg = await Bun.file(pkgPath).json()
+    const prevVersion = pkg.version as string
+    pkg.version = tag
+    await Bun.write(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
+    log.push(`✅ Version bump: ${prevVersion} → ${tag}`)
+
+    // ── 3. Commit & push build/stg ───────────────────────────────────────────
+    await sh(['git', 'add', 'package.json'])
+    const commit = await sh(['git', 'commit', '-m', `chore: bump version to ${tag}`])
+    if (!commit.ok) {
+      return { content: [{ type: 'text', text: `❌ git commit gagal:\n${commit.err}` }] }
+    }
+    log.push('✅ Committed')
+
+    const push = await sh(['git', 'push', 'build', 'HEAD:stg'])
+    if (!push.ok) {
+      return { content: [{ type: 'text', text: `❌ git push gagal:\n${push.err}` }] }
+    }
+    log.push('✅ Pushed → build/stg')
+
+    // ── 4. Publish workflow ──────────────────────────────────────────────────
+    log.push('⏳ Menjalankan publish.yml...')
+    const publishTriggeredAt = new Date()
+    await triggerWorkflow('publish.yml', { stack_env: 'stg', tag })
+
+    const publish = await waitForWorkflow('publish.yml', publishTriggeredAt)
+    if (publish.conclusion !== 'success') {
+      return {
+        content: [{
+          type: 'text',
+          text: [
+            ...log,
+            `❌ publish.yml ${publish.conclusion}`,
+            `Detail: ${publish.url}`,
+          ].join('\n'),
+        }],
+      }
+    }
+    log.push(`✅ publish.yml sukses → ${publish.url}`)
+
+    // ── 5. Re-pull workflow ──────────────────────────────────────────────────
+    log.push('⏳ Menjalankan re-pull.yml...')
+    const repullTriggeredAt = new Date()
+    await triggerWorkflow('re-pull.yml', { stack_name: STACK_NAME, stack_env: 'stg' })
+
+    const repull = await waitForWorkflow('re-pull.yml', repullTriggeredAt)
+    if (repull.conclusion !== 'success') {
+      return {
+        content: [{
+          type: 'text',
+          text: [
+            ...log,
+            `❌ re-pull.yml ${repull.conclusion}`,
+            `Detail: ${repull.url}`,
+          ].join('\n'),
+        }],
+      }
+    }
+    log.push(`✅ re-pull.yml sukses → ${repull.url}`)
+
+    // ── 6. Cek version ───────────────────────────────────────────────────────
+    await Bun.sleep(5_000) // tunggu container restart
+    log.push('⏳ Mengecek version di staging...')
+
+    const localCommitProc = await sh(['git', 'rev-parse', '--short', 'HEAD'])
+    const localCommit = localCommitProc.out
+
+    let stgInfo: { version?: string; commit?: string } = {}
+    try {
+      const versionRes = await fetch(`${STG_URL}${VERSION_PATH}`)
+      stgInfo = await versionRes.json()
+    } catch (e) {
+      log.push(`⚠️ Gagal mengecek version staging: ${e}`)
+    }
+
+    const versionMatch = stgInfo.version === tag
+    const commitMatch  = stgInfo.commit  === localCommit
+
+    log.push('')
+    log.push('─── Version Check ───────────────────────────')
+    log.push(`Local  : version=${tag}, commit=${localCommit}`)
+    log.push(`Staging: version=${stgInfo.version ?? '?'}, commit=${stgInfo.commit ?? '?'}`)
+    log.push(versionMatch && commitMatch
+      ? '✅ Staging sudah terupdate dan sesuai local'
+      : `⚠️ Mismatch — version: ${versionMatch ? 'OK' : 'BEDA'}, commit: ${commitMatch ? 'OK' : 'BEDA'}`,
+    )
+
+    return { content: [{ type: 'text', text: log.join('\n') }] }
+  },
+)
+
+const transport = new StdioServerTransport()
+await server.connect(transport)

src/frontend/App.tsx

@@ -1,41 +1,45 @@
 import { ColorSchemeScript, MantineProvider, createTheme } from '@mantine/core'
 import '@mantine/core/styles.css'
+import '@mantine/dates/styles.css'
+import '@mantine/notifications/styles.css'
+import { ModalsProvider } from '@mantine/modals'
+import { Notifications } from '@mantine/notifications'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createRouter, RouterProvider } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 
-const theme = createTheme({
+  const theme = createTheme({
   primaryColor: 'brand-blue',
   colors: {
     'brand-blue': [
-      '#ebf2ff',
-      '#d6e4ff',
-      '#adc8ff',
-      '#85acff',
-      '#5c90ff',
-      '#2563eb', // Primary Blue
-      '#1e4fb8',
-      '#173b85',
-      '#102752',
-      '#09131f',
+      '#f0f9ff',
+      '#e0f2fe',
+      '#bae6fd',
+      '#7dd3fc',
+      '#38bdf8',
+      '#0ea5e9', // Primary Blue (Sky)
+      '#0284c7',
+      '#0369a1',
+      '#075985',
+      '#0c4a6e',
     ],
     'brand-purple': [
-      '#f3ebff',
-      '#e7d6ff',
-      '#cfadff',
-      '#b785ff',
-      '#9f5cff',
-      '#7c3aed', // Primary Purple
-      '#632eb8',
-      '#4a2285',
-      '#311652',
-      '#180b1f',
+      '#faf5ff',
+      '#f3e8ff',
+      '#e9d5ff',
+      '#d8b4fe',
+      '#c084fc',
+      '#a855f7', // Primary Purple
+      '#9333ea',
+      '#7e22ce',
+      '#6b21a8',
+      '#581c87',
     ],
   },
   fontFamily: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif',
   headings: {
     fontFamily: 'Inter, system-ui, sans-serif',
-    fontWeight: '600',
+    fontWeight: '500', // Softer headings
   },
 })
 
@@ -59,11 +63,14 @@ declare module '@tanstack/react-router' {
 export function App() {
   return (
     <>
-      <ColorSchemeScript defaultColorScheme="dark" />
-      <MantineProvider theme={theme} defaultColorScheme="dark" forceColorScheme="dark">
-        <QueryClientProvider client={queryClient}>
-          <RouterProvider router={router} />
-        </QueryClientProvider>
+      <ColorSchemeScript defaultColorScheme="auto" />
+      <MantineProvider theme={theme} defaultColorScheme="auto">
+        <Notifications />
+        <ModalsProvider>
+          <QueryClientProvider client={queryClient}>
+            <RouterProvider router={router} />
+          </QueryClientProvider>
+        </ModalsProvider>
       </MantineProvider>
     </>
   )

src/frontend/components/AppCard.tsx

@@ -1,18 +1,21 @@
-import { Card, Group, Text, ThemeIcon, Badge, Avatar, Stack, Button, Progress, Box } from '@mantine/core'
+import { Avatar, Badge, Button, Card, Group, Stack, Text, useComputedColorScheme } from '@mantine/core'
 import { Link } from '@tanstack/react-router'
-import { TbDeviceMobile, TbActivity, TbAlertTriangle, TbChevronRight } from 'react-icons/tb'
+import { TbAlertTriangle, TbChevronRight, TbDeviceMobile } from 'react-icons/tb'
 
 interface AppCardProps {
   id: string
   name: string
   status: 'active' | 'warning' | 'error'
-  users: number
+  users?: number
   errors: number
   version: string
+  maintenance?: boolean
 }
 
-export function AppCard({ id, name, status, users, errors, version }: AppCardProps) {
-  const statusColor = status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
+export function AppCard({ id, name, status, errors, version, maintenance }: AppCardProps) {
+  const statusColor = maintenance ? 'gray' : status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
+  const statusLabel = maintenance ? 'Maintenance' : status === 'active' ? 'Active' : status === 'warning' ? 'Warning' : 'Error'
+  const scheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
 
   return (
     <Card
@@ -22,18 +25,18 @@ export function AppCard({ id, name, status, users, errors, version }: AppCardPro
       className="premium-card glass"
       styles={(theme) => ({
         root: {
-          backgroundColor: 'rgba(30, 41, 59, 0.4)',
-          borderColor: 'rgba(255,255,255,0.08)',
-          transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+          backgroundColor: 'var(--mantine-color-body)',
+          borderColor: scheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)',
+          transition: 'transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease',
           '&:hover': {
             transform: 'translateY(-4px)',
-            boxShadow: '0 12px 24px -8px rgba(0, 0, 0, 0.4)',
+            boxShadow: theme.shadows.md,
             borderColor: 'rgba(37, 99, 235, 0.3)',
           },
         },
       })}
     >
-      <Group justify="space-between" mb="lg">
+      <Group justify="space-between" mb="md">
         <Group gap="md">
           <Avatar
             variant="gradient"
@@ -43,39 +46,27 @@ export function AppCard({ id, name, status, users, errors, version }: AppCardPro
           >
             <TbDeviceMobile size={26} />
           </Avatar>
-          <Stack gap={0}>
+          <Stack gap={2}>
             <Text fw={700} size="lg" style={{ letterSpacing: '-0.3px' }}>{name}</Text>
-            <Text size="xs" c="dimmed" fw={600}>BUILD v{version}</Text>
+            {/* <Text size="xs" c="dimmed" fw={600} tt="uppercase">v{version}</Text> */}
           </Stack>
         </Group>
         <Badge color={statusColor} variant="dot" size="sm">
-          {status.toUpperCase()}
+          {statusLabel}
         </Badge>
       </Group>
 
-      <Stack gap="md" mt="sm">
-        <Box>
-          <Group justify="space-between" mb={6}>
-            <Group gap="xs">
-              <TbActivity size={16} color="#2563EB" />
-              <Text size="xs" fw={700} c="dimmed">USER ADOPTION</Text>
-            </Group>
-            <Text size="sm" fw={700}>{users.toLocaleString()}</Text>
-          </Group>
-          <Progress value={85} size="sm" color="brand-blue" radius="xl" />
-        </Box>
-
-        <Box>
-          <Group justify="space-between" mb={6}>
-            <Group gap="xs">
-              <TbAlertTriangle size={16} color={errors > 0 ? '#ef4444' : '#64748b'} />
-              <Text size="xs" fw={700} c="dimmed">HEALTH INCIDENTS</Text>
-            </Group>
-            <Text size="sm" fw={700} color={errors > 0 ? 'red' : 'dimmed'}>{errors}</Text>
-          </Group>
-          <Progress value={errors > 0 ? 30 : 0} size="sm" color="red" radius="xl" />
-        </Box>
-      </Stack>
+      <Group justify="space-between" align="center" mb="xs">
+        <Text size="xs" c="dimmed" fw={500}>Open Errors</Text>
+        <Badge
+          color={errors > 0 ? 'red' : 'teal'}
+          variant="light"
+          size="sm"
+          leftSection={errors > 0 ? <TbAlertTriangle size={10} /> : undefined}
+        >
+          {errors > 0 ? errors : 'None'}
+        </Badge>
+      </Group>
 
       <Button
         component={Link}
@@ -83,7 +74,7 @@ export function AppCard({ id, name, status, users, errors, version }: AppCardPro
         variant="light"
         color="brand-blue"
         fullWidth
-        mt="xl"
+        mt="md"
         radius="md"
         rightSection={<TbChevronRight size={16} />}
         styles={{
@@ -95,7 +86,7 @@ export function AppCard({ id, name, status, users, errors, version }: AppCardPro
           }
         }}
       >
-        Center Intelligence
+        Open Dashboard
       </Button>
     </Card>
   )

src/frontend/components/DashboardCharts.tsx

@@ -1,37 +1,40 @@
-import { 
-  Paper, 
-  Stack, 
-  Text, 
-  Group, 
-  ThemeIcon, 
-  Box,
+import { AreaChart, BarChart } from '@mantine/charts'
+import {
   Badge,
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  ThemeIcon,
   useMantineTheme
 } from '@mantine/core'
-import { LineChart, BarChart } from '@mantine/charts'
-import { TbTimeline, TbChartBar, TbArrowUpRight } from 'react-icons/tb'
+import { TbArrowUpRight, TbChartBar, TbTimeline } from 'react-icons/tb'
 
-const activityData = [
-  { date: 'Mar 26', logs: 1200 },
-  { date: 'Mar 27', logs: 1900 },
-  { date: 'Mar 28', logs: 1540 },
-  { date: 'Mar 29', logs: 2400 },
-  { date: 'Mar 30', logs: 2100 },
-  { date: 'Mar 31', logs: 3200 },
-  { date: 'Apr 01', logs: 3800 },
+type DailyRange = 7 | 30 | 90
+
+interface ChartProps {
+  data?: any[]
+  isLoading?: boolean
+}
+
+interface ActivityChartProps extends ChartProps {
+  range?: DailyRange
+  onRangeChange?: (range: DailyRange) => void
+}
+
+const RANGE_OPTIONS: { value: DailyRange; label: string }[] = [
+  { value: 7, label: '7D' },
+  { value: 30, label: '30D' },
+  { value: 90, label: '3M' },
 ]
 
-const villageComparisonData = [
-  { village: 'Sukatani', activity: 4500 },
-  { village: 'Sukamaju', activity: 3800 },
-  { village: 'Bojong Gede', activity: 3200 },
-  { village: 'Beji', activity: 2800 },
-  { village: 'Tapos', activity: 2400 },
-]
-
-export function VillageActivityLineChart() {
+export function VillageActivityLineChart({ data = [], isLoading, range = 7, onRangeChange }: ActivityChartProps) {
   const theme = useMantineTheme()
-  
+
+  const rangeLabel = range === 7 ? 'last 7 days' : range === 30 ? 'last 30 days' : 'last 3 months'
+
   return (
     <Paper withBorder p="xl" radius="2xl" className="glass h-full">
       <Stack gap="md" h="100%">
@@ -42,18 +45,30 @@ export function VillageActivityLineChart() {
             </ThemeIcon>
             <Box>
               <Text fw={700} size="sm">DAILY ACTIVITY - ALL VILLAGES</Text>
-              <Text size="xs" c="dimmed">Trend over the last 7 days</Text>
+              <Text size="xs" c="dimmed">Trend over the {rangeLabel}</Text>
             </Box>
           </Group>
-          <Badge variant="light" color="blue" size="sm" rightSection={<TbArrowUpRight size={12} />}>
-            Growing
-          </Badge>
+          <Group gap={4}>
+            {RANGE_OPTIONS.map((opt) => (
+              <Button
+                key={opt.value}
+                size="compact-xs"
+                variant={range === opt.value ? 'filled' : 'subtle'}
+                color="blue"
+                radius="md"
+                onClick={() => onRangeChange?.(opt.value)}
+                loading={isLoading && range === opt.value}
+              >
+                {opt.label}
+              </Button>
+            ))}
+          </Group>
         </Group>
 
         <Box h={300} mt="lg">
-          <LineChart
+          <AreaChart
             h={300}
-            data={activityData}
+            data={data}
             dataKey="date"
             series={[{ name: 'logs', color: '#2563EB' }]}
             curveType="monotone"
@@ -61,9 +76,33 @@ export function VillageActivityLineChart() {
             gridAxis="x"
             withTooltip
             tooltipAnimationDuration={200}
+            fillOpacity={0.4}
+            tooltipProps={{
+              content: ({ active, payload, label }: any) => {
+                if (!active || !payload?.length) return null
+                return (
+                  <div style={{
+                    backgroundColor: '#1A1B1E',
+                    padding: '8px 12px',
+                    borderRadius: '6px',
+                    border: '1px solid #373A40',
+                    boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+                    pointerEvents: 'none',
+                    whiteSpace: 'nowrap',
+                  }}>
+                    <div style={{ fontSize: '12px', fontWeight: 600, color: '#C1C2C5', marginBottom: '4px' }}>
+                      {label}
+                    </div>
+                    <div style={{ fontSize: '11px', color: '#2563EB' }}>
+                      Activity: <span style={{ fontWeight: 700 }}>{payload[0].value}</span>
+                    </div>
+                  </div>
+                )
+              },
+            }}
             styles={{
               root: {
-                '.recharts-line-curve': {
+                '.recharts-area-curve': {
                   strokeWidth: 3,
                   filter: 'drop-shadow(0 4px 8px rgba(37, 99, 235, 0.3))'
                 }
@@ -76,9 +115,11 @@ export function VillageActivityLineChart() {
   )
 }
 
-export function VillageComparisonBarChart() {
+export function VillageComparisonBarChart({ data = [], isLoading, range = 7, onRangeChange }: ActivityChartProps) {
   const theme = useMantineTheme()
 
+  const rangeLabel = range === 7 ? 'last 7 days' : range === 30 ? 'last 30 days' : 'last 3 months'
+
   return (
     <Paper withBorder p="xl" radius="2xl" className="glass h-full">
       <Stack gap="md" h="100%">
@@ -89,30 +130,65 @@ export function VillageComparisonBarChart() {
             </ThemeIcon>
             <Box>
               <Text fw={700} size="sm">USAGE COMPARISON BETWEEN VILLAGES</Text>
-              <Text size="xs" c="dimmed">Top 5 most active village deployments</Text>
+              <Text size="xs" c="dimmed">Most active village deployments — {rangeLabel}</Text>
             </Box>
           </Group>
+          <Group gap={4}>
+            {RANGE_OPTIONS.map((opt) => (
+              <Button
+                key={opt.value}
+                size="compact-xs"
+                variant={range === opt.value ? 'filled' : 'subtle'}
+                color="violet"
+                radius="md"
+                onClick={() => onRangeChange?.(opt.value)}
+                loading={isLoading && range === opt.value}
+              >
+                {opt.label}
+              </Button>
+            ))}
+          </Group>
         </Group>
 
         <Box h={300} mt="lg">
           <BarChart
             h={300}
-            data={villageComparisonData}
+            data={data}
             dataKey="village"
-            series={[{ name: 'activity', color: 'indigo.6' }]}
+            series={[{ name: 'activity', color: 'blue.6' }]} // Menggunakan warna dari theme
             withTooltip
-            tickLine="none"
-            gridAxis="y"
             barProps={{
-                radius: [8, 8, 4, 4],
+              radius: [8, 8, 0, 0],
+              fill: 'url(#barGradient)', // Menggunakan gradient yang Anda buat
             }}
-            styles={{
-                bar: {
-                    fill: 'url(#barGradient)',
+            tooltipProps={{
+              cursor: { fill: '#373A40', opacity: 0.4 },
+              allowEscapeViewBox: { x: false, y: false },
+              content: ({ active, payload }) => {
+                if (active && payload && payload.length) {
+                  return (
+                    <div style={{
+                      backgroundColor: '#1A1B1E',
+                      padding: '8px 12px',
+                      borderRadius: '6px',
+                      border: '1px solid #373A40',
+                      boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+                      pointerEvents: 'none', // Sangat penting agar tidak mengganggu hover
+                      whiteSpace: 'nowrap'   // Mencegah teks turun ke bawah
+                    }}>
+                      <div style={{ fontSize: '12px', fontWeight: 600, color: '#fff', marginBottom: '4px' }}>
+                        {payload[0].payload.village}
+                      </div>
+                      <div style={{ fontSize: '11px', color: '#2563EB' }}>
+                        Activity: <span style={{ fontWeight: 700 }}>{payload[0].value}</span>
+                      </div>
+                    </div>
+                  );
                 }
+                return null;
+              },
             }}
           >
-            {/* Custom SVG Gradient definitions for Premium SaaS look */}
             <defs>
               <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
                 <stop offset="0%" stopColor="#2563EB" stopOpacity={1} />

src/frontend/components/DashboardLayout.tsx

@@ -1,28 +1,45 @@
 import { APP_CONFIGS } from '@/frontend/config/appMenus'
+import { useLogout, useSession } from '@/frontend/hooks/useAuth'
+import React from 'react'
 import {
+  ActionIcon,
+  Alert,
   AppShell,
   Avatar,
   Box,
   Burger,
   Button,
+  Center,
   Group,
+  Loader,
+  LoadingOverlay,
   Menu,
   NavLink,
   Select,
   Stack,
   Text,
-  ThemeIcon
+  ThemeIcon,
+  Title,
+  useComputedColorScheme,
+  useMantineColorScheme
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
+import { useQuery } from '@tanstack/react-query'
 import { Link, useLocation, useMatches, useNavigate, useParams } from '@tanstack/react-router'
 import {
+  TbAlertTriangle,
   TbApps,
   TbArrowLeft,
   TbChevronRight,
+  TbClock,
   TbDashboard,
   TbDeviceMobile,
+  TbHistory,
   TbLogout,
+  TbMoon,
   TbSettings,
+  TbSun,
+  TbUser,
   TbUserCircle
 } from 'react-icons/tb'
 
@@ -31,7 +48,10 @@ interface DashboardLayoutProps {
 }
 
 export function DashboardLayout({ children }: DashboardLayoutProps) {
-  const [opened, { toggle }] = useDisclosure()
+  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure()
+  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true)
+  const { toggleColorScheme } = useMantineColorScheme()
+  const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
   const location = useLocation()
   const navigate = useNavigate()
   const { appId } = useParams({ strict: false }) as { appId?: string }
@@ -39,34 +59,89 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
   const matches = useMatches()
   const currentPath = matches[matches.length - 1]?.pathname
 
+  // ─── Connect to auth system ──────────────────────────
+  const { data: sessionData, isLoading: sessionLoading } = useSession()
+  const user = sessionData?.user
+  const logout = useLogout()
+
+  // Redirect USER role to profile (pending approval)
+  React.useEffect(() => {
+    if (!sessionLoading && user?.role === 'USER') {
+      navigate({ to: '/profile' })
+    }
+  }, [user?.role, sessionLoading, navigate])
+
+  // ─── Fetch registered apps from database ─────────────
+  const { data: appsData } = useQuery({
+    queryKey: ['apps'],
+    queryFn: () => fetch('/api/apps', { credentials: 'include' }).then((r) => r.json()),
+    staleTime: 60_000,
+  })
+
+  // ─── Fetch system status from database ───────────────
+  const { data: systemStatus } = useQuery({
+    queryKey: ['system', 'status'],
+    queryFn: () => fetch('/api/system/status', { credentials: 'include' }).then((r) => r.json()),
+    refetchInterval: 30_000, // refresh every 30 seconds
+    staleTime: 15_000,
+  })
+
   const globalNav = [
     { label: 'Dashboard', icon: TbDashboard, to: '/dashboard' },
     { label: 'Applications', icon: TbApps, to: '/apps' },
-    { label: 'Settings', icon: TbSettings, to: '/settings' },
+    { label: 'Log Activity', icon: TbHistory, to: '/logs' },
+    { label: 'Error Reports', icon: TbAlertTriangle, to: '/bug-reports' },
+    { label: 'Users', icon: TbUser, to: '/users' },
   ]
 
   const activeApp = appId ? APP_CONFIGS[appId] : null
   const navLinks = activeApp ? activeApp.menus : globalNav
 
+  // Build app selector data from API
+  const appSelectData = (appsData || []).map((app: any) => ({
+    value: app.id,
+    label: app.name,
+  }))
+
+  // System status indicator
+  const isOperational = systemStatus?.status === 'operational'
+  const statusColor = isOperational ? '#10b981' : '#f59e0b'
+  const statusText = isOperational ? 'All Systems Operational' : 'System Degraded'
+
+  const handleLogout = () => {
+    logout.mutate()
+  }
+
+  // Prevent dashboard flash for USER role while redirect is happening
+  if (sessionLoading || user?.role === 'USER') {
+    return (
+      <Center mih="100vh">
+        <LoadingOverlay visible />
+      </Center>
+    )
+  }
+
   return (
     <AppShell
       header={{ height: 70 }}
       navbar={{
         width: 260,
         breakpoint: 'sm',
-        collapsed: { mobile: !opened },
+        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
       }}
       padding="xl"
       styles={(theme) => ({
         main: {
-          backgroundColor: theme.colors.dark[7], // Dark mode background
+          backgroundColor: computedColorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[0],
+          transition: 'background-color 0.2s ease',
         },
       })}
     >
       <AppShell.Header px="xl">
         <Group h="100%" justify="space-between">
           <Group>
-            <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+            <Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
+            <Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
             <Group gap="xs">
               <ThemeIcon
                 size={34}
@@ -88,25 +163,53 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
           </Group>
 
           <Group gap="md">
+            <ActionIcon
+              onClick={() => toggleColorScheme()}
+              variant="default"
+              size="lg"
+              aria-label="Toggle color scheme"
+            >
+              {computedColorScheme === 'dark' ? <TbSun size={18} /> : <TbMoon size={18} />}
+            </ActionIcon>
             <Menu shadow="md" width={200} position="bottom-end">
               <Menu.Target>
                 <Avatar
                   src={undefined}
-                  alt="User"
+                  alt={user?.name || 'User'}
                   color="brand-blue"
                   radius="xl"
                   style={{ cursor: 'pointer' }}
-                />
+                >
+                  {user?.name?.charAt(0).toUpperCase()}
+                </Avatar>
               </Menu.Target>
 
               <Menu.Dropdown>
+                {user && (
+                  <>
+                    <Menu.Label>
+                      <Text size="sm" fw={600} truncate>{user.name}</Text>
+                      <Text size="xs" c="dimmed" truncate>{user.email}</Text>
+                    </Menu.Label>
+                    <Menu.Divider />
+                  </>
+                )}
                 <Menu.Label>Application</Menu.Label>
-                <Menu.Item leftSection={<TbUserCircle size={16} />}>Profile</Menu.Item>
-                <Menu.Item leftSection={<TbSettings size={16} />}>Settings</Menu.Item>
+                <Menu.Item
+                  leftSection={<TbUserCircle size={16} />}
+                  onClick={() => navigate({ to: '/profile' })}
+                >
+                  Profile
+                </Menu.Item>
                 <Menu.Divider />
                 <Menu.Label>Danger Zone</Menu.Label>
-                <Menu.Item color="red" leftSection={<TbLogout size={16} />}>
-                  Logout
+                <Menu.Item
+                  color="red"
+                  leftSection={<TbLogout size={16} />}
+                  onClick={handleLogout}
+                  disabled={logout.isPending}
+                >
+                  {logout.isPending ? 'Logging out...' : 'Logout'}
                 </Menu.Item>
               </Menu.Dropdown>
             </Menu>
@@ -137,10 +240,8 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
             <Select
               label="Selected Application"
               value={appId}
-              data={[
+              data={appSelectData.length > 0 ? appSelectData : [
                 { value: 'desa-plus', label: 'Desa+' },
-                { value: 'e-commerce', label: 'E-Commerce' },
-                { value: 'fitness-app', label: 'Fitness App' },
               ]}
               onChange={(val) => val && navigate({ to: '/apps/$appId', params: { appId: val } })}
               radius="md"
@@ -149,7 +250,7 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
               mb={"md"}
               variant="filled"
               styles={(theme) => ({
-                input: { border: '1px solid rgba(255,255,255,0.1)' }
+                input: { border: computedColorScheme === 'dark' ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(0,0,0,0.1)' }
               })}
             />
           }
@@ -178,16 +279,6 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
                 variant="filled"
                 color="brand-blue"
                 className="sidebar-nav-item"
-                styles={(theme) => ({
-                  root: {
-                    borderRadius: theme.radius.md,
-                    transition: 'all 0.2s ease',
-                    '&[data-active]': {
-                      background: 'var(--gradient-blue-purple)',
-                      fontWeight: 600,
-                    },
-                  },
-                })}
               />
             )
           })}
@@ -198,23 +289,30 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
             <Box
               p="md"
               className="glass"
-              style={{ borderRadius: '12px', border: '1px solid rgba(255,255,255,0.05)' }}
+              style={{ borderRadius: '12px', border: computedColorScheme === 'dark' ? '1px solid rgba(255,255,255,0.05)' : '1px solid rgba(0,0,0,0.05)' }}
             >
               <Text size="xs" c="dimmed" fw={600} mb="xs">SYSTEM STATUS</Text>
               <Group gap="xs">
-                <Box style={{ width: 8, height: 8, borderRadius: '50%', background: '#10b981' }} />
-                <Text size="sm" fw={500}>All Systems Operational</Text>
+                <Box style={{ width: 8, height: 8, borderRadius: '50%', background: statusColor, boxShadow: `0 0 6px ${statusColor}` }} />
+                <Text size="sm" fw={500}>{statusText}</Text>
               </Group>
+              {systemStatus && (
+                <Text size="xs" c="dimmed" mt={4}>
+                  {systemStatus.activeSessions} active session{systemStatus.activeSessions !== 1 ? 's' : ''}
+                </Text>
+              )}
             </Box>
 
             <Button
               variant="light"
               color="red"
               fullWidth
-              leftSection={<TbLogout size={16} />}
+              leftSection={logout.isPending ? <Loader size={16} color="red" /> : <TbLogout size={16} />}
               mt="md"
+              onClick={handleLogout}
+              disabled={logout.isPending}
             >
-              Log out
+              {logout.isPending ? 'Logging out...' : 'Log out'}
             </Button>
           </Stack>
         </Box>

src/frontend/components/ErrorDataTable.tsx

@@ -1,132 +1,169 @@
-import { 
-  Table, 
-  Badge, 
-  Text, 
-  Paper, 
-  Group, 
-  Drawer, 
-  Stack, 
-  Divider, 
-  Code,
-  Button,
+import {
+  Badge,
   Box,
+  Button,
+  Code,
+  Divider,
+  Drawer,
+  Group,
+  Loader,
+  Paper,
   ScrollArea,
-  Title
+  SimpleGrid,
+  Stack,
+  Table,
+  Text,
+  ThemeIcon,
+  Title,
+  Tooltip,
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
-import { useState } from 'react'
-import { TbMessageReport, TbHistory, TbExternalLink, TbBug } from 'react-icons/tb'
+import { Link } from '@tanstack/react-router'
+import dayjs from 'dayjs'
+import { forwardRef, useImperativeHandle, useState } from 'react'
+import { TbBug, TbExternalLink, TbHistory, TbMessageReport } from 'react-icons/tb'
+import useSWR from 'swr'
 
-const mockErrors = [
-  { 
-    id: 1, 
-    message: 'NullPointerException at village_sync.dart:45', 
-    village: 'Sukatani', 
-    version: 'v1.2.0', 
-    timestamp: '2026-04-01 14:30:15', 
-    severity: 'critical',
-    stackTrace: 'at com.desa.sync.VillageManager.sync(VillageManager.java:45)\nat com.desa.sync.SyncService.onHandleIntent(SyncService.java:120)'
-  },
-  { 
-    id: 2, 
-    message: 'Failed to load citizen record session', 
-    village: 'Sukamaju', 
-    version: 'v1.1.8', 
-    timestamp: '2026-04-01 14:15:22', 
-    severity: 'high',
-    stackTrace: 'Error: Connection timeout reaching upstream citizen-db\n    at HttpClient.get (network.dart:88)'
-  },
-  { 
-    id: 3, 
-    message: 'SocketException: Connection timed out', 
-    village: 'Cikini', 
-    version: 'v1.2.0', 
-    timestamp: '2026-04-01 13:55:10', 
-    severity: 'medium',
-    stackTrace: 'SocketException: OS Error: Connection timed out, errno = 110, address = 10.0.2.2, port = 54332'
-  },
-  { 
-    id: 4, 
-    message: 'UI Thread blocking > 500ms', 
-    village: 'Beji', 
-    version: 'v1.1.2', 
-    timestamp: '2026-04-01 13:40:00', 
-    severity: 'low',
-    stackTrace: 'ANR (Application Not Responding) detected in main thread.'
-  },
-]
+export interface ErrorDataTableHandle {
+  refresh: () => void
+}
 
-export function ErrorDataTable() {
+export interface ErrorDataTableProps {
+  appId?: string
+}
+
+const STATUS_COLOR: Record<string, string> = {
+  OPEN: 'red',
+  IN_PROGRESS: 'blue',
+  ON_HOLD: 'orange',
+  RESOLVED: 'teal',
+  RELEASED: 'green',
+  CLOSED: 'gray',
+}
+const STATUS_LABEL: Record<string, string> = {
+  OPEN: 'Open',
+  ON_HOLD: 'On Hold',
+  IN_PROGRESS: 'In Progress',
+  RESOLVED: 'Resolved',
+  RELEASED: 'Released',
+  CLOSED: 'Closed',
+}
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json())
+
+export const ErrorDataTable = forwardRef<ErrorDataTableHandle, ErrorDataTableProps>(
+  function ErrorDataTable({ appId }, ref) {
   const [opened, { open, close }] = useDisclosure(false)
   const [selectedError, setSelectedError] = useState<any>(null)
+  const [showStackTrace, setShowStackTrace] = useState(false)
+
+  const { data: bugsData, isLoading, mutate } = useSWR(
+    `/api/bugs?app=${appId || 'all'}&limit=10`,
+    fetcher
+  )
+
+  useImperativeHandle(ref, () => ({ refresh: mutate }))
+
+  const bugs = bugsData?.data || []
 
   const handleRowClick = (error: any) => {
     setSelectedError(error)
+    setShowStackTrace(false)
     open()
   }
 
-  const getSeverityColor = (sev: string) => {
-    switch(sev) {
-      case 'critical': return 'red'
-      case 'high': return 'orange'
-      case 'medium': return 'yellow'
-      default: return 'gray'
-    }
-  }
-
   return (
     <>
-      <Paper withBorder radius="2xl" className="glass overflow-hidden">
-        <Box p="xl" style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.08)' }}>
+      <Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
+        <Box p="lg" style={{ borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
           <Group justify="space-between">
             <Group gap="sm">
               <ThemeIcon variant="light" color="red" size="lg" radius="md">
                 <TbBug size={20} />
               </ThemeIcon>
-              <Text fw={700}>LATEST ERROR REPORTS</Text>
+              <Stack gap={0}>
+                <Text fw={700} size="sm">Latest Error Reports</Text>
+                <Text size="xs" c="dimmed">Most recent open bugs</Text>
+              </Stack>
             </Group>
-            <Button variant="subtle" size="compact-xs" color="blue" rightSection={<TbExternalLink size={14} />}>
-              View All Reports
-            </Button>
+            <Tooltip label="View all reports" withArrow>
+              <Button
+                component={Link}
+                to={appId ? `/apps/${appId}/errors` : '/bug-reports'}
+                variant="subtle"
+                size="compact-sm"
+                color="blue"
+                rightSection={<TbExternalLink size={14} />}
+              >
+                View All
+              </Button>
+            </Tooltip>
           </Group>
         </Box>
 
         <ScrollArea>
-          <Table verticalSpacing="md" highlightOnHover className="data-table">
-            <Table.Thead bg="rgba(0,0,0,0.1)">
+          <Table verticalSpacing="sm" highlightOnHover className="data-table">
+            <Table.Thead>
               <Table.Tr>
-                <Table.Th px="xl">Error Message</Table.Th>
-                <Table.Th>Village</Table.Th>
-                <Table.Th>App Version</Table.Th>
-                <Table.Th>Timestamp</Table.Th>
-                <Table.Th pr="xl">Severity</Table.Th>
+                <Table.Th px="lg">Error Description</Table.Th>
+                <Table.Th>Reporter</Table.Th>
+                <Table.Th>Version</Table.Th>
+                <Table.Th>Reported</Table.Th>
+                <Table.Th pr="lg">Status</Table.Th>
               </Table.Tr>
             </Table.Thead>
             <Table.Tbody>
-              {mockErrors.map((error) => (
-                <Table.Tr 
-                    key={error.id} 
-                    onClick={() => handleRowClick(error)}
-                    style={{ cursor: 'pointer' }}
-                >
-                  <Table.Td px="xl">
-                    <Text size="sm" fw={600} lineClamp={1}>{error.message}</Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Badge variant="dot" color="brand-blue" radius="sm">{error.village}</Badge>
-                  </Table.Td>
-                  <Table.Td>
-                    <Text size="xs" fw={700} c="dimmed">{error.version}</Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Group gap={6}>
-                      <TbHistory size={12} color="gray" />
-                      <Text size="xs" c="dimmed">{error.timestamp}</Text>
+              {isLoading ? (
+                <Table.Tr>
+                  <Table.Td colSpan={5}>
+                    <Group justify="center" py="xl">
+                      <Loader size="sm" type="dots" />
                     </Group>
                   </Table.Td>
-                  <Table.Td pr="xl">
-                    <Badge color={getSeverityColor(error.severity)} variant="light" size="sm">
-                      {error.severity.toUpperCase()}
+                </Table.Tr>
+              ) : bugs.length === 0 ? (
+                <Table.Tr>
+                  <Table.Td colSpan={5}>
+                    <Stack align="center" gap="xs" py="xl">
+                      <TbBug size={32} style={{ opacity: 0.25 }} />
+                      <Text size="sm" c="dimmed">No error reports found.</Text>
+                    </Stack>
+                  </Table.Td>
+                </Table.Tr>
+              ) : bugs.map((error: any) => (
+                <Table.Tr
+                  key={error.id}
+                  onClick={() => handleRowClick(error)}
+                  style={{ cursor: 'pointer' }}
+                >
+                  <Table.Td px="lg">
+                    <Text size="sm" fw={600} lineClamp={1}>{error.description}</Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge variant="light" color="brand-blue" size="sm">
+                      {error.user?.name || error.userId || 'System'}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge variant="light" color="gray" size="sm">
+                      v{error.affectedVersion || 'N/A'}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap={4}>
+                      <TbHistory size={12} color="gray" />
+                      <Text size="xs" c="dimmed">
+                        {dayjs(error.createdAt).format('D MMM YYYY, HH:mm')}
+                      </Text>
+                    </Group>
+                  </Table.Td>
+                  <Table.Td pr="lg">
+                    <Badge
+                      color={STATUS_COLOR[error.status?.toUpperCase()] ?? 'gray'}
+                      variant="light"
+                      size="sm"
+                    >
+                      {STATUS_LABEL[error.status?.toUpperCase()] ?? error.status}
                     </Badge>
                   </Table.Td>
                 </Table.Tr>
@@ -143,53 +180,90 @@ export function ErrorDataTable() {
         size="md"
         title={
           <Group gap="xs">
-            <TbMessageReport color="#ef4444" size={24} />
-            <Title order={4}>Error Investigation</Title>
+            <TbMessageReport color="#ef4444" size={22} />
+            <Title order={4}>Error Detail</Title>
           </Group>
         }
         styles={{
-          header: { padding: '24px', borderBottom: '1px solid rgba(255,255,255,0.1)' },
-          content: { background: 'rgba(15, 23, 42, 0.95)', backdropFilter: 'blur(12px)' }
+          header: { padding: '20px 24px', borderBottom: '1px solid var(--mantine-color-default-border)' },
         }}
       >
         {selectedError && (
           <Stack p="lg" gap="xl">
             <Box>
-              <Text size="xs" fw={700} c="dimmed" mb={4}>MESSAGE</Text>
-              <Text fw={700} size="lg" color="red">{selectedError.message}</Text>
+              <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Description</Text>
+              <Text fw={600} size="sm">{selectedError.description}</Text>
             </Box>
 
             <SimpleGrid cols={2} spacing="lg">
               <Box>
-                <Text size="xs" fw={700} c="dimmed" mb={4}>VILLAGE</Text>
-                <Text fw={600}>{selectedError.village}</Text>
+                <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Status</Text>
+                <Badge
+                  color={STATUS_COLOR[selectedError.status?.toUpperCase()] ?? 'gray'}
+                  variant="light"
+                  size="sm"
+                >
+                  {STATUS_LABEL[selectedError.status?.toUpperCase()] ?? selectedError.status}
+                </Badge>
               </Box>
               <Box>
-                <Text size="xs" fw={700} c="dimmed" mb={4}>APP VERSION</Text>
-                <Badge variant="outline">{selectedError.version}</Badge>
+                <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Source</Text>
+                <Badge variant="light" color="gray" size="sm">{selectedError.source}</Badge>
+              </Box>
+              <Box>
+                <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">App Version</Text>
+                <Badge variant="light" color="gray" size="sm">v{selectedError.affectedVersion || 'N/A'}</Badge>
+              </Box>
+              <Box>
+                <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Reported</Text>
+                <Text size="sm" fw={500}>{dayjs(selectedError.createdAt).format('D MMM YYYY, HH:mm')}</Text>
               </Box>
             </SimpleGrid>
 
+            {selectedError.device && (
+              <Box>
+                <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Device</Text>
+                <Text size="sm">{selectedError.device} · {selectedError.os}</Text>
+              </Box>
+            )}
+
+            {selectedError.feedBack && (
+              <>
+                <Divider opacity={0.1} />
+                <Box>
+                  <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Developer Feedback</Text>
+                  <Text size="sm" style={{ whiteSpace: 'pre-wrap' }}>{selectedError.feedBack}</Text>
+                </Box>
+              </>
+            )}
+
             <Divider opacity={0.1} />
 
             <Box>
-              <Text size="xs" fw={700} c="dimmed" mb="sm">STACK TRACE</Text>
-              <Paper p="md" radius="md" bg="dark.8" style={{ border: '1px solid rgba(255,255,255,0.1)' }}>
-                <Code block color="red" bg="transparent" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
-                  {selectedError.stackTrace}
+              <Group justify="space-between" mb="sm">
+                <Text size="xs" fw={700} c="dimmed" tt="uppercase">Stack Trace</Text>
+                <Button
+                  variant="subtle"
+                  size="compact-xs"
+                  color="gray"
+                  onClick={() => setShowStackTrace((v) => !v)}
+                >
+                  {showStackTrace ? 'Hide' : 'Show'}
+                </Button>
+              </Group>
+              {showStackTrace && (
+                <Code
+                  block
+                  color="red"
+                  style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, fontSize: 11, border: '1px solid var(--mantine-color-default-border)' }}
+                >
+                  {selectedError.stackTrace || '(no stack trace)'}
                 </Code>
-              </Paper>
+              )}
             </Box>
-
-            <Group justify="flex-end" mt="xl">
-              <Button variant="light" color="gray" onClick={close}>Dismiss</Button>
-              <Button variant="gradient" gradient={{ from: 'red', to: 'orange' }}>Assign Technician</Button>
-            </Group>
           </Stack>
         )}
       </Drawer>
     </>
   )
-}
-
-import { SimpleGrid, ThemeIcon } from '@mantine/core'
+})

src/frontend/components/StatsCard.tsx

@@ -14,18 +14,21 @@ interface StatsCardProps {
 }
 
 export function StatsCard({ title, value, description, icon: Icon, color, trend }: StatsCardProps) {
+  const accentColor = `var(--mantine-color-${color ?? 'brand-blue'}-5)`
+
   return (
     <Card
       withBorder
       padding="lg"
       radius="xl"
       className="premium-card"
-      styles={(theme) => ({
+      styles={{
         root: {
-          backgroundColor: theme.colors.dark[6],
-          borderColor: 'rgba(255,255,255,0.05)',
+          backgroundColor: 'var(--mantine-color-body)',
+          borderColor: 'rgba(128,128,128,0.1)',
+          borderTop: `3px solid ${accentColor}`,
         },
-      })}
+      }}
     >
       <Group justify="space-between" mb="xs">
         <ThemeIcon

src/frontend/components/SummaryCard.tsx

@@ -1,4 +1,4 @@
-import { Card, Group, Text, ThemeIcon, Stack, Progress, Badge } from '@mantine/core'
+import { Card, Group, Text, ThemeIcon, Stack, Progress, Badge, useComputedColorScheme } from '@mantine/core'
 import { IconType } from 'react-icons'
 import { TbTrendingUp, TbTrendingDown } from 'react-icons/tb'
 
@@ -16,6 +16,8 @@ interface SummaryCardProps {
       label: string
   }
   isError?: boolean
+  onClick?: () => void
+  children?: React.ReactNode
 }
 
 export function SummaryCard({ 
@@ -25,19 +27,29 @@ export function SummaryCard({
     color = 'brand-blue', 
     trend, 
     progress,
-    isError 
+    isError,
+    onClick,
+    children
 }: SummaryCardProps) {
+  const scheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
+
   return (
     <Card
       withBorder
       padding="xl"
       radius="2xl"
       className="glass"
+      onClick={onClick}
+      style={{ cursor: onClick ? 'pointer' : 'default' }}
       styles={(theme) => ({
         root: {
-          backgroundColor: isError && Number(value) > 0 ? 'rgba(239, 68, 68, 0.05)' : 'rgba(30, 41, 59, 0.4)',
-          borderColor: isError && Number(value) > 10 ? 'rgba(239, 68, 68, 0.3)' : 'rgba(255, 255, 255, 0.08)',
-          transition: 'transform 0.2s ease',
+          backgroundColor: isError && Number(value) > 0 
+            ? (scheme === 'dark' ? 'rgba(239, 68, 68, 0.1)' : 'rgba(255, 241, 242, 1)') // light pink for error in light mode
+            : 'var(--mantine-color-body)',
+          borderColor: isError && Number(value) > 10 
+            ? 'rgba(239, 68, 68, 0.3)' 
+            : scheme === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.05)',
+          transition: 'transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease',
           '&:hover': {
             transform: 'translateY(-4px)',
           }
@@ -89,6 +101,8 @@ export function SummaryCard({
           />
         </Box>
       )}
+
+      {children}
     </Card>
   )
 }

src/frontend/config/api.ts

@@ -0,0 +1,61 @@
+const DESA_PLUS_PROXY = '/api/proxy/desa-plus'
+
+export const API_URLS = {
+  getVillages: (page: number, search: string) =>
+    `${DESA_PLUS_PROXY}/api/monitoring/get-villages?page=${page}&search=${encodeURIComponent(search)}`,
+  infoVillages: (id: string) =>
+    `${DESA_PLUS_PROXY}/api/monitoring/info-villages?id=${id}`,
+  gridVillages: (id: string) =>
+    `${DESA_PLUS_PROXY}/api/monitoring/grid-villages?id=${id}`,
+  graphLogVillages: (id: string, time: string) =>
+    `${DESA_PLUS_PROXY}/api/monitoring/graph-log-villages?id=${id}&time=${time}`,
+  getUsers: (page: number, search: string, isActive?: string, idUserRole?: string, idVillage?: string, orderBy?: string, orderDir?: string) => {
+    const params = new URLSearchParams({ page: String(page), search })
+    if (isActive !== undefined) params.set('isActive', isActive)
+    if (idUserRole) params.set('idUserRole', idUserRole)
+    if (idVillage) params.set('idVillage', idVillage)
+    if (orderBy) params.set('orderBy', orderBy)
+    if (orderDir) params.set('orderDir', orderDir)
+    return `${DESA_PLUS_PROXY}/api/monitoring/user?${params}`
+  },
+  getLogsAllVillages: (page: number, search: string, action?: string, idVillage?: string, dateFrom?: string, dateTo?: string) => {
+    const params = new URLSearchParams({ page: String(page), search })
+    if (action) params.set('action', action)
+    if (idVillage) params.set('idVillage', idVillage)
+    if (dateFrom) params.set('dateFrom', dateFrom)
+    if (dateTo) params.set('dateTo', dateTo)
+    return `${DESA_PLUS_PROXY}/api/monitoring/log-all-villages?${params}`
+  },
+  getGridOverview: () => `${DESA_PLUS_PROXY}/api/monitoring/grid-overview`,
+  getDailyActivity: (range: 7 | 30 | 90 = 7) => `${DESA_PLUS_PROXY}/api/monitoring/daily-activity?range=${range}`,
+  getComparisonActivity: (range: 7 | 30 | 90 = 7) => `${DESA_PLUS_PROXY}/api/monitoring/comparison-activity?range=${range}`,
+  postVersionUpdate: () => `${DESA_PLUS_PROXY}/api/monitoring/version-update`,
+  createVillages: () => `${DESA_PLUS_PROXY}/api/monitoring/create-villages`,
+  createUser: () => `${DESA_PLUS_PROXY}/api/monitoring/create-user`,
+  listRole: () => `${DESA_PLUS_PROXY}/api/monitoring/list-userrole-villages`,
+  listGroup: (id: string) => `${DESA_PLUS_PROXY}/api/monitoring/list-group-villages?id=${id}`,
+  listPosition: (id: string) => `${DESA_PLUS_PROXY}/api/monitoring/list-position-villages?id=${id}`,
+  editUser: () => `${DESA_PLUS_PROXY}/api/monitoring/edit-user`,
+  updateStatusVillages: () => `${DESA_PLUS_PROXY}/api/monitoring/update-status-villages`,
+  editVillages: () => `${DESA_PLUS_PROXY}/api/monitoring/edit-villages`,
+  getGlobalLogs: (page: number, search: string, type: string, userId: string, dateFrom?: string, dateTo?: string) => {
+    const params = new URLSearchParams({ page: String(page), search, type, userId })
+    if (dateFrom) params.set('dateFrom', dateFrom)
+    if (dateTo) params.set('dateTo', dateTo)
+    return `/api/logs?${params}`
+  },
+  getLogOperators: () => `/api/logs/operators`,
+  getOperators: (page: number, search: string) => 
+    `/api/operators?page=${page}&search=${encodeURIComponent(search)}`,
+  getOperatorStats: () => `/api/operators/stats`,
+  createOperator: () => `/api/operators`,
+  editOperator: (id: string) => `/api/operators/${id}`,
+  deleteOperator: (id: string) => `/api/operators/${id}`,
+  getBugs: (page: number, search: string, app: string, status: string) => 
+    `/api/bugs?page=${page}&search=${encodeURIComponent(search)}&app=${app}&status=${status}`,
+  createBug: () => `/api/bugs`,
+  uploadImage: () => `/api/upload/image`,
+  updateBugStatus: (id: string) => `/api/bugs/${id}/status`,
+  updateBugFeedback: (id: string) => `/api/bugs/${id}/feedback`,
+  createLog: () => `/api/logs`,
+}

src/frontend/config/appMenus.ts

@@ -1,5 +1,5 @@
 import { IconType } from 'react-icons'
-import { TbChartBar, TbHistory, TbAlertTriangle, TbSettings, TbShoppingCart, TbPackage, TbCreditCard } from 'react-icons/tb'
+import { TbAlertTriangle, TbBuilding, TbChartBar, TbCreditCard, TbHistory, TbPackage, TbShoppingCart, TbUsers } from 'react-icons/tb'
 
 export interface MenuItem {
   value: string
@@ -22,7 +22,8 @@ export const APP_CONFIGS: Record<string, AppConfig> = {
       { value: 'overview', label: 'Overview', icon: TbChartBar, to: '/apps/desa-plus' },
       { value: 'logs', label: 'Log Activity', icon: TbHistory, to: '/apps/desa-plus/logs' },
       { value: 'errors', label: 'Error Reports', icon: TbAlertTriangle, to: '/apps/desa-plus/errors' },
-      { value: 'manage', label: 'Manage', icon: TbSettings, to: '/apps/desa-plus/manage' },
+      { value: 'villages', label: 'Villages', icon: TbBuilding, to: '/apps/desa-plus/villages' },
+      { value: 'users', label: 'Users', icon: TbUsers, to: '/apps/desa-plus/users' },
     ],
   },
   'e-commerce': {

src/frontend/hooks/useAuth.ts

@@ -1,13 +1,20 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useNavigate } from '@tanstack/react-router'
 
-export type Role = 'USER' | 'ADMIN' | 'SUPER_ADMIN'
+export type Role = 'USER' | 'ADMIN' | 'DEVELOPER'
+
+export function getDefaultRoute(role: Role): string {
+  if (role === 'DEVELOPER') return '/dev'
+  if (role === 'ADMIN') return '/dashboard'
+  return '/profile'
+}
 
 export interface User {
   id: string
   name: string
   email: string
   role: Role
+  image?: string | null
 }
 
 async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
@@ -41,12 +48,7 @@ export function useLogin() {
       }),
     onSuccess: (data) => {
       queryClient.setQueryData(['auth', 'session'], data)
-      // Super admin → dashboard, others → profile
-      if (data.user.role === 'SUPER_ADMIN') {
-        navigate({ to: '/dashboard' })
-      } else {
-        navigate({ to: '/profile' })
-      }
+      navigate({ to: getDefaultRoute(data.user.role) })
     },
   })
 }

src/frontend/hooks/usePresence.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from 'react'
+import { useSession } from './useAuth'
+
+export function usePresence() {
+  const { data } = useSession()
+  const [onlineUserIds, setOnlineUserIds] = useState<string[]>([])
+  const wsRef = useRef<WebSocket | null>(null)
+  const reconnectTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  useEffect(() => {
+    if (!data?.user) return
+
+    function connect() {
+      const proto = location.protocol === 'https:' ? 'wss' : 'ws'
+      const ws = new WebSocket(`${proto}://${location.host}/ws/presence`)
+      wsRef.current = ws
+
+      ws.onmessage = (e) => {
+        const msg = JSON.parse(e.data)
+        if (msg.type === 'presence') setOnlineUserIds(msg.online)
+      }
+      ws.onclose = () => {
+        wsRef.current = null
+        reconnectTimer.current = setTimeout(connect, 3000)
+      }
+      ws.onerror = () => ws.close()
+    }
+
+    connect()
+
+    return () => {
+      clearTimeout(reconnectTimer.current)
+      if (wsRef.current) {
+        wsRef.current.onclose = null
+        wsRef.current.close()
+        wsRef.current = null
+      }
+    }
+  }, [data?.user?.id, data?.user])
+
+  return { onlineUserIds }
+}

src/frontend/routes/apps.$appId.errors.tsx

@@ -1,174 +1,658 @@
 import {
-  Badge,
-  Container,
-  Group,
-  Stack,
-  Text,
-  Title,
-  Paper,
   Accordion,
-  ThemeIcon,
-  TextInput,
-  Select,
-  Code,
+  Avatar,
+  Badge,
   Box,
   Button,
+  Code,
+  Collapse,
+  FileInput,
+  Group,
+  Image,
+  Loader,
+  Modal,
+  Pagination,
+  Paper,
+  Select,
   SimpleGrid,
+  Stack,
+  Text,
+  Textarea,
+  TextInput,
+  ThemeIcon,
+  Timeline,
+  Title,
+  Tooltip,
 } from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
+import { notifications } from '@mantine/notifications'
+import { useQuery } from '@tanstack/react-query'
 import { createFileRoute, useParams } from '@tanstack/react-router'
-import { 
-  TbAlertTriangle, 
-  TbBug, 
-  TbDeviceDesktop, 
-  TbDeviceMobile, 
-  TbSearch, 
-  TbFilter,
+import dayjs from 'dayjs'
+import { useState } from 'react'
+import {
+  TbAlertTriangle,
+  TbBug,
   TbCircleCheck,
-  TbUserCheck
+  TbCircleX,
+  TbDeviceDesktop,
+  TbDeviceMobile,
+  TbHistory,
+  TbPhoto,
+  TbPlus,
+  TbSearch
 } from 'react-icons/tb'
+import { API_URLS } from '../config/api'
 
 export const Route = createFileRoute('/apps/$appId/errors')({
   component: AppErrorsPage,
 })
 
-const mockErrors = [
-  {
-    id: 1,
-    title: 'NullPointerException: village_id is null',
-    message: 'Occurred during background sync with central server.',
-    version: '2.4.1',
-    device: 'PC Admin (Windows 10)',
-    time: '2 mins ago',
-    severity: 'critical',
-    users: 24,
-    frequency: 145,
-    stackTrace: 'at com.desa.sync.VillageManager.sync(VillageManager.java:45)\nat com.desa.sync.SyncService.onHandleIntent(SyncService.java:120)\nat android.app.IntentService$ServiceHandler.handleMessage(IntentService.java:78)'
-  },
-  {
-    id: 2,
-    title: 'SocketTimeoutException: Connection reset by peer',
-    message: 'Failed to upload document: surat_kematian_01.pdf',
-    version: '2.4.0',
-    device: 'Android Tablet (Samsung Tab A8)',
-    time: '15 mins ago',
-    severity: 'high',
-    users: 5,
-    frequency: 12,
-    stackTrace: 'java.net.SocketTimeoutException: timeout\nat okio.Okio$4.newTimeoutException(Okio.java:232)\nat okio.AsyncTimeout.exit(AsyncTimeout.java:285)'
-  },
-  {
-    id: 3,
-    title: 'SQLiteException: no such column: village_id',
-    message: 'Failed to query local village profile database.',
-    version: '2.4.1',
-    device: 'PC Admin (Windows 7)',
-    time: '1 hour ago',
-    severity: 'medium',
-    users: 2,
-    frequency: 4,
-    stackTrace: 'java.io.IOException: No space left on device\nat java.io.FileOutputStream.writeBytes(Native Method)'
-  },
-]
+const STATUS_COLOR: Record<string, string> = {
+  OPEN: 'red',
+  IN_PROGRESS: 'blue',
+  ON_HOLD: 'orange',
+  RESOLVED: 'teal',
+  RELEASED: 'green',
+  CLOSED: 'gray',
+}
+const STATUS_LABEL: Record<string, string> = {
+  OPEN: 'Open',
+  ON_HOLD: 'On Hold',
+  IN_PROGRESS: 'In Progress',
+  RESOLVED: 'Resolved',
+  RELEASED: 'Released',
+  CLOSED: 'Closed',
+}
 
 function AppErrorsPage() {
   const { appId } = useParams({ from: '/apps/$appId/errors' })
 
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState('')
+  const [status, setStatus] = useState('all')
+
+  const [showLogs, setShowLogs] = useState<Record<string, boolean>>({})
+  const [showStackTrace, setShowStackTrace] = useState<Record<string, boolean>>({})
+
+  const toggleLogs = (bugId: string) => setShowLogs((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
+  const toggleStackTrace = (bugId: string) => setShowStackTrace((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
+
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ['bugs', { page, search, app: appId, status }],
+    queryFn: () => fetch(API_URLS.getBugs(page, search, appId, status)).then((r) => r.json()),
+  })
+
+  const { data: appsList } = useQuery({
+    queryKey: ['apps-list'],
+    queryFn: () => fetch('/api/apps').then((r) => r.json()),
+  })
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null)
+
+  const [opened, { open, close }] = useDisclosure(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [imageFiles, setImageFiles] = useState<File[]>([])
+  const [createForm, setCreateForm] = useState({
+    description: '',
+    app: appId,
+    source: 'USER',
+    affectedVersion: '',
+    device: '',
+    os: '',
+    stackTrace: '',
+  })
+
+  const [updateModalOpened, { open: openUpdateModal, close: closeUpdateModal }] = useDisclosure(false)
+  const [isUpdating, setIsUpdating] = useState(false)
+  const [selectedBugId, setSelectedBugId] = useState<string | null>(null)
+  const [updateForm, setUpdateForm] = useState({ status: '', description: '' })
+
+  const [feedbackModalOpened, { open: openFeedbackModal, close: closeFeedbackModal }] = useDisclosure(false)
+  const [isUpdatingFeedback, setIsUpdatingFeedback] = useState(false)
+  const [feedbackForm, setFeedbackForm] = useState({ feedBack: '' })
+
+  const handleUpdateFeedback = async () => {
+    if (!selectedBugId || !feedbackForm.feedBack) return
+    setIsUpdatingFeedback(true)
+    try {
+      const res = await fetch(API_URLS.updateBugFeedback(selectedBugId), {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(feedbackForm),
+      })
+      if (res.ok) {
+        notifications.show({ title: 'Success', message: 'Feedback has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
+        refetch()
+        closeFeedbackModal()
+        setFeedbackForm({ feedBack: '' })
+      } else {
+        throw new Error()
+      }
+    } catch {
+      notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
+    } finally {
+      setIsUpdatingFeedback(false)
+    }
+  }
+
+  const handleUpdateStatus = async () => {
+    if (!selectedBugId || !updateForm.status) return
+    setIsUpdating(true)
+    try {
+      const res = await fetch(API_URLS.updateBugStatus(selectedBugId), {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(updateForm),
+      })
+      if (res.ok) {
+        notifications.show({ title: 'Success', message: 'Status has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
+        refetch()
+        closeUpdateModal()
+        setUpdateForm({ status: '', description: '' })
+      } else {
+        throw new Error()
+      }
+    } catch {
+      notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
+    } finally {
+      setIsUpdating(false)
+    }
+  }
+
+  const handleCreateBug = async () => {
+    if (!createForm.description || !createForm.affectedVersion || !createForm.device || !createForm.os) {
+      notifications.show({ title: 'Validation Error', message: 'Please fill in all required fields.', color: 'red' })
+      return
+    }
+    setIsSubmitting(true)
+    try {
+      const imageUrls: string[] = []
+      for (const file of imageFiles) {
+        const formData = new FormData()
+        formData.append('file', file)
+        const uploadRes = await fetch(API_URLS.uploadImage(), { method: 'POST', body: formData })
+        if (!uploadRes.ok) throw new Error('Failed to upload image')
+        const { url } = await uploadRes.json()
+        imageUrls.push(url)
+      }
+      const res = await fetch(API_URLS.createBug(), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ...createForm, imageUrls: imageUrls.length ? imageUrls : undefined }),
+      })
+      if (res.ok) {
+        await fetch(API_URLS.createLog(), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: 'CREATE', message: `New error report added: ${createForm.description.substring(0, 50)}${createForm.description.length > 50 ? '...' : ''}` }),
+        }).catch(console.error)
+        notifications.show({ title: 'Success', message: 'Error report has been created.', color: 'teal', icon: <TbCircleCheck size={18} /> })
+        refetch()
+        close()
+        setImageFiles([])
+        setCreateForm({ description: '', app: appId, source: 'USER', affectedVersion: '', device: '', os: '', stackTrace: '' })
+      } else {
+        throw new Error()
+      }
+    } catch {
+      notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const bugs = data?.data || []
+  const totalPages = data?.totalPages || 1
+
   return (
-    <Stack gap="xl">
-      <Group justify="space-between" align="center">
-        <Stack gap={0}>
-          <Title order={3}>Error Reporting Center</Title>
-          <Text size="sm" c="dimmed">Advanced analysis of health issues and crashes for <b>{appId}</b>.</Text>
+    <Stack gap="xl" py="md">
+      <Group justify="space-between" align="flex-start">
+        <Stack gap={4}>
+          <Title order={3}>Error Reports</Title>
+          <Text size="sm" c="dimmed">
+            Bug reports and crash tracking for this application.
+          </Text>
         </Stack>
-        <Button variant="light" color="red" leftSection={<TbBug size={16} />}>
-          Export Logs
+        <Button
+          variant="gradient"
+          gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+          leftSection={<TbPlus size={18} />}
+          size="sm"
+          onClick={open}
+        >
+          Report Error
         </Button>
       </Group>
 
-      <Paper withBorder radius="2xl" className="glass" p="md">
-        <Group mb="md" grow>
+      {/* Image Preview Modal */}
+      <Modal
+        opened={!!previewImage}
+        onClose={() => setPreviewImage(null)}
+        size="xl"
+        radius="md"
+        padding={0}
+        withCloseButton={false}
+        overlayProps={{ backgroundOpacity: 0.75, blur: 6 }}
+        styles={{ content: { background: 'transparent', boxShadow: 'none' } }}
+        onClick={() => setPreviewImage(null)}
+      >
+        {previewImage && (
+          <Image src={previewImage} alt="Preview" fit="contain" style={{ maxHeight: '85vh', width: '100%' }} />
+        )}
+      </Modal>
+
+      <Modal
+        opened={updateModalOpened}
+        onClose={closeUpdateModal}
+        title={<Text fw={700} size="lg">Update Bug Status</Text>}
+        radius="md"
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="md">
+          <Select
+            label="New Status"
+            placeholder="Select a status"
+            required
+            data={Object.entries(STATUS_LABEL).map(([value, label]) => ({ value, label }))}
+            value={updateForm.status}
+            onChange={(val) => setUpdateForm({ ...updateForm, status: val || '' })}
+          />
+          <Textarea
+            label="Update Note (Optional)"
+            placeholder="e.g. Fixed in commit abc123 / Assigned to team"
+            minRows={3}
+            value={updateForm.description}
+            onChange={(e) => setUpdateForm({ ...updateForm, description: e.target.value })}
+          />
+          <Button
+            fullWidth
+            mt="md"
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+            loading={isUpdating}
+            onClick={handleUpdateStatus}
+          >
+            Save Changes
+          </Button>
+        </Stack>
+      </Modal>
+
+      <Modal
+        opened={feedbackModalOpened}
+        onClose={closeFeedbackModal}
+        title={<Text fw={700} size="lg">Developer Feedback</Text>}
+        radius="md"
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="md">
+          <Textarea
+            data-autofocus
+            label="Feedback / Note"
+            placeholder="Explain the issue, root cause, or resolution..."
+            required
+            minRows={4}
+            value={feedbackForm.feedBack}
+            onChange={(e) => setFeedbackForm({ feedBack: e.target.value })}
+          />
+          <Button
+            fullWidth
+            mt="md"
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+            loading={isUpdatingFeedback}
+            onClick={handleUpdateFeedback}
+          >
+            Save Feedback
+          </Button>
+        </Stack>
+      </Modal>
+
+      <Modal
+        opened={opened}
+        onClose={() => { close(); setImageFiles([]) }}
+        title={<Text fw={700} size="lg">Report New Error</Text>}
+        radius="md"
+        size="lg"
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="md">
+          <Textarea
+            label="Description"
+            placeholder="What happened? Describe the error in detail..."
+            required
+            minRows={3}
+            value={createForm.description}
+            onChange={(e) => setCreateForm({ ...createForm, description: e.target.value })}
+          />
+          <SimpleGrid cols={2}>
+            <Select
+              label="Application"
+              data={appsList?.map((a: any) => ({ value: a.id, label: a.name })) || []}
+              value={createForm.app}
+              onChange={(val) => setCreateForm({ ...createForm, app: val as any })}
+              placeholder="Select application"
+              disabled={!appsList}
+            />
+            <Select
+              label="Source"
+              data={[
+                { value: 'USER', label: 'User' },
+                { value: 'QC', label: 'QC' },
+                { value: 'SYSTEM', label: 'System' },
+              ]}
+              value={createForm.source}
+              onChange={(val) => setCreateForm({ ...createForm, source: val as any })}
+            />
+          </SimpleGrid>
           <TextInput
-            placeholder="Search error message, village, or stack trace..."
+            label="Affected Version"
+            placeholder="e.g. 2.4.1"
+            required
+            value={createForm.affectedVersion}
+            onChange={(e) => setCreateForm({ ...createForm, affectedVersion: e.target.value })}
+          />
+          <SimpleGrid cols={2}>
+            <TextInput
+              label="Device"
+              placeholder="e.g. iPhone 13, Windows PC"
+              required
+              value={createForm.device}
+              onChange={(e) => setCreateForm({ ...createForm, device: e.target.value })}
+            />
+            <TextInput
+              label="OS"
+              placeholder="e.g. iOS 15.4, Windows 11"
+              required
+              value={createForm.os}
+              onChange={(e) => setCreateForm({ ...createForm, os: e.target.value })}
+            />
+          </SimpleGrid>
+          <FileInput
+            label="Screenshots (Optional)"
+            placeholder="Click to upload images..."
+            accept="image/*"
+            leftSection={<TbPhoto size={16} />}
+            description="Max 3 images · 5 MB each · JPG, PNG, WEBP"
+            value={imageFiles}
+            onChange={(files) => {
+              if (files.length > 3) {
+                notifications.show({ title: 'Error', message: 'Maximum 3 images allowed.', color: 'red' })
+                return
+              }
+              setImageFiles(files)
+            }}
+            clearable
+            multiple
+          />
+          <Textarea
+            label="Stack Trace (Optional)"
+            placeholder="Paste error logs or stack trace here..."
+            style={{ fontFamily: 'monospace' }}
+            minRows={2}
+            value={createForm.stackTrace}
+            onChange={(e) => setCreateForm({ ...createForm, stackTrace: e.target.value })}
+          />
+          <Button
+            fullWidth
+            mt="md"
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+            loading={isSubmitting}
+            onClick={handleCreateBug}
+          >
+            Submit Error Report
+          </Button>
+        </Stack>
+      </Modal>
+
+      <Paper withBorder radius="2xl" className="glass" p="md">
+        <SimpleGrid cols={{ base: 1, sm: 3 }} mb="lg">
+          <TextInput
+            label="Search"
+            placeholder="Description, device, OS..."
             leftSection={<TbSearch size={16} />}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
             radius="md"
+            size="sm"
           />
           <Select
-            placeholder="Severity"
-            data={['Critical', 'High', 'Medium', 'Low']}
-            leftSection={<TbFilter size={16} />}
+            label="Status"
+            size="sm"
+            data={[
+              { value: 'all', label: 'All Status' },
+              ...Object.entries(STATUS_LABEL).map(([value, label]) => ({ value, label })),
+            ]}
+            value={status}
+            onChange={(val) => setStatus(val || 'all')}
             radius="md"
-            clearable
           />
-        </Group>
-
-        <Accordion variant="separated" radius="xl">
-          {mockErrors.map((error) => (
-            <Accordion.Item 
-              key={error.id} 
-              value={error.id.toString()} 
-              style={{ border: '1px solid rgba(255,255,255,0.05)', background: 'rgba(255,255,255,0.02)', marginBottom: '12px' }}
+          <Stack justify="flex-end">
+            <Button
+              variant="filled"
+              color="violet"
+              size="sm"
+              onClick={() => { setSearch(''); setStatus('all') }}
             >
-              <Accordion.Control>
-                <Group wrap="nowrap">
-                  <ThemeIcon 
-                    color={error.severity === 'critical' ? 'red' : error.severity === 'high' ? 'orange' : 'yellow'} 
-                    variant="light" 
-                    size="lg" 
-                    radius="md"
-                  >
-                    <TbAlertTriangle size={20} />
-                  </ThemeIcon>
-                  <Box style={{ flex: 1 }}>
-                    <Group justify="space-between">
-                      <Text size="sm" fw={600} lineClamp={1}>{error.title}</Text>
-                      <Badge color={error.severity === 'critical' ? 'red' : 'orange'} variant="dot" size="xs">
-                        {error.severity.toUpperCase()}
-                      </Badge>
-                    </Group>
-                    <Group gap="md">
-                      <Text size="xs" c="dimmed">{error.time} • v{error.version}</Text>
-                      <Group gap={4} visibleFrom="sm">
-                        <TbUserCheck size={12} color="gray" />
-                        <Text size="xs" c="dimmed">{error.users} Users Affected</Text>
-                      </Group>
-                    </Group>
-                  </Box>
-                </Group>
-              </Accordion.Control>
-              <Accordion.Panel>
-                <Stack gap="md" py="xs">
-                  <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
-                    <Box>
-                      <Text size="xs" fw={700} c="dimmed" mb={4}>MESSAGE</Text>
-                      <Text size="sm" fw={500}>{error.message}</Text>
-                    </Box>
-                    <Box>
-                      <Text size="xs" fw={700} c="dimmed" mb={4}>DEVICE METADATA</Text>
-                      <Group gap="xs">
-                        {error.device.includes('PC') ? <TbDeviceDesktop size={14} color="gray" /> : <TbDeviceMobile size={14} color="gray" />}
-                        <Text size="xs" fw={500}>{error.device}</Text>
-                      </Group>
-                    </Box>
-                  </SimpleGrid>
+              Reset Filters
+            </Button>
+          </Stack>
+        </SimpleGrid>
 
-                  <Box>
-                    <Text size="xs" fw={700} c="dimmed" mb={4}>STACK TRACE</Text>
-                    <Paper p="sm" radius="md" bg="dark.8" style={{ border: '1px solid rgba(255,255,255,0.1)' }}>
-                      <Code block color="red" bg="transparent" style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap', fontSize: '11px' }}>
-                        {error.stackTrace}
-                      </Code>
-                    </Paper>
-                  </Box>
-
-                  <Group justify="flex-end" pt="sm">
-                    <Button variant="light" size="compact-xs" color="blue">Assign Developer</Button>
-                    <Button variant="light" size="compact-xs" color="teal" leftSection={<TbCircleCheck size={14} />}>Mark as Fixed</Button>
+        {isLoading ? (
+          <Stack align="center" py="xl">
+            <Loader size="md" type="dots" />
+          </Stack>
+        ) : bugs.length === 0 ? (
+          <Stack align="center" py="xl" gap="xs">
+            <TbBug size={40} style={{ opacity: 0.25 }} />
+            <Text fw={600} size="sm">No error reports found</Text>
+            <Text size="sm" c="dimmed">Try adjusting your filters or search terms.</Text>
+          </Stack>
+        ) : (
+          <Accordion variant="separated" radius="xl">
+            {bugs.map((bug: any) => (
+              <Accordion.Item
+                key={bug.id}
+                value={bug.id}
+                style={{
+                  border: '1px solid var(--mantine-color-default-border)',
+                  background: 'var(--mantine-color-default)',
+                  marginBottom: 12,
+                }}
+              >
+                <Accordion.Control>
+                  <Group wrap="nowrap">
+                    <ThemeIcon
+                      color={STATUS_COLOR[bug.status] ?? 'gray'}
+                      variant="light"
+                      size="lg"
+                      radius="md"
+                    >
+                      <TbAlertTriangle size={20} />
+                    </ThemeIcon>
+                    <Box style={{ flex: 1 }}>
+                      <Group justify="space-between">
+                        <Text size="sm" fw={600} lineClamp={1}>{bug.description}</Text>
+                        <Badge
+                          color={STATUS_COLOR[bug.status] ?? 'gray'}
+                          variant="dot"
+                          size="sm"
+                        >
+                          {STATUS_LABEL[bug.status] ?? bug.status}
+                        </Badge>
+                      </Group>
+                      <Text size="xs" c="dimmed">
+                        {dayjs(bug.createdAt).format('D MMM YYYY, HH:mm')} · {bug.appId?.toUpperCase()} · v{bug.affectedVersion}
+                      </Text>
+                    </Box>
                   </Group>
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-          ))}
-        </Accordion>
+                </Accordion.Control>
+
+                <Accordion.Panel>
+                  <Stack gap="lg" py="xs">
+                    <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
+                      <Box>
+                        <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Device Metadata</Text>
+                        <Group gap="xs">
+                          {bug.device.toLowerCase().includes('windows') || bug.device.toLowerCase().includes('mac') || bug.device.toLowerCase().includes('pc') ? (
+                            <TbDeviceDesktop size={14} color="gray" />
+                          ) : (
+                            <TbDeviceMobile size={14} color="gray" />
+                          )}
+                          <Text size="xs" fw={500}>{bug.device} ({bug.os})</Text>
+                        </Group>
+                      </Box>
+                      <Box>
+                        <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Source</Text>
+                        <Badge variant="light" color="gray" size="sm">{bug.source}</Badge>
+                      </Box>
+                    </SimpleGrid>
+
+                    {(bug.user || bug.feedBack) && (
+                      <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
+                        {bug.user && (
+                          <Box>
+                            <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Reported By</Text>
+                            <Group gap="xs">
+                              <Avatar src={bug.user.image} radius="xl" size="sm" color="blue">
+                                {bug.user.name?.charAt(0).toUpperCase()}
+                              </Avatar>
+                              <Text size="sm">{bug.user.name}</Text>
+                            </Group>
+                          </Box>
+                        )}
+                        {bug.feedBack && (
+                          <Box>
+                            <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Developer Feedback</Text>
+                            <Text size="sm" style={{ whiteSpace: 'pre-wrap' }}>{bug.feedBack}</Text>
+                          </Box>
+                        )}
+                      </SimpleGrid>
+                    )}
+
+                    {bug.stackTrace && (
+                      <Box>
+                        <Group justify="space-between" mb={showStackTrace[bug.id] ? 8 : 0}>
+                          <Text size="xs" fw={700} c="dimmed" tt="uppercase">Stack Trace</Text>
+                          <Button variant="subtle" size="compact-xs" color="gray" onClick={() => toggleStackTrace(bug.id)}>
+                            {showStackTrace[bug.id] ? 'Hide' : 'Show'}
+                          </Button>
+                        </Group>
+                        <Collapse in={!!showStackTrace[bug.id]}>
+                          <Code
+                            block
+                            color="red"
+                            style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap', fontSize: 11, border: '1px solid var(--mantine-color-default-border)' }}
+                          >
+                            {bug.stackTrace}
+                          </Code>
+                        </Collapse>
+                      </Box>
+                    )}
+
+                    {bug.images && bug.images.length > 0 && (
+                      <Box>
+                        <Group gap="xs" mb={8}>
+                          <TbPhoto size={14} color="gray" />
+                          <Text size="xs" fw={700} c="dimmed" tt="uppercase">
+                            Attached Images ({bug.images.length})
+                          </Text>
+                        </Group>
+                        <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="xs">
+                          {bug.images.map((img: any) => (
+                            <Tooltip key={img.id} label="Click to preview" withArrow>
+                              <Paper
+                                withBorder
+                                radius="md"
+                                style={{ overflow: 'hidden', cursor: 'zoom-in' }}
+                                onClick={() => setPreviewImage(img.imageUrl)}
+                              >
+                                <Image src={img.imageUrl} alt="Error screenshot" height={100} fit="cover" />
+                              </Paper>
+                            </Tooltip>
+                          ))}
+                        </SimpleGrid>
+                      </Box>
+                    )}
+
+                    {bug.logs && bug.logs.length > 0 && (
+                      <Box>
+                        <Group justify="space-between" mb={showLogs[bug.id] ? 12 : 0}>
+                          <Group gap="xs">
+                            <TbHistory size={14} color="gray" />
+                            <Text size="xs" fw={700} c="dimmed" tt="uppercase">
+                              Activity Log ({bug.logs.length})
+                            </Text>
+                          </Group>
+                          <Button variant="subtle" size="compact-xs" color="gray" onClick={() => toggleLogs(bug.id)}>
+                            {showLogs[bug.id] ? 'Hide' : 'Show'}
+                          </Button>
+                        </Group>
+                        <Collapse in={showLogs[bug.id]}>
+                          <Timeline active={bug.logs.length - 1} bulletSize={24} lineWidth={2} mt="md">
+                            {bug.logs.map((log: any) => (
+                              <Timeline.Item
+                                key={log.id}
+                                bullet={
+                                  <Badge size="xs" circle color={STATUS_COLOR[log.status] ?? 'blue'}> </Badge>
+                                }
+                                title={
+                                  <Text size="sm" fw={600}>
+                                    {STATUS_LABEL[log.status] ?? log.status}
+                                  </Text>
+                                }
+                              >
+                                <Text size="xs" c="dimmed" mb={4}>
+                                  {dayjs(log.createdAt).format('D MMM YYYY, HH:mm')} · {log.user?.name ?? 'Unknown'}
+                                </Text>
+                                <Text size="sm">{log.description}</Text>
+                              </Timeline.Item>
+                            ))}
+                          </Timeline>
+                        </Collapse>
+                      </Box>
+                    )}
+
+                    <Group justify="flex-end" pt="sm">
+                      <Button
+                        variant="light"
+                        size="compact-sm"
+                        color="blue"
+                        onClick={() => {
+                          setSelectedBugId(bug.id)
+                          setFeedbackForm({ feedBack: bug.feedBack || '' })
+                          openFeedbackModal()
+                        }}
+                      >
+                        Developer Feedback
+                      </Button>
+                      <Button
+                        variant="light"
+                        size="compact-sm"
+                        color="teal"
+                        onClick={() => {
+                          setSelectedBugId(bug.id)
+                          setUpdateForm({ status: bug.status, description: '' })
+                          openUpdateModal()
+                        }}
+                      >
+                        Update Status
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
+            ))}
+          </Accordion>
+        )}
+
+        {totalPages > 1 && (
+          <Group justify="center" mt="xl">
+            <Pagination total={totalPages} value={page} onChange={setPage} size="sm" radius="xl" />
+          </Group>
+        )}
       </Paper>
     </Stack>
   )

src/frontend/routes/apps.$appId.index.tsx

@@ -1,125 +1,267 @@
+import { VillageActivityLineChart, VillageComparisonBarChart } from '@/frontend/components/DashboardCharts'
+import { ErrorDataTable, type ErrorDataTableHandle } from '@/frontend/components/ErrorDataTable'
+import { SummaryCard } from '@/frontend/components/SummaryCard'
+import { useSession } from '@/frontend/hooks/useAuth'
 import {
+  ActionIcon,
   Badge,
   Button,
-  Card,
   Group,
+  Modal,
   SimpleGrid,
   Stack,
+  Switch,
   Text,
+  Textarea,
+  TextInput,
   Title,
-  Paper,
-  Box,
-  ThemeIcon,
-  Select,
-  ActionIcon,
-  Container,
-  Divider,
+  Tooltip,
 } from '@mantine/core'
-import { createFileRoute, Link, useParams } from '@tanstack/react-router'
-import { 
-  TbUsers, 
-  TbActivity, 
-  TbRefresh, 
-  TbAlertTriangle, 
-  TbCalendar, 
-  TbFilter, 
-  TbChevronRight, 
-  TbArrowUpRight,
+import { useDisclosure } from '@mantine/hooks'
+import { notifications } from '@mantine/notifications'
+import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
+import { useEffect, useRef, useState } from 'react'
+import {
+  TbActivity,
+  TbAlertTriangle,
   TbBuildingCommunity,
-  TbVersions
+  TbRefresh,
+  TbVersions,
 } from 'react-icons/tb'
-import { SummaryCard } from '@/frontend/components/SummaryCard'
-import { VillageActivityLineChart, VillageComparisonBarChart } from '@/frontend/components/DashboardCharts'
-import { ErrorDataTable } from '@/frontend/components/ErrorDataTable'
+import useSWR from 'swr'
+import { API_URLS } from '../config/api'
 
 export const Route = createFileRoute('/apps/$appId/')({
   component: AppOverviewPage,
 })
 
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
+
 function AppOverviewPage() {
   const { appId } = useParams({ from: '/apps/$appId/' })
+  const navigate = useNavigate()
   const isDesaPlus = appId === 'desa-plus'
+  const [versionModalOpened, { open: openVersionModal, close: closeVersionModal }] = useDisclosure(false)
+  const { data: session } = useSession()
+  const isDeveloper = session?.user?.role === 'DEVELOPER'
+  const errorTableRef = useRef<ErrorDataTableHandle>(null)
+
+  const [latestVersion, setLatestVersion] = useState('')
+  const [minVersion, setMinVersion] = useState('')
+  const [messageUpdate, setMessageUpdate] = useState('')
+  const [maintenance, setMaintenance] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+
+  const [dailyRange, setDailyRange] = useState<7 | 30 | 90>(7)
+  const [comparisonRange, setComparisonRange] = useState<7 | 30 | 90>(7)
+
+  const { data: gridRes, isLoading: gridLoading, mutate: mutateGrid } = useSWR(isDesaPlus ? API_URLS.getGridOverview() : null, fetcher)
+  const { data: dailyRes, isLoading: dailyLoading, mutate: mutateDaily } = useSWR(isDesaPlus ? API_URLS.getDailyActivity(dailyRange) : null, fetcher)
+  const { data: comparisonRes, isLoading: comparisonLoading, mutate: mutateComparison } = useSWR(isDesaPlus ? API_URLS.getComparisonActivity(comparisonRange) : null, fetcher)
+
+  const { data: appData, isLoading: appLoading } = useSWR(`/api/apps/${appId}`, fetcher)
+
+  const grid = gridRes?.data
+  const dailyData = dailyRes?.data || []
+  const comparisonData = comparisonRes?.data || []
+
+  // Ref so the modal-sync effect always reads current grid without re-running on every background refetch
+  const gridRef = useRef(grid)
+  gridRef.current = grid
+
+  useEffect(() => {
+    if (versionModalOpened && gridRef.current?.version) {
+      const v = gridRef.current.version
+      setLatestVersion(v.mobile_latest_version || '')
+      setMinVersion(v.mobile_minimum_version || '')
+      setMessageUpdate(v.mobile_message_update || '')
+      setMaintenance(v.mobile_maintenance === 'true')
+    }
+  }, [versionModalOpened])
+
+  const handleRefresh = () => {
+    mutateGrid()
+    mutateDaily()
+    mutateComparison()
+    errorTableRef.current?.refresh()
+  }
+
+  const handleSaveVersion = async () => {
+    setIsSaving(true)
+    try {
+      const response = await fetch(API_URLS.postVersionUpdate(), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          mobile_latest_version: latestVersion,
+          mobile_minimum_version: minVersion,
+          mobile_maintenance: maintenance,
+          mobile_message_update: messageUpdate,
+        }),
+      })
+
+      if (response.ok) {
+        await fetch(API_URLS.createLog(), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: 'UPDATE', message: `Updated version info: latest=${latestVersion}, min=${minVersion}, maintenance=${maintenance}` }),
+        }).catch(console.error)
+
+        notifications.show({ title: 'Updated', message: 'Application version information has been saved.', color: 'teal' })
+        mutateGrid()
+        closeVersionModal()
+      } else {
+        notifications.show({ title: 'Failed', message: 'Could not update version info. Please try again.', color: 'red' })
+      }
+    } catch {
+      notifications.show({ title: 'Network Error', message: 'Could not connect to the server.', color: 'red' })
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const maintenanceOn = grid?.version?.mobile_maintenance === 'true'
 
   return (
-    <Stack gap="xl">
-      {/* 🔝 HEADER SECTION */}
-      <Paper withBorder p="lg" radius="2xl" className="glass">
-        <Group justify="space-between">
-          <Stack gap={0}>
-            <Title order={2} className="gradient-text" style={{ fontSize: '1.8rem' }}>Overview</Title>
-            <Group gap="xs" mt={4}>
-              <Badge variant="light" size="lg" radius="sm" color="brand-blue" leftSection={<TbBuildingCommunity size={14} />}>
-                APP: {isDesaPlus ? 'DESA+' : appId.toUpperCase()}
-              </Badge>
-              <Text size="xs" c="dimmed" fw={600}>LAST UPDATED: JUST NOW</Text>
-            </Group>
+    <>
+      <Modal
+        opened={versionModalOpened}
+        onClose={closeVersionModal}
+        title={<Text fw={700} size="lg">Update Version Info</Text>}
+        radius="xl"
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Active Version"
+            placeholder="e.g. 2.0.5"
+            value={latestVersion}
+            onChange={(e) => setLatestVersion(e.currentTarget.value)}
+          />
+          <TextInput
+            label="Minimum Version"
+            placeholder="e.g. 2.0.0"
+            value={minVersion}
+            onChange={(e) => setMinVersion(e.currentTarget.value)}
+          />
+          <Textarea
+            label="Update Message"
+            placeholder="Enter release notes or update message..."
+            value={messageUpdate}
+            onChange={(e) => setMessageUpdate(e.currentTarget.value)}
+            minRows={3}
+            autosize
+          />
+          <Switch
+            label="Maintenance Mode"
+            description="Enable to put the app in maintenance mode for users."
+            checked={maintenance}
+            onChange={(e) => setMaintenance(e.currentTarget.checked)}
+          />
+          <Button
+            fullWidth
+            mt="md"
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+            onClick={handleSaveVersion}
+            loading={isSaving}
+          >
+            Save Changes
+          </Button>
+        </Stack>
+      </Modal>
+
+      <Stack gap="xl">
+        <Group justify="space-between" align="flex-start">
+          <Stack gap={4}>
+            <Title order={3}>Overview</Title>
+            <Text size="sm" c="dimmed">
+              Real-time metrics and activity for {isDesaPlus ? 'Desa+' : appId}.
+            </Text>
           </Stack>
-
-          <Group gap="md">
-            <Select
-                placeholder="Date Range"
-                data={['Today', '7 Days', '30 Days']}
-                defaultValue="Today"
-                leftSection={<TbCalendar size={16} />}
-                radius="md"
-                w={140}
-            />
-            <ActionIcon variant="light" color="brand-blue" size="lg" radius="md">
-                <TbRefresh size={20} />
-            </ActionIcon>
-            <Button 
-                variant="gradient" 
-                gradient={{ from: '#2563EB', to: '#7C3AED' }} 
-                radius="md"
-                leftSection={<TbFilter size={18} />}
+          <Tooltip label="Refresh data" withArrow>
+            <ActionIcon
+              variant="light"
+              color="brand-blue"
+              size="lg"
+              radius="md"
+              onClick={handleRefresh}
+              loading={gridLoading || dailyLoading || comparisonLoading}
             >
-                Add Filter
-            </Button>
-          </Group>
+              <TbRefresh size={18} />
+            </ActionIcon>
+          </Tooltip>
         </Group>
-      </Paper>
 
-      {/* 📊 1. SUMMARY CARDS */}
-      <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
-        <SummaryCard 
-          title="Active Version"
-          value="v1.2.0"
-          icon={TbVersions}
-          color="brand-blue"
-          progress={{ value: 92, label: 'User Adoption' }}
-        />
-        <SummaryCard 
-          title="Total Activity Today"
-          value="3,842"
-          icon={TbActivity}
-          color="teal"
-          trend={{ value: '14.2%', positive: true }}
-        />
-        <SummaryCard 
-          title="Total Villages Active"
-          value="138"
-          icon={TbBuildingCommunity}
-          color="indigo"
-          progress={{ value: 98, label: 'Integration Health' }}
-        />
-        <SummaryCard 
-          title="Errors Today"
-          value="12"
-          icon={TbAlertTriangle}
-          color="red"
-          isError={true}
-          trend={{ value: '4.8%', positive: false }}
-        />
-      </SimpleGrid>
+        <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
+          <SummaryCard
+            title="Active Version"
+            value={gridLoading ? '...' : (grid?.version?.mobile_latest_version || 'N/A')}
+            icon={TbVersions}
+            color="brand-blue"
+            onClick={isDeveloper ? openVersionModal : undefined}
+          >
+            <Group justify="space-between" mt="md">
+              <Stack gap={0}>
+                <Text size="xs" c="dimmed">Min. Version</Text>
+                <Text size="sm" fw={600}>{grid?.version?.mobile_minimum_version || '—'}</Text>
+              </Stack>
+              <Stack gap={0} align="flex-end">
+                <Text size="xs" c="dimmed">Maintenance</Text>
+                <Badge size="sm" color={maintenanceOn ? 'orange' : 'teal'} variant="light">
+                  {maintenanceOn ? 'On' : 'Off'}
+                </Badge>
+              </Stack>
+            </Group>
+          </SummaryCard>
 
-      {/* 📈 📊 2 & 3. CHARTS GRID */}
-      <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg">
-        <VillageActivityLineChart />
-        <VillageComparisonBarChart />
-      </SimpleGrid>
+          <SummaryCard
+            title="Total Activity Today"
+            value={gridLoading ? '...' : (grid?.activity?.today?.toLocaleString() ?? '0')}
+            icon={TbActivity}
+            color="teal"
+            trend={grid?.activity?.increase != null && Number(grid.activity.increase) !== 0
+              ? { value: `${grid.activity.increase}%`, positive: Number(grid.activity.increase) > 0 }
+              : undefined}
+          />
 
-      {/* 🐞 4. LATEST ERROR REPORTS */}
-      <ErrorDataTable />
-    </Stack>
+          <SummaryCard
+            title="Active Villages"
+            value={gridLoading ? '...' : (grid?.village?.active ?? '0')}
+            icon={TbBuildingCommunity}
+            color="indigo"
+            onClick={() => navigate({ to: `/apps/${appId}/villages` })}
+          >
+            <Group justify="space-between" mt="md">
+              <Text size="xs" c="dimmed">Inactive</Text>
+              <Badge size="sm" color="red" variant="light">{grid?.village?.inactive ?? 0}</Badge>
+            </Group>
+          </SummaryCard>
+
+          <SummaryCard
+            title="Open Errors"
+            value={appLoading ? '...' : (appData?.errors ?? 0)}
+            icon={TbAlertTriangle}
+            color="red"
+            isError
+            onClick={() => navigate({ to: `/apps/${appId}/errors` })}
+          />
+        </SimpleGrid>
+
+        <Group justify="space-between" align="flex-end">
+          <Stack gap={2}>
+            <Title order={4}>Analytics</Title>
+            <Text size="sm" c="dimmed">Activity trends and village comparisons.</Text>
+          </Stack>
+        </Group>
+
+        <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg">
+          <VillageActivityLineChart data={dailyData} isLoading={dailyLoading} range={dailyRange} onRangeChange={setDailyRange} />
+          <VillageComparisonBarChart data={comparisonData} isLoading={comparisonLoading} range={comparisonRange} onRangeChange={setComparisonRange} />
+        </SimpleGrid>
+
+        <ErrorDataTable ref={errorTableRef} appId={appId} />
+      </Stack>
+    </>
   )
 }

src/frontend/routes/apps.$appId.logs.tsx

@@ -1,123 +1,323 @@
+import { useEffect, useState } from 'react'
+import useSWR from 'swr'
 import {
-  Badge,
-  Container,
-  Group,
-  Stack,
-  Text,
-  Title,
-  Paper,
-  Table,
-  TextInput,
-  Select,
   ActionIcon,
-  Tooltip,
   Avatar,
+  Badge,
   Code,
-  Button
+  Group,
+  Loader,
+  Pagination,
+  Paper,
+  ScrollArea,
+  Select,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
 } from '@mantine/core'
+import { useDebouncedValue, useMediaQuery } from '@mantine/hooks'
+import { DatePickerInput } from '@mantine/dates'
 import { createFileRoute, useParams } from '@tanstack/react-router'
-import { TbSearch, TbFilter, TbDownload, TbCalendar } from 'react-icons/tb'
+import {
+  TbAlertCircle,
+  TbCalendar,
+  TbHistory,
+  TbHome2,
+  TbSearch,
+  TbX,
+} from 'react-icons/tb'
+import { API_URLS } from '../config/api'
 
 export const Route = createFileRoute('/apps/$appId/logs')({
   component: AppLogsPage,
 })
 
-const mockLogs = [
-  { id: 1, type: 'DOCUMENT', village: 'Sukatani', activity: 'GENERATE_SURAT_DOMISILI', operator: 'Budi Santoso', time: '2 mins ago', status: 'SUCCESS' },
-  { id: 2, type: 'FINANCE', village: 'Sukamaju', activity: 'UPLOAD_LAPORAN_REALISASI_Q1', operator: 'Siti Aminah', time: '15 mins ago', status: 'SUCCESS' },
-  { id: 3, type: 'SYNC', village: 'Cikini', activity: 'SYNC_DATA_PENDUDUK_SIAK', operator: 'System', time: '1 hour ago', status: 'WARNING' },
-  { id: 4, type: 'SECURITY', village: 'Bojong Gede', activity: 'LOGIN_ADMIN_DESA', operator: 'Rahmat Hidayat', time: '2 hours ago', status: 'SUCCESS' },
-  { id: 5, type: 'DOCUMENT', village: 'Tapos', activity: 'VERIFIKASI_SURAT_KEMATIAN', operator: 'Agus Setiawan', time: '4 hours ago', status: 'SUCCESS' },
+interface LogEntry {
+  id: string
+  createdAt: string
+  action: string
+  desc: string
+  username: string
+  village: string
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
+
+const ACTION_COLOR: Record<string, string> = {
+  LOGIN: 'teal',
+  LOGOUT: 'gray',
+  CREATE: 'blue',
+  UPDATE: 'yellow',
+  DELETE: 'red',
+}
+
+const ACTION_OPTIONS = [
+  { value: 'LOGIN', label: 'Login' },
+  { value: 'LOGOUT', label: 'Logout' },
+  { value: 'CREATE', label: 'Create' },
+  { value: 'UPDATE', label: 'Update' },
+  { value: 'DELETE', label: 'Delete' },
 ]
 
-function AppLogsPage() {
-  const { appId } = useParams({ from: '/apps/$appId/logs' })
-  const isDesaPlus = appId === 'desa-plus'
+function getActionColor(action: string) {
+  return ACTION_COLOR[action.toUpperCase()] ?? 'brand-blue'
+}
 
+function LogTimestamp({ value }: { value: string }) {
+  if (value.endsWith('lalu')) {
+    return <Text size="xs" fw={600}>{value}</Text>
+  }
+  const [time, ...dateParts] = value.split(' ')
   return (
-    <Stack gap="xl">
-      <Group justify="space-between" align="center">
-        <Stack gap={0}>
-          <Title order={3}>{isDesaPlus ? 'Desa+ Service Logs' : 'Application Activity Logs'}</Title>
-          <Text size="sm" c="dimmed">Detailed audit trail of all actions performed within the application instances.</Text>
-        </Stack>
-        <Group gap="xs">
-          <Button variant="light" leftSection={<TbDownload size={16} />} radius="md">Export XLS</Button>
-        </Group>
-      </Group>
-
-      <Paper withBorder radius="2xl" className="glass" p="md">
-        <Group mb="md" grow>
-          <TextInput
-            placeholder="Search activity, village, or operator..."
-            leftSection={<TbSearch size={16} />}
-            radius="md"
-          />
-          <Select
-            placeholder="All Service Types"
-            data={['DOCUMENT', 'FINANCE', 'SYNC', 'SECURITY']}
-            leftSection={<TbFilter size={16} />}
-            radius="md"
-            clearable
-          />
-        </Group>
-
-        <Table verticalSpacing="sm" highlightOnHover>
-          <Table.Thead>
-            <Table.Tr>
-              <Table.Th>Type</Table.Th>
-              <Table.Th>Village / Instance</Table.Th>
-              <Table.Th>Activity Name</Table.Th>
-              <Table.Th>Operator</Table.Th>
-              <Table.Th>Timestamp</Table.Th>
-              <Table.Th>Status</Table.Th>
-            </Table.Tr>
-          </Table.Thead>
-          <Table.Tbody>
-            {mockLogs.map((log) => (
-              <Table.Tr key={log.id}>
-                <Table.Td>
-                  <Badge 
-                    variant="light" 
-                    color={
-                      log.type === 'DOCUMENT' ? 'blue' : 
-                      log.type === 'FINANCE' ? 'teal' : 
-                      log.type === 'SYNC' ? 'orange' : 'gray'
-                    }
-                    size="xs"
-                  >
-                    {log.type}
-                  </Badge>
-                </Table.Td>
-                <Table.Td>
-                  <Text size="sm" fw={600}>{log.village}</Text>
-                </Table.Td>
-                <Table.Td>
-                  <Code color="brand-blue" bg="transparent" fw={800} style={{ fontSize: '11px' }}>{log.activity}</Code>
-                </Table.Td>
-                <Table.Td>
-                  <Group gap="xs">
-                    <Avatar size="xs" radius="xl" color="brand-blue">{log.operator[0]}</Avatar>
-                    <Text size="xs" fw={500}>{log.operator}</Text>
-                  </Group>
-                </Table.Td>
-                <Table.Td>
-                  <Text size="xs" c="dimmed">{log.time}</Text>
-                </Table.Td>
-                <Table.Td>
-                  <Badge 
-                    size="xs" 
-                    variant="dot" 
-                    color={log.status === 'SUCCESS' ? 'teal' : 'orange'}
-                  >
-                    {log.status}
-                  </Badge>
-                </Table.Td>
-              </Table.Tr>
-            ))}
-          </Table.Tbody>
-        </Table>
-      </Paper>
+    <Stack gap={0}>
+      <Text size="xs" fw={600}>{dateParts.join(' ')}</Text>
+      <Text size="xs" c="dimmed">{time}</Text>
+    </Stack>
+  )
+}
+
+function AppLogsPage() {
+  const { appId } = useParams({ from: '/apps/$appId/logs' })
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState('')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 400)
+  const [filterAction, setFilterAction] = useState<string | null>(null)
+  const [filterVillageSearch, setFilterVillageSearch] = useState('')
+  const [filterVillageId, setFilterVillageId] = useState<string | null>(null)
+  const [dateRange, setDateRange] = useState<[string | null, string | null]>([null, null])
+
+  const isDesaPlus = appId === 'desa-plus'
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  const [dateFrom, dateTo] = dateRange
+  const apiUrl = isDesaPlus
+    ? API_URLS.getLogsAllVillages(
+        page,
+        searchQuery,
+        filterAction ?? undefined,
+        filterVillageId ?? undefined,
+        dateFrom ?? undefined,
+        dateTo ?? undefined,
+      )
+    : null
+  const { data: response, error, isLoading } = useSWR(apiUrl, fetcher)
+  const logs: LogEntry[] = response?.data?.log || []
+
+  const { data: filterVillagesResp } = useSWR(
+    isDesaPlus && filterVillageSearch.length >= 1 ? API_URLS.getVillages(1, filterVillageSearch) : null,
+    fetcher
+  )
+  const filterVillagesOptions = (filterVillagesResp?.data || []).map((v: any) => ({ value: v.id, label: v.name }))
+
+  useEffect(() => {
+    if (debouncedSearch.length >= 3 || debouncedSearch.length === 0) {
+      setSearchQuery(debouncedSearch)
+      setPage(1)
+    }
+  }, [debouncedSearch])
+
+  useEffect(() => {
+    setPage(1)
+  }, [filterAction, filterVillageId, dateFrom, dateTo])
+
+  const handleClearSearch = () => {
+    setSearch('')
+    setSearchQuery('')
+    setPage(1)
+  }
+
+  if (!isDesaPlus) {
+    return (
+      <Paper withBorder radius="2xl" className="glass" p="xl">
+        <Stack align="center" gap="xs" py="xl">
+          <TbHistory size={36} style={{ opacity: 0.25 }} />
+          <Text fw={600} size="sm">Activity Logs — Coming Soon</Text>
+          <Text size="sm" c="dimmed">This feature is currently available for Desa+. Other apps coming soon.</Text>
+        </Stack>
+      </Paper>
+    )
+  }
+
+  return (
+    <Stack gap="xl" py="md">
+      <Group justify="space-between" align="flex-start">
+        <Stack gap={4}>
+          <Title order={3}>Activity Logs</Title>
+          <Text size="sm" c="dimmed">
+            {isLoading
+              ? 'Loading logs...'
+              : `${(response?.data?.total ?? 0).toLocaleString()} events across all villages`}
+          </Text>
+        </Stack>
+      </Group>
+
+      <Paper withBorder p="md" className="glass">
+        <Stack gap="sm">
+          <TextInput
+            placeholder="Search by user name or village..."
+            leftSection={<TbSearch size={16} />}
+            size="sm"
+            rightSection={
+              search ? (
+                <Tooltip label="Clear search" withArrow>
+                  <ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="sm">
+                    <TbX size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              ) : null
+            }
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            radius="md"
+          />
+          <Group gap="sm" wrap="nowrap">
+            <Select
+              size="sm"
+              placeholder="All actions"
+              data={ACTION_OPTIONS}
+              value={filterAction}
+              onChange={setFilterAction}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
+            <Select
+              size="sm"
+              placeholder="Search village..."
+              searchable
+              onSearchChange={setFilterVillageSearch}
+              data={filterVillagesOptions}
+              value={filterVillageId}
+              onChange={setFilterVillageId}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
+            <DatePickerInput
+              type="range"
+              size="sm"
+              placeholder="Date range"
+              leftSection={<TbCalendar size={16} />}
+              value={dateRange}
+              onChange={setDateRange}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+              maxDate={new Date()}
+            />
+          </Group>
+        </Stack>
+      </Paper>
+
+      {isLoading ? (
+        <Group justify="center" py="xl">
+          <Loader type="dots" />
+        </Group>
+      ) : error ? (
+        <Paper withBorder radius="2xl" className="glass" p="md">
+          <Stack align="center" gap="xs" py="xl">
+            <TbAlertCircle size={32} style={{ opacity: 0.4, color: 'var(--mantine-color-red-6)' }} />
+            <Text size="sm" c="dimmed">Failed to load logs from the API.</Text>
+          </Stack>
+        </Paper>
+      ) : logs.length === 0 ? (
+        <Paper withBorder radius="2xl" className="glass" p="md">
+          <Stack align="center" gap="xs" py="xl">
+            <TbHistory size={32} style={{ opacity: 0.25 }} />
+            <Text size="sm" c="dimmed">
+              {searchQuery || filterAction || filterVillageId || dateFrom ? 'No activity found for this filter.' : 'No activity logs yet.'}
+            </Text>
+          </Stack>
+        </Paper>
+      ) : (
+        <Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
+          <ScrollArea h={isMobile ? undefined : 'auto'} offsetScrollbars>
+            <Table
+              className="data-table"
+              verticalSpacing="sm"
+              horizontalSpacing="lg"
+              highlightOnHover
+              withColumnBorders={false}
+              style={{
+                tableLayout: isMobile ? 'auto' : 'fixed',
+                width: '100%',
+                minWidth: isMobile ? 900 : 'unset',
+              }}
+            >
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th style={{ width: isMobile ? undefined : '18%' }}>Timestamp</Table.Th>
+                  <Table.Th style={{ width: isMobile ? undefined : '22%' }}>User & Village</Table.Th>
+                  <Table.Th style={{ width: isMobile ? undefined : '14%' }}>Action</Table.Th>
+                  <Table.Th>Description</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {logs.map((log) => (
+                  <Table.Tr key={log.id}>
+                    <Table.Td>
+                      <LogTimestamp value={log.createdAt} />
+                    </Table.Td>
+                    <Table.Td>
+                      <Stack gap={4} style={{ overflow: 'hidden' }}>
+                        <Group gap={6} wrap="nowrap">
+                          <Avatar size="xs" radius="xl" color="brand-blue" variant="light">
+                            {log.username.charAt(0)}
+                          </Avatar>
+                          <Text size="xs" fw={600} truncate="end">{log.username}</Text>
+                        </Group>
+                        <Group gap={6} wrap="nowrap">
+                          <TbHome2 size={12} color="gray" />
+                          <Text size="xs" c="dimmed" truncate="end">{log.village}</Text>
+                        </Group>
+                      </Stack>
+                    </Table.Td>
+                    <Table.Td>
+                      <Badge
+                        variant="light"
+                        color={getActionColor(log.action)}
+                        size="sm"
+                        tt="capitalize"
+                      >
+                        {log.action}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>
+                      <Code
+                        color="brand-blue"
+                        bg="rgba(37, 99, 235, 0.05)"
+                        fw={600}
+                        style={{ fontSize: 11, display: 'block', whiteSpace: 'normal' }}
+                      >
+                        {log.desc}
+                      </Code>
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </ScrollArea>
+        </Paper>
+      )}
+
+      {!isLoading && !error && response?.data?.totalPage > 1 && (
+        <Group justify="center">
+          <Pagination
+            value={page}
+            onChange={setPage}
+            total={response.data.totalPage}
+            size="sm"
+            radius="md"
+            withEdges={false}
+            siblings={1}
+            boundaries={1}
+          />
+        </Group>
+      )}
     </Stack>
   )
 }

src/frontend/routes/apps.$appId.manage.tsx

@@ -1,278 +0,0 @@
-import { useState } from 'react'
-import {
-  Badge,
-  Container,
-  Group,
-  Stack,
-  Text,
-  Title,
-  Paper,
-  Table,
-  Button,
-  ActionIcon,
-  TextInput,
-  Select,
-  Tooltip,
-  SimpleGrid,
-  Modal,
-  Avatar,
-  Box,
-  NumberInput,
-} from '@mantine/core'
-import { useDisclosure } from '@mantine/hooks'
-import { createFileRoute, useParams } from '@tanstack/react-router'
-import { 
-  TbPlus, 
-  TbSearch, 
-  TbPencil, 
-  TbTrash, 
-  TbUserPlus, 
-  TbCircleCheck, 
-  TbRefresh,
-  TbUser,
-  TbBuildingCommunity,
-} from 'react-icons/tb'
-import { StatsCard } from '@/frontend/components/StatsCard'
-
-export const Route = createFileRoute('/apps/$appId/manage')({
-  component: AppManagePage,
-})
-
-const mockDevelopers = [
-  { value: 'john-doe', label: 'John Doe', avatar: null },
-  { value: 'amel', label: 'Amel', avatar: null },
-  { value: 'jane-smith', label: 'Jane Smith', avatar: null },
-  { value: 'rahmat', label: 'Rahmat Hidayat', avatar: null },
-]
-
-function AppManagePage() {
-  const { appId } = useParams({ from: '/apps/$appId' })
-  const [initModalOpened, { open: openInit, close: closeInit }] = useDisclosure(false)
-  const [assignModalOpened, { open: openAssign, close: closeAssign }] = useDisclosure(false)
-  const [selectedVillage, setSelectedVillage] = useState<any>(null)
-
-  const isDesaPlus = appId === 'desa-plus'
-
-  const mockVillages = [
-    { id: 1, name: 'Sukatani', kecamatan: 'Tapos', population: 4500, status: 'fully integrated', developer: 'John Doe', lastUpdate: '2 mins ago' },
-    { id: 2, name: 'Sukamaju', kecamatan: 'Cilodong', population: 3800, status: 'sync active', developer: 'Amel', lastUpdate: '15 mins ago' },
-    { id: 3, name: 'Cikini', kecamatan: 'Menteng', population: 2100, status: 'sync pending', developer: 'Jane Smith', lastUpdate: '-' },
-    { id: 4, name: 'Bojong Gede', kecamatan: 'Bojong Gede', population: 6700, status: 'fully integrated', developer: 'Rahmat', lastUpdate: '1 hour ago' },
-  ]
-
-  if (!isDesaPlus) {
-    return (
-      <Container size="xl" py="xl">
-        <Paper p="xl" radius="xl" className="glass" style={{ textAlign: 'center' }}>
-          <TbBuildingCommunity size={48} color="gray" opacity={0.5} />
-          <Title order={3} mt="md">General Management</Title>
-          <Text c="dimmed">This feature is currently customized for Desa+. Other apps coming soon.</Text>
-        </Paper>
-      </Container>
-    )
-  }
-
-  return (
-    <Stack gap="xl">
-      {/* Metrics Row */}
-      <SimpleGrid cols={{ base: 1, sm: 4 }} spacing="lg">
-        <StatsCard
-          title="Total Integrations"
-          value={140}
-          icon={TbBuildingCommunity}
-          color="brand-blue"
-          trend={{ value: '12%', positive: true }}
-        />
-        <StatsCard
-          title="Daily Sync Rate"
-          value="94.2%"
-          icon={TbRefresh}
-          color="teal"
-          trend={{ value: '2.5%', positive: true }}
-        />
-        <StatsCard
-          title="Avg. Sync Delay"
-          value="45s"
-          icon={TbRefresh}
-          color="orange"
-        />
-        <StatsCard
-          title="Pending Documents"
-          value={124}
-          icon={TbUser}
-          color="red"
-        />
-      </SimpleGrid>
-
-      <Group justify="space-between" align="flex-end">
-        <Stack gap={0}>
-          <Title order={3}>Village Deployment Center</Title>
-          <Text size="sm" c="dimmed">Monitor and configure **Desa+** village instances across all districts.</Text>
-        </Stack>
-        <Button
-          variant="gradient"
-          gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
-          leftSection={<TbPlus size={18} />}
-          radius="md"
-          onClick={openInit}
-        >
-          Initialize New Village
-        </Button>
-      </Group>
-
-      <Paper withBorder radius="2xl" className="glass" p="md">
-        <Group mb="md">
-          <TextInput
-            placeholder="Search village or district..."
-            leftSection={<TbSearch size={16} />}
-            style={{ flex: 1 }}
-            radius="md"
-          />
-        </Group>
-
-        <Table className="data-table" verticalSpacing="md" highlightOnHover>
-          <Table.Thead>
-            <Table.Tr>
-              <Table.Th>Village Profile</Table.Th>
-              <Table.Th>District</Table.Th>
-              <Table.Th>Integration Status</Table.Th>
-              <Table.Th>Lead Developer</Table.Th>
-              <Table.Th>Last Sync</Table.Th>
-              <Table.Th>Actions</Table.Th>
-            </Table.Tr>
-          </Table.Thead>
-          <Table.Tbody>
-            {mockVillages.map((village) => (
-              <Table.Tr key={village.id}>
-                <Table.Td>
-                  <Stack gap={0}>
-                    <Text fw={700} size="sm">{village.name}</Text>
-                    <Text size="xs" c="dimmed">{village.population.toLocaleString()} Residents</Text>
-                  </Stack>
-                </Table.Td>
-                <Table.Td>
-                  <Text size="sm" fw={500}>{village.kecamatan}</Text>
-                </Table.Td>
-                <Table.Td>
-                  <Badge
-                    color={
-                      village.status === 'fully integrated' ? 'teal' : 
-                      village.status === 'sync active' ? 'brand-blue' : 'orange'
-                    }
-                    variant={village.status === 'sync pending' ? 'outline' : 'light'}
-                    leftSection={village.status !== 'sync pending' && <TbCircleCheck size={12} />}
-                    radius="sm"
-                    style={{ textTransform: 'uppercase', fontVariant: 'small-caps' }}
-                  >
-                    {village.status}
-                  </Badge>
-                </Table.Td>
-                <Table.Td>
-                  <Group gap="xs">
-                    <Avatar size="xs" radius="xl" color="brand-blue" src={null} />
-                    <Text size="sm">{village.developer}</Text>
-                    <ActionIcon 
-                      variant="subtle" 
-                      size="xs" 
-                      onClick={() => { setSelectedVillage(village); openAssign(); }}
-                    >
-                      <TbUserPlus size={12} />
-                    </ActionIcon>
-                  </Group>
-                </Table.Td>
-                <Table.Td>
-                  <Text size="xs" fw={500} c={village.lastUpdate === '-' ? 'dimmed' : 'teal'}>
-                    {village.lastUpdate}
-                  </Text>
-                </Table.Td>
-                <Table.Td>
-                  <Group gap="xs">
-                    {village.status === 'sync pending' && (
-                      <Button variant="light" size="compact-xs" color="blue" onClick={openInit}>
-                        START SYNC
-                      </Button>
-                    )}
-                    <Tooltip label="Village Settings">
-                      <ActionIcon variant="light" size="sm" color="gray">
-                        <TbPencil size={14} />
-                      </ActionIcon>
-                    </Tooltip>
-                    <Tooltip label="Unlink Village">
-                      <ActionIcon variant="light" size="sm" color="red">
-                        <TbTrash size={14} />
-                      </ActionIcon>
-                    </Tooltip>
-                  </Group>
-                </Table.Td>
-              </Table.Tr>
-            ))}
-          </Table.Tbody>
-        </Table>
-      </Paper>
-
-      {/* MODALS */}
-      <Modal
-        opened={initModalOpened}
-        onClose={closeInit}
-        title={<Title order={4}>Desa+ Instance Initialization</Title>}
-        radius="xl"
-        centered
-        padding="xl"
-      >
-        <Stack gap="md">
-          <SimpleGrid cols={2}>
-            <TextInput label="Village Name" placeholder="e.g. Sukatani" radius="md" required />
-            <TextInput label="Kecamatan" placeholder="e.g. Tapos" radius="md" required />
-          </SimpleGrid>
-          <Group grow>
-            <Select 
-              label="Population Data Source" 
-              placeholder="Select source..."
-              data={['SIAK Terpusat', 'BPS Proyeksi', 'Manual Upload']}
-              radius="md"
-            />
-            <NumberInput label="Target Residents" placeholder="1000" radius="md" />
-          </Group>
-          <Box>
-            <Text size="xs" fw={700} c="dimmed" mb="xs">INITIAL SYNC MODULES</Text>
-            <Group gap="xs">
-              <Badge variant="outline" color="blue">PENDUDUK</Badge>
-              <Badge variant="outline" color="teal">KEUANGAN</Badge>
-              <Badge variant="outline" color="brand-purple">PELAYANAN</Badge>
-              <Badge variant="outline" color="orange">APBDes</Badge>
-            </Group>
-          </Box>
-          <Group justify="flex-end" mt="md">
-            <Button variant="subtle" color="gray" onClick={closeInit}>Cancel</Button>
-            <Button variant="gradient" gradient={{ from: '#2563EB', to: '#7C3AED' }} radius="md">Deploy Instance</Button>
-          </Group>
-        </Stack>
-      </Modal>
-
-      <Modal
-        opened={assignModalOpened}
-        onClose={closeAssign}
-        title={<Title order={4}>Assign Lead Developer</Title>}
-        radius="xl"
-        centered
-        padding="xl"
-      >
-        <Stack gap="md">
-          <Text size="sm">Assign a dedicated reviewer for <b>{selectedVillage?.name}</b> instance stability.</Text>
-          <Select 
-            label="Technical Lead" 
-            placeholder="Search developer..."
-            data={mockDevelopers}
-            leftSection={<TbUser size={16} />}
-            radius="md"
-            searchable
-          />
-          <Group justify="flex-end" mt="md">
-            <Button variant="subtle" color="gray" onClick={closeAssign}>Cancel</Button>
-            <Button variant="gradient" gradient={{ from: '#2563EB', to: '#7C3AED' }} radius="md">Set Lead</Button>
-          </Group>
-        </Stack>
-      </Modal>
-    </Stack>
-  )
-}

src/frontend/routes/apps.$appId.products.tsx

@@ -53,7 +53,7 @@ function ProductsPage() {
         {mockProducts.map((product) => (
           <Card key={product.id} withBorder radius="2xl" p="md" className="glass h-full">
             <Card.Section>
-              <Box h={160} style={{ background: 'rgba(255,255,255,0.03)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <Box h={160} style={{ background: 'var(--mantine-color-default-hover)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                 <ThemeIcon variant="light" size={60} radius="xl" color="brand-blue">
                   <TbArchive size={34} />
                 </ThemeIcon>
@@ -90,7 +90,7 @@ function ProductsPage() {
                 />
               </Box>
 
-              <Group justify="flex-end" mt="md" pt="sm" style={{ borderTop: '1px solid rgba(255,255,255,0.05)' }}>
+              <Group justify="flex-end" mt="md" pt="sm" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
                 <Tooltip label="Edit Product">
                   <ActionIcon variant="light" size="sm" color="blue">
                     <TbPencil size={14} />

src/frontend/routes/apps.$appId.tsx

@@ -1,41 +1,107 @@
 import { DashboardLayout } from '@/frontend/components/DashboardLayout'
+import { APP_CONFIGS } from '@/frontend/config/appMenus'
 import {
+  Badge,
   Box,
   Container,
+  Divider,
   Group,
+  Skeleton,
   Stack,
   Text,
-  Title
+  Title,
 } from '@mantine/core'
-import { createFileRoute, Outlet, useNavigate, useParams } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { createFileRoute, Outlet, useParams } from '@tanstack/react-router'
+import { TbAlertTriangle, TbTools } from 'react-icons/tb'
 
 export const Route = createFileRoute('/apps/$appId')({
   component: AppDetailLayout,
 })
 
+const STATUS_COLOR: Record<string, string> = {
+  active: 'teal',
+  warning: 'orange',
+  error: 'red',
+}
+const STATUS_LABEL: Record<string, string> = {
+  active: 'Active',
+  warning: 'Warning',
+  error: 'Error',
+}
+
 function AppDetailLayout() {
   const { appId } = useParams({ from: '/apps/$appId' })
-  const navigate = useNavigate()
 
-  // Format app ID for display (e.g., desa-plus -> Desa+)
-  const appName = appId
-    .split('-')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
-    .replace('Plus', '+')
+  const { data: appData, isLoading } = useQuery({
+    queryKey: ['apps', appId],
+    queryFn: () => fetch(`/api/apps/${appId}`).then((r) => r.json()),
+    staleTime: 30_000,
+  })
+
+  const configName = APP_CONFIGS[appId]?.name
+  const displayName = appData?.name ?? configName ?? appId
+
+  const statusKey = appData?.maintenance ? 'maintenance' : (appData?.status ?? 'active')
+  const statusColor = appData?.maintenance ? 'gray' : (STATUS_COLOR[appData?.status] ?? 'gray')
+  const statusLabel = appData?.maintenance ? 'Maintenance' : (STATUS_LABEL[appData?.status] ?? appData?.status)
 
   return (
     <DashboardLayout>
       <Container size="xl" py="lg">
-        <Stack gap="xl">
-          <Group justify="space-between" align="flex-end">
-            <Stack gap={4}>
-              <Title order={1} className="gradient-text" style={{ fontSize: '2.5rem' }}>{appName}</Title>
-              <Text c="dimmed" size="sm" fw={500}>Application ID: <span style={{ fontFamily: 'monospace' }}>{appId}</span></Text>
+        <Stack gap="md">
+          <Group justify="space-between" align="flex-start">
+            <Stack gap={6}>
+              <Group gap="sm" align="center">
+                {isLoading ? (
+                  <Skeleton height={36} width={180} radius="md" />
+                ) : (
+                  <Title order={2} className="gradient-text">{displayName}</Title>
+                )}
+                {!isLoading && appData && (
+                  <Badge color={statusColor} variant="dot" size="md">
+                    {statusLabel}
+                  </Badge>
+                )}
+              </Group>
+
+              <Group gap="xs" align="center">
+                <Text size="xs" c="dimmed" fw={500} style={{ fontFamily: 'monospace' }}>
+                  {appId}
+                </Text>
+                {isLoading ? (
+                  <Skeleton height={20} width={60} radius="xl" />
+                ) : (
+                  <>
+                    {(appData?.errors ?? 0) > 0 && (
+                      <Badge
+                        variant="light"
+                        color="red"
+                        size="sm"
+                        leftSection={<TbAlertTriangle size={10} />}
+                      >
+                        {appData.errors} open {appData.errors === 1 ? 'error' : 'errors'}
+                      </Badge>
+                    )}
+                    {appData?.maintenance && (
+                      <Badge
+                        variant="light"
+                        color="orange"
+                        size="sm"
+                        leftSection={<TbTools size={10} />}
+                      >
+                        Maintenance mode
+                      </Badge>
+                    )}
+                  </>
+                )}
+              </Group>
             </Stack>
           </Group>
 
-          <Box mt="md">
+          <Divider />
+
+          <Box>
             <Outlet />
           </Box>
         </Stack>

src/frontend/routes/apps.$appId.users.index.tsx

@@ -0,0 +1,843 @@
+import {
+  ActionIcon,
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  Divider,
+  Group,
+  Loader,
+  Modal,
+  Pagination,
+  Paper,
+  ScrollArea,
+  Select,
+  SimpleGrid,
+  Stack,
+  Switch,
+  Table,
+  Text,
+  TextInput,
+  ThemeIcon,
+  Title,
+  Tooltip,
+} from '@mantine/core'
+import { useDisclosure, useDebouncedValue, useMediaQuery } from '@mantine/hooks'
+import { notifications } from '@mantine/notifications'
+import { createFileRoute, useParams } from '@tanstack/react-router'
+import { useEffect, useState } from 'react'
+import {
+  TbAlertCircle,
+  TbArrowDown,
+  TbArrowsSort,
+  TbArrowUp,
+  TbBriefcase,
+  TbCircleCheck,
+  TbCircleX,
+  TbHome2,
+  TbId,
+  TbMail,
+  TbPhone,
+  TbPlus,
+  TbSearch,
+  TbUsers,
+  TbX,
+} from 'react-icons/tb'
+import useSWR from 'swr'
+import { API_URLS } from '../config/api'
+
+export const Route = createFileRoute('/apps/$appId/users/')({
+  component: UsersIndexPage,
+})
+
+interface APIUser {
+  id: string
+  name: string
+  nik: string
+  phone: string
+  email: string
+  gender: string
+  isWithoutOTP: boolean
+  isActive: boolean
+  isApprover: boolean
+  role: string
+  village: string
+  group: string
+  position?: string
+  idUserRole: string
+  idVillage: string
+  idGroup: string
+  idPosition: string
+}
+
+interface BaseUserForm {
+  name: string
+  nik: string
+  phone: string
+  email: string
+  gender: string
+  idUserRole: string
+  idVillage: string
+  idGroup: string
+  idPosition: string
+}
+
+const FIELD_LABELS: Record<string, string> = {
+  name: 'Full Name',
+  nik: 'NIK',
+  phone: 'Phone Number',
+  email: 'Email Address',
+  gender: 'Gender',
+  idUserRole: 'User Role',
+  idVillage: 'Village',
+  idGroup: 'Group',
+}
+
+const REQUIRED_FIELDS = ['name', 'nik', 'phone', 'email', 'gender', 'idUserRole', 'idVillage', 'idGroup']
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
+
+interface UserFormFieldsProps {
+  values: BaseUserForm
+  onChange: (updates: Partial<BaseUserForm>) => void
+  villageSearch: string
+  onVillageSearchChange: (v: string) => void
+  rolesOptions: { value: string; label: string }[]
+  villagesOptions: { value: string; label: string }[]
+  groupsOptions: { value: string; label: string }[]
+  positionsOptions: { value: string; label: string }[]
+}
+
+function UserFormFields({
+  values,
+  onChange,
+  onVillageSearchChange,
+  rolesOptions,
+  villagesOptions,
+  groupsOptions,
+  positionsOptions,
+}: UserFormFieldsProps) {
+  return (
+    <>
+      <Box>
+        <Text size="xs" fw={700} c="dimmed" mb={8} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
+          Personal Information
+        </Text>
+        <SimpleGrid cols={2} spacing="md">
+          <TextInput
+            label="Full Name"
+            placeholder="Enter full name"
+            required
+            value={values.name}
+            onChange={(e) => onChange({ name: e.target.value })}
+          />
+          <TextInput
+            label="NIK"
+            placeholder="16-digit identity number"
+            required
+            value={values.nik}
+            onChange={(e) => onChange({ nik: e.target.value })}
+          />
+        </SimpleGrid>
+
+        <SimpleGrid cols={2} spacing="md" mt="sm">
+          <TextInput
+            label="Email Address"
+            placeholder="email@example.com"
+            required
+            value={values.email}
+            onChange={(e) => onChange({ email: e.target.value })}
+          />
+          <TextInput
+            label="Phone Number"
+            placeholder="628xxxxxxxxxx"
+            required
+            value={values.phone}
+            onChange={(e) => onChange({ phone: e.target.value })}
+          />
+        </SimpleGrid>
+
+        <Select
+          label="Gender"
+          placeholder="Select gender"
+          data={[
+            { value: 'M', label: 'Male' },
+            { value: 'F', label: 'Female' },
+          ]}
+          mt="sm"
+          required
+          value={values.gender}
+          onChange={(v) => onChange({ gender: v || '' })}
+        />
+      </Box>
+
+      <Divider label="Role & Organization" labelPosition="center" my="sm" />
+
+      <Box>
+        <Select
+          label="User Role"
+          placeholder="Select user role"
+          data={rolesOptions}
+          required
+          value={values.idUserRole}
+          onChange={(v) => onChange({ idUserRole: v || '' })}
+        />
+
+        <Select
+          label="Village"
+          placeholder="Type to search village..."
+          searchable
+          onSearchChange={onVillageSearchChange}
+          data={villagesOptions}
+          mt="sm"
+          required
+          value={values.idVillage}
+          onChange={(v) => onChange({ idVillage: v || '', idGroup: '', idPosition: '' })}
+        />
+
+        <SimpleGrid cols={2} spacing="md" mt="sm">
+          <Select
+            label="Group"
+            placeholder={values.idVillage ? 'Select group' : 'Select village first'}
+            data={groupsOptions}
+            disabled={!values.idVillage}
+            required
+            value={values.idGroup}
+            onChange={(v) => onChange({ idGroup: v || '', idPosition: '' })}
+          />
+          <Select
+            label="Position"
+            placeholder={values.idGroup ? 'Select position' : 'Select group first'}
+            data={positionsOptions}
+            disabled={!values.idGroup}
+            value={values.idPosition || ''}
+            onChange={(v) => onChange({ idPosition: v || '' })}
+          />
+        </SimpleGrid>
+      </Box>
+    </>
+  )
+}
+
+function UsersIndexPage() {
+  const { appId } = useParams({ from: '/apps/$appId/users/' })
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState('')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 400)
+  const [filterStatus, setFilterStatus] = useState<string | null>(null)
+  const [filterRole, setFilterRole] = useState<string | null>(null)
+  const [filterVillageSearch, setFilterVillageSearch] = useState('')
+  const [filterVillageId, setFilterVillageId] = useState<string | null>(null)
+  const [sortBy, setSortBy] = useState<string | null>(null)
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')
+
+  const handleSort = (col: string) => {
+    if (sortBy === col) {
+      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))
+    } else {
+      setSortBy(col)
+      setSortDir('asc')
+    }
+    setPage(1)
+  }
+
+  const isDesaPlus = appId === 'desa-plus'
+
+  const filterStatusParam = filterStatus === 'active' ? 'true' : filterStatus === 'inactive' ? 'false' : undefined
+  const apiUrl = isDesaPlus
+    ? API_URLS.getUsers(
+        page,
+        searchQuery,
+        filterStatusParam,
+        filterRole ?? undefined,
+        filterVillageId ?? undefined,
+        sortBy ?? undefined,
+        sortBy ? sortDir : undefined,
+      )
+    : null
+
+  const { data: response, error, isLoading, mutate } = useSWR(apiUrl, fetcher)
+  const users: APIUser[] = response?.data?.user || []
+
+  useEffect(() => {
+    if (debouncedSearch.length >= 3 || debouncedSearch.length === 0) {
+      setSearchQuery(debouncedSearch)
+      setPage(1)
+    }
+  }, [debouncedSearch])
+
+  useEffect(() => {
+    setPage(1)
+  }, [filterStatus, filterRole, filterVillageId])
+
+  const handleClearSearch = () => {
+    setSearch('')
+    setSearchQuery('')
+    setPage(1)
+  }
+
+  // --- ADD USER LOGIC ---
+  const [opened, { open, close }] = useDisclosure(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [villageSearch, setVillageSearch] = useState('')
+  const [form, setForm] = useState<BaseUserForm>({
+    name: '',
+    nik: '',
+    phone: '',
+    email: '',
+    gender: '',
+    idUserRole: '',
+    idVillage: '',
+    idGroup: '',
+    idPosition: '',
+  })
+
+  const [editOpened, { open: openEdit, close: closeEdit }] = useDisclosure(false)
+  const [editForm, setEditForm] = useState({
+    id: '',
+    name: '',
+    nik: '',
+    phone: '',
+    email: '',
+    gender: '',
+    idUserRole: '',
+    idVillage: '',
+    idGroup: '',
+    idPosition: '',
+    isActive: true,
+    isWithoutOTP: false,
+    isApprover: false,
+  })
+
+  // Options Data (Shared for both Add and Edit modals)
+  const isAnyModalOpened = opened || editOpened
+  const targetVillageId = opened ? form.idVillage : editForm.idVillage
+  const targetGroupId = opened ? form.idGroup : editForm.idGroup
+
+  const { data: rolesResp } = useSWR(isDesaPlus ? API_URLS.listRole() : null, fetcher)
+  const { data: filterVillagesResp } = useSWR(
+    isDesaPlus && filterVillageSearch.length >= 1 ? API_URLS.getVillages(1, filterVillageSearch) : null,
+    fetcher
+  )
+  const { data: villagesResp } = useSWR(
+    isAnyModalOpened && villageSearch.length >= 1 ? API_URLS.getVillages(1, villageSearch) : null,
+    fetcher
+  )
+  const { data: groupsResp } = useSWR(
+    isAnyModalOpened && targetVillageId ? API_URLS.listGroup(targetVillageId) : null,
+    fetcher
+  )
+  const { data: positionsResp } = useSWR(
+    isAnyModalOpened && targetGroupId ? API_URLS.listPosition(targetGroupId) : null,
+    fetcher
+  )
+
+  const rolesOptions = (rolesResp?.data || []).map((r: any) => ({ value: r.id, label: r.name }))
+  const filterVillagesOptions = (filterVillagesResp?.data || []).map((v: any) => ({ value: v.id, label: v.name }))
+  const villagesOptions = (villagesResp?.data || []).map((v: any) => ({ value: v.id, label: v.name }))
+  const groupsOptions = (groupsResp?.data || []).map((g: any) => ({ value: g.id, label: g.name }))
+  const positionsOptions = (positionsResp?.data || []).map((p: any) => ({ value: p.id, label: p.name }))
+
+  const getMissingFields = (data: BaseUserForm) =>
+    REQUIRED_FIELDS.filter((f) => !data[f as keyof BaseUserForm]).map((f) => FIELD_LABELS[f] ?? f)
+
+  const handleCreateUser = async () => {
+    const missing = getMissingFields(form)
+    if (missing.length > 0) {
+      notifications.show({
+        title: 'Validation Error',
+        message: `Please fill in: ${missing.join(', ')}`,
+        color: 'red',
+      })
+      return
+    }
+
+    setIsSubmitting(true)
+    try {
+      const res = await fetch(API_URLS.createUser(), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(form),
+      })
+
+      const result = await res.json()
+
+      if (result.success) {
+        await fetch(API_URLS.createLog(), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: 'CREATE', message: `New user registered (${appId}): ${form.name} - ${form.nik}` }),
+        }).catch(console.error)
+
+        notifications.show({
+          title: 'Success',
+          message: 'User has been created successfully.',
+          color: 'teal',
+          icon: <TbCircleCheck size={18} />,
+        })
+        mutate()
+        close()
+        setForm({ name: '', nik: '', phone: '', email: '', gender: '', idUserRole: '', idVillage: '', idGroup: '', idPosition: '' })
+      } else {
+        notifications.show({
+          title: 'Error',
+          message: result.message || 'Failed to create user.',
+          color: 'red',
+          icon: <TbCircleX size={18} />,
+        })
+      }
+    } catch {
+      notifications.show({ title: 'Network Error', message: 'Unable to connect to the server.', color: 'red' })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleEditOpen = (user: APIUser) => {
+    setEditForm({
+      id: user.id,
+      name: user.name,
+      nik: user.nik,
+      phone: user.phone,
+      email: user.email,
+      gender: user.gender,
+      idUserRole: user.idUserRole,
+      idVillage: user.idVillage,
+      idGroup: user.idGroup,
+      idPosition: user.idPosition,
+      isActive: user.isActive,
+      isWithoutOTP: user.isWithoutOTP,
+      isApprover: user.isApprover,
+    })
+    setVillageSearch(user.village)
+    openEdit()
+  }
+
+  const handleUpdateUser = async () => {
+    const missing = getMissingFields(editForm)
+    if (missing.length > 0) {
+      notifications.show({
+        title: 'Validation Error',
+        message: `Please fill in: ${missing.join(', ')}`,
+        color: 'red',
+      })
+      return
+    }
+
+    setIsSubmitting(true)
+    try {
+      const res = await fetch(API_URLS.editUser(), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(editForm),
+      })
+
+      const result = await res.json()
+
+      if (result.success) {
+        await fetch(API_URLS.createLog(), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: 'UPDATE', message: `User updated (${appId}): ${editForm.name} - ${editForm.id}` }),
+        }).catch(console.error)
+
+        notifications.show({
+          title: 'Success',
+          message: 'User has been updated successfully.',
+          color: 'teal',
+          icon: <TbCircleCheck size={18} />,
+        })
+        mutate()
+        closeEdit()
+      } else {
+        notifications.show({
+          title: 'Error',
+          message: result.message || 'Failed to update user.',
+          color: 'red',
+          icon: <TbCircleX size={18} />,
+        })
+      }
+    } catch {
+      notifications.show({ title: 'Network Error', message: 'Unable to connect to the server.', color: 'red' })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const getRoleColor = (role: string) => {
+    const r = role.toLowerCase()
+    if (r.includes('super')) return 'red'
+    if (r.includes('admin')) return 'brand-blue'
+    if (r.includes('developer')) return 'violet'
+    return 'gray'
+  }
+
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  const sharedFormProps = {
+    villageSearch,
+    onVillageSearchChange: setVillageSearch,
+    rolesOptions,
+    villagesOptions,
+    groupsOptions,
+    positionsOptions,
+  }
+
+  if (!isDesaPlus) {
+    return (
+      <Paper withBorder radius="2xl" className="glass" p="xl">
+        <Stack align="center" gap="xs" py="xl">
+          <TbUsers size={40} style={{ opacity: 0.25 }} />
+          <Text fw={600} size="sm">User Management</Text>
+          <Text size="sm" c="dimmed">This feature is currently available for Desa+. Other apps coming soon.</Text>
+        </Stack>
+      </Paper>
+    )
+  }
+
+  return (
+    <Stack gap="xl" py="md">
+      {/* Add User Modal */}
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={<Text fw={700} size="lg">Add New User</Text>}
+        radius="md"
+        size="lg"
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="md">
+          <UserFormFields
+            values={form}
+            onChange={(updates) => setForm((f) => ({ ...f, ...updates }))}
+            {...sharedFormProps}
+          />
+
+          <Button
+            fullWidth
+            mt="lg"
+            radius="md"
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+            loading={isSubmitting}
+            onClick={handleCreateUser}
+          >
+            Register User
+          </Button>
+        </Stack>
+      </Modal>
+
+      {/* Edit User Modal */}
+      <Modal
+        opened={editOpened}
+        onClose={closeEdit}
+        title={<Text fw={700} size="lg">Edit User</Text>}
+        radius="md"
+        size="lg"
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="md">
+          <UserFormFields
+            values={editForm}
+            onChange={(updates) => setEditForm((f) => ({ ...f, ...updates }))}
+            {...sharedFormProps}
+          />
+
+          <Divider label="System Access" labelPosition="center" my="sm" />
+
+          <SimpleGrid cols={2} spacing="xl">
+            <Switch
+              label="Account Active"
+              description="Enable or disable user access"
+              checked={editForm.isActive}
+              onChange={(event) => setEditForm((f) => ({ ...f, isActive: event.currentTarget.checked }))}
+            />
+            <Switch
+              label="Without OTP"
+              description="Bypass login OTP verification"
+              checked={editForm.isWithoutOTP}
+              onChange={(event) => setEditForm((f) => ({ ...f, isWithoutOTP: event.currentTarget.checked }))}
+            />
+            <Switch
+              label="Approver"
+              description="Grant approver privileges to this user"
+              checked={editForm.isApprover}
+              onChange={(event) => setEditForm((f) => ({ ...f, isApprover: event.currentTarget.checked }))}
+            />
+          </SimpleGrid>
+
+          <Button
+            fullWidth
+            mt="lg"
+            radius="md"
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+            loading={isSubmitting}
+            onClick={handleUpdateUser}
+          >
+            Update User
+          </Button>
+        </Stack>
+      </Modal>
+
+      {/* Header */}
+      <Group justify="space-between" align="flex-start">
+        <Stack gap={4}>
+          <Title order={3}>User Management</Title>
+          <Text size="sm" c="dimmed">
+            {isLoading ? 'Loading users...' : `${response?.data?.total ?? 0} users registered in the Desa+ system`}
+          </Text>
+        </Stack>
+        <Button
+          variant="gradient"
+          gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+          leftSection={<TbPlus size={18} />}
+          size="sm"
+          onClick={open}
+        >
+          Add User
+        </Button>
+      </Group>
+
+      {/* Search / Filter */}
+      <Paper withBorder p="md" className="glass">
+        <Stack gap="sm">
+          <TextInput
+            placeholder="Search name, NIK, or email... (min. 3 characters)"
+            leftSection={<TbSearch size={16} />}
+            size="sm"
+            rightSection={
+              search ? (
+                <Tooltip label="Clear search" withArrow>
+                  <ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="sm">
+                    <TbX size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              ) : null
+            }
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            radius="md"
+          />
+          <Group gap="sm" wrap="nowrap">
+            <Select
+              size="sm"
+              placeholder="Status"
+              data={[
+                { value: 'active', label: 'Active' },
+                { value: 'inactive', label: 'Inactive' },
+              ]}
+              value={filterStatus}
+              onChange={setFilterStatus}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
+            <Select
+              size="sm"
+              placeholder="Role"
+              data={rolesOptions}
+              value={filterRole}
+              onChange={setFilterRole}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
+            <Select
+              size="sm"
+              placeholder="Search village..."
+              searchable
+              onSearchChange={setFilterVillageSearch}
+              data={filterVillagesOptions}
+              value={filterVillageId}
+              onChange={setFilterVillageId}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
+          </Group>
+        </Stack>
+      </Paper>
+
+      {isLoading ? (
+        <Group justify="center" py="xl">
+          <Loader type="dots" />
+        </Group>
+      ) : error ? (
+        <Paper withBorder radius="2xl" className="glass" p="md">
+          <Stack align="center" gap="xs" py="xl">
+            <TbAlertCircle size={32} style={{ opacity: 0.4, color: 'var(--mantine-color-red-6)' }} />
+            <Text size="sm" c="dimmed">Failed to load users from the API.</Text>
+          </Stack>
+        </Paper>
+      ) : users.length === 0 ? (
+        <Paper withBorder radius="2xl" className="glass" p="md">
+          <Stack align="center" gap="xs" py="xl">
+            <TbUsers size={32} style={{ opacity: 0.25 }} />
+            <Text size="sm" c="dimmed">
+              {searchQuery || filterStatus || filterRole || filterVillageId ? 'No users match your filters.' : 'No users found.'}
+            </Text>
+          </Stack>
+        </Paper>
+      ) : (
+        <Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
+          <ScrollArea h={isMobile ? undefined : 'auto'} offsetScrollbars>
+            <Table
+              className="data-table"
+              verticalSpacing="md"
+              horizontalSpacing="md"
+              highlightOnHover
+              withColumnBorders={false}
+              style={{
+                tableLayout: isMobile ? 'auto' : 'fixed',
+                width: '100%',
+                minWidth: isMobile ? 900 : 'unset',
+              }}
+            >
+              <Table.Thead>
+                <Table.Tr>
+                  {[
+                    { label: 'User & ID', col: 'name', width: '28%' },
+                    { label: 'Contact', col: null, width: '25%' },
+                    { label: 'Organization', col: null, width: '22%' },
+                    { label: 'Role', col: 'idUserRole', width: '15%' },
+                    { label: 'Status', col: 'isActive', width: '10%' },
+                  ].map(({ label, col, width }) => (
+                    <Table.Th
+                      key={label}
+                      style={{ width: isMobile ? undefined : width, cursor: col ? 'pointer' : undefined, userSelect: 'none' }}
+                      onClick={col ? () => handleSort(col) : undefined}
+                    >
+                      <Group gap={4} wrap="nowrap">
+                        <span>{label}</span>
+                        {col && (
+                          sortBy === col
+                            ? sortDir === 'asc'
+                              ? <TbArrowUp size={13} />
+                              : <TbArrowDown size={13} />
+                            : <TbArrowsSort size={13} style={{ opacity: 0.35 }} />
+                        )}
+                      </Group>
+                    </Table.Th>
+                  ))}
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {users.map((user) => (
+                  <Table.Tr
+                    key={user.id}
+                    style={{ cursor: 'pointer' }}
+                    onClick={() => handleEditOpen(user)}
+                  >
+                    <Table.Td>
+                      <Group gap="md" wrap="nowrap">
+                        <Avatar
+                          size="lg"
+                          radius="md"
+                          variant="light"
+                          color={getRoleColor(user.role)}
+                          style={{ flexShrink: 0 }}
+                        >
+                          {user.name.charAt(0)}
+                        </Avatar>
+                        <Stack gap={2} style={{ overflow: 'hidden' }}>
+                          <Text fw={700} size="sm" truncate="end">{user.name}</Text>
+                          <Group gap={4} wrap="nowrap">
+                            <TbId size={12} color="var(--mantine-color-dimmed)" />
+                            <Text size="xs" c="dimmed" truncate="end">{user.nik}</Text>
+                          </Group>
+                        </Stack>
+                      </Group>
+                    </Table.Td>
+                    <Table.Td>
+                      <Stack gap={4} style={{ overflow: 'hidden' }}>
+                        <Group gap={8} wrap="nowrap" align="center">
+                          <ThemeIcon size={18} variant="transparent" color="gray">
+                            <TbMail size={14} />
+                          </ThemeIcon>
+                          <Text size="xs" fw={500} truncate="end">{user.email}</Text>
+                        </Group>
+                        <Group gap={8} wrap="nowrap" align="center">
+                          <ThemeIcon size={18} variant="transparent" color="gray">
+                            <TbPhone size={14} />
+                          </ThemeIcon>
+                          <Text size="xs" c="dimmed" truncate="end">{user.phone}</Text>
+                        </Group>
+                      </Stack>
+                    </Table.Td>
+                    <Table.Td>
+                      <Stack gap={4}>
+                        <Group gap={8} wrap="nowrap" align="center">
+                          <ThemeIcon size={18} variant="light" color="blue" radius="sm">
+                            <TbHome2 size={12} />
+                          </ThemeIcon>
+                          <Text size="xs" fw={700} truncate="end">{user.village}</Text>
+                        </Group>
+                        <Group gap={8} wrap="nowrap" align="center">
+                          <ThemeIcon size={18} variant="transparent" color="gray">
+                            <TbBriefcase size={12} />
+                          </ThemeIcon>
+                          <Text size="xs" c="dimmed" truncate="end">{user.group} · {user.position || 'Staff'}</Text>
+                        </Group>
+                      </Stack>
+                    </Table.Td>
+                    <Table.Td>
+                      <Badge
+                        variant="light"
+                        color={getRoleColor(user.role)}
+                        radius="md"
+                        size="sm"
+                        styles={{ root: { textTransform: 'uppercase', fontWeight: 800, whiteSpace: 'nowrap' } }}
+                      >
+                        {user.role}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>
+                      <Stack gap={4}>
+                        <Group gap="xs" wrap="nowrap">
+                          <Box
+                            style={{
+                              width: 8,
+                              height: 8,
+                              borderRadius: '50%',
+                              background: user.isActive ? '#10b981' : '#ef4444',
+                              boxShadow: user.isActive ? '0 0 8px #10b981' : undefined,
+                            }}
+                          />
+                          <Text size="xs" fw={800} c={user.isActive ? 'teal.4' : 'red.5'}>
+                            {user.isActive ? 'ACTIVE' : 'INACTIVE'}
+                          </Text>
+                        </Group>
+                        {user.isWithoutOTP && (
+                          <Badge variant="light" color="orange" size="xs" radius="sm">
+                            NO OTP
+                          </Badge>
+                        )}
+                      </Stack>
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </ScrollArea>
+        </Paper>
+      )}
+
+      {!isLoading && !error && response?.data?.totalPage > 1 && (
+        <Group justify="center">
+          <Pagination
+            value={page}
+            onChange={setPage}
+            total={response.data.totalPage}
+            size="sm"
+            radius="md"
+            withEdges={false}
+            siblings={1}
+            boundaries={1}
+          />
+        </Group>
+      )}
+    </Stack>
+  )
+}

src/frontend/routes/apps.$appId.users.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/apps/$appId/users')({
+  component: UsersLayout,
+})
+
+function UsersLayout() {
+  return <Outlet />
+}

src/frontend/routes/apps.$appId.villages.$villageId.tsx

@@ -0,0 +1,600 @@
+import { AreaChart } from '@mantine/charts'
+import {
+  Badge,
+  Box,
+  Button,
+  Card,
+  Group,
+  Loader,
+  Modal,
+  Paper,
+  SegmentedControl,
+  SimpleGrid,
+  Stack,
+  Switch,
+  Text,
+  Textarea,
+  TextInput,
+  ThemeIcon,
+  Title,
+} from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
+import { notifications } from '@mantine/notifications'
+import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
+import { useState } from 'react'
+import {
+  TbArrowLeft,
+  TbBuildingCommunity,
+  TbCalendar,
+  TbCalendarEvent,
+  TbChartBar,
+  TbEdit,
+  TbHome2,
+  TbLayoutKanban,
+  TbMapPin,
+  TbPower,
+  TbTestPipe,
+  TbUser,
+  TbUsers,
+  TbUsersGroup,
+  TbWifi
+} from 'react-icons/tb'
+import useSWR from 'swr'
+import { API_URLS } from '../config/api'
+import { useSession } from '../hooks/useAuth'
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
+
+export const Route = createFileRoute('/apps/$appId/villages/$villageId')({
+  component: VillageDetailPage,
+})
+
+// ── Mock Data ────────────────────────────────────────────────────────────────
+
+// Mock data removed as it is replaced by API calls
+
+// Remove chart data generators as they are replaced by API calls
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+
+
+// ── Activity Chart ────────────────────────────────────────────────────────────
+
+type ChartPeriod = 'daily' | 'monthly' | 'yearly'
+
+function ActivityChart({ villageId }: { villageId: string }) {
+  const [period, setPeriod] = useState<ChartPeriod>('daily')
+
+  const { data: response, isLoading } = useSWR(
+    API_URLS.graphLogVillages(villageId, period),
+    fetcher
+  )
+
+  const labels: Record<ChartPeriod, string> = {
+    daily: 'Daily (last 14 days)',
+    monthly: 'Monthly (this year)',
+    yearly: 'Yearly',
+  }
+
+  const rawData: any[] = Array.isArray(response?.data) ? response.data : []
+
+  // Normalize: map any field names from external API → { label, activity }
+  const data = rawData.map((item) => {
+    const label = item.label
+    const activity = item.aktivitas
+    return { label: String(label), activity: Number(activity) }
+  })
+
+  return (
+    <Paper withBorder radius="xl" p="lg">
+      <Group justify="space-between" mb="lg" wrap="wrap" gap="sm">
+        <Group gap="xs">
+          <ThemeIcon size={28} radius="md" variant="light" color="blue">
+            <TbChartBar size={14} />
+          </ThemeIcon>
+          <Stack gap={0}>
+            <Text fw={700} size="sm">Village Activity Log</Text>
+            <Text size="xs" c="dimmed">{labels[period]}</Text>
+          </Stack>
+        </Group>
+
+        <SegmentedControl
+          value={period}
+          onChange={(v) => setPeriod(v as ChartPeriod)}
+          size="xs"
+          radius="md"
+          data={[
+            { value: 'daily', label: 'Daily' },
+            { value: 'monthly', label: 'Monthly' },
+            { value: 'yearly', label: 'Yearly' },
+          ]}
+        />
+      </Group>
+
+      {isLoading ? (
+        <Stack h={280} align="center" justify="center">
+          <Loader type="dots" />
+        </Stack>
+      ) : (
+        <AreaChart
+          h={280}
+          data={data}
+          dataKey="label"
+          series={[{ name: 'activity', color: '#2563EB' }]}
+          curveType="monotone"
+          withTooltip
+          withDots
+          withPointLabels={false}
+          tickLine="none"
+          gridAxis="x"
+          fillOpacity={0.4}
+          tooltipAnimationDuration={150}
+          tooltipProps={{
+            content: ({ active, payload, label }: any) => {
+              if (!active || !payload?.length) return null
+              return (
+                <div style={{
+                  backgroundColor: '#1A1B1E',
+                  padding: '8px 12px',
+                  borderRadius: '6px',
+                  border: '1px solid #373A40',
+                  boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+                  pointerEvents: 'none',
+                  whiteSpace: 'nowrap',
+                }}>
+                  <div style={{ fontSize: '12px', fontWeight: 600, color: '#C1C2C5', marginBottom: '4px' }}>
+                    {label}
+                  </div>
+                  <div style={{ fontSize: '11px', color: '#2563EB' }}>
+                    Activity: <span style={{ fontWeight: 700 }}>{payload[0].value}</span>
+                  </div>
+                </div>
+              )
+            },
+          }}
+          activeDotProps={{ r: 6, strokeWidth: 2 }}
+          styles={{
+            root: {
+              '.recharts-area-curve': {
+                strokeWidth: 3,
+                filter: 'drop-shadow(0 4px 8px rgba(37, 99, 235, 0.3))',
+              },
+            },
+          }}
+        />
+      )}
+    </Paper>
+  )
+}
+
+// ── Main Page ─────────────────────────────────────────────────────────────────
+
+function VillageDetailPage() {
+  const { appId, villageId } = useParams({ from: '/apps/$appId/villages/$villageId' })
+  const navigate = useNavigate()
+
+  const { data: session } = useSession()
+  const isDeveloper = session?.user?.role === 'DEVELOPER'
+
+  const { data: infoRes, isLoading: infoLoading, mutate } = useSWR(API_URLS.infoVillages(villageId), fetcher)
+  const { data: gridRes, isLoading: gridLoading } = useSWR(API_URLS.gridVillages(villageId), fetcher)
+
+  const [confirmModalOpened, { open: openConfirmModal, close: closeConfirmModal }] = useDisclosure(false)
+  const [editModalOpened, { open: openEditModal, close: closeEditModal }] = useDisclosure(false)
+  const [isUpdating, setIsUpdating] = useState(false)
+  const [isEditing, setIsEditing] = useState(false)
+  const [editForm, setEditForm] = useState({ name: '', desc: '', isDummy: false })
+
+  const village = infoRes?.data
+  const stats = gridRes?.data
+
+  const openEdit = () => {
+    setEditForm({
+      name: village?.name || '',
+      desc: village?.desc || '',
+      isDummy: village?.isDummy ?? false,
+    })
+    openEditModal()
+  }
+
+  const handleEditVillage = async () => {
+    if (!village) return
+
+    if (!editForm.name.trim() || !editForm.desc.trim()) {
+      notifications.show({
+        title: 'Validation Error',
+        message: 'All fields are required.',
+        color: 'red'
+      })
+      return
+    }
+
+    setIsEditing(true)
+    try {
+      const res = await fetch(API_URLS.editVillages(), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          id: village.id,
+          name: editForm.name,
+          desc: editForm.desc,
+          isDummy: editForm.isDummy,
+        })
+      })
+
+      if (res.ok) {
+        await fetch(API_URLS.createLog(), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: 'UPDATE', message: `Village data updated (${appId}): ${editForm.name} - ${village.id}` })
+        }).catch(console.error)
+
+        notifications.show({
+          title: 'Success',
+          message: 'Village data has been updated successfully.',
+          color: 'teal'
+        })
+        mutate()
+        closeEditModal()
+      } else {
+        notifications.show({
+          title: 'Error',
+          message: 'Failed to update village data.',
+          color: 'red'
+        })
+      }
+    } catch {
+      notifications.show({
+        title: 'Error',
+        message: 'A network error occurred.',
+        color: 'red'
+      })
+    } finally {
+      setIsEditing(false)
+    }
+  }
+
+  const handleConfirmToggle = async () => {
+    if (!village) return
+
+    setIsUpdating(true)
+    try {
+      const res = await fetch(API_URLS.updateStatusVillages(), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          id: village.id,
+          active: !village.isActive
+        })
+      })
+
+      if (res.ok) {
+        await fetch(API_URLS.createLog(), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: 'UPDATE', message: `Village status updated (${appId}): ${village.name} ${!village.isActive ? 'activated' : 'deactivated'} - ${village.id}` })
+        }).catch(console.error)
+
+        notifications.show({
+          title: 'Success',
+          message: `Village status has been ${!village.isActive ? 'activated' : 'deactivated'}.`,
+          color: 'teal'
+        })
+        mutate()
+        closeConfirmModal()
+      } else {
+        notifications.show({
+          title: 'Error',
+          message: 'Failed to update village status.',
+          color: 'red'
+        })
+      }
+    } catch {
+      notifications.show({
+        title: 'Error',
+        message: 'A network error occurred.',
+        color: 'red'
+      })
+    } finally {
+      setIsUpdating(false)
+    }
+  }
+
+  const goBack = () => navigate({ to: '/apps/$appId/villages', params: { appId } })
+
+  if (infoLoading || gridLoading) {
+    return (
+      <Group justify="center" py="xl">
+        <Loader type="dots" />
+      </Group>
+    )
+  }
+
+  if (!village) {
+    return (
+      <Stack align="center" py="xl" gap="md">
+        <TbBuildingCommunity size={48} color="gray" opacity={0.4} />
+        <Title order={4}>Village not found</Title>
+        <Text c="dimmed">Village ID "{villageId}" is not registered in the system.</Text>
+        <Button variant="light" leftSection={<TbArrowLeft size={16} />} onClick={goBack}>
+          Back to List
+        </Button>
+      </Stack>
+    )
+  }
+
+  return (
+    <Stack gap="xl">
+
+      {/* ── Back Button ── */}
+      <Group justify="space-between">
+        <Button
+          variant="subtle"
+          color="gray"
+          size="sm"
+          leftSection={<TbArrowLeft size={16} />}
+          radius="md"
+          onClick={goBack}
+        >
+          Village List
+        </Button>
+
+        {/* Action Buttons */}
+        <Group gap="sm">
+          <Button
+            variant="filled"
+            color={village.isActive ? 'red' : 'green'}
+            leftSection={village.isActive ? <TbPower size={16} /> : <TbPower size={16} />}
+            onClick={openConfirmModal}
+            radius="md"
+            loading={isUpdating}
+            disabled={!isDeveloper}
+          >
+            {village.isActive ? 'Deactivate' : 'Activate'}
+          </Button>
+          <Button
+            variant="light"
+            color="blue"
+            leftSection={<TbEdit size={16} />}
+            onClick={openEdit}
+            radius="md"
+          >
+            Edit
+          </Button>
+        </Group>
+      </Group>
+
+      {/* ── Header Banner ── */}
+      <Paper
+        radius="xl"
+        p="xl"
+        style={{
+          background: 'linear-gradient(135deg, #1d4ed8 0%, #6d28d9 60%, #7c3aed 100%)',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        {/* Decorative blobs */}
+        <Box style={{ position: 'absolute', top: -50, right: -50, width: 220, height: 220, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }} />
+        <Box style={{ position: 'absolute', bottom: -70, right: 100, width: 160, height: 160, borderRadius: '50%', background: 'rgba(255,255,255,0.04)' }} />
+
+        <Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
+          <Group gap="lg">
+            <ThemeIcon
+              size={68}
+              radius="xl"
+              style={{ background: 'rgba(255,255,255,0.15)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)' }}
+            >
+              <TbHome2 size={32} color="white" />
+            </ThemeIcon>
+
+            <Stack gap={6}>
+              <Group gap="xs" align="center">
+                <Title order={2} style={{ color: 'white', lineHeight: 1.1 }}>{village.name}</Title>
+                {village.isDummy && (
+                  <Badge
+                    size="sm"
+                    variant="light"
+                    color="yellow"
+                    leftSection={<TbTestPipe size={11} />}
+                    style={{ textTransform: 'none' }}
+                  >
+                    Dummy
+                  </Badge>
+                )}
+              </Group>
+
+              <Group gap={6}>
+                <TbMapPin size={14} color="rgba(255,255,255,0.8)" />
+                <Text size="sm" style={{ color: 'rgba(255,255,255,0.85)' }}>
+                  Location data not available
+                </Text>
+              </Group>
+
+              <Group gap={6}>
+                <TbUser size={14} color="rgba(255,255,255,0.8)" />
+                <Text size="sm" style={{ color: 'rgba(255,255,255,0.85)' }}>
+                  Village Head: <strong style={{ color: 'white' }}>{village.perbekel}</strong>
+                </Text>
+              </Group>
+
+              {/* <Group gap="xs" mt={2}>
+                <Badge
+                  variant="outline"
+                  radius="sm"
+                  size="sm"
+                  style={{ color: 'white', borderColor: 'rgba(255,255,255,0.45)' }}
+                  leftSection={<TbCircleCheck size={11} />}
+                >
+                  {cfg.label}
+                </Badge>
+              </Group> */}
+            </Stack>
+          </Group>
+
+          {/* Last Sync block */}
+          <Stack gap={4} align="flex-end">
+            {/* <Text size="xs" style={{ color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Last Sync</Text> */}
+            <Group gap={6}>
+              <TbWifi size={15} color="rgba(255,255,255,0.9)" />
+              <Text size="sm" fw={700} style={{ color: 'white' }}>{village.isActive ? 'ACTIVE' : 'NON-ACTIVE'}</Text>
+            </Group>
+          </Stack>
+        </Group>
+      </Paper>
+
+      {/* ── Stats Cards ── */}
+      <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="md">
+        {[
+          { icon: TbUsers, label: 'Total Users', active: stats?.user?.active, nonActive: stats?.user?.nonActive, color: 'blue' },
+          { icon: TbUsersGroup, label: 'Total Groups', active: stats?.group?.active, nonActive: stats?.group?.nonActive, color: 'violet' },
+          { icon: TbLayoutKanban, label: 'Total Divisions', active: stats?.division?.active, nonActive: stats?.division?.nonActive, color: 'teal' },
+          { icon: TbCalendarEvent, label: 'Total Activities', active: stats?.project?.active, nonActive: stats?.project?.nonActive, color: 'orange' },
+        ].map((s) => (
+          <Card key={s.label} withBorder radius="xl" padding="lg" className="premium-card">
+            <Group justify="space-between" align="flex-start" mb="xs">
+              <ThemeIcon size={36} radius="md" variant="light" color={s.color}>
+                <s.icon size={18} />
+              </ThemeIcon>
+              <Stack gap={0} align="flex-end">
+                <Text size="10px" c="dimmed" fw={700}>NON-ACTIVE</Text>
+                <Text size="xs" fw={700}>{s.nonActive?.toLocaleString('id-ID') || 0}</Text>
+              </Stack>
+            </Group>
+            <Text size="xs" c="dimmed" fw={600} style={{ textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+              {s.label}
+            </Text>
+            <Text size="xl" fw={800} mt={2}>{s.active?.toLocaleString('id-ID') || 0}</Text>
+          </Card>
+        ))}
+      </SimpleGrid>
+
+      {/* ── Chart + Info Panels ── */}
+      <Box
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '3fr 1fr',
+          gap: '1rem',
+          alignItems: 'start',
+        }}
+      >
+        {/* Left (3/4): Activity Chart */}
+        <Box style={{ minWidth: 0 }}>
+          <ActivityChart villageId={villageId} />
+        </Box>
+
+        {/* Right (1/4): Informasi Sistem */}
+        <Paper withBorder radius="xl" p="lg">
+          <Group gap="xs" mb="md">
+            <ThemeIcon size={28} radius="md" variant="light" color="teal">
+              <TbCalendar size={14} />
+            </ThemeIcon>
+            <Text fw={700} size="sm">System Information</Text>
+          </Group>
+          <Stack gap={0}>
+            {[
+              { label: 'Date Created', value: village.createdAt },
+              { label: 'Created By', value: '-' },
+              { label: 'Last Updated', value: village.updatedAt },
+            ].map((item, idx, arr) => (
+              <Group
+                key={item.label}
+                justify="space-between"
+                py="xs"
+                wrap="wrap"
+                style={{
+                  borderBottom: idx < arr.length - 1 ? '1px solid var(--mantine-color-default-border)' : 'none',
+                }}
+              >
+                <Text size="xs" c="dimmed">{item.label}</Text>
+                <Text size="xs" fw={600} ta="right">{item.value}</Text>
+              </Group>
+            ))}
+          </Stack>
+        </Paper>
+      </Box>
+
+      {/* ── Confirmation Modal ── */}
+      <Modal
+        opened={confirmModalOpened}
+        onClose={closeConfirmModal}
+        radius="md"
+        title={<Text fw={700} size="lg">Confirm Status Change</Text>}
+        centered
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="md">
+          <Text size="sm">
+            Are you sure you want to <strong>{village.isActive ? 'deactivate' : 'activate'}</strong> village <strong>{village.name}</strong>?
+          </Text>
+          <Group justify="flex-end" gap="sm">
+            <Button variant="light" color="gray" onClick={closeConfirmModal} radius="md">
+              Cancel
+            </Button>
+            <Button
+              color={village.isActive ? 'red' : 'green'}
+              onClick={handleConfirmToggle}
+              loading={isUpdating}
+              radius="md"
+            >
+              Confirm
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      {/* ── Edit Village Modal ── */}
+      <Modal
+        opened={editModalOpened}
+        onClose={closeEditModal}
+        title={<Text fw={700}>Edit Village Details</Text>}
+        radius="md"
+        size="md"
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Village Name"
+            placeholder="Enter village name"
+            required
+            value={editForm.name}
+            onChange={(e) => setEditForm(prev => ({ ...prev, name: e.currentTarget.value }))}
+          />
+          <Textarea
+            label="Description"
+            placeholder="Enter village description..."
+            minRows={3}
+            required
+            value={editForm.desc}
+            onChange={(e) => setEditForm(prev => ({ ...prev, desc: e.currentTarget.value }))}
+          />
+          <Switch
+            label="Dummy Village"
+            description="Tandai desa ini sebagai data dummy"
+            checked={editForm.isDummy}
+            onChange={(e) => setEditForm(prev => ({ ...prev, isDummy: e.currentTarget.checked }))}
+          />
+          <Group justify="flex-end" gap="sm" mt="md">
+            <Button variant="light" color="gray" onClick={closeEditModal} radius="md">
+              Cancel
+            </Button>
+            <Button
+              variant="filled"
+              color="blue"
+              onClick={handleEditVillage}
+              loading={isEditing}
+              radius="md"
+            >
+              Save Changes
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+    </Stack>
+  )
+}

src/frontend/routes/apps.$appId.villages.index.tsx

@@ -0,0 +1,546 @@
+import {
+  ActionIcon,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Container,
+  Divider,
+  Group,
+  Modal,
+  Pagination,
+  Paper,
+  SegmentedControl,
+  Select,
+  SimpleGrid,
+  Stack,
+  Text,
+  Textarea,
+  TextInput,
+  ThemeIcon,
+  Title,
+  Tooltip
+} from '@mantine/core'
+import { notifications } from '@mantine/notifications'
+import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useDisclosure } from '@mantine/hooks'
+import {
+  TbArrowRight,
+  TbBuildingCommunity,
+  TbCalendar,
+  TbChevronRight,
+  TbHome2,
+  TbLayoutGrid,
+  TbList,
+  TbMapPin,
+  TbPlus,
+  TbSearch,
+  TbTestPipe,
+  TbUser,
+  TbX,
+} from 'react-icons/tb'
+import useSWR from 'swr'
+import { API_URLS } from '../config/api'
+
+export const Route = createFileRoute('/apps/$appId/villages/')({
+  component: AppVillagesIndexPage,
+})
+
+interface APIVillage {
+  id: string
+  name: string
+  isActive: boolean
+  isDummy: boolean
+  createdAt: string
+  perbekel: string | null
+}
+
+const statusConfig = {
+  'active': { color: 'teal', label: 'Active' },
+  'inactive': { color: 'orange', label: 'Inactive' },
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
+
+function formatDate(dateStr: string) {
+  if (!dateStr) return '-'
+  try {
+    return new Date(dateStr).toLocaleDateString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    })
+  } catch (e) {
+    return dateStr
+  }
+}
+
+function VillageGridCard({ village, onClick }: { village: APIVillage; onClick: () => void }) {
+  const status = village.isActive ? 'active' : 'inactive'
+  const cfg = statusConfig[status as keyof typeof statusConfig]
+  return (
+    <Card
+      withBorder
+      radius="xl"
+      padding="lg"
+      className="village-card"
+      onClick={onClick}
+      style={{ cursor: 'pointer' }}
+    >
+      <Group justify="space-between" mb="md">
+        <ThemeIcon
+          size={46}
+          radius="md"
+          variant="gradient"
+          gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+        >
+          <TbHome2 size={22} />
+        </ThemeIcon>
+        <Group gap={6}>
+          {village.isDummy && (
+            <Badge color="yellow" variant="light" radius="sm" size="sm" leftSection={<TbTestPipe size={11} />}>
+              Dummy
+            </Badge>
+          )}
+          <Badge color={cfg.color} variant="light" radius="sm" size="sm">
+            {cfg.label}
+          </Badge>
+        </Group>
+      </Group>
+
+      <Text fw={800} size="lg" mb={2}>
+        {village.name}
+      </Text>
+      <Group gap={4} mb="md">
+        <TbMapPin size={13} color="var(--mantine-color-dimmed)" />
+        <Text size="xs" c="dimmed">
+          No location details available
+        </Text>
+      </Group>
+
+      <Text size="xs" c="dimmed" fw={600} mb={6} style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+        -
+      </Text>
+
+      <Divider my="sm" />
+
+      <Stack gap={6}>
+        <Group gap="xs">
+          <TbUser size={13} color="var(--mantine-color-dimmed)" />
+          <Text size="xs" c="dimmed">Village Head:</Text>
+          <Text size="xs" fw={600}>{village.perbekel || '-'}</Text>
+        </Group>
+        <Group gap="xs">
+          <TbCalendar size={13} color="var(--mantine-color-dimmed)" />
+          <Text size="xs" c="dimmed">Created:</Text>
+          <Text size="xs" fw={600}>{village.createdAt}</Text>
+        </Group>
+        {/* <Group gap="xs">
+          <Avatar size={14} radius="xl" color="brand-blue" src={null} />
+          <Text size="xs" c="dimmed">By:</Text>
+          <Text size="xs" fw={600}>{village.createdBy}</Text>
+        </Group> */}
+      </Stack>
+
+      <Button
+        variant="light"
+        color="brand-blue"
+        size="compact-sm"
+        fullWidth
+        mt="md"
+        radius="md"
+        rightSection={<TbArrowRight size={14} />}
+        styles={{ root: { fontSize: 12 } }}
+      >
+        View Details
+      </Button>
+    </Card>
+  )
+}
+
+function VillageListRow({ village, onClick }: { village: APIVillage; onClick: () => void }) {
+  const status = village.isActive ? 'active' : 'inactive'
+  const cfg = statusConfig[status as keyof typeof statusConfig]
+  return (
+    <Paper
+      withBorder
+      radius="lg"
+      p="md"
+      className="village-list-row"
+      onClick={onClick}
+      style={{ cursor: 'pointer' }}
+    >
+      <Group justify="space-between" wrap="nowrap">
+        <Group gap="md" wrap="nowrap">
+          <ThemeIcon
+            size={40}
+            radius="md"
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+          >
+            <TbHome2 size={18} />
+          </ThemeIcon>
+          <Stack gap={2}>
+            <Group gap="sm">
+              <Text fw={700} size="sm">{village.name}</Text>
+              {village.isDummy && (
+                <Badge color="yellow" variant="light" radius="sm" size="xs" leftSection={<TbTestPipe size={10} />}>
+                  Dummy
+                </Badge>
+              )}
+              <Badge color={cfg.color} variant="light" radius="sm" size="xs">
+                {cfg.label}
+              </Badge>
+            </Group>
+            <Group gap={6}>
+              <TbMapPin size={12} color="var(--mantine-color-dimmed)" />
+              <Text size="xs" c="dimmed">
+                No location details available
+              </Text>
+            </Group>
+          </Stack>
+        </Group>
+
+        <Group gap="xl" visibleFrom="md">
+          <Stack gap={0} align="center">
+            <Text size="xs" c="dimmed" fw={600} style={{ textTransform: 'uppercase', letterSpacing: '0.04em' }}>Village Head</Text>
+            <Text size="xs" fw={600}>{village.perbekel || '-'}</Text>
+          </Stack>
+          <Stack gap={0} align="center">
+            <Text size="xs" c="dimmed" fw={600} style={{ textTransform: 'uppercase', letterSpacing: '0.04em' }}>Created</Text>
+            <Text size="xs" fw={600}>{village.createdAt}</Text>
+          </Stack>
+          {/* <Stack gap={0} align="center">
+            <Text size="xs" c="dimmed" fw={600} style={{ textTransform: 'uppercase', letterSpacing: '0.04em' }}>Oleh</Text>
+            <Group gap={4}>
+              <Avatar size={16} radius="xl" color="brand-blue" src={null} />
+              <Text size="xs" fw={600}>{village.createdBy}</Text>
+            </Group>
+          </Stack> */}
+        </Group>
+
+        <ActionIcon variant="light" color="brand-blue" radius="md">
+          <TbChevronRight size={16} />
+        </ActionIcon>
+      </Group>
+    </Paper>
+  )
+}
+
+function AppVillagesIndexPage() {
+  const { appId } = useParams({ from: '/apps/$appId' })
+  const navigate = useNavigate()
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
+  const [createModalOpened, { open: openCreateModal, close: closeCreateModal }] = useDisclosure(false)
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState('')
+  const [searchQuery, setSearchQuery] = useState('')
+
+  // Form State
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [form, setForm] = useState({
+    name: '',
+    desc: '',
+    username: '',
+    phone: '',
+    nik: '',
+    email: '',
+    gender: ''
+  })
+
+  const isDesaPlus = appId === 'desa-plus'
+  const apiUrl = isDesaPlus ? API_URLS.getVillages(page, searchQuery) : null
+
+  const { data: response, error, isLoading, mutate } = useSWR(apiUrl, fetcher)
+  const villages: APIVillage[] = response?.data || []
+
+  const handleVillageClick = (villageId: string) => {
+    navigate({ to: '/apps/$appId/villages/$villageId', params: { appId, villageId } })
+  }
+
+  const handleSearchChange = (val: string) => {
+    setSearch(val)
+    if (val.length >= 3 || val.length === 0) {
+      setSearchQuery(val)
+      setPage(1)
+    }
+  }
+
+  const handleClearSearch = () => {
+    setSearch('')
+    setSearchQuery('')
+    setPage(1)
+  }
+
+  const handleCreateVillage = async () => {
+    const requiredFields = ['name', 'desc', 'username', 'phone', 'nik', 'email', 'gender'] as const
+    const isFormValid = requiredFields.every(field => !!form[field])
+
+    if (!isFormValid) {
+      notifications.show({
+        title: 'Validation Error',
+        message: 'All fields are required to register a new village.',
+        color: 'red'
+      })
+      return
+    }
+
+    setIsSubmitting(true)
+    try {
+      const res = await fetch(API_URLS.createVillages(), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(form)
+      })
+
+      if (res.ok) {
+        await fetch(API_URLS.createLog(), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: 'CREATE', message: `Desa baru didaftarkan: ${form.name}` })
+        }).catch(console.error)
+
+        notifications.show({
+          title: 'Success',
+          message: 'Village has been successfully registered.',
+          color: 'teal'
+        })
+        mutate() // Refresh list
+        closeCreateModal()
+        setForm({
+          name: '',
+          desc: '',
+          username: '',
+          phone: '',
+          nik: '',
+          email: '',
+          gender: ''
+        })
+      } else {
+        notifications.show({
+          title: 'Error',
+          message: 'Failed to create village. Please try again.',
+          color: 'red'
+        })
+      }
+    } catch (e) {
+      notifications.show({
+        title: 'Network Error',
+        message: 'Unable to reach API server.',
+        color: 'red'
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  if (!isDesaPlus) {
+    return (
+      <Container size="xl" py="xl">
+        <Paper p="xl" radius="xl" className="glass" style={{ textAlign: 'center' }}>
+          <TbBuildingCommunity size={48} color="gray" opacity={0.5} />
+          <Title order={3} mt="md">General Management</Title>
+          <Text c="dimmed">This feature is currently customized for Desa+. Other apps coming soon.</Text>
+        </Paper>
+      </Container>
+    )
+  }
+
+  return (
+    <Stack gap="xl">
+      <Modal 
+        opened={createModalOpened} 
+        onClose={closeCreateModal} 
+        title={<Text fw={700} size="lg">Register New Village</Text>}
+        radius="xl"
+        size="lg"
+      >
+        <Stack gap="md">
+          <Box>
+            <Text size="xs" fw={700} c="dimmed" mb={8} style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+              Village Data
+            </Text>
+            <Stack gap="sm">
+              <TextInput 
+                label="Village Name" 
+                placeholder="e.g. Darmasaba" 
+                required
+                value={form.name}
+                onChange={(e) => setForm(prev => ({ ...prev, name: e.currentTarget.value }))}
+              />
+              <Textarea 
+                label="Description" 
+                placeholder="Short description about the village..." 
+                minRows={3}
+                required
+                value={form.desc}
+                onChange={(e) => setForm(prev => ({ ...prev, desc: e.currentTarget.value }))}
+              />
+            </Stack>
+          </Box>
+
+          <Divider label="Village Head Information" labelPosition="center" my="sm" />
+
+          <Box>
+            <SimpleGrid cols={2} spacing="md">
+              <TextInput 
+                label="Head Name (Username)" 
+                placeholder="Full name of village head" 
+                required
+                value={form.username}
+                onChange={(e) => setForm(prev => ({ ...prev, username: e.currentTarget.value }))}
+              />
+              <TextInput 
+                label="NIK" 
+                placeholder="16-digit identity number"
+                required
+                value={form.nik}
+                onChange={(e) => setForm(prev => ({ ...prev, nik: e.currentTarget.value }))}
+              />
+            </SimpleGrid>
+
+            <SimpleGrid cols={2} spacing="md" mt="sm">
+              <TextInput 
+                label="Email" 
+                placeholder="Email address"
+                required
+                value={form.email}
+                onChange={(e) => setForm(prev => ({ ...prev, email: e.currentTarget.value }))}
+              />
+              <TextInput 
+                label="Phone" 
+                placeholder="Active WhatsApp number"
+                required
+                value={form.phone}
+                onChange={(e) => setForm(prev => ({ ...prev, phone: e.currentTarget.value }))}
+              />
+            </SimpleGrid>
+
+            <Select 
+              label="Gender" 
+              placeholder="Select gender"
+              data={[{ label: 'Male', value: 'M' }, { label: 'Female', value: 'F' }]}
+              mt="sm"
+              required
+              value={form.gender}
+              onChange={(val) => setForm(prev => ({ ...prev, gender: val || '' }))}
+            />
+          </Box>
+
+          <Button 
+            fullWidth 
+            mt="lg" 
+            radius="md" 
+            size="md"
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+            loading={isSubmitting}
+            onClick={handleCreateVillage}
+          >
+            Create Village
+          </Button>
+        </Stack>
+      </Modal>
+
+      <Group justify="space-between" align="flex-end">
+        <Stack gap={4}>
+          <Title order={3}>Village List</Title>
+          <Text size="sm" c="dimmed">
+            {isLoading ? 'Loading data...' : `${response?.totalData || 0} villages registered in the Desa+ platform`}
+          </Text>
+        </Stack>
+        <Button
+          variant="gradient"
+          gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+          leftSection={<TbPlus size={18} />}
+          radius="md"
+          onClick={openCreateModal}
+        >
+          Create New Village
+        </Button>
+      </Group>
+
+      <Group justify="space-between">
+        <TextInput
+          placeholder="Search village, district, city..."
+          leftSection={<TbSearch size={16} />}
+          rightSection={
+            search ? (
+              <ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="sm">
+                <TbX size={14} />
+              </ActionIcon>
+            ) : null
+          }
+          value={search}
+          onChange={(e) => handleSearchChange(e.currentTarget.value)}
+          radius="md"
+          style={{ flex: 1, maxWidth: 400 }}
+        />
+        <SegmentedControl
+          value={viewMode}
+          onChange={(v) => setViewMode(v as 'grid' | 'list')}
+          data={[
+            { value: 'grid', label: <Tooltip label="Grid View"><Box><TbLayoutGrid size={16} /></Box></Tooltip> },
+            { value: 'list', label: <Tooltip label="List View"><Box><TbList size={16} /></Box></Tooltip> },
+          ]}
+          radius="md"
+        />
+      </Group>
+
+      {isLoading ? (
+        <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
+          {[1, 2, 3].map((i) => (
+            <Card key={i} withBorder radius="xl" padding="lg" style={{ height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <Text c="dimmed">Loading...</Text>
+            </Card>
+          ))}
+        </SimpleGrid>
+      ) : error ? (
+        <Paper p="xl" radius="xl" className="glass" style={{ textAlign: 'center' }}>
+          <TbBuildingCommunity size={40} color="red" opacity={0.4} />
+          <Text c="red" mt="md">Failed to load data from API.</Text>
+        </Paper>
+      ) : villages.length === 0 ? (
+        <Paper p="xl" radius="xl" className="glass" style={{ textAlign: 'center' }}>
+          <TbBuildingCommunity size={40} color="gray" opacity={0.4} />
+          <Text c="dimmed" mt="md">No villages match your search.</Text>
+        </Paper>
+      ) : viewMode === 'grid' ? (
+        <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
+          {villages.map((village) => (
+            <VillageGridCard
+              key={village.id}
+              village={village}
+              onClick={() => handleVillageClick(village.id)}
+            />
+          ))}
+        </SimpleGrid>
+      ) : (
+        <Stack gap="sm">
+          {villages.map((village) => (
+            <VillageListRow
+              key={village.id}
+              village={village}
+              onClick={() => handleVillageClick(village.id)}
+            />
+          ))}
+        </Stack>
+      )}
+
+      {!isLoading && !error && response?.totalPage > 0 && (
+        <Group justify="center" mt="xl">
+          <Pagination
+            value={page}
+            onChange={setPage}
+            total={response.totalPage}
+            radius="md"
+            withEdges={false}
+          />
+        </Group>
+      )}
+    </Stack>
+  )
+}

src/frontend/routes/apps.$appId.villages.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/apps/$appId/villages')({
+  component: VillagesLayout,
+})
+
+function VillagesLayout() {
+  return <Outlet />
+}

src/frontend/routes/apps.index.tsx

@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { Container, Stack, Title, Text, SimpleGrid, Group, Button, TextInput, Loader } from '@mantine/core'
+import { useDebouncedValue } from '@mantine/hooks'
+import { useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { TbPlus, TbSearch } from 'react-icons/tb'
 import { DashboardLayout } from '@/frontend/components/DashboardLayout'
@@ -10,9 +12,12 @@ export const Route = createFileRoute('/apps/')({
 })
 
 function AppsPage() {
+  const [search, setSearch] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 300)
+
   const { data: apps, isLoading } = useQuery({
-    queryKey: ['apps'],
-    queryFn: () => fetch('/api/apps').then((r) => r.json()),
+    queryKey: ['apps', debouncedSearch],
+    queryFn: () => fetch(`/api/apps?search=${encodeURIComponent(debouncedSearch)}`).then((r) => r.json()),
   })
 
   return (
@@ -24,14 +29,14 @@ function AppsPage() {
               <Title order={2} className="gradient-text">Applications</Title>
               <Text size="sm" c="dimmed">Manage and monitor all your mobile applications from one place.</Text>
             </Stack>
-            <Button
+            {/* <Button
               variant="gradient"
               gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
               leftSection={<TbPlus size={18} />}
               radius="md"
             >
               Add New Application
-            </Button>
+            </Button> */}
           </Group>
 
           <Group>
@@ -40,6 +45,8 @@ function AppsPage() {
               leftSection={<TbSearch size={16} />}
               style={{ flex: 1 }}
               radius="md"
+              value={search}
+              onChange={(e) => setSearch(e.currentTarget.value)}
             />
           </Group>
 

src/frontend/routes/bug-reports.tsx

@@ -0,0 +1,677 @@
+import { DashboardLayout } from '@/frontend/components/DashboardLayout'
+import { API_URLS } from '@/frontend/config/api'
+import {
+  Accordion,
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  Code,
+  Collapse,
+  Container,
+  FileInput,
+  Group,
+  Image,
+  Loader,
+  Modal,
+  Pagination,
+  Paper,
+  Select,
+  SimpleGrid,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+  ThemeIcon,
+  Timeline,
+  Title,
+  Tooltip,
+} from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
+import { notifications } from '@mantine/notifications'
+import { useQuery } from '@tanstack/react-query'
+import { createFileRoute } from '@tanstack/react-router'
+import dayjs from 'dayjs'
+import { useState } from 'react'
+import {
+  TbAlertTriangle,
+  TbBug,
+  TbCircleCheck,
+  TbCircleX,
+  TbDeviceDesktop,
+  TbDeviceMobile,
+  TbFilter,
+  TbHistory,
+  TbPhoto,
+  TbPlus,
+  TbSearch,
+} from 'react-icons/tb'
+
+export const Route = createFileRoute('/bug-reports')({
+  component: ListErrorsPage,
+})
+
+const STATUS_COLOR: Record<string, string> = {
+  OPEN: 'red',
+  IN_PROGRESS: 'blue',
+  ON_HOLD: 'orange',
+  RESOLVED: 'teal',
+  RELEASED: 'green',
+  CLOSED: 'gray',
+}
+const STATUS_LABEL: Record<string, string> = {
+  OPEN: 'Open',
+  ON_HOLD: 'On Hold',
+  IN_PROGRESS: 'In Progress',
+  RESOLVED: 'Resolved',
+  RELEASED: 'Released',
+  CLOSED: 'Closed',
+}
+
+function ListErrorsPage() {
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState('')
+  const [app, setApp] = useState('all')
+  const [status, setStatus] = useState('all')
+
+  const [showLogs, setShowLogs] = useState<Record<string, boolean>>({})
+  const [showStackTrace, setShowStackTrace] = useState<Record<string, boolean>>({})
+
+  const toggleLogs = (bugId: string) => setShowLogs((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
+  const toggleStackTrace = (bugId: string) => setShowStackTrace((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
+
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ['bugs', { page, search, app, status }],
+    queryFn: () => fetch(API_URLS.getBugs(page, search, app, status)).then((r) => r.json()),
+  })
+
+  const { data: appsList } = useQuery({
+    queryKey: ['apps-list'],
+    queryFn: () => fetch('/api/apps').then((r) => r.json()),
+  })
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null)
+
+  const [opened, { open, close }] = useDisclosure(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [imageFiles, setImageFiles] = useState<File[]>([])
+  const [createForm, setCreateForm] = useState({
+    description: '',
+    app: 'desa-plus',
+    source: 'USER',
+    affectedVersion: '',
+    device: '',
+    os: '',
+    stackTrace: '',
+  })
+
+  const [updateModalOpened, { open: openUpdateModal, close: closeUpdateModal }] = useDisclosure(false)
+  const [isUpdating, setIsUpdating] = useState(false)
+  const [selectedBugId, setSelectedBugId] = useState<string | null>(null)
+  const [updateForm, setUpdateForm] = useState({ status: '', description: '' })
+
+  const [feedbackModalOpened, { open: openFeedbackModal, close: closeFeedbackModal }] = useDisclosure(false)
+  const [isUpdatingFeedback, setIsUpdatingFeedback] = useState(false)
+  const [feedbackForm, setFeedbackForm] = useState({ feedBack: '' })
+
+  const handleUpdateFeedback = async () => {
+    if (!selectedBugId || !feedbackForm.feedBack) return
+    setIsUpdatingFeedback(true)
+    try {
+      const res = await fetch(API_URLS.updateBugFeedback(selectedBugId), {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(feedbackForm),
+      })
+      if (res.ok) {
+        notifications.show({ title: 'Success', message: 'Feedback has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
+        refetch()
+        closeFeedbackModal()
+        setFeedbackForm({ feedBack: '' })
+      } else {
+        throw new Error()
+      }
+    } catch {
+      notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
+    } finally {
+      setIsUpdatingFeedback(false)
+    }
+  }
+
+  const handleUpdateStatus = async () => {
+    if (!selectedBugId || !updateForm.status) return
+    setIsUpdating(true)
+    try {
+      const res = await fetch(API_URLS.updateBugStatus(selectedBugId), {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(updateForm),
+      })
+      if (res.ok) {
+        notifications.show({ title: 'Success', message: 'Status has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
+        refetch()
+        closeUpdateModal()
+        setUpdateForm({ status: '', description: '' })
+      } else {
+        throw new Error()
+      }
+    } catch {
+      notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
+    } finally {
+      setIsUpdating(false)
+    }
+  }
+
+  const handleCreateBug = async () => {
+    if (!createForm.description || !createForm.affectedVersion || !createForm.device || !createForm.os) {
+      notifications.show({ title: 'Validation Error', message: 'Please fill in all required fields.', color: 'red' })
+      return
+    }
+    setIsSubmitting(true)
+    try {
+      const imageUrls: string[] = []
+      for (const file of imageFiles) {
+        const formData = new FormData()
+        formData.append('file', file)
+        const uploadRes = await fetch(API_URLS.uploadImage(), { method: 'POST', body: formData })
+        if (!uploadRes.ok) throw new Error('Failed to upload image')
+        const { url } = await uploadRes.json()
+        imageUrls.push(url)
+      }
+      const res = await fetch(API_URLS.createBug(), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ...createForm, imageUrls: imageUrls.length ? imageUrls : undefined }),
+      })
+      if (res.ok) {
+        await fetch(API_URLS.createLog(), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: 'CREATE', message: `New error report added: ${createForm.description.substring(0, 50)}${createForm.description.length > 50 ? '...' : ''}` }),
+        }).catch(console.error)
+        notifications.show({ title: 'Success', message: 'Error report has been created.', color: 'teal', icon: <TbCircleCheck size={18} /> })
+        refetch()
+        close()
+        setImageFiles([])
+        setCreateForm({ description: '', app: 'desa-plus', source: 'USER', affectedVersion: '', device: '', os: '', stackTrace: '' })
+      } else {
+        throw new Error()
+      }
+    } catch {
+      notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const bugs = data?.data || []
+  const totalPages = data?.totalPages || 1
+
+  return (
+    <DashboardLayout>
+      <Container size="xl" py="lg">
+        <Stack gap="xl">
+          <Group justify="space-between" align="flex-start">
+            <Stack gap={4}>
+              <Title order={2} className="gradient-text">Error Reports</Title>
+              <Text size="sm" c="dimmed">
+                Centralized error tracking and analysis for all applications.
+              </Text>
+            </Stack>
+            <Button
+              variant="gradient"
+              gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+              leftSection={<TbPlus size={18} />}
+              size="sm"
+              onClick={open}
+            >
+              Report Error
+            </Button>
+          </Group>
+
+          {/* Image Preview Modal */}
+          <Modal
+            opened={!!previewImage}
+            onClose={() => setPreviewImage(null)}
+            size="xl"
+            radius="md"
+            padding={0}
+            withCloseButton={false}
+            overlayProps={{ backgroundOpacity: 0.75, blur: 6 }}
+            styles={{ content: { background: 'transparent', boxShadow: 'none' } }}
+            onClick={() => setPreviewImage(null)}
+          >
+            {previewImage && (
+              <Image src={previewImage} alt="Preview" fit="contain" style={{ maxHeight: '85vh', width: '100%' }} />
+            )}
+          </Modal>
+
+          <Modal
+            opened={updateModalOpened}
+            onClose={closeUpdateModal}
+            title={<Text fw={700} size="lg">Update Bug Status</Text>}
+            radius="md"
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+          >
+            <Stack gap="md">
+              <Select
+                label="New Status"
+                placeholder="Select a status"
+                required
+                data={Object.entries(STATUS_LABEL).map(([value, label]) => ({ value, label }))}
+                value={updateForm.status}
+                onChange={(val) => setUpdateForm({ ...updateForm, status: val || '' })}
+              />
+              <Textarea
+                label="Update Note (Optional)"
+                placeholder="e.g. Fixed in commit abc123 / Assigned to team"
+                minRows={3}
+                value={updateForm.description}
+                onChange={(e) => setUpdateForm({ ...updateForm, description: e.target.value })}
+              />
+              <Button
+                fullWidth
+                mt="md"
+                variant="gradient"
+                gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+                loading={isUpdating}
+                onClick={handleUpdateStatus}
+              >
+                Save Changes
+              </Button>
+            </Stack>
+          </Modal>
+
+          <Modal
+            opened={feedbackModalOpened}
+            onClose={closeFeedbackModal}
+            title={<Text fw={700} size="lg">Developer Feedback</Text>}
+            radius="md"
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+          >
+            <Stack gap="md">
+              <Textarea
+                data-autofocus
+                label="Feedback / Note"
+                placeholder="Explain the issue, root cause, or resolution..."
+                required
+                minRows={4}
+                value={feedbackForm.feedBack}
+                onChange={(e) => setFeedbackForm({ feedBack: e.target.value })}
+              />
+              <Button
+                fullWidth
+                mt="md"
+                variant="gradient"
+                gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+                loading={isUpdatingFeedback}
+                onClick={handleUpdateFeedback}
+              >
+                Save Feedback
+              </Button>
+            </Stack>
+          </Modal>
+
+          <Modal
+            opened={opened}
+            onClose={() => { close(); setImageFiles([]) }}
+            title={<Text fw={700} size="lg">Report New Error</Text>}
+            radius="md"
+            size="lg"
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+          >
+            <Stack gap="md">
+              <Textarea
+                label="Description"
+                placeholder="What happened? Describe the error in detail..."
+                required
+                minRows={3}
+                value={createForm.description}
+                onChange={(e) => setCreateForm({ ...createForm, description: e.target.value })}
+              />
+              <SimpleGrid cols={2}>
+                <Select
+                  label="Application"
+                  data={appsList?.map((a: any) => ({ value: a.id, label: a.name })) || []}
+                  value={createForm.app}
+                  onChange={(val) => setCreateForm({ ...createForm, app: val as any })}
+                  placeholder="Select application"
+                  disabled={!appsList}
+                />
+                <Select
+                  label="Source"
+                  data={[
+                    { value: 'USER', label: 'User' },
+                    { value: 'QC', label: 'QC' },
+                    { value: 'SYSTEM', label: 'System' },
+                  ]}
+                  value={createForm.source}
+                  onChange={(val) => setCreateForm({ ...createForm, source: val as any })}
+                />
+              </SimpleGrid>
+              <TextInput
+                label="Affected Version"
+                placeholder="e.g. 2.4.1"
+                required
+                value={createForm.affectedVersion}
+                onChange={(e) => setCreateForm({ ...createForm, affectedVersion: e.target.value })}
+              />
+              <SimpleGrid cols={2}>
+                <TextInput
+                  label="Device"
+                  placeholder="e.g. iPhone 13, Windows PC"
+                  required
+                  value={createForm.device}
+                  onChange={(e) => setCreateForm({ ...createForm, device: e.target.value })}
+                />
+                <TextInput
+                  label="OS"
+                  placeholder="e.g. iOS 15.4, Windows 11"
+                  required
+                  value={createForm.os}
+                  onChange={(e) => setCreateForm({ ...createForm, os: e.target.value })}
+                />
+              </SimpleGrid>
+              <FileInput
+                label="Screenshots (Optional)"
+                placeholder="Click to upload images..."
+                accept="image/*"
+                leftSection={<TbPhoto size={16} />}
+                description="Max 3 images · 5 MB each · JPG, PNG, WEBP"
+                value={imageFiles}
+                onChange={(files) => {
+                  if (files.length > 3) {
+                    notifications.show({ title: 'Error', message: 'Maximum 3 images allowed.', color: 'red' })
+                    return
+                  }
+                  setImageFiles(files)
+                }}
+                clearable
+                multiple
+              />
+              <Textarea
+                label="Stack Trace (Optional)"
+                placeholder="Paste error logs or stack trace here..."
+                style={{ fontFamily: 'monospace' }}
+                minRows={2}
+                value={createForm.stackTrace}
+                onChange={(e) => setCreateForm({ ...createForm, stackTrace: e.target.value })}
+              />
+              <Button
+                fullWidth
+                mt="md"
+                variant="gradient"
+                gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+                loading={isSubmitting}
+                onClick={handleCreateBug}
+              >
+                Submit Error Report
+              </Button>
+            </Stack>
+          </Modal>
+
+          <Paper withBorder radius="2xl" className="glass" p="md">
+            <SimpleGrid cols={{ base: 1, sm: 4 }} mb="lg">
+              <TextInput
+                label="Search"
+                placeholder="Description, device, OS..."
+                leftSection={<TbSearch size={16} />}
+                value={search}
+                onChange={(e) => setSearch(e.currentTarget.value)}
+                radius="md"
+                size="sm"
+              />
+              <Select
+                label="Application"
+                size="sm"
+                data={[
+                  { value: 'all', label: 'All Applications' },
+                  ...(appsList?.map((a: any) => ({ value: a.id, label: a.name })) || []),
+                ]}
+                value={app}
+                onChange={(val) => setApp(val || 'all')}
+                radius="md"
+                disabled={!appsList}
+              />
+              <Select
+                label="Status"
+                size="sm"
+                data={[
+                  { value: 'all', label: 'All Status' },
+                  ...Object.entries(STATUS_LABEL).map(([value, label]) => ({ value, label })),
+                ]}
+                value={status}
+                onChange={(val) => setStatus(val || 'all')}
+                radius="md"
+              />
+              <Stack justify="flex-end">
+                <Button
+                  variant="filled"
+                  color="violet"
+                  size="sm"
+                  onClick={() => { setSearch(''); setApp('all'); setStatus('all') }}
+                >
+                  Reset Filters
+                </Button>
+              </Stack>
+            </SimpleGrid>
+
+            {isLoading ? (
+              <Stack align="center" py="xl">
+                <Loader size="md" type="dots" />
+              </Stack>
+            ) : bugs.length === 0 ? (
+              <Stack align="center" py="xl" gap="xs">
+                <TbBug size={40} style={{ opacity: 0.25 }} />
+                <Text fw={600} size="sm">No error reports found</Text>
+                <Text size="sm" c="dimmed">Try adjusting your filters or search terms.</Text>
+              </Stack>
+            ) : (
+              <Accordion variant="separated" radius="xl">
+                {bugs.map((bug: any) => (
+                  <Accordion.Item
+                    key={bug.id}
+                    value={bug.id}
+                    style={{
+                      border: '1px solid var(--mantine-color-default-border)',
+                      background: 'var(--mantine-color-default)',
+                      marginBottom: 12,
+                    }}
+                  >
+                    <Accordion.Control>
+                      <Group wrap="nowrap">
+                        <ThemeIcon
+                          color={STATUS_COLOR[bug.status] ?? 'gray'}
+                          variant="light"
+                          size="lg"
+                          radius="md"
+                        >
+                          <TbAlertTriangle size={20} />
+                        </ThemeIcon>
+                        <Box style={{ flex: 1 }}>
+                          <Group justify="space-between">
+                            <Text size="sm" fw={600} lineClamp={1}>{bug.description}</Text>
+                            <Badge
+                              color={STATUS_COLOR[bug.status] ?? 'gray'}
+                              variant="dot"
+                              size="sm"
+                            >
+                              {STATUS_LABEL[bug.status] ?? bug.status}
+                            </Badge>
+                          </Group>
+                          <Text size="xs" c="dimmed">
+                            {dayjs(bug.createdAt).format('D MMM YYYY, HH:mm')} · {bug.appId?.toUpperCase()} · v{bug.affectedVersion}
+                          </Text>
+                        </Box>
+                      </Group>
+                    </Accordion.Control>
+
+                    <Accordion.Panel>
+                      <Stack gap="lg" py="xs">
+                        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
+                          <Box>
+                            <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Device Metadata</Text>
+                            <Group gap="xs">
+                              {bug.device.toLowerCase().includes('windows') || bug.device.toLowerCase().includes('mac') || bug.device.toLowerCase().includes('pc') ? (
+                                <TbDeviceDesktop size={14} color="gray" />
+                              ) : (
+                                <TbDeviceMobile size={14} color="gray" />
+                              )}
+                              <Text size="xs" fw={500}>{bug.device} ({bug.os})</Text>
+                            </Group>
+                          </Box>
+                          <Box>
+                            <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Source</Text>
+                            <Badge variant="light" color="gray" size="sm">{bug.source}</Badge>
+                          </Box>
+                        </SimpleGrid>
+
+                        {(bug.user || bug.feedBack) && (
+                          <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
+                            {bug.user && (
+                              <Box>
+                                <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Reported By</Text>
+                                <Group gap="xs">
+                                  <Avatar src={bug.user.image} radius="xl" size="sm" color="blue">
+                                    {bug.user.name?.charAt(0).toUpperCase()}
+                                  </Avatar>
+                                  <Text size="sm">{bug.user.name}</Text>
+                                </Group>
+                              </Box>
+                            )}
+                            {bug.feedBack && (
+                              <Box>
+                                <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Developer Feedback</Text>
+                                <Text size="sm" style={{ whiteSpace: 'pre-wrap' }}>{bug.feedBack}</Text>
+                              </Box>
+                            )}
+                          </SimpleGrid>
+                        )}
+
+                        {bug.stackTrace && (
+                          <Box>
+                            <Group justify="space-between" mb={showStackTrace[bug.id] ? 8 : 0}>
+                              <Text size="xs" fw={700} c="dimmed" tt="uppercase">Stack Trace</Text>
+                              <Button variant="subtle" size="compact-xs" color="gray" onClick={() => toggleStackTrace(bug.id)}>
+                                {showStackTrace[bug.id] ? 'Hide' : 'Show'}
+                              </Button>
+                            </Group>
+                            <Collapse in={showStackTrace[bug.id]}>
+                              <Code
+                                block
+                                color="red"
+                                style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap', fontSize: 11, border: '1px solid var(--mantine-color-default-border)' }}
+                              >
+                                {bug.stackTrace}
+                              </Code>
+                            </Collapse>
+                          </Box>
+                        )}
+
+                        {bug.images && bug.images.length > 0 && (
+                          <Box>
+                            <Group gap="xs" mb={8}>
+                              <TbPhoto size={14} color="gray" />
+                              <Text size="xs" fw={700} c="dimmed" tt="uppercase">
+                                Attached Images ({bug.images.length})
+                              </Text>
+                            </Group>
+                            <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="xs">
+                              {bug.images.map((img: any) => (
+                                <Tooltip key={img.id} label="Click to preview" withArrow>
+                                  <Paper
+                                    withBorder
+                                    radius="md"
+                                    style={{ overflow: 'hidden', cursor: 'zoom-in' }}
+                                    onClick={() => setPreviewImage(img.imageUrl)}
+                                  >
+                                    <Image src={img.imageUrl} alt="Error screenshot" height={100} fit="cover" />
+                                  </Paper>
+                                </Tooltip>
+                              ))}
+                            </SimpleGrid>
+                          </Box>
+                        )}
+
+                        {bug.logs && bug.logs.length > 0 && (
+                          <Box>
+                            <Group justify="space-between" mb={showLogs[bug.id] ? 12 : 0}>
+                              <Group gap="xs">
+                                <TbHistory size={14} color="gray" />
+                                <Text size="xs" fw={700} c="dimmed" tt="uppercase">
+                                  Activity Log ({bug.logs.length})
+                                </Text>
+                              </Group>
+                              <Button variant="subtle" size="compact-xs" color="gray" onClick={() => toggleLogs(bug.id)}>
+                                {showLogs[bug.id] ? 'Hide' : 'Show'}
+                              </Button>
+                            </Group>
+                            <Collapse in={showLogs[bug.id]}>
+                              <Timeline active={bug.logs.length - 1} bulletSize={24} lineWidth={2} mt="md">
+                                {bug.logs.map((log: any) => (
+                                  <Timeline.Item
+                                    key={log.id}
+                                    bullet={
+                                      <Badge size="xs" circle color={STATUS_COLOR[log.status] ?? 'blue'}> </Badge>
+                                    }
+                                    title={
+                                      <Text size="sm" fw={600}>
+                                        {STATUS_LABEL[log.status] ?? log.status}
+                                      </Text>
+                                    }
+                                  >
+                                    <Text size="xs" c="dimmed" mb={4}>
+                                      {dayjs(log.createdAt).format('D MMM YYYY, HH:mm')} · {log.user?.name ?? 'Unknown'}
+                                    </Text>
+                                    <Text size="sm">{log.description}</Text>
+                                  </Timeline.Item>
+                                ))}
+                              </Timeline>
+                            </Collapse>
+                          </Box>
+                        )}
+
+                        <Group justify="flex-end" pt="sm">
+                          <Button
+                            variant="light"
+                            size="compact-sm"
+                            color="blue"
+                            onClick={() => {
+                              setSelectedBugId(bug.id)
+                              setFeedbackForm({ feedBack: bug.feedBack || '' })
+                              openFeedbackModal()
+                            }}
+                          >
+                            Developer Feedback
+                          </Button>
+                          <Button
+                            variant="light"
+                            size="compact-sm"
+                            color="teal"
+                            onClick={() => {
+                              setSelectedBugId(bug.id)
+                              setUpdateForm({ status: bug.status, description: '' })
+                              openUpdateModal()
+                            }}
+                          >
+                            Update Status
+                          </Button>
+                        </Group>
+                      </Stack>
+                    </Accordion.Panel>
+                  </Accordion.Item>
+                ))}
+              </Accordion>
+            )}
+
+            {totalPages > 1 && (
+              <Group justify="center" mt="xl">
+                <Pagination total={totalPages} value={page} onChange={setPage} size="sm" radius="xl" />
+              </Group>
+            )}
+          </Paper>
+        </Stack>
+      </Container>
+    </DashboardLayout>
+  )
+}

src/frontend/routes/dashboard.tsx

@@ -1,23 +1,24 @@
-import { useQuery } from '@tanstack/react-query'
+import { AppCard } from '@/frontend/components/AppCard'
+import { DashboardLayout } from '@/frontend/components/DashboardLayout'
+import { StatsCard } from '@/frontend/components/StatsCard'
+import { useSession } from '@/frontend/hooks/useAuth'
 import {
   Badge,
   Button,
   Container,
   Group,
+  Loader,
+  Paper,
   SimpleGrid,
   Stack,
+  Table,
   Text,
   Title,
-  Paper,
-  Table,
-  Loader,
+  Tooltip,
 } from '@mantine/core'
-import { createFileRoute, redirect, Link } from '@tanstack/react-router'
-import { TbActivity, TbApps, TbMessageReport, TbUsers, TbChevronRight } from 'react-icons/tb'
-import { useLogout, useSession } from '@/frontend/hooks/useAuth'
-import { DashboardLayout } from '@/frontend/components/DashboardLayout'
-import { StatsCard } from '@/frontend/components/StatsCard'
-import { AppCard } from '@/frontend/components/AppCard'
+import { useQuery } from '@tanstack/react-query'
+import { createFileRoute, Link, redirect } from '@tanstack/react-router'
+import { TbAlertCircle, TbApps, TbChevronRight, TbMessageReport, TbUsers } from 'react-icons/tb'
 
 export const Route = createFileRoute('/dashboard')({
   beforeLoad: async ({ context }) => {
@@ -27,7 +28,6 @@ export const Route = createFileRoute('/dashboard')({
         queryFn: () => fetch('/api/auth/session', { credentials: 'include' }).then((r) => r.json()),
       })
       if (!data?.user) throw redirect({ to: '/login' })
-      if (data.user.role !== 'SUPER_ADMIN') throw redirect({ to: '/profile' })
     } catch (e) {
       if (e instanceof Error) throw redirect({ to: '/login' })
       throw e
@@ -36,11 +36,38 @@ export const Route = createFileRoute('/dashboard')({
   component: DashboardPage,
 })
 
-const recentErrors = [
-  { id: 1, app: 'Desa+', message: 'NullPointerException at village_sync.dart:45', version: '2.4.1', time: '2 mins ago', severity: 'critical' },
-  { id: 2, app: 'E-Commerce', message: 'Failed to load checkout session', version: '1.8.0', time: '15 mins ago', severity: 'high' },
-  { id: 3, app: 'Fitness App', message: 'SocketException: Connection timed out', version: '0.9.5', time: '1 hour ago', severity: 'medium' },
-]
+function getGreeting() {
+  const hour = new Date().getHours()
+  if (hour < 12) return 'Good morning'
+  if (hour < 17) return 'Good afternoon'
+  return 'Good evening'
+}
+
+function formatTimeAgo(dateStr: string) {
+  const diff = new Date().getTime() - new Date(dateStr).getTime()
+  const minutes = Math.floor(diff / 60000)
+  if (minutes < 1) return 'Just now'
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days === 1) return 'Yesterday'
+  if (days < 7) return `${days}d ago`
+  return new Date(dateStr).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })
+}
+
+const SEVERITY_COLOR: Record<string, string> = {
+  OPEN: 'red',
+  IN_PROGRESS: 'blue',
+  ON_HOLD: 'orange',
+  RESOLVED: 'teal',
+  RELEASED: 'green',
+  CLOSED: 'gray',
+}
+
+function formatSeverityLabel(s: string) {
+  return s.replace(/_/g, ' ')
+}
 
 function DashboardPage() {
   const { data: sessionData } = useSession()
@@ -56,14 +83,35 @@ function DashboardPage() {
     queryFn: () => fetch('/api/apps').then((r) => r.json()),
   })
 
+  const { data: recentErrors = [], isLoading: recentErrorsLoading } = useQuery({
+    queryKey: ['dashboard', 'recent-errors'],
+    queryFn: () => fetch('/api/dashboard/recent-errors').then((r) => r.json()),
+  })
+
+  const today = new Date().toLocaleDateString('en-GB', {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
+
+  const firstName = user?.name?.split(' ')[0] ?? user?.name
+
   return (
     <DashboardLayout>
       <Container size="xl" py="lg">
         <Stack gap="xl">
-          <Group justify="space-between" align="center">
-            <Stack gap={0}>
-              <Title order={2} className="gradient-text">Overview Dashboard</Title>
-              <Text size="sm" c="dimmed">Welcome back, {user?.name}. Here is what's happening today.</Text>
+          <Group justify="space-between" align="flex-start">
+            <Stack gap={4}>
+              <Text size="xs" c="dimmed" fw={500} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
+                {today}
+              </Text>
+              <Title order={2} className="gradient-text">
+                {getGreeting()}, {firstName}.
+              </Title>
+              <Text size="sm" c="dimmed">
+                Here's a real-time overview of all your monitored applications.
+              </Text>
             </Stack>
             <Button
               variant="gradient"
@@ -72,8 +120,9 @@ function DashboardPage() {
               radius="md"
               component={Link}
               to="/apps"
+              size="sm"
             >
-              Manage All Apps
+              Manage Apps
             </Button>
           </Group>
 
@@ -82,33 +131,43 @@ function DashboardPage() {
           ) : (
             <SimpleGrid cols={{ base: 1, sm: 3 }}>
               <StatsCard
-                title="Total Applications"
-                value={stats?.totalApps || 0}
+                title="Applications"
+                value={stats?.totalApps ?? 0}
+                description="Registered platforms"
                 icon={TbApps}
                 color="brand-blue"
-                trend={{ value: stats?.trends?.totalApps.toString() || '0', positive: true }}
               />
               <StatsCard
-                title="New Errors"
-                value={stats?.newErrors || 0}
+                title="Open Errors"
+                value={stats?.newErrors ?? 0}
+                description="Unresolved bug reports"
                 icon={TbMessageReport}
-                color="brand-purple"
-                trend={{ value: stats?.trends?.newErrors.toString() || '0', positive: false }}
+                color="red"
               />
               <StatsCard
-                title="Active Users"
-                value={stats?.activeUsers || 0}
+                title="Operators"
+                value={stats?.activeUsers ?? 0}
+                description="Active platform users"
                 icon={TbUsers}
                 color="teal"
-                trend={{ value: stats?.trends?.activeUsers.toString() || '0', positive: true }}
               />
             </SimpleGrid>
           )}
 
-          <Group justify="space-between" mt="md">
-            <Title order={3}>Registered Applications</Title>
-            <Button variant="subtle" color="brand-blue" rightSection={<TbChevronRight size={16} />}>
-              View Report
+          <Group justify="space-between" align="flex-end" mt="md">
+            <Stack gap={2}>
+              <Title order={3}>Registered Applications</Title>
+              <Text size="sm" c="dimmed">All monitored apps on this platform.</Text>
+            </Stack>
+            <Button
+              variant="subtle"
+              color="brand-blue"
+              rightSection={<TbChevronRight size={16} />}
+              component={Link}
+              to="/apps"
+              size="sm"
+            >
+              View All
             </Button>
           </Group>
 
@@ -122,45 +181,76 @@ function DashboardPage() {
             </SimpleGrid>
           )}
 
-          <Group justify="space-between" mt="md">
-            <Title order={3}>Recent Error Reports</Title>
-            <Button variant="subtle" color="brand-blue" rightSection={<TbChevronRight size={16} />}>
-              View All Errors
+          <Group justify="space-between" align="flex-end" mt="md">
+            <Stack gap={2}>
+              <Title order={3}>Recent Error Reports</Title>
+              <Text size="sm" c="dimmed">Latest bug submissions across all apps.</Text>
+            </Stack>
+            <Button
+              variant="subtle"
+              color="brand-blue"
+              rightSection={<TbChevronRight size={16} />}
+              component={Link}
+              to="/bug-reports"
+              size="sm"
+            >
+              View All
             </Button>
           </Group>
 
           <Paper withBorder radius="2xl" className="glass" p="md">
-            <Table className="data-table" verticalSpacing="md">
+            <Table className="data-table" verticalSpacing="sm">
               <Table.Thead>
                 <Table.Tr>
-                  <Table.Th>Application</Table.Th>
+                  <Table.Th>App</Table.Th>
                   <Table.Th>Error Message</Table.Th>
                   <Table.Th>Version</Table.Th>
-                  <Table.Th>Time</Table.Th>
-                  <Table.Th>Severity</Table.Th>
+                  <Table.Th>Reported</Table.Th>
+                  <Table.Th>Status</Table.Th>
                 </Table.Tr>
               </Table.Thead>
               <Table.Tbody>
-                {recentErrors.map((error) => (
+                {recentErrorsLoading ? (
+                  <Table.Tr>
+                    <Table.Td colSpan={5} align="center" py="xl">
+                      <Loader size="sm" type="dots" />
+                    </Table.Td>
+                  </Table.Tr>
+                ) : recentErrors.length === 0 ? (
+                  <Table.Tr>
+                    <Table.Td colSpan={5}>
+                      <Stack align="center" gap="xs" py="xl">
+                        <TbAlertCircle size={32} style={{ opacity: 0.25 }} />
+                        <Text c="dimmed" size="sm">No error reports yet — all systems are running smoothly.</Text>
+                      </Stack>
+                    </Table.Td>
+                  </Table.Tr>
+                ) : recentErrors.map((error: any) => (
                   <Table.Tr key={error.id}>
                     <Table.Td>
-                      <Text fw={600} size="sm">{error.app}</Text>
+                      <Text fw={600} size="sm" tt="uppercase">{error.app}</Text>
+                    </Table.Td>
+                    <Table.Td style={{ maxWidth: 280 }}>
+                      <Tooltip label={error.message} multiline maw={320} withArrow position="top-start">
+                        <Text size="sm" c="dimmed" lineClamp={1} style={{ cursor: 'default' }}>
+                          {error.message}
+                        </Text>
+                      </Tooltip>
                     </Table.Td>
                     <Table.Td>
-                      <Text size="sm" c="dimmed">{error.message}</Text>
+                      <Badge variant="light" color="gray" size="sm">v{error.version}</Badge>
                     </Table.Td>
                     <Table.Td>
-                      <Badge variant="light" color="gray">v{error.version}</Badge>
-                    </Table.Td>
-                    <Table.Td>
-                      <Text size="xs" c="dimmed">{error.time}</Text>
+                      <Text size="xs" c="dimmed">{formatTimeAgo(error.time)}</Text>
                     </Table.Td>
                     <Table.Td>
                       <Badge
-                        color={error.severity === 'critical' ? 'red' : error.severity === 'high' ? 'orange' : 'yellow'}
-                        variant="dot"
+                        color={SEVERITY_COLOR[error.severity] ?? 'gray'}
+                        variant="light"
+                        size="sm"
+                        tt="capitalize"
                       >
-                        {error.severity.toUpperCase()}
+                        {formatSeverityLabel(error.severity)}
                       </Badge>
                     </Table.Td>
                   </Table.Tr>

src/frontend/routes/index.tsx

@@ -1,7 +1,7 @@
-import { Button, Container, Group, Stack, Text, Title } from '@mantine/core'
+import { Button, Box, Center, Stack, Text, Title } from '@mantine/core'
 import { Link, createFileRoute } from '@tanstack/react-router'
-import { SiBun } from 'react-icons/si'
-import { TbBrandReact, TbLogin, TbRocket } from 'react-icons/tb'
+import { TbLogin } from 'react-icons/tb'
+import logoUrl from '../../logo.svg'
 
 export const Route = createFileRoute('/')({
   component: HomePage,
@@ -9,28 +9,67 @@ export const Route = createFileRoute('/')({
 
 function HomePage() {
   return (
-    <Container size="sm" py="xl">
-      <Stack align="center" gap="lg">
-        <Group gap="lg">
-          <SiBun size={64} color="#fbf0df" />
-          <TbBrandReact size={64} color="#61dafb" />
-        </Group>
+    <Box style={{ minHeight: '100vh', background: '#1a1a2e', position: 'relative', overflow: 'hidden' }}>
+      {/* background blobs */}
+      <Box style={{
+        position: 'absolute', top: '-15%', left: '-10%',
+        width: 500, height: 500, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', bottom: '-20%', right: '-10%',
+        width: 600, height: 600, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', top: '50%', left: '60%',
+        width: 300, height: 300, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
 
-        <Title order={1}>Bun + Elysia + Vite + React</Title>
+      <Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
+        <Stack align="center" gap="xl">
+          <img
+            src={logoUrl}
+            width={72}
+            height={72}
+            alt="logo"
+            style={{ borderRadius: 20, boxShadow: '0 4px 32px rgba(124,58,237,0.5)', display: 'block' }}
+          />
 
-        <Text c="dimmed" ta="center" maw={480}>
-          Full-stack starter template with Mantine UI, TanStack Router, and session-based auth.
-        </Text>
+          <Stack align="center" gap={8}>
+            <Title
+              order={1}
+              c="white"
+              fw={800}
+              ta="center"
+              style={{ fontSize: '2.6rem', letterSpacing: '-0.5px', lineHeight: 1.15 }}
+            >
+              Monitoring System
+            </Title>
+            <Text c="dimmed" ta="center" size="md" maw={320} lh={1.6}>
+              Pantau semua aplikasi dalam satu tempat, real-time.
+            </Text>
+          </Stack>
 
-        <Group>
-          <Button component={Link} to="/login" leftSection={<TbLogin size={18} />} variant="filled">
-            Login
+          <Button
+            component={Link}
+            to="/login"
+            leftSection={<TbLogin size={18} />}
+            size="md"
+            style={{
+              background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
+              border: 'none',
+              paddingInline: 32,
+            }}
+          >
+            Masuk
           </Button>
-          <Button component={Link} to="/dashboard" leftSection={<TbRocket size={18} />} variant="light">
-            Dashboard
-          </Button>
-        </Group>
-      </Stack>
-    </Container>
+        </Stack>
+      </Center>
+    </Box>
   )
 }

src/frontend/routes/login.tsx

@@ -1,9 +1,11 @@
+import { useLogin } from '@/frontend/hooks/useAuth'
+import logoUrl from '../../logo.svg'
 import {
   Alert,
+  Box,
   Button,
   Center,
   Divider,
-  Paper,
   PasswordInput,
   Stack,
   Text,
@@ -13,8 +15,7 @@ import {
 import { createFileRoute, redirect } from '@tanstack/react-router'
 import { useState } from 'react'
 import { FcGoogle } from 'react-icons/fc'
-import { TbAlertCircle, TbLogin, TbLock, TbMail } from 'react-icons/tb'
-import { useLogin } from '@/frontend/hooks/useAuth'
+import { TbAlertCircle, TbLock, TbLogin, TbMail } from 'react-icons/tb'
 
 export const Route = createFileRoute('/login')({
   validateSearch: (search: Record<string, unknown>): { error?: string } => ({
@@ -27,7 +28,8 @@ export const Route = createFileRoute('/login')({
         queryFn: () => fetch('/api/auth/session', { credentials: 'include' }).then((r) => r.json()),
       })
       if (data?.user) {
-        throw redirect({ to: data.user.role === 'SUPER_ADMIN' ? '/dashboard' : '/profile' })
+        const dest = data.user.role === 'DEVELOPER' ? '/dev' : data.user.role === 'USER' ? '/profile' : '/dashboard'
+        throw redirect({ to: dest })
       }
     } catch (e) {
       if (e instanceof Error) return
@@ -37,6 +39,14 @@ export const Route = createFileRoute('/login')({
   component: LoginPage,
 })
 
+const OAUTH_ERRORS: Record<string, string> = {
+  google_denied: 'Login dengan Google dibatalkan.',
+  invalid_state: 'Sesi OAuth tidak valid, silakan coba lagi.',
+  token_failed: 'Gagal menukar token Google, silakan coba lagi.',
+  userinfo_failed: 'Gagal mengambil info akun Google, silakan coba lagi.',
+  account_disabled: 'Akun Anda telah dinonaktifkan. Hubungi admin untuk informasi lebih lanjut.',
+}
+
 function LoginPage() {
   const login = useLogin()
   const { error: searchError } = Route.useSearch()
@@ -48,68 +58,117 @@ function LoginPage() {
     login.mutate({ email, password })
   }
 
+  const errorMessage = login.isError
+    ? login.error.message
+    : searchError
+      ? (OAUTH_ERRORS[searchError] ?? 'Login dengan Google gagal, silakan coba lagi.')
+      : null
+
   return (
-    <Center mih="100vh">
-      <Paper shadow="md" p="xl" radius="md" w={400} withBorder>
-        <form onSubmit={handleSubmit}>
-          <Stack gap="md">
-            <Title order={2} ta="center">
-              Login
-            </Title>
+    <Box style={{ minHeight: '100vh', background: '#1a1a2e', position: 'relative', overflow: 'hidden' }}>
+      {/* background blobs */}
+      <Box style={{
+        position: 'absolute', top: '-15%', left: '-10%',
+        width: 500, height: 500, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', bottom: '-20%', right: '-10%',
+        width: 600, height: 600, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', top: '50%', left: '60%',
+        width: 300, height: 300, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
 
-            <Text c="dimmed" size="sm" ta="center">
-              Demo: <strong>superadmin@example.com</strong> / <strong>superadmin123</strong>
-              <br />
-              atau: <strong>user@example.com</strong> / <strong>user123</strong>
-            </Text>
+      <Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
+        <Box
+          p="xl"
+          w={400}
+          style={{
+            background: 'rgba(36,36,36,0.75)',
+            backdropFilter: 'blur(20px)',
+            borderRadius: 20,
+            border: '1px solid rgba(124,58,237,0.35)',
+            boxShadow: '0 0 0 1px rgba(124,58,237,0.1), 0 8px 32px rgba(0,0,0,0.4), 0 0 60px rgba(124,58,237,0.12)',
+          }}
+        >
+          <form onSubmit={handleSubmit}>
+            <Stack gap="md">
+              {/* header */}
+              <Stack gap={8} align="center" mb={4}>
+                <img
+                  src={logoUrl}
+                  width={56}
+                  height={56}
+                  alt="logo"
+                  style={{ borderRadius: 14, boxShadow: '0 4px 20px rgba(124,58,237,0.45)', display: 'block' }}
+                />
+                <Title order={2} fw={700} ta="center" c="white">
+                  Monitoring System
+                </Title>
+                <Text c="dimmed" size="sm" ta="center">
+                  Masuk untuk melanjutkan
+                </Text>
+              </Stack>
 
-            {(login.isError || searchError) && (
-              <Alert icon={<TbAlertCircle size={16} />} color="red" variant="light">
-                {login.isError ? login.error.message : 'Login dengan Google gagal, coba lagi.'}
-              </Alert>
-            )}
+              {errorMessage && (
+                <Alert icon={<TbAlertCircle size={16} />} color="red" variant="light">
+                  {errorMessage}
+                </Alert>
+              )}
 
-            <TextInput
-              label="Email"
-              placeholder="email@example.com"
-              leftSection={<TbMail size={16} />}
-              value={email}
-              onChange={(e) => setEmail(e.currentTarget.value)}
-              required
-            />
+              <TextInput
+                label="Email"
+                placeholder="email@example.com"
+                leftSection={<TbMail size={16} />}
+                value={email}
+                onChange={(e) => setEmail(e.currentTarget.value)}
+                required
+              />
 
-            <PasswordInput
-              label="Password"
-              placeholder="Password"
-              leftSection={<TbLock size={16} />}
-              value={password}
-              onChange={(e) => setPassword(e.currentTarget.value)}
-              required
-            />
+              <PasswordInput
+                label="Password"
+                placeholder="Password"
+                leftSection={<TbLock size={16} />}
+                value={password}
+                onChange={(e) => setPassword(e.currentTarget.value)}
+                required
+              />
 
-            <Button
-              type="submit"
-              fullWidth
-              leftSection={<TbLogin size={18} />}
-              loading={login.isPending}
-            >
-              Sign in
-            </Button>
+              <Button
+                type="submit"
+                fullWidth
+                leftSection={<TbLogin size={18} />}
+                loading={login.isPending}
+                mt={4}
+                style={{
+                  background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
+                  border: 'none',
+                }}
+              >
+                Sign in
+              </Button>
 
-            <Divider label="atau" labelPosition="center" />
+              <Divider label="atau" labelPosition="center" />
 
-            <Button
-              component="a"
-              href="/api/auth/google"
-              fullWidth
-              variant="default"
-              leftSection={<FcGoogle size={18} />}
-            >
-              Login dengan Google
-            </Button>
-          </Stack>
-        </form>
-      </Paper>
-    </Center>
+              <Button
+                variant="default"
+                fullWidth
+                leftSection={<FcGoogle size={18} />}
+                onClick={() => { window.location.href = '/api/auth/google' }}
+              >
+                Continue with Google
+              </Button>
+            </Stack>
+          </form>
+        </Box>
+      </Center>
+    </Box>
   )
 }

src/frontend/routes/logs.tsx

@@ -0,0 +1,241 @@
+import {
+  ActionIcon,
+  Badge,
+  Container,
+  Group,
+  Loader,
+  Pagination,
+  Paper,
+  SegmentedControl,
+  Select,
+  Stack,
+  Table,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core'
+import { DatePickerInput, type DatesRangeValue } from '@mantine/dates'
+import dayjs from 'dayjs'
+import 'dayjs/locale/id'
+import { useMemo, useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { TbHistory, TbRefresh } from 'react-icons/tb'
+import { DashboardLayout } from '@/frontend/components/DashboardLayout'
+import useSWR from 'swr'
+import { API_URLS } from '../config/api'
+
+export const Route = createFileRoute('/logs')({
+  component: GlobalLogsPage,
+})
+
+const fetcher = (url: string) => fetch(url, { credentials: 'include' }).then((r) => r.json())
+
+const LOG_TYPES = ['all', 'LOGIN', 'LOGOUT', 'CREATE', 'UPDATE', 'DELETE'] as const
+const LOG_TYPE_LABEL: Record<string, string> = {
+  all: 'All',
+  LOGIN: 'Login',
+  LOGOUT: 'Logout',
+  CREATE: 'Create',
+  UPDATE: 'Update',
+  DELETE: 'Delete',
+}
+const LOG_TYPE_COLOR: Record<string, string> = {
+  LOGIN: 'teal',
+  LOGOUT: 'gray',
+  CREATE: 'blue',
+  UPDATE: 'yellow',
+  DELETE: 'red',
+}
+
+function GlobalLogsPage() {
+  const [type, setType] = useState('all')
+  const [operatorId, setOperatorId] = useState('all')
+  const [dateRange, setDateRange] = useState<DatesRangeValue>([null, null])
+  const [page, setPage] = useState(1)
+
+  const { data: operatorsData } = useSWR(API_URLS.getLogOperators(), fetcher)
+
+  const operatorOptions = useMemo(() => {
+    if (!operatorsData || !Array.isArray(operatorsData)) return [{ value: 'all', label: 'All users' }]
+    return [
+      { value: 'all', label: 'All users' },
+      ...operatorsData.map((op: any) => ({ value: op.id, label: op.name })),
+    ]
+  }, [operatorsData])
+
+  const dateFrom = dateRange[0] ? dayjs(dateRange[0]).format('YYYY-MM-DD') : undefined
+  const dateTo = dateRange[1] ? dayjs(dateRange[1]).format('YYYY-MM-DD') : undefined
+
+  const { data, isLoading, mutate } = useSWR(
+    API_URLS.getGlobalLogs(page, '', type, operatorId, dateFrom, dateTo),
+    fetcher,
+    { refreshInterval: 10_000 },
+  )
+
+  const logs: any[] = data?.data ?? []
+  const totalPages: number = data?.totalPages ?? 1
+
+  return (
+    <DashboardLayout>
+      <Container size="xl" py="lg">
+        <Stack gap="xl">
+          <Group justify="space-between" align="flex-start">
+            <Stack gap={4}>
+              <Title order={2} className="gradient-text">Activity Logs</Title>
+              <Text size="sm" c="dimmed">
+                Track all user actions and system events across the platform.
+              </Text>
+            </Stack>
+            <Tooltip label="Refresh logs" withArrow>
+              <ActionIcon
+                variant="light"
+                color="brand-blue"
+                size="lg"
+                onClick={() => mutate()}
+                loading={isLoading}
+              >
+                <TbRefresh size={16} />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+
+          <Paper withBorder radius="xl" p="md" className="glass">
+            <Group gap="sm" wrap="wrap" align="flex-end">
+              <Select
+                label="User"
+                placeholder="All users"
+                value={operatorId}
+                onChange={(v) => { setOperatorId(v ?? 'all'); setPage(1) }}
+                data={operatorOptions}
+                w={200}
+                clearable
+                size="sm"
+              />
+              <DatePickerInput
+                type="range"
+                label="Date range"
+                placeholder="Pick a date range"
+                value={dateRange}
+                onChange={(v) => { setDateRange(v); setPage(1) }}
+                locale="id"
+                valueFormat="DD MMM YYYY"
+                clearable
+                w={280}
+                size="sm"
+              />
+              <Stack gap={4}>
+                <Text size="xs" fw={500} c="dimmed">Action type</Text>
+                <SegmentedControl
+                  value={type}
+                  onChange={(v) => { setType(v); setPage(1) }}
+                  size="sm"
+                  data={LOG_TYPES.map((t) => ({ label: LOG_TYPE_LABEL[t] ?? t, value: t }))}
+                />
+              </Stack>
+            </Group>
+          </Paper>
+
+          {isLoading && !data ? (
+            <Group justify="center" py="xl">
+              <Loader type="dots" />
+            </Group>
+          ) : (
+            <Paper withBorder radius="2xl" className="glass" p="md">
+              <Table.ScrollContainer minWidth={600}>
+                <Table
+                  className="data-table"
+                  highlightOnHover
+                  verticalSpacing="sm"
+                  fz="sm"
+                  style={{ tableLayout: 'fixed', width: '100%' }}
+                >
+                  <colgroup>
+                    <col style={{ width: 155 }} />
+                    <col style={{ width: 210 }} />
+                    <col style={{ width: 105 }} />
+                    <col />
+                  </colgroup>
+                  <Table.Thead>
+                    <Table.Tr>
+                      <Table.Th>Timestamp</Table.Th>
+                      <Table.Th>User</Table.Th>
+                      <Table.Th>Action</Table.Th>
+                      <Table.Th>Description</Table.Th>
+                    </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {logs.map((log: any) => (
+                      <Table.Tr key={log.id}>
+                        <Table.Td style={{ whiteSpace: 'nowrap' }}>
+                          <Stack gap={0}>
+                            <Text size="xs" fw={500}>
+                              {dayjs(log.createdAt).locale('id').format('D MMM YYYY')}
+                            </Text>
+                            <Text size="xs" c="dimmed">
+                              {dayjs(log.createdAt).format('HH:mm:ss')}
+                            </Text>
+                          </Stack>
+                        </Table.Td>
+                        <Table.Td>
+                          {log.user ? (
+                            <Stack gap={0}>
+                              <Text size="sm" fw={600} truncate>{log.user.name}</Text>
+                              <Text size="xs" c="dimmed" truncate>{log.user.email}</Text>
+                            </Stack>
+                          ) : (
+                            <Text c="dimmed" size="sm">—</Text>
+                          )}
+                        </Table.Td>
+                        <Table.Td>
+                          <Badge
+                            color={LOG_TYPE_COLOR[log.type] ?? 'gray'}
+                            variant="light"
+                            size="sm"
+                            tt="capitalize"
+                          >
+                            {LOG_TYPE_LABEL[log.type] ?? log.type}
+                          </Badge>
+                        </Table.Td>
+                        <Table.Td>
+                          <Tooltip
+                            label={log.message}
+                            multiline
+                            maw={340}
+                            withArrow
+                            position="top-start"
+                            disabled={(log.message?.length ?? 0) < 60}
+                          >
+                            <Text size="sm" lineClamp={2} style={{ cursor: 'default' }}>
+                              {log.message}
+                            </Text>
+                          </Tooltip>
+                        </Table.Td>
+                      </Table.Tr>
+                    ))}
+                    {logs.length === 0 && (
+                      <Table.Tr>
+                        <Table.Td colSpan={4}>
+                          <Stack align="center" gap="xs" py="xl">
+                            <TbHistory size={32} style={{ opacity: 0.25 }} />
+                            <Text c="dimmed" size="sm">
+                              No activity logs found for the selected filters.
+                            </Text>
+                          </Stack>
+                        </Table.Td>
+                      </Table.Tr>
+                    )}
+                  </Table.Tbody>
+                </Table>
+              </Table.ScrollContainer>
+              {totalPages > 1 && (
+                <Group justify="center" mt="md">
+                  <Pagination total={totalPages} value={page} onChange={setPage} size="sm" />
+                </Group>
+              )}
+            </Paper>
+          )}
+        </Stack>
+      </Container>
+    </DashboardLayout>
+  )
+}

src/frontend/routes/profile.tsx

@@ -1,4 +1,5 @@
 import {
+  Alert,
   Avatar,
   Badge,
   Button,
@@ -10,7 +11,7 @@ import {
   Title,
 } from '@mantine/core'
 import { createFileRoute, redirect } from '@tanstack/react-router'
-import { TbLogout, TbUser } from 'react-icons/tb'
+import { TbClock, TbLogout, TbUser } from 'react-icons/tb'
 import { useLogout, useSession } from '@/frontend/hooks/useAuth'
 
 export const Route = createFileRoute('/profile')({
@@ -30,9 +31,9 @@ export const Route = createFileRoute('/profile')({
 })
 
 const roleBadgeColor: Record<string, string> = {
-  USER: 'blue',
+  USER: 'gray',
   ADMIN: 'violet',
-  SUPER_ADMIN: 'red',
+  DEVELOPER: 'red',
 }
 
 function ProfilePage() {
@@ -56,9 +57,26 @@ function ProfilePage() {
           </Button>
         </Group>
 
+        {user?.role === 'USER' && (
+          <Alert
+            icon={<TbClock size={18} />}
+            title="Akun Menunggu Persetujuan"
+            color="yellow"
+            variant="light"
+            radius="md"
+          >
+            Akun kamu sedang menunggu persetujuan admin. Hubungi admin atau developer untuk mendapatkan akses ke fitur dashboard.
+          </Alert>
+        )}
+
         <Paper withBorder p="xl" radius="md">
           <Stack align="center" gap="md">
-            <Avatar color="blue" radius="xl" size={80}>
+            <Avatar
+              src={user?.image ?? undefined}
+              color="blue"
+              radius="xl"
+              size={80}
+            >
               {user?.name?.charAt(0).toUpperCase()}
             </Avatar>
             <div style={{ textAlign: 'center' }}>

src/frontend/routes/settings.tsx

@@ -1,222 +0,0 @@
-import {
-  ActionIcon,
-  Badge,
-  Button,
-  Card,
-  Container,
-  Group,
-  Stack,
-  Table,
-  Text,
-  TextInput,
-  Title,
-  Paper,
-  Tabs,
-  Avatar,
-  SimpleGrid,
-  ThemeIcon,
-  List,
-  Box,
-  Divider,
-} from '@mantine/core'
-import { createFileRoute } from '@tanstack/react-router'
-import { 
-  TbPlus, 
-  TbSearch, 
-  TbPencil, 
-  TbTrash, 
-  TbUserCheck, 
-  TbShieldCheck,
-  TbAccessPoint,
-  TbCircleCheck,
-  TbClock,
-  TbApps,
-} from 'react-icons/tb'
-import { DashboardLayout } from '@/frontend/components/DashboardLayout'
-import { StatsCard } from '@/frontend/components/StatsCard'
-
-export const Route = createFileRoute('/settings')({
-  component: SettingsPage,
-})
-
-const mockUsers = [
-  { id: 1, name: 'Amel', email: 'amel@company.com', role: 'SUPER_ADMIN', apps: 'All', status: 'Online', lastActive: 'Now' },
-  { id: 2, name: 'John Doe', email: 'john@company.com', role: 'DEVELOPER', apps: 'Desa+, Fitness App', status: 'Offline', lastActive: '2h ago' },
-  { id: 3, name: 'Jane Smith', email: 'jane@company.com', role: 'QA', apps: 'E-Commerce', status: 'Online', lastActive: '12m ago' },
-  { id: 4, name: 'Rahmat Hidayat', email: 'rahmat@company.com', role: 'DEVELOPER', apps: 'Desa+', status: 'Online', lastActive: 'Now' },
-]
-
-const roles = [
-  { 
-    name: 'SUPER_ADMIN', 
-    count: 2, 
-    color: 'red',
-    permissions: ['Full Access', 'User Mgmt', 'Role Mgmt', 'App Config', 'Logs & Errors']
-  },
-  { 
-    name: 'DEVELOPER', 
-    count: 12, 
-    color: 'brand-blue',
-    permissions: ['View All Apps', 'Manage Assigned App', 'View Logs', 'Resolve Errors', 'Village Setup']
-  },
-  { 
-    name: 'QA', 
-    count: 5, 
-    color: 'orange',
-    permissions: ['View All Apps', 'View Logs', 'Report Errors', 'Test App Features']
-  },
-]
-
-function SettingsPage() {
-  return (
-    <DashboardLayout>
-      <Container size="xl" py="lg">
-        <Stack gap="xl">
-          <Group justify="space-between" align="center">
-            <Stack gap={0}>
-              <Title order={2} className="gradient-text">Settings</Title>
-              <Text size="sm" c="dimmed">Manage system users, security roles, and application access control.</Text>
-            </Stack>
-          </Group>
-
-          <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="lg">
-            <StatsCard title="Total Staff" value={24} icon={TbUserCheck} color="brand-blue" />
-            <StatsCard title="Active Now" value={18} icon={TbAccessPoint} color="teal" />
-            <StatsCard title="Security Roles" value={3} icon={TbShieldCheck} color="purple-primary" />
-          </SimpleGrid>
-
-          <Tabs defaultValue="users" color="brand-blue" variant="pills" radius="md">
-            <Tabs.List>
-              <Tabs.Tab value="users" leftSection={<TbUserCheck size={16} />}>User Management</Tabs.Tab>
-              <Tabs.Tab value="roles" leftSection={<TbShieldCheck size={16} />}>Role Management</Tabs.Tab>
-            </Tabs.List>
-
-            <Tabs.Panel value="users" pt="xl">
-              <Stack gap="md">
-                <Group justify="space-between">
-                  <TextInput
-                    placeholder="Search users..."
-                    leftSection={<TbSearch size={16} />}
-                    radius="md"
-                    w={350}
-                    variant="filled"
-                  />
-                  <Button
-                    variant="gradient"
-                    gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
-                    leftSection={<TbPlus size={18} />}
-                    radius="md"
-                  >
-                    Add New User
-                  </Button>
-                </Group>
-
-                <Paper withBorder radius="2xl" className="glass" p={0} style={{ overflow: 'hidden' }}>
-                  <Table className="data-table" verticalSpacing="md" highlightOnHover>
-                    <Table.Thead>
-                      <Table.Tr>
-                        <Table.Th>Name & Contact</Table.Th>
-                        <Table.Th>Role</Table.Th>
-                        <Table.Th>Status</Table.Th>
-                        <Table.Th>App Access</Table.Th>
-                        <Table.Th>Actions</Table.Th>
-                      </Table.Tr>
-                    </Table.Thead>
-                    <Table.Tbody>
-                      {mockUsers.map((user) => (
-                        <Table.Tr key={user.id}>
-                          <Table.Td>
-                            <Group gap="sm">
-                              <Avatar size="sm" radius="xl" color="brand-blue">{user.name.charAt(0)}</Avatar>
-                              <Stack gap={0}>
-                                <Text fw={600} size="sm">{user.name}</Text>
-                                <Text size="xs" c="dimmed">{user.email}</Text>
-                              </Stack>
-                            </Group>
-                          </Table.Td>
-                          <Table.Td>
-                            <Badge variant="light" color={user.role === 'SUPER_ADMIN' ? 'red' : user.role === 'DEVELOPER' ? 'brand-blue' : 'orange'}>
-                              {user.role}
-                            </Badge>
-                          </Table.Td>
-                          <Table.Td>
-                            <Group gap={6}>
-                              <Box style={{ width: 6, height: 6, borderRadius: '50%', background: user.status === 'Online' ? '#10b981' : '#94a3b8' }} />
-                              <Text size="xs" fw={500}>{user.status}</Text>
-                              <Text size="xs" c="dimmed" ml="xs"><TbClock size={10} style={{ marginBottom: -2 }} /> {user.lastActive}</Text>
-                            </Group>
-                          </Table.Td>
-                          <Table.Td>
-                            <Group gap={4}>
-                              <TbApps size={12} color="gray" />
-                              <Text size="xs" fw={500}>{user.apps}</Text>
-                            </Group>
-                          </Table.Td>
-                          <Table.Td>
-                            <Group gap="xs">
-                                <ActionIcon variant="light" size="sm" color="blue">
-                                  <TbPencil size={14} />
-                                </ActionIcon>
-                                <ActionIcon variant="light" size="sm" color="red">
-                                  <TbTrash size={14} />
-                                </ActionIcon>
-                            </Group>
-                          </Table.Td>
-                        </Table.Tr>
-                      ))}
-                    </Table.Tbody>
-                  </Table>
-                </Paper>
-              </Stack>
-            </Tabs.Panel>
-
-            <Tabs.Panel value="roles" pt="xl">
-              <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
-                {roles.map((role) => (
-                  <Card key={role.name} withBorder radius="2xl" padding="xl" className="glass">
-                    <Stack gap="md">
-                      <Group justify="space-between">
-                        <ThemeIcon size="xl" radius="md" color={role.color} variant="light">
-                          <TbShieldCheck size={28} />
-                        </ThemeIcon>
-                        <Badge variant="default" size="lg" radius="sm">{role.count} Users</Badge>
-                      </Group>
-                      
-                      <Stack gap={4}>
-                        <Title order={4}>{role.name.replace('_', ' ')}</Title>
-                        <Text size="sm" c="dimmed">Core role for secure app management.</Text>
-                      </Stack>
-
-                      <Divider />
-                      
-                      <Text size="xs" fw={700} c="dimmed" style={{ textTransform: 'uppercase' }}>Key Permissions</Text>
-                      <List
-                        spacing="xs"
-                        size="sm"
-                        center
-                        icon={
-                          <ThemeIcon color="teal" size={16} radius="xl">
-                            <TbCircleCheck size={12} />
-                          </ThemeIcon>
-                        }
-                      >
-                        {role.permissions.map((p) => (
-                          <List.Item key={p}>{p}</List.Item>
-                        ))}
-                      </List>
-
-                      <Button fullWidth variant="light" color={role.color} mt="md" radius="md">
-                        Edit Permissions
-                      </Button>
-                    </Stack>
-                  </Card>
-                ))}
-              </SimpleGrid>
-            </Tabs.Panel>
-          </Tabs>
-        </Stack>
-      </Container>
-    </DashboardLayout>
-  )
-}
-

src/frontend/routes/users.tsx

@@ -0,0 +1,614 @@
+import { DashboardLayout } from '@/frontend/components/DashboardLayout'
+import { StatsCard } from '@/frontend/components/StatsCard'
+import {
+  ActionIcon,
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Container,
+  Divider,
+  Group,
+  List,
+  Loader,
+  Modal,
+  Pagination,
+  Paper,
+  PasswordInput,
+  Select,
+  SimpleGrid,
+  Stack,
+  Table,
+  Tabs,
+  Text,
+  TextInput,
+  ThemeIcon,
+  Title,
+  Tooltip,
+} from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
+import { notifications } from '@mantine/notifications'
+import { createFileRoute } from '@tanstack/react-router'
+import { useEffect, useState } from 'react'
+import {
+  TbAccessPoint,
+  TbCircleCheck,
+  TbCircleX,
+  TbPencil,
+  TbPlus,
+  TbSearch,
+  TbShieldCheck,
+  TbTrash,
+  TbUserCheck,
+  TbUserPlus,
+  TbUsers,
+} from 'react-icons/tb'
+import useSWR from 'swr'
+import { API_URLS } from '../config/api'
+import { useSession } from '../hooks/useAuth'
+
+export const Route = createFileRoute('/users')({
+  component: UsersPage,
+})
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
+
+const ROLE_COLOR: Record<string, string> = {
+  DEVELOPER: 'violet',
+  ADMIN: 'brand-blue',
+  USER: 'gray',
+}
+const ROLE_LABEL: Record<string, string> = {
+  DEVELOPER: 'Developer',
+  ADMIN: 'Admin',
+  USER: 'User',
+}
+
+const roles = [
+  {
+    name: 'DEVELOPER',
+    color: 'violet',
+    description: 'Super admin with full system access, including the Dev Console.',
+    permissions: [
+      'Access Dev Console (/dev)',
+      'User & role management',
+      'Manage bug reports & feedback',
+      'View all apps & activity logs',
+      'Manage app versions & status',
+      'Delete system logs',
+    ],
+  },
+  {
+    name: 'ADMIN',
+    color: 'blue',
+    description: 'Operator who can manage applications, bugs, and view activity logs.',
+    permissions: [
+      'View & manage all applications',
+      'Manage bug reports',
+      'View activity logs',
+      'View user, village, and order data',
+      'Update village & product status',
+    ],
+  },
+  {
+    name: 'USER',
+    color: 'gray',
+    description: 'New account pending approval. Awaiting review by an Admin or Developer.',
+    permissions: [
+      'Access profile page',
+      'View account approval status',
+    ],
+  },
+]
+
+function UsersPage() {
+  const [search, setSearch] = useState('')
+  const [debouncedSearch, setDebouncedSearch] = useState('')
+  const [page, setPage] = useState(1)
+  const { data: session } = useSession()
+  const isDeveloper = session?.user?.role === 'DEVELOPER'
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedSearch(search), 300)
+    return () => clearTimeout(timer)
+  }, [search])
+
+  const { data: stats, mutate: mutateStats } = useSWR(API_URLS.getOperatorStats(), fetcher)
+  const { data: response, isLoading, mutate: mutateOperators } = useSWR(
+    API_URLS.getOperators(page, debouncedSearch),
+    fetcher,
+  )
+
+  const operators = response?.data || []
+
+  // ── Create User Modal ──
+  const [createOpened, { open: openCreate, close: closeCreate }] = useDisclosure(false)
+  const [isCreating, setIsCreating] = useState(false)
+  const [createForm, setCreateForm] = useState({ name: '', email: '', password: '', role: 'ADMIN' })
+
+  const handleCreateUser = async () => {
+    if (!createForm.name || !createForm.email || !createForm.password) {
+      notifications.show({ title: 'Validation Error', message: 'Please fill in all required fields.', color: 'red' })
+      return
+    }
+    setIsCreating(true)
+    try {
+      const res = await fetch(API_URLS.createOperator(), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(createForm),
+      })
+      if (res.ok) {
+        notifications.show({ title: 'Success', message: 'User has been created.', color: 'teal', icon: <TbCircleCheck size={18} /> })
+        mutateOperators()
+        mutateStats()
+        closeCreate()
+        setCreateForm({ name: '', email: '', password: '', role: 'ADMIN' })
+      } else {
+        const err = await res.json()
+        throw new Error(err.error || 'Failed to create user')
+      }
+    } catch (e: any) {
+      notifications.show({ title: 'Error', message: e.message || 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
+  // ── Edit User Modal ──
+  const [editOpened, { open: openEdit, close: closeEdit }] = useDisclosure(false)
+  const [isEditing, setIsEditing] = useState(false)
+  const [editingUserId, setEditingUserId] = useState<string | null>(null)
+  const [editForm, setEditForm] = useState({ name: '', email: '', role: '' })
+
+  const handleOpenEdit = (user: any) => {
+    setEditingUserId(user.id)
+    setEditForm({ name: user.name, email: user.email, role: user.role })
+    openEdit()
+  }
+
+  const handleEditUser = async () => {
+    if (!editingUserId || !editForm.name || !editForm.email) return
+    setIsEditing(true)
+    try {
+      const res = await fetch(API_URLS.editOperator(editingUserId), {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(editForm),
+      })
+      if (res.ok) {
+        notifications.show({ title: 'Success', message: 'User has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
+        mutateOperators()
+        closeEdit()
+      } else {
+        throw new Error('Failed to update user')
+      }
+    } catch {
+      notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
+    } finally {
+      setIsEditing(false)
+    }
+  }
+
+  // ── Delete User Modal ──
+  const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [deletingUser, setDeletingUser] = useState<any>(null)
+
+  const handleOpenDelete = (user: any) => {
+    setDeletingUser(user)
+    openDelete()
+  }
+
+  const handleDeleteUser = async () => {
+    if (!deletingUser) return
+    setIsDeleting(true)
+    try {
+      const res = await fetch(API_URLS.deleteOperator(deletingUser.id), { method: 'DELETE' })
+      if (res.ok) {
+        notifications.show({ title: 'Success', message: 'User has been deleted.', color: 'teal', icon: <TbCircleCheck size={18} /> })
+        mutateOperators()
+        mutateStats()
+        closeDelete()
+      } else {
+        const err = await res.json()
+        throw new Error(err.error || 'Failed to delete user')
+      }
+    } catch (e: any) {
+      notifications.show({ title: 'Error', message: e.message || 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  // ── Activate User ──
+  const handleActivateUser = async (user: any) => {
+    try {
+      const res = await fetch(`/api/operators/${user.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ active: true }),
+      })
+      if (res.ok) {
+        notifications.show({ title: 'Success', message: `${user.name} has been reactivated.`, color: 'teal', icon: <TbCircleCheck size={18} /> })
+        mutateOperators()
+        mutateStats()
+      } else {
+        const err = await res.json()
+        throw new Error(err.error || 'Failed to activate user')
+      }
+    } catch (e: any) {
+      notifications.show({ title: 'Error', message: e.message || 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
+    }
+  }
+
+  return (
+    <DashboardLayout>
+      <Container size="xl" py="lg">
+        <Stack gap="xl">
+          <Stack gap={4}>
+            <Title order={2} className="gradient-text">User Management</Title>
+            <Text size="sm" c="dimmed">Manage platform users, security roles, and access control.</Text>
+          </Stack>
+
+          <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="lg">
+            <StatsCard
+              title="Total Staff"
+              value={stats?.totalStaff ?? 0}
+              description="Registered platform users"
+              icon={TbUserCheck}
+              color="brand-blue"
+            />
+            <StatsCard
+              title="Active Now"
+              value={stats?.activeNow ?? 0}
+              description="Users with active sessions"
+              icon={TbAccessPoint}
+              color="teal"
+            />
+            <StatsCard
+              title="Security Roles"
+              value={stats?.rolesCount ?? 0}
+              description="Defined permission levels"
+              icon={TbShieldCheck}
+              color="purple-primary"
+            />
+          </SimpleGrid>
+
+          <Tabs defaultValue="users" color="brand-blue" variant="pills" radius="md">
+            <Tabs.List>
+              <Tabs.Tab value="users" leftSection={<TbUserCheck size={16} />}>User Management</Tabs.Tab>
+              <Tabs.Tab value="roles" leftSection={<TbShieldCheck size={16} />}>Role Reference</Tabs.Tab>
+            </Tabs.List>
+
+            <Tabs.Panel value="users" pt="xl">
+              <Stack gap="md">
+                <Group justify="space-between">
+                  <TextInput
+                    placeholder="Search by name or email..."
+                    leftSection={<TbSearch size={16} />}
+                    radius="md"
+                    w={320}
+                    variant="filled"
+                    value={search}
+                    onChange={(e) => { setSearch(e.currentTarget.value); setPage(1) }}
+                  />
+                  {isDeveloper && (
+                    <Button
+                      variant="gradient"
+                      gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+                      leftSection={<TbPlus size={18} />}
+                      radius="md"
+                      size="sm"
+                      onClick={openCreate}
+                    >
+                      Add New User
+                    </Button>
+                  )}
+                </Group>
+
+                <Paper withBorder radius="2xl" className="glass" p={0} style={{ overflow: 'hidden' }}>
+                  <Table className="data-table" verticalSpacing="md" highlightOnHover>
+                    <Table.Thead>
+                      <Table.Tr>
+                        <Table.Th>Name & Contact</Table.Th>
+                        <Table.Th>Role</Table.Th>
+                        <Table.Th>Joined</Table.Th>
+                        <Table.Th>Actions</Table.Th>
+                      </Table.Tr>
+                    </Table.Thead>
+                    <Table.Tbody>
+                      {isLoading ? (
+                        <Table.Tr>
+                          <Table.Td colSpan={4}>
+                            <Group justify="center" py="xl">
+                              <Loader size="sm" type="dots" />
+                            </Group>
+                          </Table.Td>
+                        </Table.Tr>
+                      ) : operators.length === 0 ? (
+                        <Table.Tr>
+                          <Table.Td colSpan={4}>
+                            <Stack align="center" gap="xs" py="xl">
+                              <TbUsers size={32} style={{ opacity: 0.25 }} />
+                              <Text size="sm" c="dimmed">No users found.</Text>
+                            </Stack>
+                          </Table.Td>
+                        </Table.Tr>
+                      ) : (
+                        operators.map((user: any) => (
+                          <Table.Tr key={user.id}>
+                            <Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}>
+                              <Group gap="sm">
+                                <Box style={{ position: 'relative' }}>
+                                  <Avatar
+                                    size="sm"
+                                    radius="xl"
+                                    color={user.active === false ? 'gray' : ROLE_COLOR[user.role] ?? 'gray'}
+                                    src={user.image}
+                                  >
+                                    {user.name.charAt(0)}
+                                  </Avatar>
+                                  {user.active === false && (
+                                    <Box
+                                      style={{
+                                        position: 'absolute', bottom: -2, right: -2,
+                                        width: 10, height: 10, borderRadius: '50%',
+                                        background: 'var(--mantine-color-red-6)',
+                                        border: '1.5px solid var(--mantine-color-body)',
+                                      }}
+                                    />
+                                  )}
+                                </Box>
+                                <Stack gap={0}>
+                                  <Group gap={6}>
+                                    <Text fw={600} size="sm" c={user.active === false ? 'dimmed' : undefined}>
+                                      {user.name}
+                                    </Text>
+                                    {user.active === false && (
+                                      <Badge size="xs" color="red" variant="light">Inactive</Badge>
+                                    )}
+                                  </Group>
+                                  <Text size="xs" c="dimmed">{user.email}</Text>
+                                </Stack>
+                              </Group>
+                            </Table.Td>
+                            <Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}>
+                              <Badge
+                                variant="light"
+                                size="sm"
+                                color={user.active === false ? 'gray' : ROLE_COLOR[user.role] ?? 'gray'}
+                              >
+                                {ROLE_LABEL[user.role] ?? user.role}
+                              </Badge>
+                            </Table.Td>
+                            <Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}>
+                              <Text size="xs" fw={500} c={user.active === false ? 'dimmed' : undefined}>
+                                {new Date(user.createdAt).toLocaleDateString('en-GB', {
+                                  day: 'numeric',
+                                  month: 'short',
+                                  year: 'numeric',
+                                })}
+                              </Text>
+                            </Table.Td>
+                            <Table.Td>
+                              <Group gap="xs">
+                                {user.active === false ? (
+                                  <Tooltip label="Reactivate user" withArrow>
+                                    <ActionIcon
+                                      disabled={!isDeveloper}
+                                      variant="light"
+                                      size="sm"
+                                      color="teal"
+                                      onClick={() => handleActivateUser(user)}
+                                    >
+                                      <TbUserPlus size={14} />
+                                    </ActionIcon>
+                                  </Tooltip>
+                                ) : (
+                                  <>
+                                    <Tooltip label="Edit user" withArrow>
+                                      <ActionIcon
+                                        disabled={!isDeveloper}
+                                        variant="light"
+                                        size="sm"
+                                        color="blue"
+                                        onClick={() => handleOpenEdit(user)}
+                                      >
+                                        <TbPencil size={14} />
+                                      </ActionIcon>
+                                    </Tooltip>
+                                    <Tooltip label="Delete user" withArrow>
+                                      <ActionIcon
+                                        disabled={!isDeveloper}
+                                        variant="light"
+                                        size="sm"
+                                        color="red"
+                                        onClick={() => handleOpenDelete(user)}
+                                      >
+                                        <TbTrash size={14} />
+                                      </ActionIcon>
+                                    </Tooltip>
+                                  </>
+                                )}
+                              </Group>
+                            </Table.Td>
+                          </Table.Tr>
+                        ))
+                      )}
+                    </Table.Tbody>
+                  </Table>
+                </Paper>
+
+                {response?.totalPages > 1 && (
+                  <Group justify="center" mt="md">
+                    <Pagination total={response.totalPages} value={page} onChange={setPage} size="sm" radius="md" />
+                  </Group>
+                )}
+              </Stack>
+            </Tabs.Panel>
+
+            <Tabs.Panel value="roles" pt="xl">
+              <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
+                {roles.map((role) => (
+                  <Card key={role.name} withBorder radius="2xl" padding="xl" className="glass">
+                    <Stack gap="md">
+                      <ThemeIcon size="xl" radius="md" color={role.color} variant="light">
+                        <TbShieldCheck size={28} />
+                      </ThemeIcon>
+
+                      <Stack gap={4}>
+                        <Title order={4}>{ROLE_LABEL[role.name] ?? role.name}</Title>
+                        <Text size="sm" c="dimmed">{role.description}</Text>
+                      </Stack>
+
+                      <Divider />
+
+                      <Text size="xs" fw={700} c="dimmed" tt="uppercase">Key Permissions</Text>
+                      <List
+                        spacing="xs"
+                        size="sm"
+                        center
+                        icon={
+                          <ThemeIcon color="teal" size={16} radius="xl">
+                            <TbCircleCheck size={12} />
+                          </ThemeIcon>
+                        }
+                      >
+                        {role.permissions.map((p) => (
+                          <List.Item key={p}>{p}</List.Item>
+                        ))}
+                      </List>
+                    </Stack>
+                  </Card>
+                ))}
+              </SimpleGrid>
+            </Tabs.Panel>
+          </Tabs>
+        </Stack>
+      </Container>
+
+      {/* Create User Modal */}
+      <Modal
+        opened={createOpened}
+        onClose={closeCreate}
+        title={<Text fw={700} size="lg">Add New User</Text>}
+        radius="md"
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Full Name"
+            placeholder="Enter full name"
+            required
+            value={createForm.name}
+            onChange={(e) => setCreateForm({ ...createForm, name: e.target.value })}
+          />
+          <TextInput
+            label="Email"
+            placeholder="Enter email address"
+            required
+            value={createForm.email}
+            onChange={(e) => setCreateForm({ ...createForm, email: e.target.value })}
+          />
+          <PasswordInput
+            label="Password"
+            placeholder="Enter password"
+            required
+            value={createForm.password}
+            onChange={(e) => setCreateForm({ ...createForm, password: e.target.value })}
+          />
+          <Select
+            label="Role"
+            data={[
+              { value: 'ADMIN', label: 'Admin' },
+              { value: 'DEVELOPER', label: 'Developer' },
+            ]}
+            value={createForm.role}
+            onChange={(val) => setCreateForm({ ...createForm, role: val || 'ADMIN' })}
+          />
+          <Button
+            fullWidth
+            mt="md"
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+            loading={isCreating}
+            onClick={handleCreateUser}
+          >
+            Create User
+          </Button>
+        </Stack>
+      </Modal>
+
+      {/* Edit User Modal */}
+      <Modal
+        opened={editOpened}
+        onClose={closeEdit}
+        title={<Text fw={700} size="lg">Edit User</Text>}
+        radius="md"
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Full Name"
+            placeholder="Enter full name"
+            required
+            value={editForm.name}
+            onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
+          />
+          <TextInput
+            label="Email"
+            placeholder="Enter email address"
+            required
+            value={editForm.email}
+            onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
+          />
+          <Select
+            label="Role"
+            data={[
+              { value: 'USER', label: 'User (Pending)' },
+              { value: 'ADMIN', label: 'Admin' },
+              { value: 'DEVELOPER', label: 'Developer' },
+            ]}
+            value={editForm.role}
+            onChange={(val) => setEditForm({ ...editForm, role: val || 'ADMIN' })}
+          />
+          <Button
+            fullWidth
+            mt="md"
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+            loading={isEditing}
+            onClick={handleEditUser}
+          >
+            Save Changes
+          </Button>
+        </Stack>
+      </Modal>
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        opened={deleteOpened}
+        onClose={closeDelete}
+        title={<Text fw={700} size="lg">Delete User</Text>}
+        radius="md"
+        size="sm"
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="md">
+          <Text size="sm">
+            Are you sure you want to delete{' '}
+            <Text component="span" fw={700}>{deletingUser?.name}</Text>?
+            This action cannot be undone.
+          </Text>
+          <Group justify="flex-end" mt="md">
+            <Button variant="subtle" color="gray" onClick={closeDelete}>Cancel</Button>
+            <Button color="red" loading={isDeleting} onClick={handleDeleteUser}>Delete User</Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </DashboardLayout>
+  )
+}

src/index.css

@@ -1,5 +1,5 @@
 @import '@mantine/core/styles.css';
-
+@import '@mantine/charts/styles.css';
 :root {
   --font-inter: 'Inter', system-ui, -apple-system, sans-serif;
   
@@ -27,8 +27,8 @@ html, body {
   height: 100%;
   width: 100%;
   font-family: var(--font-inter);
-  background-color: var(--bg-dark); /* Default to Dark Mode as per App.tsx */
-  color: #F8FAFC;
+  /* background-color handled by Mantine */
+  color: var(--mantine-color-text);
 }
 
 body {
@@ -53,9 +53,9 @@ body {
 
 /* Premium Dashboard Utilities */
 .glass {
-  background: rgba(30, 41, 59, 0.7);
+  background: var(--mantine-color-default);
   backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(128, 128, 128, 0.1);
   border-radius: 24px; /* XL rounding for cards */
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
@@ -84,7 +84,7 @@ body {
   transition: var(--transition-smooth);
 }
 
-.sidebar-nav-item.active {
+.sidebar-nav-item[data-active] {
   background: var(--gradient-blue-purple);
   color: white;
 }
@@ -111,3 +111,40 @@ body {
 .data-table tbody tr:hover {
   background: rgba(124, 58, 237, 0.03);
 }
+
+/* Village Cards */
+.village-card {
+  transition: var(--transition-smooth);
+  background: var(--mantine-color-body);
+  border-color: rgba(128, 128, 128, 0.12) !important;
+}
+.village-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 16px 32px -12px rgba(37, 99, 235, 0.25);
+  border-color: rgba(37, 99, 235, 0.3) !important;
+}
+
+.village-list-row {
+  transition: var(--transition-smooth);
+  background: var(--mantine-color-body);
+  border-color: rgba(128, 128, 128, 0.12) !important;
+}
+.village-list-row:hover {
+  transform: translateX(4px);
+  box-shadow: 0 4px 16px -6px rgba(37, 99, 235, 0.2);
+  border-color: rgba(37, 99, 235, 0.3) !important;
+}
+
+/* Village Detail Page Grid */
+.village-detail-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  align-items: start;
+}
+
+@media (min-width: 768px) {
+  .village-detail-grid {
+    grid-template-columns: 3fr 1fr;
+  }
+}

src/index.tsx

@@ -7,7 +7,7 @@ import { env } from './lib/env'
 const isProduction = env.NODE_ENV === 'production'
 
 // ─── Route Classification ──────────────────────────────
-const API_PREFIXES = ['/api/', '/webhook/', '/ws/', '/health']
+const API_PREFIXES = ['/api/', '/webhook/', '/ws/', '/health', '/docs']
 
 function isApiRoute(pathname: string): boolean {
   return API_PREFIXES.some((p) => pathname.startsWith(p)) || pathname === '/health'

src/lib/applog.ts

@@ -0,0 +1,45 @@
+import { redis } from './redis'
+
+export type LogLevel = 'info' | 'warn' | 'error'
+
+export interface AppLogEntry {
+  id: number
+  level: LogLevel
+  message: string
+  detail?: string
+  timestamp: string
+}
+
+const REDIS_KEY = 'app:logs'
+const MAX_ENTRIES = 500
+const ID_KEY = 'app:logs:next_id'
+
+export async function appLog(level: LogLevel, message: string, detail?: string) {
+  if (!redis) return
+  const id = await redis.incr(ID_KEY)
+  const entry: AppLogEntry = { id, level, message, detail, timestamp: new Date().toISOString() }
+  await redis.lpush(REDIS_KEY, JSON.stringify(entry))
+  await redis.ltrim(REDIS_KEY, 0, MAX_ENTRIES - 1)
+}
+
+export async function getAppLogs(options?: {
+  level?: LogLevel
+  limit?: number
+  afterId?: number
+}): Promise<AppLogEntry[]> {
+  if (!redis) return []
+  const limit = options?.limit ?? 100
+  const fetchCount = options?.level || options?.afterId ? MAX_ENTRIES : limit
+  const raw = await redis.lrange(REDIS_KEY, 0, fetchCount - 1)
+  let logs: AppLogEntry[] = raw.map((s: string) => JSON.parse(s))
+  if (options?.afterId) logs = logs.filter((l) => l.id > options.afterId!)
+  if (options?.level) logs = logs.filter((l) => l.level === options.level)
+  logs.reverse()
+  return logs.slice(-limit)
+}
+
+export async function clearAppLogs() {
+  if (!redis) return
+  await redis.del(REDIS_KEY)
+  await redis.del(ID_KEY)
+}

src/lib/env.ts

@@ -12,8 +12,17 @@ export const env = {
   PORT: parseInt(optional('PORT', '3000'), 10),
   NODE_ENV: optional('NODE_ENV', 'development'),
   REACT_EDITOR: optional('REACT_EDITOR', 'code'),
+  BASE_URL: optional('BUN_PUBLIC_BASE_URL', 'http://localhost:3000'),
   DATABASE_URL: required('DATABASE_URL'),
   GOOGLE_CLIENT_ID: required('GOOGLE_CLIENT_ID'),
   GOOGLE_CLIENT_SECRET: required('GOOGLE_CLIENT_SECRET'),
   SUPER_ADMIN_EMAILS: optional('SUPER_ADMIN_EMAIL', '').split(',').map(e => e.trim()).filter(Boolean),
+  MINIO_ENDPOINT: required('MINIO_ENDPOINT'),
+  MINIO_PORT: parseInt(optional('MINIO_PORT', '443'), 10),
+  MINIO_USE_SSL: optional('MINIO_USE_SSL', 'true') === 'true',
+  MINIO_ACCESS_KEY: required('MINIO_ACCESS_KEY'),
+  MINIO_SECRET_KEY: required('MINIO_SECRET_KEY'),
+  MINIO_BUCKET: required('MINIO_BUCKET'),
+  MINIO_UPLOAD_DIR: optional('MINIO_UPLOAD_DIR', 'bug-reports'),
+  REDIS_URL: optional('REDIS_URL', ''),
 } as const

src/lib/logger.ts

@@ -0,0 +1,18 @@
+import { prisma } from './db'
+import { LogType } from '../../generated/prisma'
+
+export async function createSystemLog(userId: string, type: LogType, message: string) {
+  try {
+    return await prisma.log.create({
+      data: {
+        userId,
+        type,
+        message,
+      },
+    })
+  } catch (error) {
+    console.error('[Logger Error]', error)
+    // Don't throw, we don't want logging errors to break the main application flow
+    return null
+  }
+}

src/lib/minio.ts

@@ -0,0 +1,36 @@
+import { Client } from 'minio'
+import { env } from './env'
+
+const client = new Client({
+  endPoint: env.MINIO_ENDPOINT,
+  port: env.MINIO_PORT,
+  useSSL: env.MINIO_USE_SSL,
+  accessKey: env.MINIO_ACCESS_KEY,
+  secretKey: env.MINIO_SECRET_KEY,
+})
+
+// Auto-create bucket if it doesn't exist
+client.bucketExists(env.MINIO_BUCKET).then(async (exists) => {
+  if (!exists) {
+    await client.makeBucket(env.MINIO_BUCKET)
+    console.log(`[MinIO] Bucket "${env.MINIO_BUCKET}" created.`)
+  }
+}).catch((err) => {
+  console.error('[MinIO] Failed to check/create bucket:', err.message)
+})
+
+export async function uploadBugImage(file: File): Promise<string> {
+  const ext = file.name.split('.').pop()?.toLowerCase() ?? 'bin'
+  const objectName = `${env.MINIO_UPLOAD_DIR}/${crypto.randomUUID()}.${ext}`
+  const buffer = Buffer.from(await file.arrayBuffer())
+
+  await client.putObject(env.MINIO_BUCKET, objectName, buffer, file.size, {
+    'Content-Type': file.type,
+  })
+
+  return objectName // e.g. bug-reports/uuid.jpg
+}
+
+export async function getMinioDownloadUrl(objectName: string): Promise<string> {
+  return client.presignedGetObject(env.MINIO_BUCKET, objectName, 3600)
+}

src/lib/presence.ts

@@ -0,0 +1,44 @@
+import type { ServerWebSocket } from 'bun'
+
+const connections = new Map<string, Set<ServerWebSocket<{ userId: string }>>>()
+const adminSubs = new Set<ServerWebSocket<{ userId: string }>>()
+
+export function getOnlineUserIds(): string[] {
+  return Array.from(connections.keys())
+}
+
+function broadcast() {
+  const online = getOnlineUserIds()
+  const msg = JSON.stringify({ type: 'presence', online })
+  for (const ws of adminSubs) ws.send(msg)
+}
+
+export function addConnection(ws: ServerWebSocket<{ userId: string }>, userId: string, isAdmin: boolean) {
+  let set = connections.get(userId)
+  if (!set) {
+    set = new Set()
+    connections.set(userId, set)
+  }
+  set.add(ws)
+  if (isAdmin) {
+    adminSubs.add(ws)
+    ws.send(JSON.stringify({ type: 'presence', online: getOnlineUserIds() }))
+  }
+  broadcast()
+}
+
+export function broadcastToAdmins(message: object) {
+  const msg = JSON.stringify(message)
+  for (const ws of adminSubs) ws.send(msg)
+}
+
+export function removeConnection(ws: ServerWebSocket<{ userId: string }>) {
+  const userId = ws.data.userId
+  const set = connections.get(userId)
+  if (set) {
+    set.delete(ws)
+    if (set.size === 0) connections.delete(userId)
+  }
+  adminSubs.delete(ws)
+  broadcast()
+}

src/lib/redis.ts

@@ -0,0 +1,3 @@
+import { env } from './env'
+
+export const redis = env.REDIS_URL ? new Bun.RedisClient(env.REDIS_URL) : null

src/lib/schema-parser.ts

@@ -0,0 +1,104 @@
+export interface SchemaField {
+  name: string
+  type: string
+  isId: boolean
+  isUnique: boolean
+  isOptional: boolean
+  isList: boolean
+  isRelation: boolean
+  default?: string
+}
+
+export interface SchemaRelation {
+  from: string
+  fromField: string
+  to: string
+  toField: string
+  onDelete?: string
+}
+
+export interface SchemaModel {
+  name: string
+  tableName: string
+  fields: SchemaField[]
+}
+
+export interface SchemaEnum {
+  name: string
+  values: string[]
+}
+
+export interface ParsedSchema {
+  models: SchemaModel[]
+  enums: SchemaEnum[]
+  relations: SchemaRelation[]
+}
+
+export function parseSchema(raw: string): ParsedSchema {
+  const models: SchemaModel[] = []
+  const enums: SchemaEnum[] = []
+  const relations: SchemaRelation[] = []
+
+  const blocks = raw.match(/(model|enum)\s+(\w+)\s*\{([^}]*)}/gs) ?? []
+
+  for (const block of blocks) {
+    const match = block.match(/(model|enum)\s+(\w+)\s*\{([^}]*)}/s)
+    if (!match) continue
+    const [, type, name, body] = match
+    const lines = body
+      .split('\n')
+      .map((l) => l.trim())
+      .filter((l) => l && !l.startsWith('//'))
+
+    if (type === 'enum') {
+      enums.push({ name, values: lines })
+      continue
+    }
+
+    let tableName = name
+    const fields: SchemaField[] = []
+
+    for (const line of lines) {
+      const mapMatch = line.match(/@@map\("(\w+)"\)/)
+      if (mapMatch) { tableName = mapMatch[1]; continue }
+      if (line.startsWith('@@')) continue
+
+      const fieldMatch = line.match(/^(\w+)\s+(\w+)(\?)?(\[\])?\s*(.*)$/)
+      if (!fieldMatch) continue
+      const [, fName, fType, optional, list, attrs] = fieldMatch
+
+      const isId = attrs.includes('@id')
+      const isUnique = attrs.includes('@unique')
+      const isRelation = attrs.includes('@relation')
+      const defaultMatch = attrs.match(/@default\(([^)]+)\)/)
+
+      const isModelRef =
+        /^[A-Z]/.test(fType) &&
+        !enums.some((e) => e.name === fType) &&
+        !['String', 'Int', 'Float', 'Boolean', 'DateTime', 'BigInt', 'Decimal', 'Bytes', 'Json'].includes(fType)
+
+      if (isRelation) {
+        const relMatch = attrs.match(
+          /@relation\(fields:\s*\[(\w+)],\s*references:\s*\[(\w+)](?:,\s*onDelete:\s*(\w+))?\)/,
+        )
+        if (relMatch) {
+          relations.push({ from: name, fromField: relMatch[1], to: fType, toField: relMatch[2], onDelete: relMatch[3] })
+        }
+      }
+
+      fields.push({
+        name: fName,
+        type: fType + (list ? '[]' : ''),
+        isId, isUnique,
+        isOptional: !!optional,
+        isList: !!list,
+        isRelation: isModelRef,
+        default: defaultMatch?.[1],
+      })
+    }
+
+    models.push({ name, tableName, fields })
+  }
+
+  return { models, enums, relations }
+}

src/lib/seafile.ts

@@ -0,0 +1,252 @@
+#!/usr/bin/env bun
+import { promises as fs } from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+
+// --- Constants ---
+const CONFIG_FILE = path.join(os.homedir(), '.note.conf');
+
+// --- Types ---
+interface Config {
+   TOKEN?: string;
+   REPO?: string;
+   URL?: string;
+}
+
+export const defaultConfigSF: Config = {
+   TOKEN: process.env.SF_TOKEN,
+   REPO: process.env.SF_REPO,
+   URL: process.env.SF_URL,
+}
+
+export async function loadConfig(): Promise<Config> {
+   if (!(await fs.stat(CONFIG_FILE)).isFile()) {
+      console.error(`⚠️  Config file not found at ${CONFIG_FILE}`);
+      console.error('Run: bun note.ts config   to create/edit it.');
+      process.exit(1);
+   }
+
+   const configContent = await fs.readFile(CONFIG_FILE, 'utf8');
+   const config: Config = {};
+
+   configContent.split('\n').forEach((line) => {
+      const trimmed = line.trim();
+      if (!trimmed || trimmed.startsWith('#')) return;
+
+      const [key, ...valueParts] = trimmed.split('=');
+      if (key && valueParts.length > 0) {
+         let value = valueParts.join('=').trim();
+         if (
+            (value.startsWith('"') && value.endsWith('"')) ||
+            (value.startsWith("'") && value.endsWith("'"))
+         ) {
+            value = value.slice(1, -1);
+         }
+         config[key as keyof Config] = value;
+      }
+   });
+
+   if (!config.TOKEN || !config.REPO || !config.URL) {
+      console.error(`❌ Config invalid. Please set TOKEN, REPO, and URL inside ${CONFIG_FILE}`);
+      process.exit(1);
+   }
+   return config;
+}
+
+// --- HTTP Helpers ---
+export async function fetchWithAuth(config: Config, url: string, options: RequestInit = {}): Promise<Response> {
+   const headers = {
+      Authorization: `Token ${config.TOKEN}`,
+      ...options.headers,
+   };
+
+   const response = await fetch(url, { ...options, headers });
+   if (!response.ok) {
+      console.error(`❌ Request failed: ${response.status} ${response.statusText}`);
+      console.error(`🔍 URL: ${url}`);
+      console.error(`🔍 Headers:`, headers);
+
+      try {
+         const errorText = await response.text();
+         console.error(`🔍 Response body: ${errorText}`);
+      } catch {
+         console.error('🔍 Could not read response body');
+      }
+   }
+   return response;
+}
+
+// --- Commands ---
+export async function testConnection(config: Config): Promise<string> {
+   try {
+      const response = await fetchWithAuth(config, `${config.URL}/ping/`);
+      return `✅ API connection successful: ${await response.text()}`
+   } catch {
+      // return '⚠️  API ping failed, trying repo access...'
+      try {
+         await fetchWithAuth(config, `${config.URL}/${config.REPO}/`);
+         return `✅ Repo access successful`
+      } catch {
+         return '❌ Both API ping and repo access failed'
+      }
+   }
+}
+
+export async function listFiles(config: Config): Promise<{ name: string }[]> {
+   const url = `${config.URL}/${config.REPO}/dir/?p=/`;
+   const response = await fetchWithAuth(config, url);
+
+   try {
+      const files = (await response.json()) as { name: string }[];
+      return files
+   } catch {
+      console.error('❌ Failed to parse response');
+      process.exit(1);
+   }
+}
+
+export async function catFile(config: Config, folder: string, fileName: string): Promise<ArrayBuffer> {
+   const downloadUrlResponse = await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?p=/${folder}/${fileName}`);
+   const downloadUrl = (await downloadUrlResponse.text()).replace(/"/g, '');
+
+   // Download file sebagai binary, BUKAN text
+   const fileResponse = await fetchWithAuth(config, downloadUrl);
+   const buffer = await fileResponse.arrayBuffer();
+
+   return buffer;
+}
+
+export async function uploadFile(config: Config, file: File, folder: string): Promise<string> {
+   const remoteName = path.basename(file.name);
+
+   // 1. Dapatkan upload link (pakai Authorization)
+   const uploadUrlResponse = await fetchWithAuth(
+      config,
+      `${config.URL}/${config.REPO}/upload-link/`
+   );
+   const uploadUrl = (await uploadUrlResponse.text()).replace(/"/g, "");
+
+   // 2. Siapkan form-data
+   const formData = new FormData();
+   formData.append("parent_dir", "/");
+   formData.append("relative_path", folder); // tanpa slash di akhir
+   formData.append("file", file, remoteName); // file langsung, jangan pakai Blob
+
+   // 3. Upload file TANPA Authorization header, token di query param
+   const res = await fetch(`${uploadUrl}?token=${config.TOKEN}`, {
+      method: "POST",
+      body: formData,
+   });
+
+   const text = await res.text();
+
+   if (!res.ok) return 'gagal'
+   return `✅ Uploaded ${file.name} successfully`;
+}
+
+export async function uploadFileBase64(config: Config, base64File: { name: string; data: string; }): Promise<string> {
+   const remoteName = path.basename(base64File.name);
+
+   // 1. Dapatkan upload link (pakai Authorization)
+   const uploadUrlResponse = await fetchWithAuth(
+      config,
+      `${config.URL}/${config.REPO}/upload-link/`
+   );
+   const uploadUrl = (await uploadUrlResponse.text()).replace(/"/g, "");
+
+   // 2. Konversi base64 ke Blob
+   const binary = Buffer.from(base64File.data, "base64");
+   const blob = new Blob([binary]);
+
+   // 3. Siapkan form-data
+   const formData = new FormData();
+   formData.append("parent_dir", "/");
+   formData.append("relative_path", "syarat-dokumen"); // tanpa slash di akhir
+   formData.append("file", blob, remoteName);
+
+   // 4. Upload file TANPA Authorization header, token di query param
+   const res = await fetch(`${uploadUrl}?token=${config.TOKEN}`, {
+      method: "POST",
+      body: formData,
+   });
+
+   const text = await res.text();
+
+   if (!res.ok) throw new Error(`Upload failed: ${text}`);
+   return `✅ Uploaded ${base64File.name} successfully`;
+}
+
+export async function uploadFileToFolder(config: Config, base64File: { name: string; data: string; }, folder: 'syarat-dokumen' | 'pengaduan'): Promise<string> {
+   const remoteName = path.basename(base64File.name);
+
+   // 1. Dapatkan upload link (pakai Authorization)
+   const uploadUrlResponse = await fetchWithAuth(
+      config,
+      `${config.URL}/${config.REPO}/upload-link/`
+   );
+   const uploadUrl = (await uploadUrlResponse.text()).replace(/"/g, "");
+
+   // 2. Konversi base64 ke Blob
+   const binary = Buffer.from(base64File.data, "base64");
+   const blob = new Blob([binary]);
+
+   // 3. Siapkan form-data
+   const formData = new FormData();
+   formData.append("parent_dir", "/");
+   formData.append("relative_path", folder); // tanpa slash di akhir
+   formData.append("file", blob, remoteName);
+
+   // 4. Upload file TANPA Authorization header, token di query param
+   const res = await fetch(`${uploadUrl}?token=${config.TOKEN}`, {
+      method: "POST",
+      body: formData,
+   });
+
+   const text = await res.text();
+
+   if (!res.ok) throw new Error(`Upload failed: ${text}`);
+   return `✅ Uploaded ${base64File.name} successfully`;
+}
+
+
+export async function removeFile(config: Config, fileName: string, folder: string): Promise<string> {
+   const res = await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?p=/${folder}/${fileName}`, { method: 'DELETE' });
+
+   if (!res.ok) return 'gagal menghapus file';
+   return `🗑️  Removed ${fileName}`
+}
+
+export async function moveFile(config: Config, oldName: string, newName: string): Promise<string> {
+   const url = `${config.URL}/${config.REPO}/file/?p=/${oldName}`;
+   const formData = new FormData();
+   formData.append('operation', 'rename');
+   formData.append('newname', newName);
+
+   await fetchWithAuth(config, url, { method: 'POST', body: formData });
+   return `✏️  Renamed ${oldName} → ${newName}`
+}
+
+export async function downloadFile(config: Config, fileName: string, folder: string, localFile?: string): Promise<string> {
+   const localName = localFile || fileName;
+   // 🔹 gabungkan path folder + file
+   const filePath = `/${folder}/${fileName}`.replace(/\/+/g, "/");
+
+   // 🔹 encode path agar aman (spasi, dll)
+   const params = new URLSearchParams({
+      p: filePath,
+   });
+
+   const downloadUrlResponse = await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?${params.toString()}`);
+   if (!downloadUrlResponse.ok)
+      return 'gagal'
+   const downloadUrl = (await downloadUrlResponse.text()).replace(/"/g, '');
+   const buffer = Buffer.from(await (await fetchWithAuth(config, downloadUrl)).arrayBuffer());
+   await fs.writeFile(localName, buffer);
+   return `⬇️  Downloaded ${fileName} → ${localName}`
+}
+
+export async function getFileLink(config: Config, fileName: string): Promise<string> {
+   const downloadUrlResponse = await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?p=/${fileName}`);
+   return `🔗 Link for ${fileName}:\n${(await downloadUrlResponse.text()).replace(/"/g, '')}`
+}
+

src/logo.svg

@@ -1 +1,17 @@
-<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70"><title>Bun Logo</title><path id="Shadow" d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"/><g id="Body"><path id="Background" d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z" style="fill:#fbf0df"/><path id="Bottom_Shadow" data-name="Bottom Shadow" d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z" style="fill:#f6dece"/><path id="Light_Shine" data-name="Light Shine" d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z" style="fill:#fffefc"/><path id="Top" d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z" style="fill:#ccbea7;fill-rule:evenodd"/><path id="Outline" d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"/></g><g id="Mouth"><g id="Background-2" data-name="Background"><path d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z" style="fill:#b71422"/></g><g id="Tongue"><path id="Background-3" data-name="Background" d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z" style="fill:#ff6164"/><path id="Outline-2" data-name="Outline" d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"/></g><path id="Outline-3" data-name="Outline" d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"/></g><g id="Face"><ellipse id="Right_Blush" data-name="Right Blush" cx="53.22" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><ellipse id="Left_Bluch" data-name="Left Bluch" cx="22.95" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><path id="Eyes" d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z" style="fill-rule:evenodd"/><path id="Iris" d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z" style="fill:#fff;fill-rule:evenodd"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2563EB"/>
+      <stop offset="1" stop-color="#7C3AED"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="7" fill="url(#g)"/>
+  <polyline
+    points="3,16 9,16 12,8 16,24 19,16 29,16"
+    stroke="white"
+    stroke-width="2.2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+</svg>

test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "failed",
+  "failedTests": []
+}

tests/helpers.ts

@@ -9,7 +9,7 @@ export function createTestApp() {
 }
 
 /** Create a test user with hashed password, returns the user record */
-export async function seedTestUser(email = 'test@example.com', password = 'test123', name = 'Test User', role: 'USER' | 'ADMIN' | 'SUPER_ADMIN' = 'USER') {
+export async function seedTestUser(email = 'test@example.com', password = 'test123', name = 'Test User', role:  'ADMIN' | 'DEVELOPER' = 'DEVELOPER') {
   const hashed = await Bun.password.hash(password, { algorithm: 'bcrypt' })
   return prisma.user.upsert({
     where: { email },