From 5801eb4596199c55363a4ccaeeee4db2e77869e1 Mon Sep 17 00:00:00 2001 From: nico Date: Thu, 19 Feb 2026 10:14:21 +0800 Subject: [PATCH 1/4] feat: improve header responsiveness and update seed initialization - Add text truncation for title on mobile screens - Hide user info section on mobile, show simplified icons only - Update seed.ts to create admin and demo users with proper password hashing - Add bcryptjs for password hashing in seed script - Update QWEN.md documentation with seed command and default users Co-authored-by: Qwen-Coder --- QWEN.md | 12 +- bun.lock | 6 + package.json | 2 + prisma/seed.ts | 93 ++- src/components/bumdes-page.tsx | 661 +++++++++------- src/components/dashboard-card.tsx | 4 +- src/components/dashboard-content.tsx | 177 ++++- src/components/demografi-pekerjaan.tsx | 172 ++++- src/components/header.tsx | 140 ++-- src/components/help-page.tsx | 631 ++++++++++------ src/components/jenna-analytic.tsx | 69 +- src/components/keamanan-page.tsx | 526 +++++++------ src/components/keuangan-anggaran.tsx | 114 ++- src/components/kinerja-divisi.tsx | 368 +++++++-- src/components/pengaduan-layanan-publik.tsx | 404 +++++++--- src/components/pengaturan/akses-dan-tim.tsx | 287 ++++--- src/components/pengaturan/keamanan.tsx | 119 +-- src/components/pengaturan/notifikasi.tsx | 115 +-- src/components/pengaturan/umum.tsx | 122 +-- src/components/sidebar.tsx | 77 +- src/components/sosial-page.tsx | 714 +++++++++++------- src/components/ui/card.tsx | 1 - src/components/ui/help-card.tsx | 156 ++-- src/frontend.tsx | 5 +- src/index.css | 2 +- src/routes/admin/route.tsx | 1 - src/routes/dashboard/bantuan.ts | 11 +- src/routes/dashboard/bumdes.ts | 11 +- src/routes/dashboard/demografi-pekerjaan.ts | 11 +- src/routes/dashboard/jenna-analytic.ts | 10 +- src/routes/dashboard/keamanan.ts | 11 +- src/routes/dashboard/keuangan-anggaran.ts | 10 +- .../dashboard/pengaturan/akses-dan-tim.ts | 10 +- src/routes/dashboard/pengaturan/keamanan.ts | 11 +- src/routes/dashboard/pengaturan/notifikasi.ts | 10 +- src/routes/dashboard/pengaturan/route.tsx | 16 +- src/routes/dashboard/pengaturan/umum.ts | 11 +- src/routes/dashboard/route.tsx | 57 +- src/routes/dashboard/sosial.ts | 12 +- 39 files changed, 3335 insertions(+), 1834 deletions(-) diff --git a/QWEN.md b/QWEN.md index 08c7090..cf107dd 100644 --- a/QWEN.md +++ b/QWEN.md @@ -51,11 +51,13 @@ bun install ```bash cp .env.example .env # Fill in your DATABASE_URL and BETTER_AUTH_SECRET +# Optional: Set ADMIN_EMAIL and ADMIN_PASSWORD for admin user ``` ### Database Initialization ```bash bun x prisma migrate dev +bun run seed ``` ### Start Development @@ -109,4 +111,12 @@ bun run dev - `test:e2e`: Runs end-to-end tests - `build`: Builds the application for production - `start`: Starts the production server -- `seed`: Seeds the database with initial data \ No newline at end of file +- `seed`: Seeds the database with admin and demo users + +## Default Users (after running `bun run seed`) + +- **Admin**: `ADMIN_EMAIL` (from env) / `ADMIN_PASSWORD` (default: `admin123`) +- **Demo Users**: + - `demo1@example.com` / `demo123` (role: user) + - `demo2@example.com` / `demo123` (role: user) + - `moderator@example.com` / `demo123` (role: moderator) \ No newline at end of file diff --git a/bun.lock b/bun.lock index f1e2f8e..b7f092c 100644 --- a/bun.lock +++ b/bun.lock @@ -47,6 +47,7 @@ "@tabler/icons-react": "^3.36.1", "@tailwindcss/vite": "^4.1.18", "@tanstack/react-router": "^1.158.1", + "bcryptjs": "^3.0.3", "better-auth": "^1.4.18", "class-variance-authority": "^0.7.1", "cmdk": "^1.0.1", @@ -80,6 +81,7 @@ "@tanstack/react-router-devtools": "^1.158.1", "@tanstack/router-cli": "1.158.1", "@tanstack/router-vite-plugin": "^1.158.1", + "@types/bcryptjs": "^3.0.0", "@types/bun": "latest", "@types/react": "^19", "@types/react-dom": "^19", @@ -628,6 +630,8 @@ "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="], + "@types/bcryptjs": ["@types/bcryptjs@3.0.0", "", { "dependencies": { "bcryptjs": "*" } }, "sha512-WRZOuCuaz8UcZZE4R5HXTco2goQSI2XxjGY3hbM/xDvwmqFWd4ivooImsMx65OKM6CtNKbnZ5YL+YwAwK7c1dg=="], + "@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="], "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="], @@ -776,6 +780,8 @@ "baseline-browser-mapping": ["baseline-browser-mapping@2.9.19", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg=="], + "bcryptjs": ["bcryptjs@3.0.3", "", { "bin": { "bcrypt": "bin/bcrypt" } }, "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g=="], + "better-auth": ["better-auth@1.4.18", "", { "dependencies": { "@better-auth/core": "1.4.18", "@better-auth/telemetry": "1.4.18", "@better-auth/utils": "0.3.0", "@better-fetch/fetch": "1.1.21", "@noble/ciphers": "^2.0.0", "@noble/hashes": "^2.0.0", "better-call": "1.1.8", "defu": "^6.1.4", "jose": "^6.1.0", "kysely": "^0.28.5", "nanostores": "^1.0.1", "zod": "^4.3.5" }, "peerDependencies": { "@lynx-js/react": "*", "@prisma/client": "^5.0.0 || ^6.0.0 || ^7.0.0", "@sveltejs/kit": "^2.0.0", "@tanstack/react-start": "^1.0.0", "@tanstack/solid-start": "^1.0.0", "better-sqlite3": "^12.0.0", "drizzle-kit": ">=0.31.4", "drizzle-orm": ">=0.41.0", "mongodb": "^6.0.0 || ^7.0.0", "mysql2": "^3.0.0", "next": "^14.0.0 || ^15.0.0 || ^16.0.0", "pg": "^8.0.0", "prisma": "^5.0.0 || ^6.0.0 || ^7.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0", "solid-js": "^1.0.0", "svelte": "^4.0.0 || ^5.0.0", "vitest": "^2.0.0 || ^3.0.0 || ^4.0.0", "vue": "^3.0.0" }, "optionalPeers": ["@lynx-js/react", "@prisma/client", "@sveltejs/kit", "@tanstack/react-start", "@tanstack/solid-start", "better-sqlite3", "drizzle-kit", "drizzle-orm", "mongodb", "mysql2", "next", "pg", "prisma", "react", "react-dom", "solid-js", "svelte", "vitest", "vue"] }, "sha512-bnyifLWBPcYVltH3RhS7CM62MoelEqC6Q+GnZwfiDWNfepXoQZBjEvn4urcERC7NTKgKq5zNBM8rvPvRBa6xcg=="], "better-call": ["better-call@1.1.8", "", { "dependencies": { "@better-auth/utils": "^0.3.0", "@better-fetch/fetch": "^1.1.4", "rou3": "^0.7.10", "set-cookie-parser": "^2.7.1" }, "peerDependencies": { "zod": "^4.0.0" }, "optionalPeers": ["zod"] }, "sha512-XMQ2rs6FNXasGNfMjzbyroSwKwYbZ/T3IxruSS6U2MJRsSYh3wYtG3o6H00ZlKZ/C/UPOAD97tqgQJNsxyeTXw=="], diff --git a/package.json b/package.json index 235c3ec..fbe9b89 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "@tabler/icons-react": "^3.36.1", "@tailwindcss/vite": "^4.1.18", "@tanstack/react-router": "^1.158.1", + "bcryptjs": "^3.0.3", "better-auth": "^1.4.18", "class-variance-authority": "^0.7.1", "cmdk": "^1.0.1", @@ -92,6 +93,7 @@ "@tanstack/react-router-devtools": "^1.158.1", "@tanstack/router-cli": "1.158.1", "@tanstack/router-vite-plugin": "^1.158.1", + "@types/bcryptjs": "^3.0.0", "@types/bun": "latest", "@types/react": "^19", "@types/react-dom": "^19", diff --git a/prisma/seed.ts b/prisma/seed.ts index f97f357..3c870ee 100644 --- a/prisma/seed.ts +++ b/prisma/seed.ts @@ -1,13 +1,16 @@ import "dotenv/config"; +import { hash } from "bcryptjs"; +import { generateId } from "better-auth"; import { prisma } from "@/utils/db"; async function seedAdminUser() { // Load environment variables const adminEmail = process.env.ADMIN_EMAIL; + const adminPassword = process.env.ADMIN_PASSWORD || "admin123"; if (!adminEmail) { console.log( - "No ADMIN_EMAIL environment variable found. Skipping admin role assignment.", + "No ADMIN_EMAIL environment variable found. Skipping admin user creation.", ); return; } @@ -30,9 +33,35 @@ async function seedAdminUser() { console.log(`User with email ${adminEmail} already has admin role.`); } } else { - console.log( - `No user found with email ${adminEmail}. Skipping admin role assignment.`, - ); + // Create new admin user + const hashedPassword = await hash(adminPassword, 12); + const userId = generateId(); + + await prisma.user.create({ + data: { + id: userId, + email: adminEmail, + name: "Admin User", + role: "admin", + emailVerified: true, + createdAt: new Date(), + updatedAt: new Date(), + }, + }); + + await prisma.account.create({ + data: { + id: generateId(), + userId, + accountId: userId, + providerId: "credential", + password: hashedPassword, + createdAt: new Date(), + updatedAt: new Date(), + }, + }); + + console.log(`Admin user created with email: ${adminEmail}`); } } catch (error) { console.error("Error seeding admin user:", error); @@ -40,10 +69,66 @@ async function seedAdminUser() { } } +async function seedDemoUsers() { + const demoUsers = [ + { email: "demo1@example.com", name: "Demo User 1", role: "user" }, + { email: "demo2@example.com", name: "Demo User 2", role: "user" }, + { + email: "moderator@example.com", + name: "Moderator User", + role: "moderator", + }, + ]; + + for (const userData of demoUsers) { + try { + const existingUser = await prisma.user.findUnique({ + where: { email: userData.email }, + }); + + if (!existingUser) { + const userId = generateId(); + const hashedPassword = await hash("demo123", 12); + + await prisma.user.create({ + data: { + id: userId, + email: userData.email, + name: userData.name, + role: userData.role, + emailVerified: true, + createdAt: new Date(), + updatedAt: new Date(), + }, + }); + + await prisma.account.create({ + data: { + id: generateId(), + userId, + accountId: userId, + providerId: "credential", + password: hashedPassword, + createdAt: new Date(), + updatedAt: new Date(), + }, + }); + + console.log(`Demo user created: ${userData.email}`); + } else { + console.log(`Demo user already exists: ${userData.email}`); + } + } catch (error) { + console.error(`Error seeding user ${userData.email}:`, error); + } + } +} + async function main() { console.log("Seeding database..."); await seedAdminUser(); + await seedDemoUsers(); console.log("Database seeding completed."); } diff --git a/src/components/bumdes-page.tsx b/src/components/bumdes-page.tsx index 647bfc0..4b7e1b2 100644 --- a/src/components/bumdes-page.tsx +++ b/src/components/bumdes-page.tsx @@ -1,296 +1,389 @@ -import { useState } from "react"; -import { - Card, - Grid, - GridCol, - Group, - Text, - Title, - Button, - Badge, - Table, - Stack, - Select, - useMantineColorScheme +import { + Badge, + Button, + Card, + Grid, + GridCol, + Group, + Select, + Stack, + Table, + Text, + Title, + useMantineColorScheme, } from "@mantine/core"; -import { IconBuildingStore, IconCategory, IconCurrency, IconUsers } from "@tabler/icons-react"; +import { + IconBuildingStore, + IconCategory, + IconCurrency, + IconUsers, +} from "@tabler/icons-react"; +import { useState } from "react"; const BumdesPage = () => { - const { colorScheme } = useMantineColorScheme(); - const dark = colorScheme === 'dark'; - - const [timeFilter, setTimeFilter] = useState("bulan"); - - // Sample data for KPI cards - const kpiData = [ - { - title: "UMKM Aktif", - value: 45, - icon: , - color: "darmasaba-blue", - }, - { - title: "UMKM Terdaftar", - value: 68, - icon: , - color: "darmasaba-success", - }, - { - title: "Omzet", - value: "Rp 48.000.000", - icon: , - color: "darmasaba-warning", - }, - { - title: "Kategori UMKM", - value: 34, - icon: , - color: "darmasaba-danger", - }, - ]; + const { colorScheme } = useMantineColorScheme(); + const dark = colorScheme === "dark"; - // Sample data for top products - const topProducts = [ - { - rank: 1, - name: "Beras Premium Organik", - umkmOwner: "Warung Pak Joko", - growth: "+12%", - }, - { - rank: 2, - name: "Keripik Singkong", - umkmOwner: "Ibu Sari Snack", - growth: "+8%", - }, - { - rank: 3, - name: "Madu Alami", - umkmOwner: "Peternakan Lebah", - growth: "+5%", - }, - ]; + const [timeFilter, setTimeFilter] = useState("bulan"); - // Sample data for product sales - const productSales = [ - { - produk: "Beras Premium Organik", - penjualanBulanIni: "Rp 8.500.000", - bulanLalu: "Rp 8.500.000", - trend: 10, - volume: "650 Kg", - stok: "850 Kg", - }, - { - produk: "Keripik Singkong", - penjualanBulanIni: "Rp 4.200.000", - bulanLalu: "Rp 3.800.000", - trend: 10, - volume: "320 Kg", - stok: "120 Kg", - }, - { - produk: "Madu Alami", - penjualanBulanIni: "Rp 3.750.000", - bulanLalu: "Rp 4.100.000", - trend: -8, - volume: "150 Liter", - stok: "45 Liter", - }, - { - produk: "Kecap Tradisional", - penjualanBulanIni: "Rp 2.800.000", - bulanLalu: "Rp 2.500.000", - trend: 12, - volume: "280 Botol", - stok: "95 Botol", - }, - ]; + // Sample data for KPI cards + const kpiData = [ + { + title: "UMKM Aktif", + value: 45, + icon: , + color: "darmasaba-blue", + }, + { + title: "UMKM Terdaftar", + value: 68, + icon: , + color: "darmasaba-success", + }, + { + title: "Omzet", + value: "Rp 48.000.000", + icon: , + color: "darmasaba-warning", + }, + { + title: "Kategori UMKM", + value: 34, + icon: , + color: "darmasaba-danger", + }, + ]; - return ( - - {/* KPI Cards */} - - {kpiData.map((kpi, index) => ( - - - - - - {kpi.title} - - - {typeof kpi.value === 'number' ? kpi.value.toLocaleString() : kpi.value} - - - - {kpi.icon} - - - - - ))} - + // Sample data for top products + const topProducts = [ + { + rank: 1, + name: "Beras Premium Organik", + umkmOwner: "Warung Pak Joko", + growth: "+12%", + }, + { + rank: 2, + name: "Keripik Singkong", + umkmOwner: "Ibu Sari Snack", + growth: "+8%", + }, + { + rank: 3, + name: "Madu Alami", + umkmOwner: "Peternakan Lebah", + growth: "+5%", + }, + ]; - {/* Update Penjualan Produk Header */} - - - - Update Penjualan Produk - - - - - - - + // Sample data for product sales + const productSales = [ + { + produk: "Beras Premium Organik", + penjualanBulanIni: "Rp 8.500.000", + bulanLalu: "Rp 8.500.000", + trend: 10, + volume: "650 Kg", + stok: "850 Kg", + }, + { + produk: "Keripik Singkong", + penjualanBulanIni: "Rp 4.200.000", + bulanLalu: "Rp 3.800.000", + trend: 10, + volume: "320 Kg", + stok: "120 Kg", + }, + { + produk: "Madu Alami", + penjualanBulanIni: "Rp 3.750.000", + bulanLalu: "Rp 4.100.000", + trend: -8, + volume: "150 Liter", + stok: "45 Liter", + }, + { + produk: "Kecap Tradisional", + penjualanBulanIni: "Rp 2.800.000", + bulanLalu: "Rp 2.500.000", + trend: 12, + volume: "280 Botol", + stok: "95 Botol", + }, + ]; - - {/* Produk Unggulan (Left Column) */} - - - {/* Total Penjualan, Produk Aktif, Total Transaksi */} - - - - Total Penjualan - Rp 28.500.000 - - - Produk Aktif - 124 Produk - - - Total Transaksi - 1.240 Transaksi - - - + return ( + + {/* KPI Cards */} + + {kpiData.map((kpi, index) => ( + + + + + + {kpi.title} + + + {typeof kpi.value === "number" + ? kpi.value.toLocaleString() + : kpi.value} + + + + {kpi.icon} + + + + + ))} + - {/* Top 3 Produk Terlaris */} - - Top 3 Produk Terlaris - - {topProducts.map((product) => ( - - - - {product.rank} - - - {product.name} - {product.umkmOwner} - - - - {product.growth} - - - ))} - - - - + {/* Update Penjualan Produk Header */} + + + + Update Penjualan Produk + + + + + + + - {/* Detail Penjualan Produk (Right Column) */} - - - - Detail Penjualan Produk - + + + + + + + Produk + + + + Penjualan Bulan Ini + + + + Bulan Lalu + + + Trend + + + Volume + + + Stok + + + Aksi + + + + + {productSales.map((product, index) => ( + + + + {product.produk} + + + + + {product.penjualanBulanIni} + + + + + {product.bulanLalu} + + + + + = 0 ? "green" : "red"}> + {product.trend >= 0 ? "↑" : "↓"}{" "} + {Math.abs(product.trend)}% + + + + + + {product.volume} + + + + 200 ? "green" : "yellow" + } + > + {product.stok} + + + + + + + ))} + +
+ + + + + ); }; -export default BumdesPage; \ No newline at end of file +export default BumdesPage; diff --git a/src/components/dashboard-card.tsx b/src/components/dashboard-card.tsx index 9eaed80..44cbcbd 100644 --- a/src/components/dashboard-card.tsx +++ b/src/components/dashboard-card.tsx @@ -1,6 +1,6 @@ -import type { ReactNode } from "react"; // Import Mantine components directly -import { Group, Text, ThemeIcon, Badge } from "@mantine/core"; +import { Badge, Group, Text, ThemeIcon } from "@mantine/core"; +import type { ReactNode } from "react"; // Import custom Card and its sub-components import { Card } from "./ui/card"; diff --git a/src/components/dashboard-content.tsx b/src/components/dashboard-content.tsx index 0f70818..f45ccdf 100644 --- a/src/components/dashboard-content.tsx +++ b/src/components/dashboard-content.tsx @@ -13,25 +13,25 @@ import { Pie, PieChart, ResponsiveContainer, + Tooltip, // Added Tooltip import XAxis, YAxis, - Tooltip, // Added Tooltip import } from "recharts"; // Import Mantine components import { - Grid, - Stack, - Group, - Text, - Title, ActionIcon, - Progress, - Box, Badge, - ThemeIcon, + Box, Card, // Added for icon containers + Grid, + Group, + Progress, + Stack, + Text, + ThemeIcon, + Title, useMantineColorScheme, // Add this import } from "@mantine/core"; @@ -68,13 +68,20 @@ const eventData = [ export function DashboardContent() { const { colorScheme } = useMantineColorScheme(); - const dark = colorScheme === 'dark'; + const dark = colorScheme === "dark"; return ( {/* Stats Cards */} - + @@ -92,14 +99,26 @@ export function DashboardContent() { 12% dari minggu lalu ↗ +12% - + - + @@ -114,14 +133,26 @@ export function DashboardContent() { 14 baru, 14 diproses - + - + @@ -139,14 +170,26 @@ export function DashboardContent() { +8% - + - + @@ -161,7 +204,12 @@ export function DashboardContent() { dari 482 responden - + @@ -171,7 +219,13 @@ export function DashboardContent() { {/* Bar Chart */} - + @@ -232,7 +286,13 @@ export function DashboardContent() { {/* Pie Chart */} <Grid.Col span={{ base: 12, lg: 6 }}> - <Card p="md" style={{borderColor: dark ? "#141D34" : "white"}} radius="md" withBorder bg={dark ? "#141D34" : "white"}> + <Card + p="md" + style={{ borderColor: dark ? "#141D34" : "white" }} + radius="md" + withBorder + bg={dark ? "#141D34" : "white"} + > <Title order={4} mb={5}> Tingkat Kepuasan @@ -259,19 +319,35 @@ export function DashboardContent() { - + Sangat puas (0%) - + Puas (0%) - + Cukup (0%) - + Kurang (0%) @@ -283,7 +359,13 @@ export function DashboardContent() { {/* Divisi Teraktif */} - + {/* Original SVG icon */} @@ -355,7 +437,13 @@ export function DashboardContent() { {/* Kalender */} - + Kalender & Kegiatan Mendatang @@ -364,7 +452,10 @@ export function DashboardContent() { {eventData.map((event, index) => ( {event.date} @@ -378,7 +469,13 @@ export function DashboardContent() { {/* APBDes Chart */} - + Grafik APBDes @@ -387,19 +484,37 @@ export function DashboardContent() { Belanja - + Pendapatan - + Pembangunan - + diff --git a/src/components/demografi-pekerjaan.tsx b/src/components/demografi-pekerjaan.tsx index 99240af..cf189d2 100644 --- a/src/components/demografi-pekerjaan.tsx +++ b/src/components/demografi-pekerjaan.tsx @@ -1,17 +1,22 @@ -import React from "react"; +import { BarChart, PieChart } from "@mantine/charts"; import { + Box, Card, - Title, - Text, + Grid, Group, Stack, - Grid, - Box, Table, + Text, + Title, useMantineColorScheme, } from "@mantine/core"; -import { IconBabyCarriage, IconSkull, IconArrowUp, IconArrowDown } from "@tabler/icons-react"; -import { BarChart, PieChart } from "@mantine/charts"; +import { + IconArrowDown, + IconArrowUp, + IconBabyCarriage, + IconSkull, +} from "@tabler/icons-react"; +import React from "react"; // Sample Data const kpiData = [ @@ -71,7 +76,11 @@ const kpiData = [ value: "23", sub: "Tahun ini", icon: ( - + ), }, { @@ -136,10 +145,30 @@ const banjarData = [ ]; const dynamicStats = [ - { title: "Kelahiran", value: "23", icon: , color: "green" }, - { title: "Kematian", value: "12", icon: , color: "red" }, - { title: "Pindah Masuk", value: "45", icon: , color: "blue" }, - { title: "Pindah Keluar", value: "32", icon: , color: "orange" }, + { + title: "Kelahiran", + value: "23", + icon: , + color: "green", + }, + { + title: "Kematian", + value: "12", + icon: , + color: "red", + }, + { + title: "Pindah Masuk", + value: "45", + icon: , + color: "blue", + }, + { + title: "Pindah Keluar", + value: "32", + icon: , + color: "orange", + }, ]; const DemografiPekerjaan = () => { @@ -152,14 +181,22 @@ const DemografiPekerjaan = () => { {kpiData.map((kpi) => ( - + {kpi.title} {React.cloneElement(kpi.icon, { className: "h-6 w-6", - color: dark ? "var(--mantine-color-dark-3)" : "var(--mantine-color-dimmed)", + color: dark + ? "var(--mantine-color-dark-3)" + : "var(--mantine-color-dimmed)", })} @@ -173,7 +210,9 @@ const DemografiPekerjaan = () => { ? "green" : kpi.deltaType === "negative" ? "red" - : dark ? "dark.3" : "dimmed" + : dark + ? "dark.3" + : "dimmed" } mt={4} > @@ -194,7 +233,13 @@ const DemografiPekerjaan = () => { <Grid gutter="lg"> {/* Grafik Pengelompokan Umur */} <Grid.Col span={{ base: 12, lg: 6 }}> - <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}> + <Card + p="md" + radius="md" + withBorder + bg={dark ? "#141D34" : "white"} + style={{ borderColor: dark ? "#141D34" : "white" }} + > <Title order={3} fw={500} mb="md"> Grafik Pengelompokan Umur @@ -202,7 +247,7 @@ const DemografiPekerjaan = () => { h={300} data={ageDistributionData} dataKey="ageRange" - series={[{ name: 'total', color: 'darmasaba-navy' }]} + series={[{ name: "total", color: "darmasaba-navy" }]} withLegend /> @@ -210,7 +255,13 @@ const DemografiPekerjaan = () => { {/* Demografi Pekerjaan */} - + Demografi Pekerjaan @@ -218,7 +269,7 @@ const DemografiPekerjaan = () => { h={300} data={jobDistributionData} dataKey="job" - series={[{ name: 'total', color: 'darmasaba-navy' }]} + series={[{ name: "total", color: "darmasaba-navy" }]} withLegend /> @@ -229,16 +280,22 @@ const DemografiPekerjaan = () => { {/* Distribusi Agama */} - + Distribusi Agama ({ + data={religionData.map((item) => ({ name: item.religion, value: item.total, - color: item.color + color: item.color, }))} withLabels withLabelsLine @@ -250,27 +307,53 @@ const DemografiPekerjaan = () => { {/* Data per Banjar */} - + Data per Banjar - Banjar - Penduduk - KK - Miskin + + Banjar + + + Penduduk + + + KK + + + Miskin + {banjarData.map((item, index) => ( - {item.banjar} - {item.population.toLocaleString()} - {item.kk.toLocaleString()} - {item.poor.toLocaleString()} + {item.banjar} + + + + {item.population.toLocaleString()} + + + + + {item.kk.toLocaleString()} + + + + + {item.poor.toLocaleString()} + ))} @@ -281,14 +364,29 @@ const DemografiPekerjaan = () => { {/* Statistik Dinamika Penduduk */} - + Statistik Dinamika Penduduk {dynamicStats.map((stat, index) => ( - - + + @@ -298,9 +396,7 @@ const DemografiPekerjaan = () => { {stat.value} - - {stat.icon} - + {stat.icon} @@ -312,4 +408,4 @@ const DemografiPekerjaan = () => { ); }; -export default DemografiPekerjaan; \ No newline at end of file +export default DemografiPekerjaan; diff --git a/src/components/header.tsx b/src/components/header.tsx index ad1eb73..7109674 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,108 +1,72 @@ -import { useLocation } from "@tanstack/react-router"; -import { Bell, Moon, Sun, User as UserIcon } from "lucide-react"; // Renamed User to UserIcon to avoid conflict with Mantine's User component if it exists - import { + ActionIcon, + Badge, + Box, Group, Text, - Title, - ActionIcon, - Divider, - Avatar, - Box, - Badge, useMantineColorScheme, } from "@mantine/core"; +import { useLocation } from "@tanstack/react-router"; +import { Bell, Moon, Sun } from "lucide-react"; export function Header() { const location = useLocation(); const { colorScheme, toggleColorScheme } = useMantineColorScheme(); const dark = colorScheme === "dark"; - // Define page titles based on route - const getPageTitle = () => { - switch (location.pathname) { - case "/": - return "Desa Darmasaba"; - case "/kinerja-divisi": - return "Kinerja Divisi"; - case "/pengaduan": - return "Pengaduan & Layanan Publik"; - case "/analytic": - return "Jenna Analytic"; - case "/demografi": - return "Demografi & Kependudukan"; - case "/keuangan": - return "Keuangan & Anggaran"; - case "/bumdes": - return "Bumdes & UMKM Desa"; - case "/sosial": - case "/keamanan": - return "Keamanan"; - case "/bantuan": - return "Bantuan"; - case "/pengaturan": - return "Pengaturan"; - default: - return "Desa Darmasaba"; - } - }; + const title = + location.pathname === "/" + ? "Desa Darmasaba" + : "Desa Darmasaba"; return ( - - {/* Title */} - {getPageTitle()} + + {/* LEFT SPACER (burger sudah di luar) */} + - {/* Right Section */} - + {/* CENTER TITLE */} + + {title} + + {/* RIGHT ICONS */} + + + {dark ? : } + - {/* User Info */} - - - - I. B. Surya Prabhawa M... - - - Kepala Desa - - - - - - - - {/* Divider */} - - - {/* Icons */} - - toggleColorScheme()} - variant="subtle" - size="lg" - radius="xl" - aria-label="Toggle color scheme" + + + - {dark ? ( - - ) : ( - - )} - - - - - 10 - - - + 10 + + - + ); } diff --git a/src/components/help-page.tsx b/src/components/help-page.tsx index d43a0c3..1450a18 100644 --- a/src/components/help-page.tsx +++ b/src/components/help-page.tsx @@ -1,248 +1,435 @@ -import { Container, Grid, Title, Text, SimpleGrid, Box, Accordion, Stack, useMantineColorScheme } from '@mantine/core'; -import { HelpCard } from '@/components/ui/help-card'; -import { IconBook, IconVideo, IconHelpCircle, IconMessage, IconFileText, IconHeadphones } from '@tabler/icons-react'; -import { useState } from 'react'; +import { + Accordion, + Box, + Container, + Grid, + SimpleGrid, + Stack, + Text, + Title, + useMantineColorScheme, +} from "@mantine/core"; +import { + IconBook, + IconFileText, + IconHeadphones, + IconHelpCircle, + IconMessage, + IconVideo, +} from "@tabler/icons-react"; +import { useState } from "react"; +import { HelpCard } from "@/components/ui/help-card"; const HelpPage = () => { - const { colorScheme } = useMantineColorScheme(); - const dark = colorScheme === "dark"; - // Sample data for sections - const guideItems = [ - { title: 'Cara Login', description: 'Langkah-langkah untuk login ke dashboard' }, - { title: 'Navigasi Dashboard', description: 'Penjelasan tentang tata letak dan navigasi' }, - { title: 'Fitur Dasar', description: 'Panduan penggunaan fitur-fitur utama' }, - { title: 'Tips & Trik', description: 'Tips untuk meningkatkan produktivitas' }, - ]; + const { colorScheme } = useMantineColorScheme(); + const dark = colorScheme === "dark"; + // Sample data for sections + const guideItems = [ + { + title: "Cara Login", + description: "Langkah-langkah untuk login ke dashboard", + }, + { + title: "Navigasi Dashboard", + description: "Penjelasan tentang tata letak dan navigasi", + }, + { + title: "Fitur Dasar", + description: "Panduan penggunaan fitur-fitur utama", + }, + { + title: "Tips & Trik", + description: "Tips untuk meningkatkan produktivitas", + }, + ]; - const videoItems = [ - { title: 'Dashboard Overview', duration: '5:23' }, - { title: 'Analisis Data', duration: '8:45' }, - { title: 'Membuat Laporan', duration: '6:12' }, - { title: 'Export Data', duration: '4:30' }, - ]; + const videoItems = [ + { title: "Dashboard Overview", duration: "5:23" }, + { title: "Analisis Data", duration: "8:45" }, + { title: "Membuat Laporan", duration: "6:12" }, + { title: "Export Data", duration: "4:30" }, + ]; - const faqItems = [ - { question: 'Bagaimana cara reset password?', answer: 'Anda dapat mereset password melalui halaman login dengan klik "Lupa Password"' }, - { question: 'Apakah saya bisa mengakses data offline?', answer: 'Saat ini aplikasi hanya dapat diakses secara online' }, - { question: 'Berapa lama waktu respon support?', answer: 'Tim support kami biasanya merespon dalam waktu kurang dari 24 jam' }, - { question: 'Bagaimana cara menambahkan pengguna baru?', answer: 'Fitur penambahan pengguna dapat ditemukan di menu Pengaturan > Manajemen Pengguna' }, - ]; + const faqItems = [ + { + question: "Bagaimana cara reset password?", + answer: + 'Anda dapat mereset password melalui halaman login dengan klik "Lupa Password"', + }, + { + question: "Apakah saya bisa mengakses data offline?", + answer: "Saat ini aplikasi hanya dapat diakses secara online", + }, + { + question: "Berapa lama waktu respon support?", + answer: + "Tim support kami biasanya merespon dalam waktu kurang dari 24 jam", + }, + { + question: "Bagaimana cara menambahkan pengguna baru?", + answer: + "Fitur penambahan pengguna dapat ditemukan di menu Pengaturan > Manajemen Pengguna", + }, + ]; - const documentationItems = [ - { title: 'API Reference', description: 'Dokumentasi lengkap untuk integrasi API' }, - { title: 'Integrasi Sistem', description: 'Cara mengintegrasikan dengan sistem eksternal' }, - { title: 'Format Data', description: 'Spesifikasi format data yang didukung' }, - { title: 'Best Practices', description: 'Praktik terbaik dalam penggunaan platform' }, - ]; + const documentationItems = [ + { + title: "API Reference", + description: "Dokumentasi lengkap untuk integrasi API", + }, + { + title: "Integrasi Sistem", + description: "Cara mengintegrasikan dengan sistem eksternal", + }, + { + title: "Format Data", + description: "Spesifikasi format data yang didukung", + }, + { + title: "Best Practices", + description: "Praktik terbaik dalam penggunaan platform", + }, + ]; - const stats = [ - { value: '150+', label: 'Artikel Panduan' }, - { value: '50+', label: 'Video Tutorial' }, - { value: '24/7', label: 'Support Aktif' }, - ]; + const stats = [ + { value: "150+", label: "Artikel Panduan" }, + { value: "50+", label: "Video Tutorial" }, + { value: "24/7", label: "Support Aktif" }, + ]; - // State for chat functionality - const [messages, setMessages] = useState([ - { id: 1, text: 'Halo! Saya Jenna, asisten virtual Anda. Bagaimana saya bisa membantu hari ini?', sender: 'jenna' } - ]); - const [inputValue, setInputValue] = useState(''); - const [isLoading, setIsLoading] = useState(false); + // State for chat functionality + const [messages, setMessages] = useState([ + { + id: 1, + text: "Halo! Saya Jenna, asisten virtual Anda. Bagaimana saya bisa membantu hari ini?", + sender: "jenna", + }, + ]); + const [inputValue, setInputValue] = useState(""); + const [isLoading, setIsLoading] = useState(false); - const handleSendMessage = () => { - if (inputValue.trim() === '') return; + const handleSendMessage = () => { + if (inputValue.trim() === "") return; - // Add user message - const newUserMessage = { - id: messages.length + 1, - text: inputValue, - sender: 'user' - }; + // Add user message + const newUserMessage = { + id: messages.length + 1, + text: inputValue, + sender: "user", + }; - setMessages(prev => [...prev, newUserMessage]); - setInputValue(''); - setIsLoading(true); + setMessages((prev) => [...prev, newUserMessage]); + setInputValue(""); + setIsLoading(true); - // Simulate Jenna's response after delay - setTimeout(() => { - const jennaResponse = { - id: messages.length + 2, - text: 'Terima kasih atas pertanyaan Anda. Saat ini saya adalah versi awal dari asisten virtual. Tim kami sedang mengembangkan kemampuan saya lebih lanjut.', - sender: 'jenna' - }; - setMessages(prev => [...prev, jennaResponse]); - setIsLoading(false); - }, 1000); - }; + // Simulate Jenna's response after delay + setTimeout(() => { + const jennaResponse = { + id: messages.length + 2, + text: "Terima kasih atas pertanyaan Anda. Saat ini saya adalah versi awal dari asisten virtual. Tim kami sedang mengembangkan kemampuan saya lebih lanjut.", + sender: "jenna", + }; + setMessages((prev) => [...prev, jennaResponse]); + setIsLoading(false); + }, 1000); + }; - const handleKeyPress = (e: React.KeyboardEvent) => { - if (e.key === 'Enter' && !e.shiftKey) { - e.preventDefault(); - handleSendMessage(); - } - }; + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault(); + handleSendMessage(); + } + }; - return ( - - Pusat Bantuan - - Temukan jawaban untuk pertanyaan Anda atau hubungi tim support kami - + return ( + + + Pusat Bantuan + + + Temukan jawaban untuk pertanyaan Anda atau hubungi tim support kami + - {/* Statistics Section */} - - {stats.map((stat, index) => ( - - {stat.value} - {stat.label} - - ))} - + {/* Statistics Section */} + + {stats.map((stat, index) => ( + + + {stat.value} + + + {stat.label} + + + ))} + - - - - {/* Panduan Memulai */} - - } title="Panduan Memulai" h="100%"> - - {guideItems.map((item, index) => ( - alert(`Navigasi ke ${item.title}`)}> - {item.title} - {item.description} - - ))} - - - + + + + {/* Panduan Memulai */} + + } + title="Panduan Memulai" + h="100%" + > + + {guideItems.map((item, index) => ( + alert(`Navigasi ke ${item.title}`)} + > + {item.title} + + {item.description} + + + ))} + + + - {/* Video Tutorial */} - - } title="Video Tutorial" h="100%"> - - {videoItems.map((item, index) => ( - alert(`Buka video: ${item.title}`)}> - {item.title} - {item.duration} - - ))} - - - + {/* Video Tutorial */} + + } + title="Video Tutorial" + h="100%" + > + + {videoItems.map((item, index) => ( + alert(`Buka video: ${item.title}`)} + > + {item.title} + + {item.duration} + + + ))} + + + - {/* FAQ */} - - } title="FAQ" h="100%"> - - {faqItems.map((item, index) => ( - - {item.question} - - {item.answer} - - - ))} - - - - - + {/* FAQ */} + + } + title="FAQ" + h="100%" + > + + {faqItems.map((item, index) => ( + + {item.question} + + {item.answer} + + + ))} + + + + + - - - {/* Hubungi Support */} - - } title="Hubungi Support" h="100%"> - - Email - support@example.com + + + {/* Hubungi Support */} + + } + title="Hubungi Support" + h="100%" + > + + Email + + support@example.com + - WhatsApp - +62 123 456 7890 + WhatsApp + + +62 123 456 7890 + - Jam Kerja - Senin - Jumat, 09:00 - 17:00 WIB + Jam Kerja + + Senin - Jumat, 09:00 - 17:00 WIB + - Waktu Respon - Rata-rata 2-4 jam kerja - - - + + Waktu Respon + + + Rata-rata 2-4 jam kerja + + + + - {/* Dokumentasi */} - - } title="Dokumentasi" h="100%"> - - {documentationItems.map((item, index) => ( - alert(`Navigasi ke dokumentasi: ${item.title}`)}> - {item.title} - {item.description} - - ))} - - - + {/* Dokumentasi */} + + } + title="Dokumentasi" + h="100%" + > + + {documentationItems.map((item, index) => ( + + alert(`Navigasi ke dokumentasi: ${item.title}`) + } + > + {item.title} + + {item.description} + + + ))} + + + - {/* Jenna - Virtual Assistant */} - - } title="Jenna - Virtual Assistant" h="100%"> - - - {messages.map((msg) => ( - - {msg.text} - - ))} - + {/* Jenna - Virtual Assistant */} + + } + title="Jenna - Virtual Assistant" + h="100%" + > + + + {messages.map((msg) => ( + + {msg.text} + + ))} + - - setInputValue(e.target.value)} - onKeyPress={handleKeyPress} - placeholder="Ketik pesan Anda..." - style={{ - flex: 1, - padding: '8px 12px', - borderRadius: '20px', - border: '1px solid #ccc', - }} - disabled={isLoading} - /> - - - - - - - - - - ); + + setInputValue(e.target.value)} + onKeyPress={handleKeyPress} + placeholder="Ketik pesan Anda..." + style={{ + flex: 1, + padding: "8px 12px", + borderRadius: "20px", + border: "1px solid #ccc", + }} + disabled={isLoading} + /> + + + + + + + + + + ); }; -export default HelpPage; \ No newline at end of file +export default HelpPage; diff --git a/src/components/jenna-analytic.tsx b/src/components/jenna-analytic.tsx index 251b873..063a56c 100644 --- a/src/components/jenna-analytic.tsx +++ b/src/components/jenna-analytic.tsx @@ -1,18 +1,18 @@ -import React from "react"; +import { BarChart } from "@mantine/charts"; import { + Badge, + Box, Button, Card, - Badge, - Progress, - Title, - Text, - Group, - Stack, Grid, - Box, + Group, + Progress, + Stack, + Text, + Title, useMantineColorScheme, } from "@mantine/core"; -import { BarChart } from "@mantine/charts"; +import React from "react"; // Sample Data const kpiData = [ @@ -144,7 +144,13 @@ const JennaAnalytic = () => { {kpiData.map((kpi) => ( - + {kpi.title} @@ -182,7 +188,13 @@ const JennaAnalytic = () => { ))} - + Interaksi Chatbot @@ -190,7 +202,7 @@ const JennaAnalytic = () => { h={300} data={chartData} dataKey="day" - series={[{ name: 'total', color: 'blue' }]} + series={[{ name: "total", color: "blue" }]} withLegend /> @@ -199,16 +211,21 @@ const JennaAnalytic = () => { {/* Grafik Interaksi Chatbot (now Bar Chart) */} - + Jam Tersibuk {busyHours.map((item, index) => ( - - {item.period} - + {item.period} @@ -225,7 +242,14 @@ const JennaAnalytic = () => { {/* Topik Pertanyaan Terbanyak */} - + Topik Pertanyaan Terbanyak @@ -251,12 +275,9 @@ const JennaAnalytic = () => { {/* Jam Tersibuk */} - - - - + + + ); - -} +}; export default JennaAnalytic; - diff --git a/src/components/keamanan-page.tsx b/src/components/keamanan-page.tsx index 18e3599..b1dd262 100644 --- a/src/components/keamanan-page.tsx +++ b/src/components/keamanan-page.tsx @@ -1,225 +1,325 @@ -import { useState } from "react"; -import { - Card, - Grid, - GridCol, - Group, - Text, - Title, - Stack, - useMantineColorScheme, - Badge, - List, - ThemeIcon, - Box +import { + Badge, + Box, + Card, + Grid, + GridCol, + Group, + List, + Stack, + Text, + ThemeIcon, + Title, + useMantineColorScheme, } from "@mantine/core"; -import { - IconCamera, - IconAlertTriangle, - IconMapPin, - IconClock, - IconEye, - IconShieldLock +import { + IconAlertTriangle, + IconCamera, + IconClock, + IconEye, + IconMapPin, + IconShieldLock, } from "@tabler/icons-react"; +import { useState } from "react"; const KeamananPage = () => { - const { colorScheme } = useMantineColorScheme(); - const dark = colorScheme === 'dark'; - - // Sample data for KPI cards - const kpiData = [ - { - title: "CCTV Aktif", - value: 20, - subtitle: "Kamera Online", - icon: , - color: "darmasaba-success", - }, - { - title: "Laporan Keamanan", - value: 15, - subtitle: "Minggu ini", - icon: , - color: "darmasaba-danger", - }, - ]; + const { colorScheme } = useMantineColorScheme(); + const dark = colorScheme === "dark"; - // Sample data for CCTV locations - const cctvLocations = [ - { id: "CCTV-01", lat: -8.5, lng: 115.2, status: "active", lastSeen: "2 jam yang lalu", location: "Balai Desa" }, - { id: "CCTV-02", lat: -8.6, lng: 115.3, status: "active", lastSeen: "1 jam yang lalu", location: "Pintu Masuk Desa" }, - { id: "CCTV-03", lat: -8.4, lng: 115.1, status: "offline", lastSeen: "1 hari yang lalu", location: "Taman Desa" }, - { id: "CCTV-04", lat: -8.7, lng: 115.4, status: "active", lastSeen: "30 menit yang lalu", location: "Pasar Desa" }, - ]; + // Sample data for KPI cards + const kpiData = [ + { + title: "CCTV Aktif", + value: 20, + subtitle: "Kamera Online", + icon: , + color: "darmasaba-success", + }, + { + title: "Laporan Keamanan", + value: 15, + subtitle: "Minggu ini", + icon: , + color: "darmasaba-danger", + }, + ]; - // Sample data for security reports - const securityReports = [ - { - id: "REP-001", - title: "Pencurian Motor", - reportedAt: "2 jam yang lalu", - date: "12 Feb 2026, 14:30", - location: "Jl. Kecubung 20", - status: "baru", - }, - { - id: "REP-002", - title: "Kerusuhan Antar Warga", - reportedAt: "4 jam yang lalu", - date: "12 Feb 2026, 12:15", - location: "RT 05 RW 02", - status: "baru", - }, - { - id: "REP-003", - title: "Kebakaran Rumah", - reportedAt: "1 hari yang lalu", - date: "11 Feb 2026, 08:45", - location: "Jl. Flamboyan 15", - status: "diproses", - }, - { - id: "REP-004", - title: "Kehilangan Barang", - reportedAt: "2 hari yang lalu", - date: "10 Feb 2026, 16:20", - location: "Taman Desa", - status: "selesai", - }, - ]; + // Sample data for CCTV locations + const cctvLocations = [ + { + id: "CCTV-01", + lat: -8.5, + lng: 115.2, + status: "active", + lastSeen: "2 jam yang lalu", + location: "Balai Desa", + }, + { + id: "CCTV-02", + lat: -8.6, + lng: 115.3, + status: "active", + lastSeen: "1 jam yang lalu", + location: "Pintu Masuk Desa", + }, + { + id: "CCTV-03", + lat: -8.4, + lng: 115.1, + status: "offline", + lastSeen: "1 hari yang lalu", + location: "Taman Desa", + }, + { + id: "CCTV-04", + lat: -8.7, + lng: 115.4, + status: "active", + lastSeen: "30 menit yang lalu", + location: "Pasar Desa", + }, + ]; - return ( - - {/* Page Header */} - - - Keamanan Lingkungan Desa - - + // Sample data for security reports + const securityReports = [ + { + id: "REP-001", + title: "Pencurian Motor", + reportedAt: "2 jam yang lalu", + date: "12 Feb 2026, 14:30", + location: "Jl. Kecubung 20", + status: "baru", + }, + { + id: "REP-002", + title: "Kerusuhan Antar Warga", + reportedAt: "4 jam yang lalu", + date: "12 Feb 2026, 12:15", + location: "RT 05 RW 02", + status: "baru", + }, + { + id: "REP-003", + title: "Kebakaran Rumah", + reportedAt: "1 hari yang lalu", + date: "11 Feb 2026, 08:45", + location: "Jl. Flamboyan 15", + status: "diproses", + }, + { + id: "REP-004", + title: "Kehilangan Barang", + reportedAt: "2 hari yang lalu", + date: "10 Feb 2026, 16:20", + location: "Taman Desa", + status: "selesai", + }, + ]; - {/* KPI Cards */} - - {kpiData.map((kpi, index) => ( - - - - - - {kpi.subtitle} - - - - {kpi.value} - - - {kpi.title} - - - - - {kpi.icon} - - - - - ))} - + return ( + + {/* Page Header */} + + + Keamanan Lingkungan Desa + + - - {/* Peta Keamanan CCTV */} - - - Peta Keamanan CCTV - Titik Lokasi CCTV - - {/* Placeholder for map */} - - - - Peta Lokasi CCTV - Integrasi dengan Google Maps atau Mapbox akan ditampilkan di sini - - - - {/* CCTV Locations List */} - - Daftar CCTV - {cctvLocations.map((cctv, index) => ( - - - - - {cctv.id} - - {cctv.status === "active" ? "Online" : "Offline"} - - - {cctv.location} - - - - {cctv.lastSeen} - - - - ))} - - - + {/* KPI Cards */} + + {kpiData.map((kpi, index) => ( + + + + + + {kpi.subtitle} + + + + {kpi.value} + + + {kpi.title} + + + + + {kpi.icon} + + + + + ))} + - {/* Daftar Laporan Keamanan */} - - - Laporan Keamanan Lingkungan - - - {securityReports.map((report, index) => ( - - - {report.title} - - {report.status} - - - - - - - {report.location} - - - - {report.reportedAt} - - - - {report.date} - - ))} - - - - - - ); + + {/* Peta Keamanan CCTV */} + + + + Peta Keamanan CCTV + + + Titik Lokasi CCTV + + + {/* Placeholder for map */} + + + + Peta Lokasi CCTV + + Integrasi dengan Google Maps atau Mapbox akan ditampilkan di + sini + + + + + {/* CCTV Locations List */} + + + Daftar CCTV + + {cctvLocations.map((cctv, index) => ( + + + + + + {cctv.id} + + + {cctv.status === "active" ? "Online" : "Offline"} + + + + {cctv.location} + + + + + + {cctv.lastSeen} + + + + + ))} + + + + + {/* Daftar Laporan Keamanan */} + + + + Laporan Keamanan Lingkungan + + + + {securityReports.map((report, index) => ( + + + + {report.title} + + + {report.status} + + + + + + + + {report.location} + + + + + + {report.reportedAt} + + + + + + {report.date} + + + ))} + + + + + + ); }; -export default KeamananPage; \ No newline at end of file +export default KeamananPage; diff --git a/src/components/keuangan-anggaran.tsx b/src/components/keuangan-anggaran.tsx index 1a6f0cb..47ef4db 100644 --- a/src/components/keuangan-anggaran.tsx +++ b/src/components/keuangan-anggaran.tsx @@ -1,19 +1,23 @@ -import React from "react"; +import { BarChart } from "@mantine/charts"; import { + Badge, + Box, Button, Card, - Badge, - Title, - Text, - Group, - Stack, Grid, - Box, + Group, Progress, + Stack, + Text, + Title, useMantineColorScheme, } from "@mantine/core"; -import { IconTrendingUp, IconTrendingDown, IconCurrency } from "@tabler/icons-react"; -import { BarChart } from "@mantine/charts"; +import { + IconCurrency, + IconTrendingDown, + IconTrendingUp, +} from "@tabler/icons-react"; +import React from "react"; // Sample Data const kpiData = [ @@ -22,9 +26,7 @@ const kpiData = [ title: "Total APBDes", value: "Rp 5.2M", sub: "Tahun 2025", - icon: ( - - ), + icon: , }, { id: 2, @@ -55,18 +57,14 @@ const kpiData = [ sub: "Bulan ini", delta: "+8%", deltaType: "positive", - icon: ( - - ), + icon: , }, { id: 4, title: "Pengeluaran", value: "Rp 520jt", sub: "Bulan ini", - icon: ( - - ), + icon: , }, ]; @@ -125,7 +123,14 @@ const KeuanganAnggaran = () => { {kpiData.map((kpi) => ( - + {kpi.title} @@ -167,7 +172,13 @@ const KeuanganAnggaran = () => { {/* Grafik Pemasukan vs Pengeluaran */} - + Pemasukan vs Pengeluaran @@ -176,8 +187,8 @@ const KeuanganAnggaran = () => { data={incomeExpenseData} dataKey="month" series={[ - { name: 'income', color: 'green', label: 'Pemasukan' }, - { name: 'expense', color: 'red', label: 'Pengeluaran' }, + { name: "income", color: "green", label: "Pemasukan" }, + { name: "expense", color: "red", label: "Pengeluaran" }, ]} withLegend /> @@ -186,7 +197,13 @@ const KeuanganAnggaran = () => { {/* Alokasi Anggaran Per Sektor */} - + Alokasi Anggaran Per Sektor @@ -194,7 +211,9 @@ const KeuanganAnggaran = () => { h={300} data={allocationData} dataKey="sector" - series={[{ name: 'amount', color: 'darmasaba-navy', label: 'Jumlah' }]} + series={[ + { name: "amount", color: "darmasaba-navy", label: "Jumlah" }, + ]} withLegend orientation="horizontal" /> @@ -205,7 +224,13 @@ const KeuanganAnggaran = () => { {/* Dana Bantuan & Hibah */} - + Dana Bantuan & Hibah @@ -243,13 +268,21 @@ const KeuanganAnggaran = () => { {/* Laporan APBDes */} - + Laporan APBDes - Pendapatan + + Pendapatan + {apbdReport.income.map((item, index) => ( @@ -269,7 +302,9 @@ const KeuanganAnggaran = () => { - Belanja + + Belanja + {apbdReport.expenses.map((item, index) => ( @@ -288,11 +323,26 @@ const KeuanganAnggaran = () => { - + Saldo: - apbdReport.totalExpenses ? "green" : "red"}> - Rp {(apbdReport.totalIncome - apbdReport.totalExpenses).toLocaleString()}jt + apbdReport.totalExpenses + ? "green" + : "red" + } + > + Rp{" "} + {( + apbdReport.totalIncome - apbdReport.totalExpenses + ).toLocaleString()} + jt @@ -304,4 +354,4 @@ const KeuanganAnggaran = () => { ); }; -export default KeuanganAnggaran; \ No newline at end of file +export default KeuanganAnggaran; diff --git a/src/components/kinerja-divisi.tsx b/src/components/kinerja-divisi.tsx index f947352..efd504f 100644 --- a/src/components/kinerja-divisi.tsx +++ b/src/components/kinerja-divisi.tsx @@ -1,27 +1,38 @@ import { - Stack, + ActionIcon, + Box, + Card, + Divider, Grid, GridCol, Group, - Text, - Title, - ActionIcon, - Progress as MantineProgress, - Box, - Badge as MantineBadge, - Card, - useMantineColorScheme, - ThemeIcon, List, - Divider, - Skeleton + Badge as MantineBadge, + Progress as MantineProgress, + Skeleton, + Stack, + Text, + ThemeIcon, + Title, + useMantineColorScheme, } from "@mantine/core"; +import { + Bar, + BarChart, + CartesianGrid, + Cell, + Pie, + PieChart, + ResponsiveContainer, + Tooltip, + XAxis, + YAxis, +} from "recharts"; import { Button } from "@/components/ui/button"; -import { Bar, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts"; const KinerjaDivisi = () => { const { colorScheme } = useMantineColorScheme(); - const dark = colorScheme === 'dark'; + const dark = colorScheme === "dark"; // Data for division progress chart const divisionProgressData = [ @@ -39,7 +50,7 @@ const KinerjaDivisi = () => { { title: "Laporan Bulanan", status: "selesai" }, { title: "Arsip Dokumen", status: "berjalan" }, { title: "Undangan Rapat", status: "tertunda" }, - ] + ], }, { name: "Keuangan", @@ -47,7 +58,7 @@ const KinerjaDivisi = () => { { title: "Laporan APBDes", status: "selesai" }, { title: "Verifikasi Dana", status: "tertunda" }, { title: "Pengeluaran Harian", status: "berjalan" }, - ] + ], }, { name: "Sosial", @@ -55,7 +66,7 @@ const KinerjaDivisi = () => { { title: "Program Bantuan", status: "selesai" }, { title: "Kegiatan Posyandu", status: "berjalan" }, { title: "Monitoring Stunting", status: "tertunda" }, - ] + ], }, { name: "Humas", @@ -63,7 +74,7 @@ const KinerjaDivisi = () => { { title: "Publikasi Kegiatan", status: "selesai" }, { title: "Koordinasi Media", status: "berjalan" }, { title: "Laporan Kegiatan", status: "tertunda" }, - ] + ], }, ]; @@ -77,10 +88,30 @@ const KinerjaDivisi = () => { // Activity progress const activityProgress = [ - { name: "Pembangunan Jalan", progress: 75, date: "15 Feb 2026", status: "berjalan" }, - { name: "Posyandu Bulanan", progress: 100, date: "10 Feb 2026", status: "selesai" }, - { name: "Vaksinasi Massal", progress: 45, date: "20 Feb 2026", status: "berjalan" }, - { name: "Festival Budaya", progress: 20, date: "5 Mar 2026", status: "berjalan" }, + { + name: "Pembangunan Jalan", + progress: 75, + date: "15 Feb 2026", + status: "berjalan", + }, + { + name: "Posyandu Bulanan", + progress: 100, + date: "10 Feb 2026", + status: "selesai", + }, + { + name: "Vaksinasi Massal", + progress: 45, + date: "20 Feb 2026", + status: "berjalan", + }, + { + name: "Festival Budaya", + progress: 20, + date: "5 Mar 2026", + status: "berjalan", + }, ]; // Document statistics @@ -97,19 +128,31 @@ const KinerjaDivisi = () => { { name: "Dibatalkan", value: 2 }, ]; - const COLORS = ['#10B981', '#F59E0B', '#EF4444', '#6B7280']; + const COLORS = ["#10B981", "#F59E0B", "#EF4444", "#6B7280"]; const STATUS_COLORS: Record = { - selesai: 'green', - berjalan: 'blue', - tertunda: 'red', - proses: 'yellow' + selesai: "green", + berjalan: "blue", + tertunda: "red", + proses: "yellow", }; // Discussion data const discussions = [ - { title: "Pembahasan APBDes 2026", sender: "Kepala Desa", timestamp: "2 jam yang lalu" }, - { title: "Kegiatan Posyandu", sender: "Divisi Sosial", timestamp: "5 jam yang lalu" }, - { title: "Festival Budaya", sender: "Divisi Humas", timestamp: "1 hari yang lalu" }, + { + title: "Pembahasan APBDes 2026", + sender: "Kepala Desa", + timestamp: "2 jam yang lalu", + }, + { + title: "Kegiatan Posyandu", + sender: "Divisi Sosial", + timestamp: "5 jam yang lalu", + }, + { + title: "Festival Budaya", + sender: "Divisi Humas", + timestamp: "1 hari yang lalu", + }, ]; // Today's agenda @@ -121,32 +164,73 @@ const KinerjaDivisi = () => { return ( {/* Grafik Progres Tugas per Divisi */} - - + <Card + p="md" + radius="md" + withBorder + bg={dark ? "#141D34" : "white"} + style={{ borderColor: dark ? "#141D34" : "white" }} + > + <Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}> Grafik Progres Tugas per Divisi - + + + + - - - @@ -155,17 +239,26 @@ const KinerjaDivisi = () => { {divisionTasks.map((division, index) => ( - - + <Card + p="md" + radius="md" + withBorder + bg={dark ? "#141D34" : "white"} + style={{ borderColor: dark ? "#141D34" : "white" }} + h="100%" + > + <Title order={4} mb="sm" c={dark ? "white" : "darmasaba-navy"}> {division.name} {division.tasks.map((task, taskIndex) => ( - {task.title} + + {task.title} + {task.status} @@ -180,17 +273,33 @@ const KinerjaDivisi = () => { {/* Arsip Digital Perangkat Desa */} - - + <Card + p="md" + radius="md" + withBorder + bg={dark ? "#141D34" : "white"} + style={{ borderColor: dark ? "#141D34" : "white" }} + > + <Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}> Arsip Digital Perangkat Desa {archiveItems.map((item, index) => ( - + - {item.name} - {item.count} + + {item.name} + + + {item.count} + @@ -199,17 +308,32 @@ const KinerjaDivisi = () => { {/* Kartu Progres Kegiatan */} - - + <Card + p="md" + radius="md" + withBorder + bg={dark ? "#141D34" : "white"} + style={{ borderColor: dark ? "#141D34" : "white" }} + > + <Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}> Progres Kegiatan / Program {activityProgress.map((activity, index) => ( - + - {activity.name} + + {activity.name} + {activity.status} @@ -223,9 +347,13 @@ const KinerjaDivisi = () => { color={activity.progress === 100 ? "green" : "blue"} w="calc(100% - 80px)" /> - {activity.progress}% + + {activity.progress}% + - {activity.date} + + {activity.date} + ))} @@ -234,38 +362,75 @@ const KinerjaDivisi = () => { {/* Statistik Dokumen & Progres Kegiatan */} - - + <Card + p="md" + radius="md" + withBorder + bg={dark ? "#141D34" : "white"} + style={{ borderColor: dark ? "#141D34" : "white" }} + > + <Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}> Jumlah Dokumen - + + - - - + <Card + p="md" + radius="md" + withBorder + bg={dark ? "#141D34" : "white"} + style={{ borderColor: dark ? "#141D34" : "white" }} + > + <Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}> Progres Kegiatan @@ -278,16 +443,26 @@ const KinerjaDivisi = () => { outerRadius={80} fill="#8884d8" dataKey="value" - label={({ name, percent }) => `${name}: ${percent ? (percent * 100).toFixed(0) : '0'}%`} + label={({ name, percent }) => + `${name}: ${percent ? (percent * 100).toFixed(0) : "0"}%` + } > {activityProgressStats.map((entry, index) => ( - + ))} @@ -296,26 +471,51 @@ const KinerjaDivisi = () => { {/* Diskusi Internal */} - - + <Card + p="md" + radius="md" + withBorder + bg={dark ? "#141D34" : "white"} + style={{ borderColor: dark ? "#141D34" : "white" }} + > + <Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}> Diskusi Internal {discussions.map((discussion, index) => ( - + - {discussion.title} - {discussion.timestamp} + + {discussion.title} + + + {discussion.timestamp} + - {discussion.sender} + + {discussion.sender} + ))} {/* Agenda / Acara Hari Ini */} - - + <Card + p="md" + radius="md" + withBorder + bg={dark ? "#141D34" : "white"} + style={{ borderColor: dark ? "#141D34" : "white" }} + > + <Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}> Agenda / Acara Hari Ini {todayAgenda.length > 0 ? ( @@ -326,7 +526,9 @@ const KinerjaDivisi = () => { {agenda.time} - {agenda.event} + + {agenda.event} + ))} @@ -340,4 +542,4 @@ const KinerjaDivisi = () => { ); }; -export default KinerjaDivisi; \ No newline at end of file +export default KinerjaDivisi; diff --git a/src/components/pengaduan-layanan-publik.tsx b/src/components/pengaduan-layanan-publik.tsx index 268af30..cafff0d 100644 --- a/src/components/pengaduan-layanan-publik.tsx +++ b/src/components/pengaduan-layanan-publik.tsx @@ -1,38 +1,54 @@ -import type React from "react"; -import { useState } from "react"; import { + ActionIcon, + Badge, + Box, Button, Card, + Divider, Grid, GridCol, Group, - Text, - Title, - TextInput, - Textarea, - Select, - Table, - Badge, - Stack, - useMantineColorScheme, List, - Divider, - ActionIcon, - Box + Select, + Stack, + Table, + Text, + Textarea, + TextInput, + Title, + useMantineColorScheme, } from "@mantine/core"; -import { IconMessage, IconAlertTriangle, IconClock, IconCheck, IconChevronRight } from "@tabler/icons-react"; -import { Line, LineChart, Bar, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"; +import { + IconAlertTriangle, + IconCheck, + IconChevronRight, + IconClock, + IconMessage, +} from "@tabler/icons-react"; +import type React from "react"; +import { useState } from "react"; +import { + Bar, + BarChart, + CartesianGrid, + Line, + LineChart, + ResponsiveContainer, + Tooltip, + XAxis, + YAxis, +} from "recharts"; const PengaduanLayananPublik = () => { const { colorScheme } = useMantineColorScheme(); - const dark = colorScheme === 'dark'; + const dark = colorScheme === "dark"; // Summary data const summaryData = { total: 42, baru: 14, diproses: 14, - selesai: 14 + selesai: 14, }; // Tren pengaduan data @@ -42,7 +58,7 @@ const PengaduanLayananPublik = () => { { bulan: "Mar", jumlah: 42 }, { bulan: "Apr", jumlah: 38 }, { bulan: "Mei", jumlah: 45 }, - { bulan: "Jun", jumlah: 42 } + { bulan: "Jun", jumlah: 42 }, ]; // Surat terbanyak data @@ -51,24 +67,65 @@ const PengaduanLayananPublik = () => { { jenis: "KK", jumlah: 18 }, { jenis: "Domisili", jumlah: 15 }, { jenis: "Usaha", jumlah: 12 }, - { jenis: "Lainnya", jumlah: 8 } + { jenis: "Lainnya", jumlah: 8 }, ]; // Pengajuan terbaru data const pengajuanTerbaru = [ - { nama: "Budi Santoso", jenis: "Ketertiban Umum", waktu: "2 jam yang lalu", status: "baru" }, - { nama: "Siti Rahayu", jenis: "Pelayanan Kesehatan", waktu: "5 jam yang lalu", status: "diproses" }, - { nama: "Ahmad Fauzi", jenis: "Infrastruktur", waktu: "1 hari yang lalu", status: "selesai" }, - { nama: "Dewi Lestari", jenis: "Administrasi", waktu: "1 hari yang lalu", status: "baru" }, - { nama: "Joko Widodo", jenis: "Keamanan", waktu: "2 hari yang lalu", status: "diproses" } + { + nama: "Budi Santoso", + jenis: "Ketertiban Umum", + waktu: "2 jam yang lalu", + status: "baru", + }, + { + nama: "Siti Rahayu", + jenis: "Pelayanan Kesehatan", + waktu: "5 jam yang lalu", + status: "diproses", + }, + { + nama: "Ahmad Fauzi", + jenis: "Infrastruktur", + waktu: "1 hari yang lalu", + status: "selesai", + }, + { + nama: "Dewi Lestari", + jenis: "Administrasi", + waktu: "1 hari yang lalu", + status: "baru", + }, + { + nama: "Joko Widodo", + jenis: "Keamanan", + waktu: "2 hari yang lalu", + status: "diproses", + }, ]; // Ide inovatif data const ideInovatif = [ - { nama: "Andi Prasetyo", judul: "Penerapan Smart Village", kategori: "Teknologi" }, - { nama: "Rina Kusuma", judul: "Program Ekowisata Desa", kategori: "Ekonomi" }, - { nama: "Bambang Suryono", judul: "Peningkatan Sanitasi", kategori: "Kesehatan" }, - { nama: "Lina Marlina", judul: "Pusat Kreatif Anak Muda", kategori: "Pendidikan" } + { + nama: "Andi Prasetyo", + judul: "Penerapan Smart Village", + kategori: "Teknologi", + }, + { + nama: "Rina Kusuma", + judul: "Program Ekowisata Desa", + kategori: "Ekonomi", + }, + { + nama: "Bambang Suryono", + judul: "Peningkatan Sanitasi", + kategori: "Kesehatan", + }, + { + nama: "Lina Marlina", + judul: "Pusat Kreatif Anak Muda", + kategori: "Pendidikan", + }, ]; const [activeTab, setActiveTab] = useState<"complaints" | "services">( @@ -229,10 +286,14 @@ const PengaduanLayananPublik = () => { // Status badge color mapping const getStatusColor = (status: string) => { switch (status) { - case 'baru': return 'red'; - case 'diproses': return 'yellow'; - case 'selesai': return 'green'; - default: return 'gray'; + case "baru": + return "red"; + case "diproses": + return "yellow"; + case "selesai": + return "green"; + default: + return "gray"; } }; @@ -243,7 +304,14 @@ const PengaduanLayananPublik = () => { {/* Summary Cards */} - + @@ -266,7 +334,14 @@ const PengaduanLayananPublik = () => { - + @@ -276,12 +351,7 @@ const PengaduanLayananPublik = () => { {summaryData.baru} - + @@ -289,7 +359,14 @@ const PengaduanLayananPublik = () => { - + @@ -299,12 +376,7 @@ const PengaduanLayananPublik = () => { {summaryData.diproses} - + @@ -312,7 +384,14 @@ const PengaduanLayananPublik = () => { - + @@ -322,12 +401,7 @@ const PengaduanLayananPublik = () => { {summaryData.selesai} - + @@ -336,7 +410,13 @@ const PengaduanLayananPublik = () => { {/* Grafik Tren Pengaduan */} - + Grafik Tren Pengaduan @@ -345,31 +425,58 @@ const PengaduanLayananPublik = () => { @@ -379,7 +486,14 @@ const PengaduanLayananPublik = () => { {/* Surat Terbanyak */} - + Surat Terbanyak @@ -388,30 +502,51 @@ const PengaduanLayananPublik = () => { @@ -421,7 +556,14 @@ const PengaduanLayananPublik = () => { {/* Pengajuan Terbaru */} - + Pengajuan Terbaru @@ -429,14 +571,23 @@ const PengaduanLayananPublik = () => { - {item.nama} - {item.jenis} + + {item.nama} + + + {item.jenis} + - + {item.status} - {item.waktu} + + {item.waktu} + @@ -447,7 +598,14 @@ const PengaduanLayananPublik = () => { {/* Ajuan Ide Inovatif */} - + Ajuan Ide Inovatif @@ -455,8 +613,12 @@ const PengaduanLayananPublik = () => { - {item.judul} - {item.nama} + + {item.judul} + + + {item.nama} + @@ -478,9 +640,18 @@ const PengaduanLayananPublik = () => { {/* Complaint Submission Form */} - + - Ajukan Pengaduan + + Ajukan Pengaduan +
@@ -537,24 +708,39 @@ const PengaduanLayananPublik = () => { {/* Complaints List */} - + - Daftar Pengaduan + + Daftar Pengaduan +
- Judul - Kategori - Status - Prioritas - Tanggal + + Judul + + + Kategori + + + Status + + + Prioritas + + + Tanggal + - - {complaintRows} - + {complaintRows}
 @@ -565,15 +751,19 @@ const PengaduanLayananPublik = () => { - Layanan Publik Tersedia + + Layanan Publik Tersedia + {services.map((service) => ( - {service.name} - + + {service.name} + + {service.description} @@ -589,11 +779,11 @@ const PengaduanLayananPublik = () => { > {service.status} - + {service.category} - + Terakhir diperbarui: {service.lastUpdated} @@ -605,13 +795,17 @@ const PengaduanLayananPublik = () => { - Statistik Layanan + + Statistik Layanan + - Jumlah Layanan Tersedia + + Jumlah Layanan Tersedia + 12 @@ -619,7 +813,9 @@ const PengaduanLayananPublik = () => { - Layanan Terpopuler + + Layanan Terpopuler + 4 @@ -627,7 +823,9 @@ const PengaduanLayananPublik = () => { - Permintaan Baru + + Permintaan Baru + 23 @@ -642,4 +840,4 @@ const PengaduanLayananPublik = () => { ); }; -export default PengaduanLayananPublik; \ No newline at end of file +export default PengaduanLayananPublik; diff --git a/src/components/pengaturan/akses-dan-tim.tsx b/src/components/pengaturan/akses-dan-tim.tsx index 5b39465..80a8004 100644 --- a/src/components/pengaturan/akses-dan-tim.tsx +++ b/src/components/pengaturan/akses-dan-tim.tsx @@ -1,125 +1,190 @@ -import { Card, Title, Text, Space, Button, Group, Alert, Table, ActionIcon, Modal, TextInput, Select, useMantineColorScheme } from '@mantine/core'; -import { IconInfoCircle, IconUserPlus, IconTrash, IconEdit, IconUser } from '@tabler/icons-react'; -import { useState } from 'react'; +import { + ActionIcon, + Alert, + Button, + Card, + Group, + Modal, + Select, + Space, + Table, + Text, + TextInput, + Title, + useMantineColorScheme, +} from "@mantine/core"; +import { + IconEdit, + IconInfoCircle, + IconTrash, + IconUser, + IconUserPlus, +} from "@tabler/icons-react"; +import { useState } from "react"; const AksesDanTimSettings = () => { - const [opened, setOpened] = useState(false); - const { colorScheme } = useMantineColorScheme(); - const dark = colorScheme === 'dark'; + const [opened, setOpened] = useState(false); + const { colorScheme } = useMantineColorScheme(); + const dark = colorScheme === "dark"; - // Sample team members data - const teamMembers = [ - { id: 1, name: 'Admin Utama', email: 'admin@desa.go.id', role: 'Administrator', status: 'Aktif' }, - { id: 2, name: 'Operator Desa', email: 'operator@desa.go.id', role: 'Operator', status: 'Aktif' }, - { id: 3, name: 'Staff Keuangan', email: 'keuangan@desa.go.id', role: 'Keuangan', status: 'Aktif' }, - { id: 4, name: 'Staff Umum', email: 'umum@desa.go.id', role: 'Umum', status: 'Nonaktif' }, - ]; + // Sample team members data + const teamMembers = [ + { + id: 1, + name: "Admin Utama", + email: "admin@desa.go.id", + role: "Administrator", + status: "Aktif", + }, + { + id: 2, + name: "Operator Desa", + email: "operator@desa.go.id", + role: "Operator", + status: "Aktif", + }, + { + id: 3, + name: "Staff Keuangan", + email: "keuangan@desa.go.id", + role: "Keuangan", + status: "Aktif", + }, + { + id: 4, + name: "Staff Umum", + email: "umum@desa.go.id", + role: "Umum", + status: "Nonaktif", + }, + ]; - const roles = [ - { value: 'administrator', label: 'Administrator' }, - { value: 'operator', label: 'Operator' }, - { value: 'keuangan', label: 'Keuangan' }, - { value: 'umum', label: 'Umum' }, - { value: 'keamanan', label: 'Keamanan' }, - ]; + const roles = [ + { value: "administrator", label: "Administrator" }, + { value: "operator", label: "Operator" }, + { value: "keuangan", label: "Keuangan" }, + { value: "umum", label: "Umum" }, + { value: "keamanan", label: "Keamanan" }, + ]; - return ( - - setOpened(false)} - title="Tambah Anggota Tim" - size="lg" - > - - - + + + + + - Akses & Tim - Kelola akses dan anggota tim Anda + + Akses & Tim + + + Kelola akses dan anggota tim Anda + - + - - Anggota Tim - - + + Anggota Tim + + - - - - Nama - Email - Peran - Status - Aksi - - - - {teamMembers.map((member) => ( - - - - - {member.name} - - - {member.email} - - {member.role} - - - - {member.status} - - - - - - - - - - - - - - ))} - -
+ + + + Nama + Email + Peran + Status + Aksi + + + + {teamMembers.map((member) => ( + + + + + {member.name} + + + {member.email} + + {member.role} + + + + {member.status} + + + + + + + + + + + + + + ))} + +
- + - } title="Informasi" color="blue" mb="md"> - Administrator memiliki akses penuh ke semua fitur. Peran lainnya memiliki akses terbatas sesuai kebutuhan. - + } + title="Informasi" + color="blue" + mb="md" + > + Administrator memiliki akses penuh ke semua fitur. Peran lainnya + memiliki akses terbatas sesuai kebutuhan. + - - - - - - ); + + + + + + ); }; -export default AksesDanTimSettings; \ No newline at end of file +export default AksesDanTimSettings; diff --git a/src/components/pengaturan/keamanan.tsx b/src/components/pengaturan/keamanan.tsx index 6bd6f64..23eda15 100644 --- a/src/components/pengaturan/keamanan.tsx +++ b/src/components/pengaturan/keamanan.tsx @@ -1,57 +1,90 @@ -import { Card, Title, Text, Space, Button, Group, Alert, PasswordInput, Switch, useMantineColorScheme } from '@mantine/core'; -import { IconInfoCircle, IconLock } from '@tabler/icons-react'; +import { + Alert, + Button, + Card, + Group, + PasswordInput, + Space, + Switch, + Text, + Title, + useMantineColorScheme, +} from "@mantine/core"; +import { IconInfoCircle, IconLock } from "@tabler/icons-react"; const KeamananSettings = () => { - const { colorScheme } = useMantineColorScheme(); - const dark = colorScheme === 'dark'; - return ( - - Pengaturan Keamanan - Kelola keamanan akun Anda + const { colorScheme } = useMantineColorScheme(); + const dark = colorScheme === "dark"; + return ( + + + Pengaturan Keamanan + + + Kelola keamanan akun Anda + - + - + - + - + - + - - - - + + + + - + - } title="Keamanan" color="orange" mb="md"> - Gunakan kata sandi yang kuat dan unik. Hindari menggunakan kata sandi yang sama di banyak layanan. - + } + title="Keamanan" + color="orange" + mb="md" + > + Gunakan kata sandi yang kuat dan unik. Hindari menggunakan kata sandi + yang sama di banyak layanan. + - } title="Informasi" color="blue" mb="md"> - Setelah mengganti kata sandi, Anda akan diminta logout dari semua perangkat. - + } + title="Informasi" + color="blue" + mb="md" + > + Setelah mengganti kata sandi, Anda akan diminta logout dari semua + perangkat. + - - - - - - ); + + + + + + ); }; -export default KeamananSettings; \ No newline at end of file +export default KeamananSettings; diff --git a/src/components/pengaturan/notifikasi.tsx b/src/components/pengaturan/notifikasi.tsx index 38cb0de..37cbd83 100644 --- a/src/components/pengaturan/notifikasi.tsx +++ b/src/components/pengaturan/notifikasi.tsx @@ -1,55 +1,86 @@ -import { Card, Title, Text, Space, Switch, Group, Alert, Checkbox, Button, useMantineColorScheme } from '@mantine/core'; -import { IconInfoCircle } from '@tabler/icons-react'; +import { + Alert, + Button, + Card, + Checkbox, + Group, + Space, + Switch, + Text, + Title, + useMantineColorScheme, +} from "@mantine/core"; +import { IconInfoCircle } from "@tabler/icons-react"; const NotifikasiSettings = () => { - const { colorScheme } = useMantineColorScheme(); - const dark = colorScheme === 'dark'; - return ( - - Pengaturan Notifikasi - Kelola preferensi notifikasi Anda + const { colorScheme } = useMantineColorScheme(); + const dark = colorScheme === "dark"; + return ( + + + Pengaturan Notifikasi + + + Kelola preferensi notifikasi Anda + - + - - Metode Notifikasi - - - - - - + + + Metode Notifikasi + + + + + + + - + - - - - + + + + - + - Jenis Notifikasi - - - - - - - + + Jenis Notifikasi + + + + + + + + - + - } title="Tip" color="blue" mb="md"> - Anda dapat menyesuaikan frekuensi notifikasi mingguan sesuai kebutuhan Anda. - + } + title="Tip" + color="blue" + mb="md" + > + Anda dapat menyesuaikan frekuensi notifikasi mingguan sesuai kebutuhan + Anda. + - - - - - - ); + + + + + + ); }; -export default NotifikasiSettings; \ No newline at end of file +export default NotifikasiSettings; diff --git a/src/components/pengaturan/umum.tsx b/src/components/pengaturan/umum.tsx index 84c5c3c..2b6499d 100644 --- a/src/components/pengaturan/umum.tsx +++ b/src/components/pengaturan/umum.tsx @@ -1,58 +1,86 @@ -import { Card, Title, Text, Space, TextInput, Select, Button, Group, Switch, Alert, useMantineColorScheme } from '@mantine/core'; -import { IconInfoCircle } from '@tabler/icons-react'; +import { + Alert, + Button, + Card, + Group, + Select, + Space, + Switch, + Text, + TextInput, + Title, + useMantineColorScheme, +} from "@mantine/core"; +import { IconInfoCircle } from "@tabler/icons-react"; const UmumSettings = () => { - const { colorScheme } = useMantineColorScheme(); - const dark = colorScheme === 'dark'; - return ( - - Pengaturan Umum - Kelola pengaturan umum aplikasi Anda + const { colorScheme } = useMantineColorScheme(); + const dark = colorScheme === "dark"; + return ( + + + Pengaturan Umum + + + Kelola pengaturan umum aplikasi Anda + - + - + - - - - - + + + - } title="Informasi" color="blue" mb="md"> - Beberapa pengaturan mungkin memerlukan restart aplikasi untuk diterapkan sepenuhnya. - + } + title="Informasi" + color="blue" + mb="md" + > + Beberapa pengaturan mungkin memerlukan restart aplikasi untuk diterapkan + sepenuhnya. + - - - - - - ); + + + + + + ); }; -export default UmumSettings; \ No newline at end of file +export default UmumSettings; diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx index 43b3730..f734db2 100644 --- a/src/components/sidebar.tsx +++ b/src/components/sidebar.tsx @@ -1,16 +1,16 @@ -import { useNavigate, useLocation } from "@tanstack/react-router"; -import { Search, ChevronDown, ChevronUp } from "lucide-react"; import { - Stack, - Group, - Text, Badge, + Box, + Collapse, + Group, Input, NavLink as MantineNavLink, - Box, + Stack, + Text, useMantineColorScheme, - Collapse, } from "@mantine/core"; +import { useLocation, useNavigate } from "@tanstack/react-router"; +import { ChevronDown, ChevronUp, Search } from "lucide-react"; import { useState } from "react"; interface SidebarProps { @@ -21,22 +21,28 @@ export function Sidebar({ className }: SidebarProps) { const location = useLocation(); const navigate = useNavigate(); const { colorScheme } = useMantineColorScheme(); - const dark = colorScheme === 'dark'; - const isActiveBg = colorScheme === 'dark' ? "#182949" : "#E6F0FF"; - const isActiveBorder = colorScheme === 'dark' ? "#00398D" : "#1F41AE"; - + const dark = colorScheme === "dark"; + const isActiveBg = colorScheme === "dark" ? "#182949" : "#E6F0FF"; + const isActiveBorder = colorScheme === "dark" ? "#00398D" : "#1F41AE"; + // State for settings submenu collapse const [settingsOpen, setSettingsOpen] = useState( - location.pathname.startsWith('/dashboard/pengaturan') + location.pathname.startsWith("/dashboard/pengaturan"), ); // Define menu items with their paths const menuItems = [ { name: "Beranda", path: "/dashboard" }, { name: "Kinerja Divisi", path: "/dashboard/kinerja-divisi" }, - { name: "Pengaduan & Layanan Publik", path: "/dashboard/pengaduan-layanan-publik" }, + { + name: "Pengaduan & Layanan Publik", + path: "/dashboard/pengaduan-layanan-publik", + }, { name: "Jenna Analytic", path: "/dashboard/jenna-analytic" }, - { name: "Demografi & Kependudukan", path: "/dashboard/demografi-pekerjaan" }, + { + name: "Demografi & Kependudukan", + path: "/dashboard/demografi-pekerjaan", + }, { name: "Keuangan & Anggaran", path: "/dashboard/keuangan-anggaran" }, { name: "Bumdes & UMKM Desa", path: "/dashboard/bumdes" }, { name: "Sosial", path: "/dashboard/sosial" }, @@ -53,14 +59,17 @@ export function Sidebar({ className }: SidebarProps) { ]; // Check if any settings submenu is active - const isSettingsActive = settingsItems.some(item => - location.pathname === item.path + const isSettingsActive = settingsItems.some( + (item) => location.pathname === item.path, ); return ( {/* Logo */} - + ); @@ -132,7 +143,9 @@ export function Sidebar({ className }: SidebarProps) { setSettingsOpen(!settingsOpen)} - rightSection={settingsOpen ? : } + rightSection={ + settingsOpen ? : + } label="Pengaturan" active={isSettingsActive} variant="subtle" @@ -140,7 +153,9 @@ export function Sidebar({ className }: SidebarProps) { style={{ background: isSettingsActive ? isActiveBg : "transparent", fontWeight: isSettingsActive ? "bold" : "normal", - borderLeft: isSettingsActive ? `4px solid ${isActiveBorder}` : "4px solid transparent", + borderLeft: isSettingsActive + ? `4px solid ${isActiveBorder}` + : "4px solid transparent", borderRadius: "8px", transition: "all 200ms ease", margin: "2px 0", @@ -149,12 +164,16 @@ export function Sidebar({ className }: SidebarProps) { body: { "&:hover": { background: "#F1F5F9", - } - } + }, + }, }} /> - + {settingsItems.map((item, index) => { const isActive = location.pathname === item.path; return ( @@ -168,7 +187,9 @@ export function Sidebar({ className }: SidebarProps) { style={{ background: isActive ? isActiveBg : "transparent", fontWeight: isActive ? "bold" : "normal", - borderLeft: isActive ? `4px solid ${isActiveBorder}` : "4px solid transparent", + borderLeft: isActive + ? `4px solid ${isActiveBorder}` + : "4px solid transparent", borderRadius: "8px", transition: "all 200ms ease", margin: "2px 0", @@ -177,8 +198,8 @@ export function Sidebar({ className }: SidebarProps) { body: { "&:hover": { background: "#F1F5F9", - } - } + }, + }, }} /> ); diff --git a/src/components/sosial-page.tsx b/src/components/sosial-page.tsx index 7df45f0..c313fac 100644 --- a/src/components/sosial-page.tsx +++ b/src/components/sosial-page.tsx @@ -1,289 +1,465 @@ -import { useState } from "react"; -import { - Card, - Grid, - GridCol, - Group, - Text, - Title, - Progress, - Stack, - useMantineColorScheme, - Badge, - List, - ThemeIcon +import { + Badge, + Card, + Grid, + GridCol, + Group, + List, + Progress, + Stack, + Text, + ThemeIcon, + Title, + useMantineColorScheme, } from "@mantine/core"; -import { - IconHeartbeat, - IconBabyCarriage, - IconStethoscope, - IconMedicalCross, - IconSchool, - IconBook, - IconCalendarEvent, - IconAward +import { + IconAward, + IconBabyCarriage, + IconBook, + IconCalendarEvent, + IconHeartbeat, + IconMedicalCross, + IconSchool, + IconStethoscope, } from "@tabler/icons-react"; +import { useState } from "react"; const SosialPage = () => { - const { colorScheme } = useMantineColorScheme(); - const dark = colorScheme === 'dark'; - - // Sample data for health statistics - const healthStats = { - ibuHamil: 87, - balita: 342, - alertStunting: 12, - posyanduAktif: 8, - }; + const { colorScheme } = useMantineColorScheme(); + const dark = colorScheme === "dark"; - // Sample data for health progress - const healthProgress = [ - { label: "Imunisasi Lengkap", value: 92, color: "green" }, - { label: "Pemeriksaan Rutin", value: 88, color: "blue" }, - { label: "Gizi Baik", value: 86, color: "teal" }, - { label: "Target Stunting", value: 14, color: "red" }, - ]; + // Sample data for health statistics + const healthStats = { + ibuHamil: 87, + balita: 342, + alertStunting: 12, + posyanduAktif: 8, + }; - // Sample data for posyandu schedule - const posyanduSchedule = [ - { nama: "Posyandu Mawar", tanggal: "Senin, 15 Feb 2026", jam: "08:00 - 11:00" }, - { nama: "Posyandu Melati", tanggal: "Selasa, 16 Feb 2026", jam: "08:00 - 11:00" }, - { nama: "Posyandu Dahlia", tanggal: "Rabu, 17 Feb 2026", jam: "08:00 - 11:00" }, - { nama: "Posyandu Anggrek", tanggal: "Kamis, 18 Feb 2026", jam: "08:00 - 11:00" }, - ]; + // Sample data for health progress + const healthProgress = [ + { label: "Imunisasi Lengkap", value: 92, color: "green" }, + { label: "Pemeriksaan Rutin", value: 88, color: "blue" }, + { label: "Gizi Baik", value: 86, color: "teal" }, + { label: "Target Stunting", value: 14, color: "red" }, + ]; - // Sample data for education stats - const educationStats = { - siswa: { - tk: 125, - sd: 480, - smp: 210, - sma: 150, - }, - sekolah: { - jumlah: 8, - guru: 42, - } - }; + // Sample data for posyandu schedule + const posyanduSchedule = [ + { + nama: "Posyandu Mawar", + tanggal: "Senin, 15 Feb 2026", + jam: "08:00 - 11:00", + }, + { + nama: "Posyandu Melati", + tanggal: "Selasa, 16 Feb 2026", + jam: "08:00 - 11:00", + }, + { + nama: "Posyandu Dahlia", + tanggal: "Rabu, 17 Feb 2026", + jam: "08:00 - 11:00", + }, + { + nama: "Posyandu Anggrek", + tanggal: "Kamis, 18 Feb 2026", + jam: "08:00 - 11:00", + }, + ]; - // Sample data for scholarships - const scholarshipData = { - penerima: 45, - dana: "Rp 1.200.000.000", - tahunAjaran: "2025/2026", - }; + // Sample data for education stats + const educationStats = { + siswa: { + tk: 125, + sd: 480, + smp: 210, + sma: 150, + }, + sekolah: { + jumlah: 8, + guru: 42, + }, + }; - // Sample data for cultural events - const culturalEvents = [ - { nama: "Hari Kesaktian Pancasila", tanggal: "1 Oktober 2025", lokasi: "Balai Desa" }, - { nama: "Festival Budaya Desa", tanggal: "20 Mei 2026", lokasi: "Lapangan Desa" }, - { nama: "Perayaan HUT Desa", tanggal: "17 Agustus 2026", lokasi: "Balai Desa" }, - ]; + // Sample data for scholarships + const scholarshipData = { + penerima: 45, + dana: "Rp 1.200.000.000", + tahunAjaran: "2025/2026", + }; - return ( - - {/* Health Statistics Cards */} - - - - - - - Ibu Hamil Aktif - - - {healthStats.ibuHamil} - - - - - - - - + // Sample data for cultural events + const culturalEvents = [ + { + nama: "Hari Kesaktian Pancasila", + tanggal: "1 Oktober 2025", + lokasi: "Balai Desa", + }, + { + nama: "Festival Budaya Desa", + tanggal: "20 Mei 2026", + lokasi: "Lapangan Desa", + }, + { + nama: "Perayaan HUT Desa", + tanggal: "17 Agustus 2026", + lokasi: "Balai Desa", + }, + ]; - - - - - - Balita Terdaftar - - - {healthStats.balita} - - - - - - - - + return ( + + {/* Health Statistics Cards */} + + + + + + + Ibu Hamil Aktif + + + {healthStats.ibuHamil} + + + + + + + + - - - - - - Alert Stunting - - - {healthStats.alertStunting} - - - - - - - - + + + + + + Balita Terdaftar + + + {healthStats.balita} + + + + + + + + - - - - - - Posyandu Aktif - - - {healthStats.posyanduAktif} - - - - - - - - - + + + + + + Alert Stunting + + + {healthStats.alertStunting} + + + + + + + + - {/* Health Progress Bars */} - - Statistik Kesehatan - - {healthProgress.map((item, index) => ( -
- - - {item.label} - - - {item.value}% - - - -
- ))} - - + + + + + + Posyandu Aktif + + + {healthStats.posyanduAktif} + + + + + + + + + - - {/* Jadwal Posyandu */} - - - Jadwal Posyandu - - {posyanduSchedule.map((item, index) => ( - - - - {item.nama} - {item.tanggal} - - - {item.jam} - - - - ))} - - - + {/* Health Progress Bars */} + + + Statistik Kesehatan + + + {healthProgress.map((item, index) => ( +
+ + + {item.label} + + + {item.value}% + + + +
+ ))} + + - {/* Pendidikan */} - - - Pendidikan - - - TK / PAUD - {educationStats.siswa.tk} - - - SD - {educationStats.siswa.sd} - - - SMP - {educationStats.siswa.smp} - - - SMA - {educationStats.siswa.sma} - - - - - Jumlah Lembaga Pendidikan - {educationStats.sekolah.jumlah} - - - Jumlah Tenaga Pengajar - {educationStats.sekolah.guru} - - - - - - + + {/* Jadwal Posyandu */} + + + + Jadwal Posyandu + + + {posyanduSchedule.map((item, index) => ( + + + + + {item.nama} + + + {item.tanggal} + + + + {item.jam} + + + + ))} + + + - - {/* Beasiswa Desa */} - - - - - Beasiswa Desa - Penerima: {scholarshipData.penerima} - - - - - - Dana Tersalurkan: {scholarshipData.dana} - Tahun Ajaran: {scholarshipData.tahunAjaran} - - + {/* Pendidikan */} + + + + Pendidikan + + + + + TK / PAUD + + + {educationStats.siswa.tk} + + + + + SD + + + {educationStats.siswa.sd} + + + + + SMP + + + {educationStats.siswa.smp} + + + + + SMA + + + {educationStats.siswa.sma} + + - {/* Kalender Event Budaya */} - - - Kalender Event Budaya - - {culturalEvents.map((event, index) => ( - - - - }> - - {event.nama} - {event.lokasi} - - {event.tanggal} - - ))} - - - - - - ); + + + + Jumlah Lembaga Pendidikan + + + {educationStats.sekolah.jumlah} + + + + + Jumlah Tenaga Pengajar + + + {educationStats.sekolah.guru} + + + + + + + + + + {/* Beasiswa Desa */} + + + + + + Beasiswa Desa + + + Penerima: {scholarshipData.penerima} + + + + + + + + Dana Tersalurkan:{" "} + + {scholarshipData.dana} + + + + Tahun Ajaran: {scholarshipData.tahunAjaran} + + + + + {/* Kalender Event Budaya */} + + + + Kalender Event Budaya + + + {culturalEvents.map((event, index) => ( + + + + } + > + + + {event.nama} + + + {event.lokasi} + + + + {event.tanggal} + + + ))} + + + + + + ); }; -export default SosialPage; \ No newline at end of file +export default SosialPage; diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index bac49f9..bf2913b 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -2,7 +2,6 @@ import { Box, Card as MantineCard, type CardProps as MantineCardProps, - Title, } from "@mantine/core"; import type React from "react"; diff --git a/src/components/ui/help-card.tsx b/src/components/ui/help-card.tsx index 844c4b3..08f2448 100644 --- a/src/components/ui/help-card.tsx +++ b/src/components/ui/help-card.tsx @@ -1,90 +1,86 @@ -import { Card, useMantineTheme, useComputedColorScheme } from '@mantine/core'; -import type { CardProps } from '@mantine/core'; -import type { ReactNode } from 'react'; +import type { CardProps } from "@mantine/core"; +import { Card, useComputedColorScheme, useMantineTheme } from "@mantine/core"; +import type { ReactNode } from "react"; interface HelpCardProps extends CardProps { - children: ReactNode; - icon?: ReactNode; - title?: string; - minHeight?: string | number; // Allow specifying a minimum height + children: ReactNode; + icon?: ReactNode; + title?: string; + minHeight?: string | number; // Allow specifying a minimum height } export const HelpCard = ({ - children, - icon, - title, - minHeight = 'auto', // Default to auto, but allow override - ...props + children, + icon, + title, + minHeight = "auto", // Default to auto, but allow override + ...props }: HelpCardProps) => { - const theme = useMantineTheme(); - const colorScheme = useComputedColorScheme('light'); - const isDark = colorScheme === 'dark'; + const theme = useMantineTheme(); + const colorScheme = useComputedColorScheme("light"); + const isDark = colorScheme === "dark"; - return ( - - {(icon || title) && ( -
- {icon && ( -
- {icon} -
- )} + return ( + + {(icon || title) && ( +
+ {icon && ( +
+ {icon} +
+ )} - {title && ( -

- {title} -

- )} -
- )} + {title && ( +

+ {title} +

+ )} +
+ )} -
- {children} -
- - ); +
{children}
+ + ); }; diff --git a/src/frontend.tsx b/src/frontend.tsx index 568e20f..347e765 100644 --- a/src/frontend.tsx +++ b/src/frontend.tsx @@ -14,10 +14,9 @@ import { Inspector } from "react-dev-inspector"; import { createRoot } from "react-dom/client"; import { routeTree } from "./routeTree.gen"; import "./index.css"; -import '@mantine/charts/styles.css'; +import "@mantine/charts/styles.css"; import { IS_DEV, VITE_PUBLIC_URL } from "./utils/env"; - // Create a new router instance export const router = createRouter({ routeTree, @@ -102,8 +101,6 @@ const theme = createTheme({ primaryColor: "darmasaba-blue", }); - - const InspectorWrapper = IS_DEV ? Inspector : ({ children }: { children: React.ReactNode }) => <>{children}; diff --git a/src/index.css b/src/index.css index a461c50..f1d8c73 100644 --- a/src/index.css +++ b/src/index.css @@ -1 +1 @@ -@import "tailwindcss"; \ No newline at end of file +@import "tailwindcss"; diff --git a/src/routes/admin/route.tsx b/src/routes/admin/route.tsx index 9ba9fc3..688d779 100644 --- a/src/routes/admin/route.tsx +++ b/src/routes/admin/route.tsx @@ -154,7 +154,6 @@ function DashboardLayout() { - ( -
- -
- ), -}); \ No newline at end of file +export const Route = createFileRoute("/dashboard/pengaturan")({ + component: () => ( +
+ +
+ ), +}); diff --git a/src/routes/dashboard/pengaturan/umum.ts b/src/routes/dashboard/pengaturan/umum.ts index 8d57716..b60cad0 100644 --- a/src/routes/dashboard/pengaturan/umum.ts +++ b/src/routes/dashboard/pengaturan/umum.ts @@ -1,7 +1,6 @@ -import UmumSettings from '@/components/pengaturan/umum' -import { createFileRoute } from '@tanstack/react-router' - -export const Route = createFileRoute('/dashboard/pengaturan/umum')({ - component: UmumSettings, -}) +import { createFileRoute } from "@tanstack/react-router"; +import UmumSettings from "@/components/pengaturan/umum"; +export const Route = createFileRoute("/dashboard/pengaturan/umum")({ + component: UmumSettings, +}); diff --git a/src/routes/dashboard/route.tsx b/src/routes/dashboard/route.tsx index cbc9495..182b1c0 100644 --- a/src/routes/dashboard/route.tsx +++ b/src/routes/dashboard/route.tsx @@ -1,19 +1,39 @@ -import { createFileRoute, Outlet } from "@tanstack/react-router"; +import { + AppShell, + Burger, + Group, + useMantineColorScheme, + useMantineTheme, +} from "@mantine/core"; +import { useDisclosure, useMediaQuery } from "@mantine/hooks"; +import { createFileRoute, Outlet, useRouterState } from "@tanstack/react-router"; +import { useEffect } from "react"; import { Header } from "@/components/header"; import { Sidebar } from "@/components/sidebar"; -import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core"; -import { useDisclosure } from "@mantine/hooks"; export const Route = createFileRoute("/dashboard")({ component: RouteComponent, }); function RouteComponent() { - const [opened, { toggle }] = useDisclosure(); + const [opened, { toggle, close }] = useDisclosure(); const { colorScheme } = useMantineColorScheme(); - const headerBgColor = colorScheme === 'dark' ? "#11192D" : "#19355E"; - const navbarBgColor = colorScheme === 'dark' ? "#11192D" : "white"; - const mainBgColor = colorScheme === 'dark' ? "#11192D" : "#edf3f8ff"; + const theme = useMantineTheme(); + const routerState = useRouterState(); + + const isMobile = useMediaQuery("(max-width: 48em)"); + + const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E"; + const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white"; + const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff"; + + // ✅ AUTO CLOSE NAVBAR ON ROUTE CHANGE (MOBILE ONLY) + useEffect(() => { + if (isMobile && opened) { + close(); + } + }, [routerState.location.pathname]); + return ( - - + + +
- -
+ +
diff --git a/src/routes/dashboard/sosial.ts b/src/routes/dashboard/sosial.ts index b11e66e..59a4ce0 100644 --- a/src/routes/dashboard/sosial.ts +++ b/src/routes/dashboard/sosial.ts @@ -1,8 +1,6 @@ -import { createFileRoute } from '@tanstack/react-router' -import SocialPage from '@/components/sosial-page' - - -export const Route = createFileRoute('/dashboard/sosial')({ - component: SocialPage, -}) +import { createFileRoute } from "@tanstack/react-router"; +import SocialPage from "@/components/sosial-page"; +export const Route = createFileRoute("/dashboard/sosial")({ + component: SocialPage, +}); -- 2.49.1 From 38b22dd2ddef41fb9ca7c01000ab87144fc5c3c8 Mon Sep 17 00:00:00 2001 From: nico Date: Mon, 23 Feb 2026 10:32:24 +0800 Subject: [PATCH 2/4] feat: update dashboard components (dashboard-content, help-page, kinerja-divisi) Co-authored-by: Qwen-Coder --- src/components/dashboard-content.tsx | 59 +++++++++++----------------- src/components/help-page.tsx | 7 ---- src/components/kinerja-divisi.tsx | 44 +++++++++------------ 3 files changed, 42 insertions(+), 68 deletions(-) diff --git a/src/components/dashboard-content.tsx b/src/components/dashboard-content.tsx index f45ccdf..d0c8b8e 100644 --- a/src/components/dashboard-content.tsx +++ b/src/components/dashboard-content.tsx @@ -66,6 +66,12 @@ const eventData = [ { date: "19 Oktober 2025", title: "Rapat Koordinasi" }, ]; +const apbdesData = [ + { name: "Belanja", value: 70, color: "blue" }, + { name: "Pendapatan", value: 90, color: "green" }, + { name: "Pembangunan", value: 50, color: "orange" }, +]; + export function DashboardContent() { const { colorScheme } = useMantineColorScheme(); const dark = colorScheme === "dark"; @@ -480,42 +486,23 @@ export function DashboardContent() { Grafik APBDes - - - Belanja - - - - - - Pendapatan - - - - - - Pembangunan - - - + {apbdesData.map((data, index) => ( + + + + {data.name} + + + + + + + ))} diff --git a/src/components/help-page.tsx b/src/components/help-page.tsx index 1450a18..c7bab00 100644 --- a/src/components/help-page.tsx +++ b/src/components/help-page.tsx @@ -143,13 +143,6 @@ const HelpPage = () => { return ( - - Pusat Bantuan - - - Temukan jawaban untuk pertanyaan Anda atau hubungi tim support kami - - {/* Statistics Section */} {stats.map((stat, index) => ( diff --git a/src/components/kinerja-divisi.tsx b/src/components/kinerja-divisi.tsx index efd504f..05265b7 100644 --- a/src/components/kinerja-divisi.tsx +++ b/src/components/kinerja-divisi.tsx @@ -122,10 +122,10 @@ const KinerjaDivisi = () => { // Activity progress statistics const activityProgressStats = [ - { name: "Selesai", value: 12 }, - { name: "Dikerjakan", value: 8 }, - { name: "Segera Dikerjakan", value: 5 }, - { name: "Dibatalkan", value: 2 }, + { name: "Selesai", value: 12, fill: "#10B981" }, + { name: "Dikerjakan", value: 8, fill: "#F59E0B" }, + { name: "Segera Dikerjakan", value: 5, fill: "#EF4444" }, + { name: "Dibatalkan", value: 2, fill: "#6B7280" }, ]; const COLORS = ["#10B981", "#F59E0B", "#EF4444", "#6B7280"]; @@ -204,9 +204,9 @@ const KinerjaDivisi = () => { contentStyle={ dark ? { - backgroundColor: "var(--mantine-color-dark-7)", - borderColor: "var(--mantine-color-dark-6)", - } + backgroundColor: "var(--mantine-color-dark-7)", + borderColor: "var(--mantine-color-dark-6)", + } : {} } /> @@ -402,9 +402,9 @@ const KinerjaDivisi = () => { contentStyle={ dark ? { - backgroundColor: "var(--mantine-color-dark-7)", - borderColor: "var(--mantine-color-dark-6)", - } + backgroundColor: "var(--mantine-color-dark-7)", + borderColor: "var(--mantine-color-dark-6)", + } : {} } /> @@ -434,33 +434,27 @@ const KinerjaDivisi = () => { Progres Kegiatan - + `${name}: ${percent ? (percent * 100).toFixed(0) : "0"}%` } - > - {activityProgressStats.map((entry, index) => ( - - ))} - + /> -- 2.49.1 From 9b015ec84d4facea5b7653ddcdc766d90ce71143 Mon Sep 17 00:00:00 2001 From: nico Date: Wed, 25 Feb 2026 15:44:26 +0800 Subject: [PATCH 3/4] fix localhost --- src/index.ts | 6 ++++-- src/utils/api-client.ts | 6 +----- src/utils/auth.ts | 1 - 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/index.ts b/src/index.ts index d26cdad..5db2141 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,6 +6,8 @@ import { Elysia } from "elysia"; import api from "./api"; import { openInEditor } from "./utils/open-in-editor"; +const PORT = process.env.PORT || 3000; + const isProduction = process.env.NODE_ENV === "production"; const app = new Elysia().use(api); @@ -198,10 +200,10 @@ if (!isProduction) { }); } -app.listen(3000); +app.listen(PORT); console.log( - `🚀 Server running at http://localhost:3000 in ${isProduction ? "production" : "development"} mode`, + `🚀 Server running at http://localhost:${PORT} in ${isProduction ? "production" : "development"} mode`, ); export type ApiApp = typeof app; diff --git a/src/utils/api-client.ts b/src/utils/api-client.ts index e20b6e6..e404c44 100644 --- a/src/utils/api-client.ts +++ b/src/utils/api-client.ts @@ -2,11 +2,7 @@ import createClient from "openapi-fetch"; import type { paths } from "../../generated/api"; import { VITE_PUBLIC_URL } from "./env"; -const baseUrl = - VITE_PUBLIC_URL || - (typeof window !== "undefined" - ? window.location.origin - : "http://localhost:3000"); +const baseUrl = VITE_PUBLIC_URL; export const apiClient = createClient({ baseUrl: baseUrl, diff --git a/src/utils/auth.ts b/src/utils/auth.ts index 1d9728d..90bb7e7 100644 --- a/src/utils/auth.ts +++ b/src/utils/auth.ts @@ -38,7 +38,6 @@ export const auth = betterAuth({ }, }, secret: process.env.BETTER_AUTH_SECRET, - trustedOrigins: ["http://localhost:5173", "http://localhost:3000"], session: { cookieCache: { enabled: true, -- 2.49.1 From 95c08681a716aed33a73e003eb944dc54413908c Mon Sep 17 00:00:00 2001 From: nico Date: Wed, 25 Feb 2026 15:51:48 +0800 Subject: [PATCH 4/4] fix localhost --- src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.ts b/src/index.ts index 5db2141..e228069 100644 --- a/src/index.ts +++ b/src/index.ts @@ -207,3 +207,4 @@ console.log( ); export type ApiApp = typeof app; + -- 2.49.1