diff --git a/DASHBOARD_DESIGN.md b/Dashboard-MD/DASHBOARD_DESIGN.md
similarity index 100%
rename from DASHBOARD_DESIGN.md
rename to Dashboard-MD/DASHBOARD_DESIGN.md
diff --git a/Dashboard-MD/JENNA_ANALYTHIC.md b/Dashboard-MD/JENNA_ANALYTHIC.md
new file mode 100644
index 0000000..e854061
--- /dev/null
+++ b/Dashboard-MD/JENNA_ANALYTHIC.md
@@ -0,0 +1,282 @@
+# Jenna Analytic – Dashboard Design Specification
+
+Dokumen ini menjelaskan desain halaman **Jenna Analytic** berdasarkan screenshot (11 Feb 2026). Dokumen ini menjadi acuan implementasi UI/UX, data, dan interaksi untuk halaman analitik chatbot desa.
+
+---
+
+## 1. Tujuan Halaman
+
+Jenna Analytic berfungsi sebagai **dashboard analitik chatbot layanan desa**, berfokus pada:
+
+* Volume interaksi warga
+* Performa jawaban otomatis
+* Respons manual & waktu respons
+* Pola pertanyaan dan jam sibuk
+
+Target user utama:
+
+* Kepala Desa
+* Admin pelayanan
+* Operator chatbot
+
+---
+
+## 2. Tata Letak Keseluruhan (Layout)
+
+### 2.1 Struktur Global
+
+```
++------------------------------------------------------+
+| Topbar / Header |
++-------------+----------------------------------------+
+| Sidebar | Main Content |
+| | - KPI Cards (Row) |
+| | - Bar Chart Interaksi |
+| | - Topik Terbanyak + Jam Tersibuk |
++-------------+----------------------------------------+
+```
+
+* Sidebar: fixed kiri
+* Header: fixed atas
+* Main content: scroll vertical
+
+---
+
+## 3. Header (Topbar)
+
+### Komponen
+
+* Judul: `Desa Darmasaba`
+* User Info:
+
+ * Nama: `I. B. Surya Prabhawa M.`
+ * Role: `Kepala Desa`
+* Ikon:
+
+ * Notification (badge angka merah)
+ * Theme toggle / setting
+ * Avatar (lingkaran)
+
+### Gaya
+
+* Background: Navy / Biru Tua
+* Text: Putih
+* Tinggi: ±64px
+* Shadow: subtle
+
+---
+
+## 4. Sidebar Navigation
+
+### Elemen
+
+* Logo DESA+
+* Search input: `cari apa saja`
+* Menu:
+
+ * Beranda
+ * Kinerja Divisi
+ * Pengaduan & Layanan Publik
+ * **Jenna Analytic (active)**
+ * Demografi & Kependudukan
+ * Keuangan & Anggaran
+ * Bumdes & UMKM Desa
+ * Sosial
+ * Keamanan
+ * Bantuan
+ * Pengaturan
+
+### Gaya
+
+* Background: Putih
+* Active state:
+
+ * Background biru muda
+ * Border kiri / highlight
+* Spacing menu: 12–16px
+
+---
+
+## 5. KPI Cards (Ringkasan Atas)
+
+### Daftar KPI
+
+1. **Interaksi Hari Ini**
+
+ * Value: `61`
+ * Delta: `+15% dari kemarin`
+
+2. **Jawaban Otomatis**
+
+ * Value: `87%`
+ * Sub: `53 dari 61 interaksi`
+
+3. **Belum Ditindak**
+
+ * Value: `8`
+ * Sub: `Perlu respon manual`
+
+4. **Waktu Respon**
+
+ * Value: `2.3 sec`
+ * Sub: `Rata-rata`
+
+### Gaya
+
+* Card putih
+* Radius: 14–16px
+* Icon di kanan
+* Shadow lembut
+* Grid 4 kolom (desktop)
+
+---
+
+## 6. Grafik Interaksi Chatbot
+
+### Deskripsi
+
+* Tipe: Bar Chart
+* Judul: `Interaksi Chatbot`
+* X-axis: Hari (Sen–Min)
+* Y-axis: Jumlah interaksi
+
+### Gaya
+
+* Warna bar: Navy / Biru tua
+* Grid minimal
+* Tooltip saat hover
+
+### Data Expectation
+
+```ts
+{
+ day: 'Sen' | 'Sel' | 'Rab' | 'Kam' | 'Jum' | 'Sab' | 'Min';
+ total: number;
+}
+```
+
+---
+
+## 7. Topik Pertanyaan Terbanyak
+
+### Deskripsi
+
+* Tipe: Ranked list
+* Isi:
+
+ * Cara mengurus KTP – 89x
+ * Syarat Kartu Keluarga – 76x
+ * Jadwal Posyandu – 64x
+ * Pengaduan jalan rusak – 52x
+ * Info program bansos – 48x
+
+### Gaya
+
+* Card putih
+* Item list rounded
+* Count di kanan
+
+### Data
+
+```ts
+{
+ topic: string;
+ count: number;
+}
+```
+
+---
+
+## 8. Jam Tersibuk
+
+### Deskripsi
+
+* Menampilkan distribusi interaksi berdasarkan waktu
+
+| Waktu | Persentase |
+| ------------- | ---------- |
+| Pagi (08–12) | 30% |
+| Siang (12–16) | 40% |
+| Sore (16–20) | 20% |
+| Malam (20–08) | 10% |
+
+### Gaya
+
+* Horizontal bar / progress
+* Label kiri, persentase kanan
+
+---
+
+## 9. Warna & Tema
+
+### Palette
+
+* Primary (Navy): `#1E3A5F`
+* Secondary: `#3B82F6`
+* Success: `#22C55E`
+* Warning: `#FACC15`
+* Danger: `#EF4444`
+* Background App: `#F5F8FB`
+
+---
+
+## 10. Tipografi
+
+* Font: Inter / Poppins / system-ui
+* Heading: Semi-bold
+* Body: Regular
+* KPI number: Bold, besar
+
+---
+
+## 11. Spasi & Grid
+
+* Padding card: 16–24px
+* Gap grid: 20–24px
+* Line-height body: 1.5
+
+---
+
+## 12. Responsivitas
+
+### Tablet
+
+* KPI jadi 2 kolom
+* Chart full width
+
+### Mobile
+
+* Sidebar jadi drawer
+* KPI 1 kolom
+* Chart & list stack vertical
+
+---
+
+## 13. Interaksi & Perilaku
+
+* Hover card: shadow meningkat
+* Tooltip chart
+* KPI clickable (future drill-down)
+* Data async dari API
+
+---
+
+## 14. Catatan Implementasi Teknis
+
+* Framework: React + Vite
+* UI: Mantine / Shadcn / MUI
+* Chart: Recharts / Chart.js
+* State: TanStack Query / SWR
+
+---
+
+## 15. Pengembangan Lanjutan
+
+* Filter tanggal
+* Export CSV
+* Drill-down per topik
+* Alert SLA respon
+
+---
+
+> Dokumen ini bersifat **design & data contract** antara UI, frontend, dan backend.
diff --git a/QWEN.md b/QWEN.md
new file mode 100644
index 0000000..08c7090
--- /dev/null
+++ b/QWEN.md
@@ -0,0 +1,112 @@
+# Darmasaba Dashboard Noc - Project Context
+
+## Project Overview
+
+**Darmasaba Dashboard Noc** is a high-performance, full-stack React development template leveraging the **Bun** runtime. It features a unique "Single Port" architecture that combines a Bun/Elysia backend with a React frontend running on the same port (3000), eliminating CORS issues and proxy complexity.
+
+### Key Technologies
+- **Runtime**: Bun (Fast all-in-one JS runtime)
+- **Backend**: ElysiaJS (Fast, type-safe web framework)
+- **Frontend**: React 19 (UI Library)
+- **Routing**: TanStack React Router (Type-safe routing)
+- **UI Framework**: Mantine UI (Component library)
+- **Authentication**: Better Auth (Complete auth solution)
+- **Database**: Prisma ORM (Database toolkit)
+- **Testing**: Bun Test & Playwright
+
+### Architecture Highlights
+- **Single Port Architecture**: Backend (Elysia) and Frontend (Vite Middleware) run on the same port (3000)
+- **Contract-First API**: Strictly typed API using OpenAPI with automatic frontend type synchronization
+- **PWA & TWA Support**: Ready for mobile with Service Workers, Web Manifest, and Android Trusted Web Activity verification
+- **React Dev Inspector**: Alt/Option + Click to jump directly to source code in VS Code
+
+## Project Structure
+
+```
+├── __tests__/ # Consolidated test suite (API & E2E)
+├── generated/ # Auto-generated API types and Prisma client
+├── prisma/ # Database schema and migrations
+├── scripts/ # Internal automation scripts
+└── src/
+ ├── api/ # Elysia backend route modules
+ ├── middleware/ # Backend & Frontend middlewares
+ ├── routes/ # TanStack file-based frontend routes
+ ├── store/ # Global state (Valtio)
+ ├── utils/ # Shared utilities (DB, Env, API Client)
+ ├── frontend.tsx # React client entry point
+ └── index.ts # Unified server entry point
+```
+
+## Building and Running
+
+### Prerequisites
+Install [Bun](https://bun.sh/) if you haven't already.
+
+### Installation
+```bash
+bun install
+```
+
+### Setup Environment
+```bash
+cp .env.example .env
+# Fill in your DATABASE_URL and BETTER_AUTH_SECRET
+```
+
+### Database Initialization
+```bash
+bun x prisma migrate dev
+```
+
+### Start Development
+```bash
+bun run dev
+```
+- **App**: `http://localhost:3000`
+- **API Docs**: `http://localhost:3000/api/docs` (Swagger)
+
+## Testing Commands
+
+- **Unit/Integration (API)**: `bun run test`
+- **End-to-End (Browser)**: `bun run test:e2e`
+- **Visual Dashboard**: `bun run test:ui`
+
+## Development Guidelines
+
+- **API Workflow**:
+ 1. Define schema in `src/api/*.ts`.
+ 2. Run `bun run gen:api` (or just start `dev` mode).
+ 3. Use `apiClient` in the frontend with full type safety.
+- **Styling**: Prefer Mantine components and Style Props.
+- **Code Quality**: Code is automatically formatted on save if you have the Biome extension. Manual: `bun run check`.
+
+## Key Configuration Files
+
+- **biome.json**: Code formatting and linting rules (uses tabs, double quotes)
+- **tailwind.config.js**: Tailwind CSS configuration with custom Darmasaba color palette
+- **tsconfig.json**: TypeScript configuration with path aliases (`@/*` maps to `./src/*`)
+- **package.json**: Contains all scripts and dependencies
+- **playwright.config.ts**: End-to-end testing configuration
+
+## Notable Features
+
+1. **Hot Module Replacement**: The application supports HMR for rapid development
+2. **Type Safety**: Full type safety between frontend and backend through contract-first API design
+3. **Authentication**: Built-in authentication using Better Auth
+4. **Dark/Light Theme**: Automatic theme switching with Mantine UI
+5. **Responsive Design**: Mobile-first responsive design using Tailwind CSS and Mantine
+6. **Performance Optimized**: Optimized for production with proper bundling and minification
+
+## Development Scripts
+
+- `dev`: Starts the development server with HMR
+- `lint`: Runs Biome linter
+- `check`: Runs Biome checker with auto-fix
+- `format`: Formats code using Biome
+- `gen:api`: Generates API types from schema
+- `test`: Runs unit/integration tests
+- `test:ui`: Runs tests with UI
+- `test:e2e`: Runs end-to-end tests
+- `build`: Builds the application for production
+- `start`: Starts the production server
+- `seed`: Seeds the database with initial data
\ No newline at end of file
diff --git a/src/app/components/dashboard-card.tsx b/src/components/dashboard-card.tsx
similarity index 100%
rename from src/app/components/dashboard-card.tsx
rename to src/components/dashboard-card.tsx
diff --git a/src/app/components/dashboard-content.tsx b/src/components/dashboard-content.tsx
similarity index 98%
rename from src/app/components/dashboard-content.tsx
rename to src/components/dashboard-content.tsx
index 82ed46f..6f740ac 100644
--- a/src/app/components/dashboard-content.tsx
+++ b/src/components/dashboard-content.tsx
@@ -164,9 +164,6 @@ export function DashboardContent() {
-
- 87%
-
diff --git a/src/app/components/figma/ImageWithFallback.tsx b/src/components/figma/ImageWithFallback.tsx
similarity index 100%
rename from src/app/components/figma/ImageWithFallback.tsx
rename to src/components/figma/ImageWithFallback.tsx
diff --git a/src/app/components/header.tsx b/src/components/header.tsx
similarity index 100%
rename from src/app/components/header.tsx
rename to src/components/header.tsx
diff --git a/src/components/jenna-analytic.tsx b/src/components/jenna-analytic.tsx
new file mode 100644
index 0000000..f8925ab
--- /dev/null
+++ b/src/components/jenna-analytic.tsx
@@ -0,0 +1,271 @@
+import React from "react";
+import {
+ Button,
+ Card,
+ Badge,
+ Progress,
+ Title,
+ Text,
+ Group,
+ Stack,
+ Grid,
+ Table,
+ Box,
+} from "@mantine/core";
+
+// Sample Data
+const kpiData = [
+ {
+ id: 1,
+ title: "Interaksi Hari Ini",
+ value: "61",
+ delta: "+15% dari kemarin",
+ deltaType: "positive",
+ icon: (
+
+ ),
+ },
+ {
+ id: 2,
+ title: "Jawaban Otomatis",
+ value: "87%",
+ sub: "53 dari 61 interaksi",
+ icon: (
+
+ ),
+ },
+ {
+ id: 3,
+ title: "Belum Ditindak",
+ value: "8",
+ sub: "Perlu respon manual",
+ deltaType: "negative",
+ icon: (
+
+ ),
+ },
+ {
+ id: 4,
+ title: "Waktu Respon",
+ value: "2.3 sec",
+ sub: "Rata-rata",
+ icon: (
+
+ ),
+ },
+];
+
+const chartData = [
+ { day: "Sen", total: 100 },
+ { day: "Sel", total: 120 },
+ { day: "Rab", total: 90 },
+ { day: "Kam", total: 150 },
+ { day: "Jum", total: 110 },
+ { day: "Sab", total: 80 },
+ { day: "Min", total: 130 },
+];
+
+const topTopics = [
+ { topic: "Cara mengurus KTP", count: 89 },
+ { topic: "Syarat Kartu Keluarga", count: 76 },
+ { topic: "Jadwal Posyandu", count: 64 },
+ { topic: "Pengaduan jalan rusak", count: 52 },
+ { topic: "Info program bansos", count: 48 },
+];
+
+const busyHours = [
+ { period: "Pagi (08–12)", percentage: 30 },
+ { period: "Siang (12–16)", percentage: 40 },
+ { period: "Sore (16–20)", percentage: 20 },
+ { period: "Malam (20–08)", percentage: 10 },
+];
+
+const JennaAnalytic = () => {
+ return (
+
+
+
+
+ Jenna Analytic
+
+
+
+
+ {/* KPI Cards */}
+
+ {kpiData.map((kpi) => (
+
+
+
+
+ {kpi.title}
+
+ {React.cloneElement(kpi.icon, {
+ className: "h-6 w-6", // Keeping classes for now, can be replaced by Mantine Icon component if available or styled with sx prop
+ color: "var(--mantine-color-dimmed)", // Set color via prop
+ })}
+
+
+ {kpi.value}
+
+ {kpi.delta && (
+
+ {kpi.delta}
+
+ )}
+ {kpi.sub && (
+
+ {kpi.sub}
+
+ )}
+
+
+ ))}
+
+
+ {/* Charts and Lists Section */}
+
+ {/* Grafik Interaksi Chatbot (now Table) */}
+
+
+
+ Interaksi Chatbot
+
+
+
+
+ Day
+ Total Interactions
+
+
+
+ {chartData.map((item, index) => (
+
+ {item.day}
+ {item.total}
+
+ ))}
+
+
+
+
+
+ {/* Topik Pertanyaan Terbanyak & Jam Tersibuk */}
+
+
+ {/* Topik Pertanyaan Terbanyak */}
+
+
+ Topik Pertanyaan Terbanyak
+
+
+ {topTopics.map((item, index) => (
+
+
+ {item.topic}
+
+
+ {item.count}x
+
+
+ ))}
+
+
+
+ {/* Jam Tersibuk */}
+
+
+ Jam Tersibuk
+
+
+ {busyHours.map((item, index) => (
+
+
+ {item.period}
+
+
+
+ {item.percentage}%
+
+
+ ))}
+
+
+
+
+
+
+
+ );
+
+}
+export default JennaAnalytic;
+
diff --git a/src/app/components/kinerja-divisi.tsx b/src/components/kinerja-divisi.tsx
similarity index 82%
rename from src/app/components/kinerja-divisi.tsx
rename to src/components/kinerja-divisi.tsx
index 25a2386..c52dcc4 100644
--- a/src/app/components/kinerja-divisi.tsx
+++ b/src/components/kinerja-divisi.tsx
@@ -1,13 +1,13 @@
-import { Badge } from "@/app/components/ui/badge";
-import { Button } from "@/app/components/ui/button"; // Correct import for Button
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button"; // Correct import for Button
import {
Card,
CardContent,
CardHeader,
CardTitle,
-} from "@/app/components/ui/card";
-import { Progress } from "@/app/components/ui/progress";
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
import {
Table,
TableBody,
@@ -15,7 +15,7 @@ import {
TableHead,
TableHeader,
TableRow,
-} from "@/app/components/ui/table";
+} from "@/components/ui/table";
const KinerjaDivisi = () => {
// Sample data for division performance
@@ -87,7 +87,7 @@ const KinerjaDivisi = () => {
- Total Divisi
+ Total Divisi