Compare commits
1 Commits
tasks/impl
...
nico/fix-p
| Author | SHA1 | Date | |
|---|---|---|---|
| 87eb501661 |
@@ -1,47 +0,0 @@
|
||||
node_modules
|
||||
.next
|
||||
.git
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
bun-debug.log*
|
||||
|
||||
# Docker files
|
||||
Dockerfile
|
||||
.dockerignore
|
||||
|
||||
# OS files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Markdown/Documentation
|
||||
README.md
|
||||
GEMINI.md
|
||||
AGENTS.md
|
||||
AUDIT_REPORT.md
|
||||
QWEN.md
|
||||
NOTE.md
|
||||
task-project-apbdes.md
|
||||
MUSIK_CREATE_ANALYSIS.md
|
||||
darkMode.md
|
||||
/test-results
|
||||
/playwright-report
|
||||
/tmp_assets
|
||||
/foldergambar
|
||||
/googleapi
|
||||
/xx
|
||||
/xx.ts
|
||||
/xx.txt
|
||||
/test.txt
|
||||
/x.json
|
||||
/x.sh
|
||||
/xcoba.ts
|
||||
/xcoba2.ts
|
||||
/gambar.ttx
|
||||
/test-berita-state.ts
|
||||
44
.env.example
44
.env.example
@@ -1,44 +0,0 @@
|
||||
# Database Configuration
|
||||
DATABASE_URL="postgresql://username:password@localhost:5432/desa-darmasaba?schema=public"
|
||||
|
||||
# Seafile Configuration (File Storage)
|
||||
SEAFILE_TOKEN=your_seafile_token
|
||||
SEAFILE_REPO_ID=your_seafile_repo_id
|
||||
SEAFILE_URL=https://your-seafile-instance.com
|
||||
SEAFILE_PUBLIC_SHARE_TOKEN=your_seafile_public_share_token
|
||||
|
||||
# Upload Configuration
|
||||
WIBU_UPLOAD_DIR=uploads
|
||||
WIBU_DOWNLOAD_DIR=./download
|
||||
|
||||
# WhatsApp Server Configuration
|
||||
WA_SERVER_TOKEN=your_whatsapp_server_token
|
||||
|
||||
# Application Configuration
|
||||
# IMPORTANT: For staging/production, set this to your actual domain
|
||||
# Local development: NEXT_PUBLIC_BASE_URL=http://localhost:3000
|
||||
# Staging: NEXT_PUBLIC_BASE_URL=https://desa-darmasaba-stg.wibudev.com
|
||||
# Production: NEXT_PUBLIC_BASE_URL=https://your-production-domain.com
|
||||
# Or use relative URL '/' for automatic protocol/domain detection (recommended)
|
||||
NEXT_PUBLIC_BASE_URL=/
|
||||
|
||||
# Email Configuration (for notifications/subscriptions)
|
||||
EMAIL_USER=your_email@gmail.com
|
||||
EMAIL_PASS=your_email_app_password
|
||||
|
||||
# Session Configuration
|
||||
BASE_SESSION_KEY=your_session_key_generate_secure_random_string
|
||||
BASE_TOKEN_KEY=your_jwt_secret_key_generate_secure_random_string
|
||||
|
||||
# Telegram Bot Configuration (for notifications)
|
||||
BOT_TOKEN=your_telegram_bot_token
|
||||
CHAT_ID=your_telegram_chat_id
|
||||
|
||||
# Session Password (for iron-session)
|
||||
SESSION_PASSWORD="your_session_password_min_32_characters_long_secure"
|
||||
|
||||
# ElevenLabs API Key (for TTS features - optional)
|
||||
ELEVENLABS_API_KEY=your_elevenlabs_api_key
|
||||
|
||||
# Environment (optional, defaults to development)
|
||||
# NODE_ENV=development
|
||||
@@ -1,52 +1,43 @@
|
||||
#!/usr/bin/env bun
|
||||
import { readFileSync, existsSync } from "node:fs";
|
||||
import { join } from "node:path";
|
||||
import { readFileSync } from "node:fs";
|
||||
|
||||
// Function to manually load .env from project root if process.env is missing keys
|
||||
function loadEnv() {
|
||||
const envPath = join(process.cwd(), ".env");
|
||||
if (existsSync(envPath)) {
|
||||
const envContent = readFileSync(envPath, "utf-8");
|
||||
const lines = envContent.split("\n");
|
||||
for (const line of lines) {
|
||||
if (line && !line.startsWith("#")) {
|
||||
const [key, ...valueParts] = line.split("=");
|
||||
if (key && valueParts.length > 0) {
|
||||
const value = valueParts.join("=").trim().replace(/^["']|["']$/g, "");
|
||||
process.env[key.trim()] = value;
|
||||
}
|
||||
}
|
||||
// Fungsi untuk mencari string terpanjang dalam objek (biasanya balasan AI)
|
||||
function findLongestString(obj: any): string {
|
||||
let longest = "";
|
||||
const search = (item: any) => {
|
||||
if (typeof item === "string") {
|
||||
if (item.length > longest.length) longest = item;
|
||||
} else if (Array.isArray(item)) {
|
||||
item.forEach(search);
|
||||
} else if (item && typeof item === "object") {
|
||||
Object.values(item).forEach(search);
|
||||
}
|
||||
}
|
||||
};
|
||||
search(obj);
|
||||
return longest;
|
||||
}
|
||||
|
||||
async function run() {
|
||||
try {
|
||||
// Ensure environment variables are loaded
|
||||
loadEnv();
|
||||
|
||||
const inputRaw = readFileSync(0, "utf-8");
|
||||
if (!inputRaw) return;
|
||||
const input = JSON.parse(inputRaw);
|
||||
|
||||
let finalText = "";
|
||||
let sessionId = "web-desa-darmasaba";
|
||||
|
||||
try {
|
||||
// Try parsing as JSON first
|
||||
const input = JSON.parse(inputRaw);
|
||||
sessionId = input.session_id || "web-desa-darmasaba";
|
||||
finalText = typeof input === "string" ? input : (input.response || input.text || JSON.stringify(input));
|
||||
} catch {
|
||||
// If not JSON, use raw text
|
||||
finalText = inputRaw;
|
||||
}
|
||||
// DEBUG: Lihat struktur asli di console terminal (stderr)
|
||||
console.error("DEBUG KEYS:", Object.keys(input));
|
||||
|
||||
const BOT_TOKEN = process.env.BOT_TOKEN;
|
||||
const CHAT_ID = process.env.CHAT_ID;
|
||||
|
||||
if (!BOT_TOKEN || !CHAT_ID) {
|
||||
console.error("Missing BOT_TOKEN or CHAT_ID in environment variables");
|
||||
return;
|
||||
const sessionId = input.session_id || "unknown";
|
||||
|
||||
// Cari teks secara otomatis di seluruh objek JSON
|
||||
let finalText = findLongestString(input.response || input);
|
||||
|
||||
if (!finalText || finalText.length < 5) {
|
||||
finalText =
|
||||
"Teks masih gagal diekstraksi. Struktur: " +
|
||||
Object.keys(input).join(", ");
|
||||
}
|
||||
|
||||
const message =
|
||||
@@ -54,7 +45,7 @@ async function run() {
|
||||
`🆔 Session: \`${sessionId}\` \n\n` +
|
||||
`🧠 Output:\n${finalText.substring(0, 3500)}`;
|
||||
|
||||
const res = await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
|
||||
await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
@@ -64,13 +55,6 @@ async function run() {
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorData = await res.json();
|
||||
console.error("Telegram API Error:", errorData);
|
||||
} else {
|
||||
console.log("Notification sent successfully!");
|
||||
}
|
||||
|
||||
process.stdout.write(JSON.stringify({ status: "continue" }));
|
||||
} catch (err) {
|
||||
console.error("Hook Error:", err);
|
||||
|
||||
219
.github/workflows/build.yml
vendored
Normal file
219
.github/workflows/build.yml
vendored
Normal file
@@ -0,0 +1,219 @@
|
||||
name: Build And Save Log
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
environment:
|
||||
description: "Target environment (e.g., staging, production)"
|
||||
required: true
|
||||
default: "staging"
|
||||
version:
|
||||
description: "Version to deploy"
|
||||
required: false
|
||||
default: "latest"
|
||||
|
||||
env:
|
||||
APP_NAME: desa-darmasaba-action
|
||||
WA_PHONE: "6289697338821,6289697338822"
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
services:
|
||||
postgres:
|
||||
image: postgres:14
|
||||
env:
|
||||
POSTGRES_USER: ${{ secrets.POSTGRES_USER }}
|
||||
POSTGRES_PASSWORD: ${{ secrets.POSTGRES_PASSWORD }}
|
||||
POSTGRES_DB: ${{ secrets.POSTGRES_DB }}
|
||||
ports:
|
||||
- 5432:5432
|
||||
options: >-
|
||||
--health-cmd="pg_isready"
|
||||
--health-interval=10s
|
||||
--health-timeout=5s
|
||||
--health-retries=5
|
||||
|
||||
steps:
|
||||
# Checkout kode sumber
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v3
|
||||
|
||||
# Setup Bun
|
||||
- name: Setup Bun
|
||||
uses: oven-sh/setup-bun@v2
|
||||
|
||||
# Cache dependencies
|
||||
- name: Cache dependencies
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: .bun
|
||||
key: ${{ runner.os }}-bun-${{ hashFiles('bun.lockb') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-bun-
|
||||
|
||||
# Step 1: Set BRANCH_NAME based on event type
|
||||
- name: Set BRANCH_NAME
|
||||
run: |
|
||||
if [[ "${{ github.event_name }}" == "pull_request" ]]; then
|
||||
echo "BRANCH_NAME=${{ github.head_ref }}" >> $GITHUB_ENV
|
||||
else
|
||||
echo "BRANCH_NAME=${{ github.ref_name }}" >> $GITHUB_ENV
|
||||
fi
|
||||
|
||||
# Step 2: Generate APP_VERSION dynamically
|
||||
- name: Set APP_VERSION
|
||||
run: echo "APP_VERSION=${{ github.sha }}---$(date +%Y%m%d%H%M%S)" >> $GITHUB_ENV
|
||||
|
||||
# Step 3: Kirim notifikasi ke API build Start
|
||||
- name: Notify start build
|
||||
run: |
|
||||
IFS=',' read -ra PHONES <<< "${{ env.WA_PHONE }}"
|
||||
for PHONE in "${PHONES[@]}"; do
|
||||
ENCODED_TEXT=$(bun -e "console.log(encodeURIComponent('Build:start\nApp:${{ env.APP_NAME }}\nBranch:${{ env.BRANCH_NAME }}\nVersion:${{ env.APP_VERSION }}'))")
|
||||
curl -X GET "https://wa.wibudev.com/code?text=$ENCODED_TEXT&nom=$PHONE"
|
||||
done
|
||||
|
||||
# Install dependencies
|
||||
- name: Install dependencies
|
||||
run: bun install
|
||||
|
||||
# Konfigurasi environment variable untuk PostgreSQL dan variabel tambahan
|
||||
- name: Set up environment variables
|
||||
run: |
|
||||
echo "DATABASE_URL=postgresql://${{ secrets.POSTGRES_USER }}:${{ secrets.POSTGRES_PASSWORD }}@localhost:5432/${{ secrets.POSTGRES_DB }}?schema=public" >> .env
|
||||
echo "PORT=3000" >> .env
|
||||
echo "NEXT_PUBLIC_WIBU_URL=localhost:3000" >> .env
|
||||
echo "WIBU_UPLOAD_DIR=/uploads" >> .env
|
||||
|
||||
# Create log file
|
||||
- name: Create log file
|
||||
run: touch build.txt
|
||||
|
||||
# Migrasi database menggunakan Prisma
|
||||
- name: Apply Prisma schema to database
|
||||
run: bun prisma db push >> build.txt 2>&1
|
||||
|
||||
# Seed database (opsional)
|
||||
- name: Seed database
|
||||
run: |
|
||||
bun prisma db seed >> build.txt 2>&1 || echo "Seed failed or no seed data found. Continuing without seed." >> build.txt
|
||||
|
||||
# Build project
|
||||
- name: Build project
|
||||
run: bun run build >> build.txt 2>&1
|
||||
|
||||
# Ensure project directory exists
|
||||
- name: Ensure /var/www/projects/${{ env.APP_NAME }} exists
|
||||
uses: appleboy/ssh-action@master
|
||||
with:
|
||||
host: ${{ secrets.VPS_HOST }}
|
||||
username: ${{ secrets.VPS_USERNAME }}
|
||||
key: ${{ secrets.VPS_SSH_KEY }}
|
||||
script: |
|
||||
mkdir -p /var/www/projects/${{ env.APP_NAME }}
|
||||
|
||||
# Deploy to a new version directory
|
||||
- name: Deploy to VPS (New Version)
|
||||
uses: appleboy/scp-action@master
|
||||
with:
|
||||
host: ${{ secrets.VPS_HOST }}
|
||||
username: ${{ secrets.VPS_USERNAME }}
|
||||
key: ${{ secrets.VPS_SSH_KEY }}
|
||||
source: "."
|
||||
target: "/var/www/projects/${{ env.APP_NAME }}/releases/${{ env.APP_VERSION }}"
|
||||
|
||||
# Set up environment variables
|
||||
- name: Set up environment variables
|
||||
run: |
|
||||
rm -r .env
|
||||
echo "DATABASE_URL=postgresql://${{ secrets.POSTGRES_USER }}:${{ secrets.POSTGRES_PASSWORD }}@localhost:5433/${{ secrets.POSTGRES_DB }}?schema=public" >> .env
|
||||
echo "NEXT_PUBLIC_WIBU_URL=${{ env.APP_NAME }}" >> .env
|
||||
echo "WIBU_UPLOAD_DIR=/var/www/projects/${{ env.APP_NAME }}/uploads" >> .env
|
||||
|
||||
# Kirim file .env ke server
|
||||
- name: Upload .env to server
|
||||
uses: appleboy/scp-action@master
|
||||
with:
|
||||
host: ${{ secrets.VPS_HOST }}
|
||||
username: ${{ secrets.VPS_USERNAME }}
|
||||
key: ${{ secrets.VPS_SSH_KEY }}
|
||||
source: ".env"
|
||||
target: "/var/www/projects/${{ env.APP_NAME }}/releases/${{ env.APP_VERSION }}/"
|
||||
|
||||
# manage deployment
|
||||
- name: manage deployment
|
||||
uses: appleboy/ssh-action@master
|
||||
with:
|
||||
host: ${{ secrets.VPS_HOST }}
|
||||
username: ${{ secrets.VPS_USERNAME }}
|
||||
key: ${{ secrets.VPS_SSH_KEY }}
|
||||
script: |
|
||||
|
||||
# Source ~/.bashrc
|
||||
source ~/.bashrc
|
||||
|
||||
# Find an available port
|
||||
PORT=$(curl -s -X GET https://wibu-bot.wibudev.com/api/find-port | jq -r '.[0]')
|
||||
if [ -z "$PORT" ] || ! [[ "$PORT" =~ ^[0-9]+$ ]]; then
|
||||
echo "Invalid or missing port from API."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# manage deployment
|
||||
cd /var/www/projects/${{ env.APP_NAME }}/releases/${{ env.APP_VERSION }}
|
||||
|
||||
# Create uploads directory
|
||||
mkdir -p /var/www/projects/${{ env.APP_NAME }}/uploads
|
||||
|
||||
# Install dependencies
|
||||
bun install --production
|
||||
|
||||
# Apply database schema
|
||||
if ! bun prisma db push; then
|
||||
echo "Database migration failed."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Seed database (optional)
|
||||
bun prisma db seed || echo "tidak membutuhkan seed"
|
||||
|
||||
# Restart the application
|
||||
pm2 reload ${{ env.APP_NAME }} || pm2 start "bun run start --port $PORT" --name "${{ env.APP_NAME }}-$PORT" --namespace "${{ env.APP_NAME }}"
|
||||
|
||||
# Step 4: Set BUILD_STATUS based on success or failure
|
||||
- name: Set BUILD_STATUS
|
||||
if: success()
|
||||
run: echo "BUILD_STATUS=success" >> $GITHUB_ENV
|
||||
|
||||
- name: Set BUILD_STATUS on failure
|
||||
if: failure()
|
||||
run: echo "BUILD_STATUS=failed" >> $GITHUB_ENV
|
||||
|
||||
# Update status log
|
||||
- name: Update status log
|
||||
if: always()
|
||||
run: |
|
||||
echo "=====================" >> build.txt
|
||||
echo "BUILD_STATUS=${{ env.BUILD_STATUS }}" >> build.txt
|
||||
echo "APP_NAME=${{ env.APP_NAME }}" >> build.txt
|
||||
echo "APP_VERSION=${{ env.APP_VERSION }}" >> build.txt
|
||||
echo "=====================" >> build.txt
|
||||
|
||||
# Upload log to 0x0.st
|
||||
- name: Upload log to 0x0.st
|
||||
id: upload_log
|
||||
if: always()
|
||||
run: |
|
||||
LOG_URL=$(curl -F "file=@build.txt" https://wibu-bot.wibudev.com/api/file )
|
||||
echo "LOG_URL=$LOG_URL" >> $GITHUB_ENV
|
||||
|
||||
# Kirim notifikasi ke API
|
||||
- name: Notify build success via API
|
||||
if: always()
|
||||
run: |
|
||||
IFS=',' read -ra PHONES <<< "${{ env.WA_PHONE }}"
|
||||
for PHONE in "${PHONES[@]}"; do
|
||||
ENCODED_TEXT=$(bun -e "console.log(encodeURIComponent('Build:${{ env.BUILD_STATUS }}\nApp:${{ env.APP_NAME }}\nBranch:${{ env.BRANCH_NAME }}\nVersion:${{ env.APP_VERSION }}\nLog:${{ env.LOG_URL }}'))")
|
||||
curl -X GET "https://wa.wibudev.com/code?text=$ENCODED_TEXT&nom=$PHONE"
|
||||
done
|
||||
56
.github/workflows/docker-publish.yml
vendored
56
.github/workflows/docker-publish.yml
vendored
@@ -1,56 +0,0 @@
|
||||
name: Publish Docker to GHCR
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- "v*"
|
||||
env:
|
||||
REGISTRY: ghcr.io
|
||||
IMAGE_NAME: ${{ github.repository }}
|
||||
jobs:
|
||||
publish:
|
||||
name: Build & Push to GHCR
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
steps:
|
||||
- name: Free disk space
|
||||
run: |
|
||||
sudo rm -rf /usr/share/dotnet
|
||||
sudo rm -rf /usr/local/lib/android
|
||||
sudo rm -rf /opt/ghc
|
||||
sudo rm -rf /opt/hostedtoolcache/CodeQL
|
||||
sudo docker image prune --all --force
|
||||
df -h
|
||||
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Extract tag name
|
||||
id: meta
|
||||
run: echo "tag=${GITHUB_REF_NAME}" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Set up QEMU
|
||||
uses: docker/setup-qemu-action@v3
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Log in to GitHub Container Registry
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ${{ env.REGISTRY }}
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Build and push Docker image
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
context: .
|
||||
file: ./Dockerfile
|
||||
push: true
|
||||
platforms: linux/amd64
|
||||
tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.tag }}
|
||||
labels: ${{ steps.meta.outputs.labels }}
|
||||
cache-from: type=gha
|
||||
cache-to: type=gha,mode=max
|
||||
106
.github/workflows/publish.yml
vendored
106
.github/workflows/publish.yml
vendored
@@ -1,106 +0,0 @@
|
||||
name: Publish Docker to GHCR
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
stack_env:
|
||||
description: "stack env"
|
||||
required: true
|
||||
type: choice
|
||||
default: "dev"
|
||||
options:
|
||||
- dev
|
||||
- prod
|
||||
- stg
|
||||
tag:
|
||||
description: "Image tag (e.g. 1.0.0)"
|
||||
required: true
|
||||
default: "1.0.0"
|
||||
|
||||
|
||||
env:
|
||||
REGISTRY: ghcr.io
|
||||
IMAGE_NAME: ${{ github.repository }}
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
name: Build & Push to GHCR ${{ github.repository }}:${{ github.event.inputs.stack_env }}-${{ github.event.inputs.tag }}
|
||||
runs-on: ubuntu-latest
|
||||
environment: ${{ vars.PORTAINER_ENV || 'portainer' }}
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
steps:
|
||||
- name: Free disk space
|
||||
run: |
|
||||
sudo rm -rf /usr/share/dotnet
|
||||
sudo rm -rf /usr/local/lib/android
|
||||
sudo rm -rf /opt/ghc
|
||||
sudo rm -rf /opt/hostedtoolcache/CodeQL
|
||||
sudo docker image prune --all --force
|
||||
df -h
|
||||
|
||||
- name: Checkout branch ${{ github.event.inputs.stack_env }}
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
ref: ${{ github.event.inputs.stack_env }}
|
||||
|
||||
- name: Checkout scripts from main
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
ref: main
|
||||
path: .ci
|
||||
sparse-checkout: .github/workflows/script
|
||||
|
||||
- name: Set up QEMU
|
||||
uses: docker/setup-qemu-action@v3
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Log in to GitHub Container Registry
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ${{ env.REGISTRY }}
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Generate image metadata
|
||||
id: meta
|
||||
uses: docker/metadata-action@v5
|
||||
with:
|
||||
images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
|
||||
tags: |
|
||||
type=raw,value=${{ github.event.inputs.stack_env }}-${{ github.event.inputs.tag }}
|
||||
type=raw,value=${{ github.event.inputs.stack_env }}-latest
|
||||
|
||||
- name: Build and push Docker image
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
context: .
|
||||
file: ./Dockerfile
|
||||
push: true
|
||||
platforms: linux/amd64
|
||||
tags: ${{ steps.meta.outputs.tags }}
|
||||
labels: ${{ steps.meta.outputs.labels }}
|
||||
no-cache: true
|
||||
|
||||
- name: Notify success
|
||||
if: success()
|
||||
run: bash ./.ci/.github/workflows/script/notify.sh
|
||||
env:
|
||||
TELEGRAM_TOKEN: ${{ secrets.TELEGRAM_TOKEN }}
|
||||
TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
|
||||
NOTIFY_STATUS: success
|
||||
NOTIFY_WORKFLOW: "Publish Docker"
|
||||
NOTIFY_DETAIL: "Image: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.event.inputs.stack_env }}-${{ github.event.inputs.tag }}"
|
||||
|
||||
- name: Notify failure
|
||||
if: failure()
|
||||
run: bash ./.ci/.github/workflows/script/notify.sh
|
||||
env:
|
||||
TELEGRAM_TOKEN: ${{ secrets.TELEGRAM_TOKEN }}
|
||||
TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
|
||||
NOTIFY_STATUS: failure
|
||||
NOTIFY_WORKFLOW: "Publish Docker"
|
||||
NOTIFY_DETAIL: "Image: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.event.inputs.stack_env }}-${{ github.event.inputs.tag }}"
|
||||
60
.github/workflows/re-pull.yml
vendored
60
.github/workflows/re-pull.yml
vendored
@@ -1,60 +0,0 @@
|
||||
name: Re-Pull Docker
|
||||
on:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
stack_name:
|
||||
description: "stack name"
|
||||
required: true
|
||||
type: string
|
||||
stack_env:
|
||||
description: "stack env"
|
||||
required: true
|
||||
type: choice
|
||||
default: "dev"
|
||||
options:
|
||||
- dev
|
||||
- stg
|
||||
- prod
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
name: Re-Pull Docker ${{ github.event.inputs.stack_name }}
|
||||
runs-on: ubuntu-latest
|
||||
environment: ${{ vars.PORTAINER_ENV || 'portainer' }}
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
steps:
|
||||
- name: Checkout scripts from main
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
ref: main
|
||||
sparse-checkout: .github/workflows/script
|
||||
|
||||
- name: Deploy ke Portainer
|
||||
run: bash ./.github/workflows/script/re-pull.sh
|
||||
env:
|
||||
PORTAINER_USERNAME: ${{ secrets.PORTAINER_USERNAME }}
|
||||
PORTAINER_PASSWORD: ${{ secrets.PORTAINER_PASSWORD }}
|
||||
PORTAINER_URL: ${{ secrets.PORTAINER_URL }}
|
||||
STACK_NAME: ${{ github.event.inputs.stack_name }}-${{ github.event.inputs.stack_env }}
|
||||
|
||||
- name: Notify success
|
||||
if: success()
|
||||
run: bash ./.github/workflows/script/notify.sh
|
||||
env:
|
||||
TELEGRAM_TOKEN: ${{ secrets.TELEGRAM_TOKEN }}
|
||||
TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
|
||||
NOTIFY_STATUS: success
|
||||
NOTIFY_WORKFLOW: "Re-Pull Docker"
|
||||
NOTIFY_DETAIL: "Stack: ${{ github.event.inputs.stack_name }}-${{ github.event.inputs.stack_env }}"
|
||||
|
||||
- name: Notify failure
|
||||
if: failure()
|
||||
run: bash ./.github/workflows/script/notify.sh
|
||||
env:
|
||||
TELEGRAM_TOKEN: ${{ secrets.TELEGRAM_TOKEN }}
|
||||
TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
|
||||
NOTIFY_STATUS: failure
|
||||
NOTIFY_WORKFLOW: "Re-Pull Docker"
|
||||
NOTIFY_DETAIL: "Stack: ${{ github.event.inputs.stack_name }}-${{ github.event.inputs.stack_env }}"
|
||||
26
.github/workflows/script/notify.sh
vendored
26
.github/workflows/script/notify.sh
vendored
@@ -1,26 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
: "${TELEGRAM_TOKEN:?TELEGRAM_TOKEN tidak di-set}"
|
||||
: "${TELEGRAM_CHAT_ID:?TELEGRAM_CHAT_ID tidak di-set}"
|
||||
: "${NOTIFY_STATUS:?NOTIFY_STATUS tidak di-set}"
|
||||
: "${NOTIFY_WORKFLOW:?NOTIFY_WORKFLOW tidak di-set}"
|
||||
|
||||
if [ "$NOTIFY_STATUS" = "success" ]; then
|
||||
ICON="✅"
|
||||
TEXT="${ICON} *${NOTIFY_WORKFLOW}* berhasil!"
|
||||
else
|
||||
ICON="❌"
|
||||
TEXT="${ICON} *${NOTIFY_WORKFLOW}* gagal!"
|
||||
fi
|
||||
|
||||
if [ -n "$NOTIFY_DETAIL" ]; then
|
||||
TEXT="${TEXT}
|
||||
${NOTIFY_DETAIL}"
|
||||
fi
|
||||
|
||||
curl -s -X POST "https://api.telegram.org/bot${TELEGRAM_TOKEN}/sendMessage" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d "$(jq -n \
|
||||
--arg chat_id "$TELEGRAM_CHAT_ID" \
|
||||
--arg text "$TEXT" \
|
||||
'{chat_id: $chat_id, text: $text, parse_mode: "Markdown"}')"
|
||||
120
.github/workflows/script/re-pull.sh
vendored
120
.github/workflows/script/re-pull.sh
vendored
@@ -1,120 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
: "${PORTAINER_URL:?PORTAINER_URL tidak di-set}"
|
||||
: "${PORTAINER_USERNAME:?PORTAINER_USERNAME tidak di-set}"
|
||||
: "${PORTAINER_PASSWORD:?PORTAINER_PASSWORD tidak di-set}"
|
||||
: "${STACK_NAME:?STACK_NAME tidak di-set}"
|
||||
|
||||
# Timeout total: MAX_RETRY * SLEEP_INTERVAL detik
|
||||
MAX_RETRY=60 # 60 × 10s = 10 menit
|
||||
SLEEP_INTERVAL=10
|
||||
|
||||
echo "🔐 Autentikasi ke Portainer..."
|
||||
TOKEN=$(curl -s -X POST "https://${PORTAINER_URL}/api/auth" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d "{\"username\": \"${PORTAINER_USERNAME}\", \"password\": \"${PORTAINER_PASSWORD}\"}" \
|
||||
| jq -r .jwt)
|
||||
|
||||
if [ -z "$TOKEN" ] || [ "$TOKEN" = "null" ]; then
|
||||
echo "❌ Autentikasi gagal! Cek PORTAINER_URL, USERNAME, dan PASSWORD."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "🔍 Mencari stack: $STACK_NAME..."
|
||||
STACK=$(curl -s -X GET "https://${PORTAINER_URL}/api/stacks" \
|
||||
-H "Authorization: Bearer ${TOKEN}" \
|
||||
| jq ".[] | select(.Name == \"$STACK_NAME\")")
|
||||
|
||||
if [ -z "$STACK" ]; then
|
||||
echo "❌ Stack '$STACK_NAME' tidak ditemukan di Portainer!"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
STACK_ID=$(echo "$STACK" | jq -r .Id)
|
||||
ENDPOINT_ID=$(echo "$STACK" | jq -r .EndpointId)
|
||||
ENV=$(echo "$STACK" | jq '.Env // []')
|
||||
|
||||
# ── Catat container ID lama sebelum redeploy ──────────────────────────────────
|
||||
echo "📸 Mencatat container aktif sebelum redeploy..."
|
||||
CONTAINERS_BEFORE=$(curl -s -X GET \
|
||||
"https://${PORTAINER_URL}/api/endpoints/${ENDPOINT_ID}/docker/containers/json?all=true&filters=%7B%22label%22%3A%5B%22com.docker.compose.project%3D${STACK_NAME}%22%5D%7D" \
|
||||
-H "Authorization: Bearer ${TOKEN}")
|
||||
|
||||
OLD_IDS=$(echo "$CONTAINERS_BEFORE" | jq -r '[.[] | .Id] | join(",")')
|
||||
echo " Container lama: $(echo "$CONTAINERS_BEFORE" | jq -r '[.[] | .Names[0]] | join(", ")')"
|
||||
|
||||
# ── Ambil compose file lalu trigger redeploy ─────────────────────────────────
|
||||
echo "📄 Mengambil compose file..."
|
||||
STACK_FILE=$(curl -s -X GET "https://${PORTAINER_URL}/api/stacks/${STACK_ID}/file" \
|
||||
-H "Authorization: Bearer ${TOKEN}" \
|
||||
| jq -r .StackFileContent)
|
||||
|
||||
PAYLOAD=$(jq -n \
|
||||
--arg content "$STACK_FILE" \
|
||||
--argjson env "$ENV" \
|
||||
'{stackFileContent: $content, env: $env, pullImage: true}')
|
||||
|
||||
echo "🚀 Triggering redeploy $STACK_NAME (pull latest image)..."
|
||||
HTTP_STATUS=$(curl -s -o /tmp/portainer_response.json -w "%{http_code}" \
|
||||
-X PUT "https://${PORTAINER_URL}/api/stacks/${STACK_ID}?endpointId=${ENDPOINT_ID}" \
|
||||
-H "Authorization: Bearer ${TOKEN}" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d "$PAYLOAD")
|
||||
|
||||
if [ "$HTTP_STATUS" != "200" ]; then
|
||||
echo "❌ Redeploy gagal! HTTP Status: $HTTP_STATUS"
|
||||
cat /tmp/portainer_response.json | jq .
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "⏳ Menunggu image selesai di-pull dan container baru running..."
|
||||
echo " (Timeout: $((MAX_RETRY * SLEEP_INTERVAL)) detik)"
|
||||
|
||||
COUNT=0
|
||||
while [ $COUNT -lt $MAX_RETRY ]; do
|
||||
sleep $SLEEP_INTERVAL
|
||||
COUNT=$((COUNT + 1))
|
||||
|
||||
CONTAINERS=$(curl -s -X GET \
|
||||
"https://${PORTAINER_URL}/api/endpoints/${ENDPOINT_ID}/docker/containers/json?all=true&filters=%7B%22label%22%3A%5B%22com.docker.compose.project%3D${STACK_NAME}%22%5D%7D" \
|
||||
-H "Authorization: Bearer ${TOKEN}")
|
||||
|
||||
# Container baru = ID tidak ada di daftar container lama
|
||||
NEW_RUNNING=$(echo "$CONTAINERS" | jq \
|
||||
--arg old "$OLD_IDS" \
|
||||
'[.[] | select(.State == "running" and ((.Id) as $id | ($old | split(",") | index($id)) == null))] | length')
|
||||
|
||||
FAILED=$(echo "$CONTAINERS" | jq \
|
||||
'[.[] | select(.State == "exited" and (.Status | test("Exited \\(0\\)") | not) and (.Names[0] | test("seed") | not))] | length')
|
||||
|
||||
echo "🔄 [$((COUNT * SLEEP_INTERVAL))s / $((MAX_RETRY * SLEEP_INTERVAL))s] Container baru running: ${NEW_RUNNING} | Gagal: ${FAILED}"
|
||||
echo "$CONTAINERS" | jq -r '.[] | " → \(.Names[0]) | \(.State) | \(.Status) | id: \(.Id[:12])"'
|
||||
|
||||
if [ "$FAILED" -gt "0" ]; then
|
||||
echo ""
|
||||
echo "❌ Ada container yang crash!"
|
||||
echo "$CONTAINERS" | jq -r '.[] | select(.State == "exited" and (.Status | test("Exited \\(0\\)") | not) and (.Names[0] | test("seed") | not)) | " → \(.Names[0]) | \(.Status)"'
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if [ "$NEW_RUNNING" -gt "0" ]; then
|
||||
# Cleanup dangling images setelah redeploy sukses
|
||||
echo "🧹 Membersihkan dangling images..."
|
||||
curl -s -X POST "https://${PORTAINER_URL}/api/endpoints/${ENDPOINT_ID}/docker/images/prune" \
|
||||
-H "Authorization: Bearer ${TOKEN}" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"filters":{"dangling":["true"]}}' | jq -r '" Reclaimed: \(.SpaceReclaimed // 0 | . / 1073741824 | tostring | .[0:5]) GB"'
|
||||
|
||||
echo "✅ Cleanup selesai!"
|
||||
echo ""
|
||||
echo "✅ Stack $STACK_NAME berhasil di-redeploy dengan image baru dan running!"
|
||||
exit 0
|
||||
fi
|
||||
|
||||
|
||||
done
|
||||
|
||||
echo ""
|
||||
echo "❌ Timeout $((MAX_RETRY * SLEEP_INTERVAL))s! Container baru tidak kunjung running."
|
||||
echo " Kemungkinan image masih dalam proses pull atau ada error di server."
|
||||
exit 1
|
||||
55
.github/workflows/test.yml
vendored
Normal file
55
.github/workflows/test.yml
vendored
Normal file
@@ -0,0 +1,55 @@
|
||||
name: test workflows
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
environment:
|
||||
description: "Target environment (e.g., staging, production)"
|
||||
required: true
|
||||
default: "staging"
|
||||
version:
|
||||
description: "Version to deploy"
|
||||
required: false
|
||||
default: "latest"
|
||||
|
||||
env:
|
||||
APP_NAME: desa-darmasaba-action
|
||||
WA_PHONE: "6289697338821,6289697338822"
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
# Checkout kode sumber
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v3
|
||||
|
||||
# Setup Bun
|
||||
- name: Setup Bun
|
||||
uses: oven-sh/setup-bun@v2
|
||||
|
||||
# Create log file
|
||||
- name: Create log file
|
||||
run: touch build.txt
|
||||
|
||||
# Step 1: Set BRANCH_NAME based on event type
|
||||
- name: Set BRANCH_NAME
|
||||
run: |
|
||||
if [[ "${{ github.event_name }}" == "pull_request" ]]; then
|
||||
echo "BRANCH_NAME=${{ github.head_ref }}" >> $GITHUB_ENV
|
||||
else
|
||||
echo "BRANCH_NAME=${{ github.ref_name }}" >> $GITHUB_ENV
|
||||
fi
|
||||
|
||||
# Step 2: Generate APP_VERSION dynamically
|
||||
- name: Set APP_VERSION
|
||||
run: echo "APP_VERSION=${{ github.sha }}---$(date +%Y%m%d%H%M%S)" >> $GITHUB_ENV
|
||||
|
||||
# Step 3: Kirim notifikasi ke API build Start
|
||||
- name: Notify start build
|
||||
run: |
|
||||
IFS=',' read -ra PHONES <<< "${{ env.WA_PHONE }}"
|
||||
for PHONE in "${PHONES[@]}"; do
|
||||
ENCODED_TEXT=$(bun -e "console.log(encodeURIComponent('Build:start\nApp:${{ env.APP_NAME }}\nenv:${{ inputs.environment }}\nBranch:${{ env.BRANCH_NAME }}\nVersion:${{ env.APP_VERSION }}'))")
|
||||
curl -X GET "https://wa.wibudev.com/code?text=$ENCODED_TEXT&nom=$PHONE"
|
||||
done
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
@@ -29,9 +29,7 @@ yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env
|
||||
# env local files (keep .env.example)
|
||||
.env*
|
||||
!.env.example
|
||||
|
||||
# QC
|
||||
QC
|
||||
@@ -52,6 +50,9 @@ next-env.d.ts
|
||||
# cache
|
||||
/cache
|
||||
|
||||
.github/
|
||||
|
||||
.env.*
|
||||
|
||||
*.tar.gz
|
||||
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
"playwright-mcp": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"-y",
|
||||
"playwright-mcp@latest"
|
||||
],
|
||||
"timeout": 60000
|
||||
}
|
||||
},
|
||||
"$version": 3
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
"playwright-mcp": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "playwright-mcp@latest"],
|
||||
"timeout": 60000
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
# Engineering Audit Report: Desa Darmasaba
|
||||
**Status:** Production Readiness Review (Critical)
|
||||
**Auditor:** Staff Technical Architect
|
||||
|
||||
---
|
||||
|
||||
## 📊 Executive Summary & Scores
|
||||
|
||||
| Category | Score | Status |
|
||||
| :--- | :---: | :--- |
|
||||
| **Project Architecture** | 3/10 | 🔴 Critical Failure |
|
||||
| **Code Quality** | 4/10 | 🟠 Poor |
|
||||
| **Performance** | 5/10 | 🟡 Mediocre |
|
||||
| **Security** | 5/10 | 🟠 Risk Detected |
|
||||
| **Production Readiness** | 2/10 | 🔴 Not Ready |
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ 1. Project Architecture
|
||||
The project suffers from a **"Frankenstein Architecture"**. It attempts to run a full Elysia.js instance inside a Next.js Catch-All route.
|
||||
- **Fractured Backend:** Logic is split between standard Next.js routes (`/api/auth`) and embedded Elysia modules.
|
||||
- **Stateful Dependency:** Reliance on local filesystem (`WIBU_UPLOAD_DIR`) makes the application impossible to deploy on modern serverless platforms like Vercel.
|
||||
- **Polluted Namespace:** Routing tree contains "test/coba" folders (`src/app/coba`, `src/app/percobaan`) that would be accessible in production.
|
||||
|
||||
## ⚛️ 2. Frontend Engineering (React / Next.js)
|
||||
- **State Management Chaos:** Simultaneous use of `Valtio`, `Jotai`, `React Context`, and `localStorage`.
|
||||
- **Tight Coupling:** Public pages (`/darmasaba`) import state directly from Admin internal states (`/admin/(dashboard)/_state`).
|
||||
- **Heavy Client-Side Logic:** Logic that belongs in Server Actions or Hooks is embedded in presentational components (e.g., `Footer.tsx`).
|
||||
|
||||
## 📡 3. Backend / API Design
|
||||
- **Framework Overhead:** Running Elysia inside Next.js adds unnecessary cold-boot overhead and complexity.
|
||||
- **Weak Validation:** Widespread use of `as Type` casting in API handlers instead of runtime validation (Zod/Schema).
|
||||
- **Service Integration:** OTP codes are sent via external `GET` requests with sensitive data in the query string—a major logging risk.
|
||||
|
||||
## 🗄️ 4. Database & Data Modeling (Prisma)
|
||||
- **Schema Over-Normalization:** ~2000 lines of schema. Every minor content type (e.g., `LambangDesa`) is a separate table instead of a unified CMS model.
|
||||
- **Polymorphic Monolith:** `FileStorage` is a "god table" with optional relations to ~40 other tables, creating a massive bottleneck and data integrity risk.
|
||||
- **Connection Mismanagement:** Manual `prisma.$disconnect()` in API routes kills connection pooling performance.
|
||||
|
||||
## 🚀 5. Performance Engineering
|
||||
- **Bypassing Optimization:** Custom `/api/utils/img` endpoint bypasses `next/image` optimization, serving uncompressed assets.
|
||||
- **Aggressive Polling:** Client-side 30s polling for notifications is battery-draining and inefficient compared to SSE or SWR.
|
||||
|
||||
## 🔒 6. Security Audit
|
||||
- **Insecure OTP Delivery:** Credentials passed as URL parameters to the WhatsApp service.
|
||||
- **File Upload Risks:** Potential for Arbitrary File Upload due to direct local filesystem writes without rigorous sanitization.
|
||||
|
||||
## 🧹 7. Code Quality
|
||||
- **Inconsistency:** Mixed English/Indonesian naming (e.g., `nomor` vs `createdAt`).
|
||||
- **Artifacts:** Root directory is littered with scratch files: `xcoba.ts`, `xx.ts`, `test.txt`.
|
||||
|
||||
---
|
||||
|
||||
## 🚩 Top 10 Critical Problems
|
||||
1. **Architectural Fracture:** Embedding Elysia inside Next.js creates a "split-brain" system.
|
||||
2. **Serverless Incompatibility:** Dependency on local disk storage for uploads.
|
||||
3. **Database Bloat:** Over-complicated schema with a fragile `FileStorage` monolith.
|
||||
4. **State Fragmentation:** Mixed usage of Jotai and Valtio without a clear standard.
|
||||
5. **Credential Leakage:** OTP codes sent via GET query parameters.
|
||||
6. **Poor Cleanup:** Trial/Test folders and files committed to the production source.
|
||||
7. **Asset Performance:** Bypassing Next.js image optimization.
|
||||
8. **Coupling:** High dependency between public UI and internal Admin state.
|
||||
9. **Type Safety:** Manual casting in APIs instead of runtime validation.
|
||||
10. **Connection Pooling:** Inefficient Prisma connection management.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Tech Lead Refactoring Priorities
|
||||
1. **Unify the API:** Decommission the Elysia wrapper. Port all logic to standard Next.js Route Handlers with Zod validation.
|
||||
2. **Stateless Storage:** Implement an S3-compatible adapter for all file uploads. Remove `fs` usage.
|
||||
3. **Schema Consolidation:** Refactor the schema to use generic content models where possible.
|
||||
4. **Standardize State:** Choose one global state manager and migrate all components.
|
||||
5. **Project Sanitization:** Delete all `coba`, `percobaan`, and scratch files (`xcoba.ts`, etc.).
|
||||
@@ -1,191 +0,0 @@
|
||||
# Dev Inspector - Analisis & Rekomendasi untuk Project Desa Darmasaba
|
||||
|
||||
## 📋 Ringkasan Analisis
|
||||
|
||||
Dokumen `dev-inspector-click-to-source.md` **TIDAK dapat diterapkan langsung** ke project ini karena perbedaan arsitektur fundamental.
|
||||
|
||||
## 🔍 Perbedaan Arsitektur
|
||||
|
||||
| Syarat di Dokumen | Project Desa Darmasaba | Status |
|
||||
|-------------------|------------------------|--------|
|
||||
| **Vite sebagai bundler** | Next.js 15 (Webpack/Turbopack) | ❌ Tidak kompatibel |
|
||||
| **Elysia + Vite middlewareMode** | Next.js App Router + Elysia sebagai API handler | ❌ Berbeda |
|
||||
| **React** | ✅ React 19 | ✅ Kompatibel |
|
||||
| **Bun runtime** | ✅ Bun | ✅ Kompatibel |
|
||||
|
||||
## ✅ Solusi: Next.js Sudah Punya Built-in Click-to-Source
|
||||
|
||||
Next.js memiliki fitur **click-to-source bawaan** yang bekerja tanpa setup tambahan:
|
||||
|
||||
### Cara Menggunakan
|
||||
|
||||
1. **Pastikan dalam development mode:**
|
||||
```bash
|
||||
bun run dev
|
||||
```
|
||||
|
||||
2. **Klik elemen dengan modifier key:**
|
||||
- **macOS**: `Option` + `Click` (atau `⌥` + `Click`)
|
||||
- **Windows/Linux**: `Alt` + `Click`
|
||||
|
||||
3. **File akan terbuka di editor** pada baris dan kolom yang tepat
|
||||
|
||||
### Syarat Agar Berfungsi
|
||||
|
||||
1. **Editor harus ada di PATH**
|
||||
|
||||
VS Code biasanya sudah terdaftar. Jika menggunakan editor lain, set:
|
||||
```bash
|
||||
# Untuk Cursor
|
||||
export EDITOR=cursor
|
||||
|
||||
# Untuk Windsurf
|
||||
export EDITOR=windsurf
|
||||
|
||||
# Untuk Sublime Text
|
||||
export EDITOR=subl
|
||||
```
|
||||
|
||||
2. **Hanya berfungsi di development mode**
|
||||
- Fitur ini otomatis tree-shaken di production
|
||||
- Zero overhead di production build
|
||||
|
||||
3. **Browser DevTools harus terbuka** (beberapa browser memerlukan ini)
|
||||
|
||||
## 🎯 Rekomendasi untuk Project Ini
|
||||
|
||||
### Opsi 1: Gunakan Built-in Next.js (DIREKOMENDASIKAN)
|
||||
|
||||
**Kelebihan:**
|
||||
- ✅ Zero setup
|
||||
- ✅ Maintain oleh Vercel
|
||||
- ✅ Otomatis compatible dengan Next.js updates
|
||||
- ✅ Zero production overhead
|
||||
|
||||
**Kekurangan:**
|
||||
- ⚠️ Hotkey berbeda (`Option+Click` vs `Ctrl+Shift+Cmd+C`)
|
||||
- ⚠️ Tidak ada visual overlay/tooltip seperti di dokumen
|
||||
|
||||
**Cara:**
|
||||
Tidak perlu melakukan apapun - fitur sudah aktif saat `bun run dev`.
|
||||
|
||||
### Opsi 2: Custom Implementation (JIKA DIPERLUKAN)
|
||||
|
||||
Jika ingin visual overlay dan tooltip seperti di dokumen, bisa dibuat custom component dengan pendekatan berbeda:
|
||||
|
||||
#### Arsitektur Alternatif untuk Next.js
|
||||
|
||||
```
|
||||
BUILD TIME (Next.js/Webpack):
|
||||
.tsx/.jsx file
|
||||
→ [Custom Webpack Loader] inject data-inspector-* attributes
|
||||
→ [Next.js internal transform] JSX to React.createElement
|
||||
→ Browser menerima elemen dengan attributes
|
||||
|
||||
RUNTIME (Browser):
|
||||
[SAMA seperti dokumen - DevInspector component]
|
||||
|
||||
BACKEND (Next.js API Route):
|
||||
/__open-in-editor → Bun.spawn([editor, '--goto', 'file:line:col'])
|
||||
```
|
||||
|
||||
#### Komponen yang Dibutuhkan:
|
||||
|
||||
1. **Custom Webpack Loader** (bukan Vite Plugin)
|
||||
- Inject attributes via webpack transform
|
||||
- Taruh di `next.config.ts` webpack config
|
||||
|
||||
2. **DevInspector Component** (sama seperti dokumen)
|
||||
- Browser runtime untuk handle hotkey & klik
|
||||
|
||||
3. **API Route `/__open-in-editor`**
|
||||
- Buat sebagai Next.js API route: `src/app/api/__open-in-editor/route.ts`
|
||||
- HARUS bypass auth middleware
|
||||
|
||||
4. **Conditional Import** (sama seperti dokumen)
|
||||
```tsx
|
||||
const InspectorWrapper = process.env.NODE_ENV === 'development'
|
||||
? (await import('./DevInspector')).DevInspector
|
||||
: ({ children }) => <>{children}</>
|
||||
```
|
||||
|
||||
#### Implementasi Steps:
|
||||
|
||||
Jika Anda ingin melanjutkan dengan custom implementation, berikut steps:
|
||||
|
||||
1. ✅ Buat `src/components/DevInspector.tsx` (copy dari dokumen)
|
||||
2. ⚠️ Buat webpack loader untuk inject attributes (perlu research)
|
||||
3. ✅ Buat API route `src/app/api/__open-in-editor/route.ts`
|
||||
4. ✅ Wrap root layout dengan DevInspector
|
||||
5. ✅ Set `REACT_EDITOR` di `.env`
|
||||
|
||||
**Peringatan:**
|
||||
- Webpack loader lebih kompleks daripada Vite plugin
|
||||
- Mungkin ada edge cases dengan Next.js internals
|
||||
- Perlu maintenance ekstra saat Next.js update
|
||||
|
||||
## 📊 Perbandingan
|
||||
|
||||
| Fitur | Built-in Next.js | Custom Implementation |
|
||||
|-------|------------------|----------------------|
|
||||
| Setup | ✅ Zero | ⚠️ Medium |
|
||||
| Visual Overlay | ❌ Tidak ada | ✅ Ada |
|
||||
| Tooltip | ❌ Tidak ada | ✅ Ada |
|
||||
| Hotkey | `Option+Click` | Custom (bisa disesuaikan) |
|
||||
| Maintenance | ✅ Vercel | ⚠️ Manual |
|
||||
| Compatibility | ✅ Guaranteed | ⚠️ Perlu testing |
|
||||
| Production Impact | ✅ Zero | ✅ Zero (dengan conditional import) |
|
||||
|
||||
## 🎯 Kesimpulan
|
||||
|
||||
**Rekomendasi: Gunakan Built-in Next.js**
|
||||
|
||||
Alasan:
|
||||
1. ✅ Sudah tersedia - tidak perlu setup
|
||||
2. ✅ Lebih stabil - maintain oleh Vercel
|
||||
3. ✅ Lebih simple - tidak ada custom code
|
||||
4. ✅ Future-proof - otomatis update dengan Next.js
|
||||
|
||||
**Custom implementation hanya diperlukan jika:**
|
||||
- Anda sangat membutuhkan visual overlay & tooltip
|
||||
- Anda ingin hotkey yang sama persis (`Ctrl+Shift+Cmd+C`)
|
||||
- Anda punya waktu untuk maintenance
|
||||
|
||||
## 🚀 Quick Start - Built-in Feature
|
||||
|
||||
Untuk menggunakan click-to-source bawaan Next.js:
|
||||
|
||||
1. Jalankan development server:
|
||||
```bash
|
||||
bun run dev
|
||||
```
|
||||
|
||||
2. Buka browser ke `http://localhost:3000`
|
||||
|
||||
3. Tahan `Option` (macOS) atau `Alt` (Windows/Linux)
|
||||
|
||||
4. Cursor akan berubah menjadi crosshair
|
||||
|
||||
5. Klik elemen mana pun - file akan terbuka di editor
|
||||
|
||||
6. **Opsional**: Set editor di `.env`:
|
||||
```env
|
||||
# .env.local
|
||||
EDITOR=code # atau cursor, windsurf, subl
|
||||
```
|
||||
|
||||
## 📝 Notes
|
||||
|
||||
- Fitur ini hanya aktif di development mode (`NODE_ENV=development`)
|
||||
- Production build (`bun run build`) otomatis menghilangkan fitur ini
|
||||
- Next.js menggunakan mekanisme yang mirip (source mapping) untuk menentukan lokasi component
|
||||
- Jika editor tidak terbuka, pastikan:
|
||||
- Editor sudah terinstall dan ada di PATH
|
||||
- Browser DevTools terbuka (beberapa browser require ini)
|
||||
- Anda menggunakan development server, bukan production
|
||||
|
||||
## 🔗 Referensi
|
||||
|
||||
- [Next.js Documentation - Launching Editor](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactStrictMode)
|
||||
- [React DevTools - Component Inspection](https://react.dev/learn/react-developer-tools)
|
||||
- [Original Dev Inspector Document](./dev-inspector-click-to-source.md)
|
||||
67
Dockerfile
67
Dockerfile
@@ -1,67 +0,0 @@
|
||||
# ==============================
|
||||
# Stage 1: Builder
|
||||
# ==============================
|
||||
FROM oven/bun:1-debian AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
libc6 \
|
||||
git \
|
||||
openssl \
|
||||
ca-certificates \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
COPY package.json bun.lockb* ./
|
||||
|
||||
ENV SHARP_IGNORE_GLOBAL_LIBVIPS=1
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
ENV NODE_OPTIONS="--max-old-space-size=4096"
|
||||
|
||||
RUN bun install --frozen-lockfile
|
||||
|
||||
COPY . .
|
||||
|
||||
RUN cp .env.example .env || true
|
||||
|
||||
ENV PRISMA_CLI_BINARY_TARGETS=debian-openssl-3.0.x
|
||||
RUN bunx prisma generate
|
||||
|
||||
# Generate API types (opsional)
|
||||
RUN bun run gen:api || echo "tidak ada gen api"
|
||||
|
||||
RUN bun run build
|
||||
|
||||
# ==============================
|
||||
# Stage 2: Runner (Production)
|
||||
# ==============================
|
||||
FROM oven/bun:1-debian AS runner
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
ENV PRISMA_CLI_BINARY_TARGETS=debian-openssl-3.0.x
|
||||
ENV PORT=3000
|
||||
ENV HOSTNAME="0.0.0.0"
|
||||
|
||||
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
openssl \
|
||||
ca-certificates \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
RUN groupadd --system --gid 1001 nodejs \
|
||||
&& useradd --system --uid 1001 --gid nodejs nextjs
|
||||
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/public ./public
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/package.json ./package.json
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/next.config.* ./
|
||||
|
||||
USER nextjs
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD ["bun", "start"]
|
||||
@@ -1,173 +0,0 @@
|
||||
# Musik Desa - Create Feature Analysis
|
||||
|
||||
## Error Summary
|
||||
**Error**: `ERR_BLOCKED_BY_CLIENT` saat create musik di staging environment
|
||||
|
||||
## Root Cause Analysis
|
||||
|
||||
### 1. **CORS Configuration Issue** (Primary)
|
||||
File: `src/app/api/[[...slugs]]/route.ts`
|
||||
|
||||
The CORS configuration has specific origins listed:
|
||||
```typescript
|
||||
const corsConfig = {
|
||||
origin: [
|
||||
"http://localhost:3000",
|
||||
"http://localhost:3001",
|
||||
"https://cld-dkr-desa-darmasaba-stg.wibudev.com",
|
||||
"https://cld-dkr-staging-desa-darmasaba.wibudev.com",
|
||||
"*",
|
||||
],
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
**Problem**: The wildcard `*` is at the end, but some browsers don't respect it when `credentials: true` is set.
|
||||
|
||||
### 2. **API Fetch Base URL** (Secondary)
|
||||
File: `src/lib/api-fetch.ts`
|
||||
|
||||
```typescript
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'
|
||||
```
|
||||
|
||||
**Problem**:
|
||||
- In staging, this might still default to `http://localhost:3000`
|
||||
- Mixed content (HTTPS frontend → HTTP API) gets blocked by browsers
|
||||
- The `NEXT_PUBLIC_BASE_URL` environment variable might not be set in staging
|
||||
|
||||
### 3. **File Storage Upload Path** (Tertiary)
|
||||
File: `src/app/api/[[...slugs]]/_lib/fileStorage/_lib/create.ts`
|
||||
|
||||
```typescript
|
||||
const UPLOAD_DIR = process.env.WIBU_UPLOAD_DIR;
|
||||
```
|
||||
|
||||
**Problem**: If `WIBU_UPLOAD_DIR` is not set or points to a non-writable location, uploads will fail silently.
|
||||
|
||||
## Solution
|
||||
|
||||
### Fix 1: Update CORS Configuration
|
||||
**File**: `src/app/api/[[...slugs]]/route.ts`
|
||||
|
||||
```typescript
|
||||
// Move wildcard to first position and ensure it works with credentials
|
||||
const corsConfig = {
|
||||
origin: [
|
||||
"*", // Allow all origins (for staging flexibility)
|
||||
"http://localhost:3000",
|
||||
"http://localhost:3001",
|
||||
"https://cld-dkr-desa-darmasaba-stg.wibudev.com",
|
||||
"https://cld-dkr-staging-desa-darmasaba.wibudev.com",
|
||||
"https://desa-darmasaba-stg.wibudev.com"
|
||||
],
|
||||
methods: ["GET", "POST", "PATCH", "DELETE", "PUT", "OPTIONS"] as HTTPMethod[],
|
||||
allowedHeaders: ["Content-Type", "Authorization", "Accept"],
|
||||
exposedHeaders: ["Content-Range", "X-Content-Range"],
|
||||
maxAge: 86400, // 24 hours
|
||||
credentials: true,
|
||||
};
|
||||
```
|
||||
|
||||
### Fix 2: Add Environment Variable Validation
|
||||
**File**: `.env.example` (update)
|
||||
|
||||
```bash
|
||||
# Application Configuration
|
||||
NEXT_PUBLIC_BASE_URL=http://localhost:3000
|
||||
|
||||
# For staging/production, set this to your actual domain
|
||||
# NEXT_PUBLIC_BASE_URL=https://cld-dkr-desa-darmasaba-stg.wibudev.com
|
||||
```
|
||||
|
||||
### Fix 3: Update API Fetch to Handle Relative URLs
|
||||
**File**: `src/lib/api-fetch.ts`
|
||||
|
||||
```typescript
|
||||
import { AppServer } from '@/app/api/[[...slugs]]/route'
|
||||
import { treaty } from '@elysiajs/eden'
|
||||
|
||||
// Use relative URL for better deployment flexibility
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || '/'
|
||||
|
||||
const ApiFetch = treaty<AppServer>(BASE_URL)
|
||||
|
||||
export default ApiFetch
|
||||
```
|
||||
|
||||
### Fix 4: Add Error Handling in Create Page
|
||||
**File**: `src/app/admin/(dashboard)/musik/create/page.tsx`
|
||||
|
||||
Add better error logging to diagnose issues:
|
||||
|
||||
```typescript
|
||||
const handleSubmit = async () => {
|
||||
// ... validation ...
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Upload cover image
|
||||
const coverRes = await ApiFetch.api.fileStorage.create.post({
|
||||
file: coverFile,
|
||||
name: coverFile.name,
|
||||
});
|
||||
|
||||
if (!coverRes.data?.data?.id) {
|
||||
console.error('Cover upload failed:', coverRes);
|
||||
return toast.error('Gagal mengunggah cover, silakan coba lagi');
|
||||
}
|
||||
|
||||
// ... rest of the code ...
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error creating musik:', {
|
||||
error,
|
||||
message: error instanceof Error ? error.message : 'Unknown error',
|
||||
stack: error instanceof Error ? error.stack : undefined,
|
||||
});
|
||||
toast.error('Terjadi kesalahan saat membuat musik');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
### Local Development
|
||||
- [ ] Test create musik with cover image and audio file
|
||||
- [ ] Verify CORS headers in browser DevTools Network tab
|
||||
- [ ] Check that file uploads are saved to correct directory
|
||||
|
||||
### Staging Environment
|
||||
- [ ] Set `NEXT_PUBLIC_BASE_URL` to staging domain
|
||||
- [ ] Verify HTTPS is used for all API calls
|
||||
- [ ] Check browser console for mixed content warnings
|
||||
- [ ] Verify `WIBU_UPLOAD_DIR` is set and writable
|
||||
- [ ] Test create musik end-to-end
|
||||
|
||||
## Additional Notes
|
||||
|
||||
### ERR_BLOCKED_BY_CLIENT Common Causes:
|
||||
1. **CORS policy blocking** - Most likely cause
|
||||
2. **Ad blockers** - Can block certain API endpoints
|
||||
3. **Mixed content** - HTTPS page making HTTP requests
|
||||
4. **Content Security Policy (CSP)** - Restrictive CSP headers
|
||||
5. **Browser extensions** - Privacy/security extensions blocking requests
|
||||
|
||||
### Debugging Steps:
|
||||
1. Open browser DevTools → Network tab
|
||||
2. Try to create musik
|
||||
3. Look for failed requests (red status)
|
||||
4. Check the "Headers" tab for:
|
||||
- Request URL (should be correct domain)
|
||||
- Response headers (should have `Access-Control-Allow-Origin`)
|
||||
- Status code (4xx/5xx indicates server-side issue)
|
||||
5. Check browser console for CORS errors
|
||||
|
||||
## Recommended Next Steps
|
||||
|
||||
1. **Immediate**: Update CORS configuration to allow staging domain
|
||||
2. **Short-term**: Add proper environment variable validation
|
||||
3. **Long-term**: Implement proper error boundaries and logging
|
||||
49
biome.json
49
biome.json
@@ -1,49 +0,0 @@
|
||||
{
|
||||
"$schema": "https://biomejs.dev/schemas/2.4.10/schema.json",
|
||||
"vcs": {
|
||||
"enabled": true,
|
||||
"clientKind": "git",
|
||||
"useIgnoreFile": true
|
||||
},
|
||||
"files": {
|
||||
"ignoreUnknown": false,
|
||||
"experimentalScannerIgnores": [
|
||||
"node_modules",
|
||||
".next",
|
||||
"out",
|
||||
"public"
|
||||
]
|
||||
},
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"indentStyle": "space",
|
||||
"indentWidth": 2,
|
||||
"lineWidth": 100
|
||||
},
|
||||
"linter": {
|
||||
"enabled": true,
|
||||
"rules": {
|
||||
"recommended": true,
|
||||
"correctness": {
|
||||
"noUnusedVariables": "warn",
|
||||
"noUnusedImports": "warn"
|
||||
},
|
||||
"suspicious": {
|
||||
"noExplicitAny": "warn"
|
||||
},
|
||||
"style": {
|
||||
"noNonNullAssertion": "warn"
|
||||
},
|
||||
"complexity": {
|
||||
"noForEach": "off"
|
||||
}
|
||||
}
|
||||
},
|
||||
"javascript": {
|
||||
"formatter": {
|
||||
"quoteStyle": "single",
|
||||
"trailingCommas": "all",
|
||||
"semicolons": "always"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,553 +0,0 @@
|
||||
# Skill: Dev Inspector — Click-to-Source untuk Bun + Elysia + Vite + React
|
||||
|
||||
## Ringkasan
|
||||
|
||||
Fitur development: klik elemen UI di browser → langsung buka source code di editor (VS Code, Cursor, dll) pada baris dan kolom yang tepat. Zero overhead di production.
|
||||
|
||||
**Hotkey**: `Ctrl+Shift+Cmd+C` (macOS) / `Ctrl+Shift+Alt+C` → aktifkan mode inspect → klik elemen → file terbuka.
|
||||
|
||||
## Kenapa Tidak Pakai Library
|
||||
|
||||
`react-dev-inspector` crash di React 19 karena:
|
||||
- `fiber.return.child.sibling` bisa null di React 19
|
||||
- `_debugSource` dihapus dari React 19
|
||||
- Walking fiber tree tidak stabil antar versi React
|
||||
|
||||
Solusi ini **regex-based + multi-fallback**, tidak bergantung pada React internals.
|
||||
|
||||
## Syarat Arsitektur
|
||||
|
||||
Fitur ini bekerja karena 4 syarat struktural terpenuhi. Jika salah satu tidak ada, fitur tidak bisa diimplementasi atau perlu adaptasi signifikan.
|
||||
|
||||
### 1. Vite sebagai Bundler (Wajib)
|
||||
|
||||
Seluruh mekanisme bergantung pada **Vite plugin transform pipeline**:
|
||||
- `inspectorPlugin()` inject attributes ke JSX saat build/HMR
|
||||
- `enforce: 'pre'` memastikan plugin jalan sebelum OXC/Babel transform JSX
|
||||
- `import.meta.env?.DEV` sebagai compile-time constant untuk tree-shaking
|
||||
|
||||
**Tidak bisa diganti dengan**: esbuild standalone, webpack (perlu loader berbeda), SWC standalone.
|
||||
**Bisa diganti dengan**: framework yang pakai Vite di dalamnya (Remix Vite, TanStack Start, Astro).
|
||||
|
||||
### 2. Server dan Frontend dalam Satu Proses (Wajib)
|
||||
|
||||
Endpoint `/__open-in-editor` harus **satu proses dengan dev server** yang melayani frontend:
|
||||
- Browser POST ke origin yang sama (no CORS)
|
||||
- Server punya akses ke filesystem lokal untuk `Bun.spawn(editor)`
|
||||
- Endpoint harus bisa ditangani **sebelum routing & middleware** (auth, tenant, dll)
|
||||
|
||||
**Pola yang memenuhi syarat:**
|
||||
- Elysia + Vite middlewareMode (project ini) — `onRequest` intercept sebelum route matching
|
||||
- Express/Fastify + Vite middlewareMode — middleware biasa sebelum auth
|
||||
- Vite dev server standalone (`vite dev`) — pakai `configureServer` hook
|
||||
|
||||
**Tidak memenuhi syarat:**
|
||||
- Frontend dan backend di proses/port terpisah (misal: CRA + separate API server) — perlu proxy atau CORS config tambahan
|
||||
- Serverless/edge deployment — tidak bisa `spawn` editor
|
||||
|
||||
### 3. React sebagai UI Framework (Wajib untuk Multi-Fallback)
|
||||
|
||||
Strategi extraction source info bergantung pada React internals:
|
||||
1. `__reactProps$*` — React menyimpan props di DOM element
|
||||
2. `__reactFiber$*` — React fiber tree untuk walk-up
|
||||
3. DOM attribute — fallback universal
|
||||
|
||||
**Jika pakai framework lain** (Vue, Svelte, Solid):
|
||||
- Hanya strategi 3 (DOM attribute) yang berfungsi — tetap cukup
|
||||
- Hapus strategi 1 & 2 dari `getCodeInfoFromElement()`
|
||||
- Inject attributes tetap via Vite plugin (framework-agnostic)
|
||||
|
||||
### 4. Bun sebagai Runtime (Direkomendasikan, Bukan Wajib)
|
||||
|
||||
Bun memberikan API yang lebih clean:
|
||||
- `Bun.spawn()` — fire-and-forget tanpa import
|
||||
- `Bun.which()` — cek executable ada di PATH (mencegah uncatchable error)
|
||||
|
||||
**Jika pakai Node.js:**
|
||||
- `Bun.spawn()` → `child_process.spawn(editor, args, { detached: true, stdio: 'ignore' }).unref()`
|
||||
- `Bun.which()` → `const which = require('which'); which.sync(editor, { nothrow: true })`
|
||||
|
||||
### Ringkasan Syarat
|
||||
|
||||
| Syarat | Wajib? | Alternatif |
|
||||
|-------------------------------|----------|------------------------------------------------------|
|
||||
| Vite sebagai bundler | Ya | Framework berbasis Vite (Remix, Astro, dll) |
|
||||
| Server + frontend satu proses | Ya | Bisa diakali dengan proxy, tapi tambah kompleksitas |
|
||||
| React | Sebagian | Framework lain bisa, hanya fallback ke DOM attribute |
|
||||
| Bun runtime | Tidak | Node.js dengan `child_process` + `which` package |
|
||||
|
||||
## Arsitektur
|
||||
|
||||
```
|
||||
BUILD TIME (Vite Plugin):
|
||||
.tsx/.jsx file
|
||||
→ [inspectorPlugin enforce:'pre'] inject data-inspector-* attributes ke JSX
|
||||
→ [react() OXC] transform JSX ke createElement
|
||||
→ Browser menerima elemen dengan attributes
|
||||
|
||||
RUNTIME (Browser):
|
||||
Hotkey → aktifkan mode → hover elemen → baca attributes → klik
|
||||
→ POST /__open-in-editor {relativePath, line, column}
|
||||
|
||||
BACKEND (Elysia onRequest):
|
||||
/__open-in-editor → Bun.spawn([editor, '--goto', 'file:line:col'])
|
||||
→ Editor terbuka di lokasi tepat
|
||||
```
|
||||
|
||||
## Komponen yang Dibutuhkan
|
||||
|
||||
### 1. Vite Plugin — `inspectorPlugin()` (enforce: 'pre')
|
||||
|
||||
Inject `data-inspector-*` ke setiap JSX opening tag via regex.
|
||||
|
||||
**HARUS `enforce: 'pre'`** — kalau tidak, OXC transform JSX duluan dan regex tidak bisa menemukan `<Component`.
|
||||
|
||||
```typescript
|
||||
// Taruh di file vite config (misal: src/vite.ts atau vite.config.ts)
|
||||
import path from 'node:path'
|
||||
import type { Plugin } from 'vite'
|
||||
|
||||
function inspectorPlugin(): Plugin {
|
||||
const rootDir = process.cwd()
|
||||
|
||||
return {
|
||||
name: 'inspector-inject',
|
||||
enforce: 'pre',
|
||||
transform(code, id) {
|
||||
// Hanya .tsx/.jsx, skip node_modules
|
||||
if (!/\.[jt]sx(\?|$)/.test(id) || id.includes('node_modules')) return null
|
||||
if (!code.includes('<')) return null
|
||||
|
||||
const relativePath = path.relative(rootDir, id)
|
||||
let modified = false
|
||||
const lines = code.split('\n')
|
||||
const result: string[] = []
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
let line = lines[i]
|
||||
// Match JSX opening tags: <Component atau <div
|
||||
// Skip TypeScript generics (Record<string>) via charBefore check
|
||||
const jsxPattern = /(<(?:[A-Z][a-zA-Z0-9.]*|[a-z][a-zA-Z0-9-]*))\b/g
|
||||
let match: RegExpExecArray | null = null
|
||||
|
||||
while ((match = jsxPattern.exec(line)) !== null) {
|
||||
// Skip jika karakter sebelum `<` adalah identifier char (TypeScript generic)
|
||||
const charBefore = match.index > 0 ? line[match.index - 1] : ''
|
||||
if (/[a-zA-Z0-9_$.]/.test(charBefore)) continue
|
||||
|
||||
const col = match.index + 1
|
||||
const attr = ` data-inspector-line="${i + 1}" data-inspector-column="${col}" data-inspector-relative-path="${relativePath}"`
|
||||
const insertPos = match.index + match[0].length
|
||||
line = line.slice(0, insertPos) + attr + line.slice(insertPos)
|
||||
modified = true
|
||||
jsxPattern.lastIndex += attr.length
|
||||
}
|
||||
|
||||
result.push(line)
|
||||
}
|
||||
|
||||
if (!modified) return null
|
||||
return result.join('\n')
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Mengapa regex, bukan Babel?**
|
||||
- `@vitejs/plugin-react` v6+ pakai OXC (Rust), bukan Babel
|
||||
- Config `babel: { plugins: [...] }` di plugin-react **DIABAIKAN**
|
||||
- Regex jalan sebelum OXC via `enforce: 'pre'`
|
||||
|
||||
**Gotcha: TypeScript generics**
|
||||
- `Record<string>` → karakter sebelum `<` adalah `d` (identifier) → SKIP
|
||||
- `<Button` → karakter sebelum `<` adalah space/newline → MATCH
|
||||
|
||||
### 2. Vite Plugin Order (KRITIS)
|
||||
|
||||
```typescript
|
||||
plugins: [
|
||||
// 1. Route generation (jika pakai TanStack Router)
|
||||
TanStackRouterVite({ ... }),
|
||||
|
||||
// 2. Inspector inject — HARUS sebelum react()
|
||||
inspectorPlugin(),
|
||||
|
||||
// 3. React OXC transform
|
||||
react(),
|
||||
|
||||
// 4. (Opsional) Dedupe React Refresh untuk middlewareMode
|
||||
dedupeRefreshPlugin(),
|
||||
]
|
||||
```
|
||||
|
||||
**Jika urutan salah (inspectorPlugin setelah react):**
|
||||
- OXC transform `<Button>` → `React.createElement(Button, ...)`
|
||||
- Regex tidak menemukan `<Button` → attributes TIDAK ter-inject
|
||||
- Fitur tidak berfungsi, tanpa error
|
||||
|
||||
### 3. DevInspector Component (Browser Runtime)
|
||||
|
||||
Komponen React yang handle hotkey, overlay, dan klik.
|
||||
|
||||
```tsx
|
||||
// src/frontend/DevInspector.tsx
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
|
||||
interface CodeInfo {
|
||||
relativePath: string
|
||||
line: string
|
||||
column: string
|
||||
}
|
||||
|
||||
/** Baca data-inspector-* dari fiber props atau DOM attributes */
|
||||
function getCodeInfoFromElement(element: HTMLElement): CodeInfo | null {
|
||||
// Strategi 1: React internal props __reactProps$ (paling akurat)
|
||||
for (const key of Object.keys(element)) {
|
||||
if (key.startsWith('__reactProps$')) {
|
||||
const props = (element as any)[key]
|
||||
if (props?.['data-inspector-relative-path']) {
|
||||
return {
|
||||
relativePath: props['data-inspector-relative-path'],
|
||||
line: props['data-inspector-line'] || '1',
|
||||
column: props['data-inspector-column'] || '1',
|
||||
}
|
||||
}
|
||||
}
|
||||
// Strategi 2: Walk fiber tree __reactFiber$
|
||||
if (key.startsWith('__reactFiber$')) {
|
||||
const fiber = (element as any)[key]
|
||||
let f = fiber
|
||||
while (f) {
|
||||
const p = f.pendingProps || f.memoizedProps
|
||||
if (p?.['data-inspector-relative-path']) {
|
||||
return {
|
||||
relativePath: p['data-inspector-relative-path'],
|
||||
line: p['data-inspector-line'] || '1',
|
||||
column: p['data-inspector-column'] || '1',
|
||||
}
|
||||
}
|
||||
// Fallback: _debugSource (React < 19)
|
||||
const src = f._debugSource ?? f._debugOwner?._debugSource
|
||||
if (src?.fileName && src?.lineNumber) {
|
||||
return {
|
||||
relativePath: src.fileName,
|
||||
line: String(src.lineNumber),
|
||||
column: String(src.columnNumber ?? 1),
|
||||
}
|
||||
}
|
||||
f = f.return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Strategi 3: Fallback DOM attribute langsung
|
||||
const rp = element.getAttribute('data-inspector-relative-path')
|
||||
if (rp) {
|
||||
return {
|
||||
relativePath: rp,
|
||||
line: element.getAttribute('data-inspector-line') || '1',
|
||||
column: element.getAttribute('data-inspector-column') || '1',
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
/** Walk up DOM tree sampai ketemu elemen yang punya source info */
|
||||
function findCodeInfo(target: HTMLElement): CodeInfo | null {
|
||||
let el: HTMLElement | null = target
|
||||
while (el) {
|
||||
const info = getCodeInfoFromElement(el)
|
||||
if (info) return info
|
||||
el = el.parentElement
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function openInEditor(info: CodeInfo) {
|
||||
fetch('/__open-in-editor', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
relativePath: info.relativePath,
|
||||
lineNumber: info.line,
|
||||
columnNumber: info.column,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
export function DevInspector({ children }: { children: React.ReactNode }) {
|
||||
const [active, setActive] = useState(false)
|
||||
const overlayRef = useRef<HTMLDivElement | null>(null)
|
||||
const tooltipRef = useRef<HTMLDivElement | null>(null)
|
||||
const lastInfoRef = useRef<CodeInfo | null>(null)
|
||||
|
||||
const updateOverlay = useCallback((target: HTMLElement | null) => {
|
||||
const ov = overlayRef.current
|
||||
const tt = tooltipRef.current
|
||||
if (!ov || !tt) return
|
||||
|
||||
if (!target) {
|
||||
ov.style.display = 'none'
|
||||
tt.style.display = 'none'
|
||||
lastInfoRef.current = null
|
||||
return
|
||||
}
|
||||
|
||||
const info = findCodeInfo(target)
|
||||
if (!info) {
|
||||
ov.style.display = 'none'
|
||||
tt.style.display = 'none'
|
||||
lastInfoRef.current = null
|
||||
return
|
||||
}
|
||||
|
||||
lastInfoRef.current = info
|
||||
|
||||
const rect = target.getBoundingClientRect()
|
||||
ov.style.display = 'block'
|
||||
ov.style.top = `${rect.top + window.scrollY}px`
|
||||
ov.style.left = `${rect.left + window.scrollX}px`
|
||||
ov.style.width = `${rect.width}px`
|
||||
ov.style.height = `${rect.height}px`
|
||||
|
||||
tt.style.display = 'block'
|
||||
tt.textContent = `${info.relativePath}:${info.line}`
|
||||
const ttTop = rect.top + window.scrollY - 24
|
||||
tt.style.top = `${ttTop > 0 ? ttTop : rect.bottom + window.scrollY + 4}px`
|
||||
tt.style.left = `${rect.left + window.scrollX}px`
|
||||
}, [])
|
||||
|
||||
// Activate/deactivate event listeners
|
||||
useEffect(() => {
|
||||
if (!active) return
|
||||
|
||||
const onMouseOver = (e: MouseEvent) => updateOverlay(e.target as HTMLElement)
|
||||
|
||||
const onClick = (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
const info = lastInfoRef.current ?? findCodeInfo(e.target as HTMLElement)
|
||||
if (info) {
|
||||
const loc = `${info.relativePath}:${info.line}:${info.column}`
|
||||
console.log('[DevInspector] Open:', loc)
|
||||
navigator.clipboard.writeText(loc)
|
||||
openInEditor(info)
|
||||
}
|
||||
setActive(false)
|
||||
}
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') setActive(false)
|
||||
}
|
||||
|
||||
document.addEventListener('mouseover', onMouseOver, true)
|
||||
document.addEventListener('click', onClick, true)
|
||||
document.addEventListener('keydown', onKeyDown)
|
||||
document.body.style.cursor = 'crosshair'
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mouseover', onMouseOver, true)
|
||||
document.removeEventListener('click', onClick, true)
|
||||
document.removeEventListener('keydown', onKeyDown)
|
||||
document.body.style.cursor = ''
|
||||
if (overlayRef.current) overlayRef.current.style.display = 'none'
|
||||
if (tooltipRef.current) tooltipRef.current.style.display = 'none'
|
||||
}
|
||||
}, [active, updateOverlay])
|
||||
|
||||
// Hotkey: Ctrl+Shift+Cmd+C (macOS) / Ctrl+Shift+Alt+C
|
||||
useEffect(() => {
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key.toLowerCase() === 'c' && e.ctrlKey && e.shiftKey && (e.metaKey || e.altKey)) {
|
||||
e.preventDefault()
|
||||
setActive((prev) => !prev)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', onKeyDown)
|
||||
return () => document.removeEventListener('keydown', onKeyDown)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{children}
|
||||
<div
|
||||
ref={overlayRef}
|
||||
style={{
|
||||
display: 'none',
|
||||
position: 'absolute',
|
||||
pointerEvents: 'none',
|
||||
border: '2px solid #3b82f6',
|
||||
backgroundColor: 'rgba(59,130,246,0.1)',
|
||||
zIndex: 99999,
|
||||
transition: 'all 0.05s ease',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
ref={tooltipRef}
|
||||
style={{
|
||||
display: 'none',
|
||||
position: 'absolute',
|
||||
pointerEvents: 'none',
|
||||
backgroundColor: '#1e293b',
|
||||
color: '#e2e8f0',
|
||||
fontSize: '12px',
|
||||
fontFamily: 'monospace',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '3px',
|
||||
zIndex: 100000,
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Backend Endpoint — `/__open-in-editor`
|
||||
|
||||
**HARUS ditangani di `onRequest` / sebelum middleware**, bukan sebagai route biasa. Kalau jadi route, akan kena auth middleware dan gagal.
|
||||
|
||||
```typescript
|
||||
// Di entry point server (src/index.tsx), dalam onRequest handler:
|
||||
|
||||
if (!isProduction && pathname === '/__open-in-editor' && request.method === 'POST') {
|
||||
const { relativePath, lineNumber, columnNumber } = (await request.json()) as {
|
||||
relativePath: string
|
||||
lineNumber: string
|
||||
columnNumber: string
|
||||
}
|
||||
const file = `${process.cwd()}/${relativePath}`
|
||||
const editor = process.env.REACT_EDITOR || 'code'
|
||||
const loc = `${file}:${lineNumber}:${columnNumber}`
|
||||
const args = editor === 'subl' ? [loc] : ['--goto', loc]
|
||||
const editorPath = Bun.which(editor)
|
||||
console.log(`[inspector] ${editor} → ${editorPath ?? 'NOT FOUND'} → ${loc}`)
|
||||
if (editorPath) {
|
||||
Bun.spawn([editor, ...args], { stdio: ['ignore', 'ignore', 'ignore'] })
|
||||
} else {
|
||||
console.error(`[inspector] Editor "${editor}" not found in PATH. Set REACT_EDITOR in .env`)
|
||||
}
|
||||
return new Response('ok')
|
||||
}
|
||||
```
|
||||
|
||||
**Penting — `Bun.which()` sebelum `Bun.spawn()`:**
|
||||
- `Bun.spawn()` throw native error yang TIDAK bisa di-catch jika executable tidak ada
|
||||
- `Bun.which()` return null dengan aman → cek dulu sebelum spawn
|
||||
|
||||
**Editor yang didukung:**
|
||||
|
||||
| REACT_EDITOR | Editor | Args |
|
||||
|------------------|--------------|--------------------------------|
|
||||
| `code` (default) | VS Code | `--goto file:line:col` |
|
||||
| `cursor` | Cursor | `--goto file:line:col` |
|
||||
| `windsurf` | Windsurf | `--goto file:line:col` |
|
||||
| `subl` | Sublime Text | `file:line:col` (tanpa --goto) |
|
||||
|
||||
### 5. Frontend Entry — Conditional Import (Zero Production Overhead)
|
||||
|
||||
```tsx
|
||||
// src/frontend.tsx (atau entry point React)
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
const InspectorWrapper = import.meta.env?.DEV
|
||||
? (await import('./frontend/DevInspector')).DevInspector
|
||||
: ({ children }: { children: ReactNode }) => <>{children}</>
|
||||
|
||||
const app = (
|
||||
<InspectorWrapper>
|
||||
<App />
|
||||
</InspectorWrapper>
|
||||
)
|
||||
```
|
||||
|
||||
**Bagaimana zero overhead tercapai:**
|
||||
- `import.meta.env?.DEV` adalah compile-time constant
|
||||
- Production build: `false` → dynamic import TIDAK dieksekusi
|
||||
- Tree-shaking menghapus seluruh `DevInspector.tsx` dari bundle
|
||||
- Tidak ada runtime check, tidak ada dead code di bundle
|
||||
|
||||
### 6. (Opsional) Dedupe React Refresh — Workaround Vite middlewareMode
|
||||
|
||||
Jika pakai Vite dalam `middlewareMode` (seperti di Elysia/Express), `@vitejs/plugin-react` v6 bisa inject React Refresh footer dua kali → error "already declared".
|
||||
|
||||
```typescript
|
||||
function dedupeRefreshPlugin(): Plugin {
|
||||
return {
|
||||
name: 'dedupe-react-refresh',
|
||||
enforce: 'post',
|
||||
transform(code, id) {
|
||||
if (!/\.[jt]sx(\?|$)/.test(id) || id.includes('node_modules')) return null
|
||||
|
||||
const marker = 'import * as RefreshRuntime from "/@react-refresh"'
|
||||
const firstIdx = code.indexOf(marker)
|
||||
if (firstIdx === -1) return null
|
||||
|
||||
const secondIdx = code.indexOf(marker, firstIdx + marker.length)
|
||||
if (secondIdx === -1) return null
|
||||
|
||||
const sourcemapIdx = code.indexOf('\n//# sourceMappingURL=', secondIdx)
|
||||
const endIdx = sourcemapIdx !== -1 ? sourcemapIdx : code.length
|
||||
|
||||
const cleaned = code.slice(0, secondIdx) + code.slice(endIdx)
|
||||
return { code: cleaned, map: null }
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Langkah Implementasi di Project Baru
|
||||
|
||||
### Prasyarat
|
||||
- Runtime: Bun
|
||||
- Server: Elysia (atau framework lain dengan onRequest/beforeHandle)
|
||||
- Frontend: React + Vite
|
||||
- `@vitejs/plugin-react` (OXC)
|
||||
|
||||
### Step-by-step
|
||||
|
||||
1. **Buat `DevInspector.tsx`** — copy komponen dari Bagian 3 ke folder frontend
|
||||
2. **Tambah `inspectorPlugin()`** — copy fungsi dari Bagian 1 ke file vite config
|
||||
3. **Atur plugin order** — `inspectorPlugin()` SEBELUM `react()` (Bagian 2)
|
||||
4. **Tambah endpoint `/__open-in-editor`** — di `onRequest` handler (Bagian 4)
|
||||
5. **Wrap root app** — conditional import di entry point (Bagian 5)
|
||||
6. **Set env** — `REACT_EDITOR=code` (atau cursor/windsurf/subl) di `.env`
|
||||
7. **(Opsional)** Tambah `dedupeRefreshPlugin()` jika pakai Vite `middlewareMode`
|
||||
|
||||
### Checklist Verifikasi
|
||||
|
||||
- [ ] `inspectorPlugin` punya `enforce: 'pre'`
|
||||
- [ ] Plugin order: inspector → react (bukan sebaliknya)
|
||||
- [ ] Endpoint `/__open-in-editor` di LUAR middleware auth
|
||||
- [ ] `Bun.which(editor)` dipanggil SEBELUM `Bun.spawn()`
|
||||
- [ ] Conditional import pakai `import.meta.env?.DEV`
|
||||
- [ ] `REACT_EDITOR` di `.env` sesuai editor yang dipakai
|
||||
- [ ] Hotkey berfungsi: `Ctrl+Shift+Cmd+C` / `Ctrl+Shift+Alt+C`
|
||||
|
||||
## Gotcha & Pelajaran
|
||||
|
||||
| Masalah | Penyebab | Solusi |
|
||||
|----------------------------------|---------------------------------------------|-----------------------------------------------|
|
||||
| Attributes tidak ter-inject | Plugin order salah | `enforce: 'pre'`, taruh sebelum `react()` |
|
||||
| `Record<string>` ikut ter-inject | Regex match TypeScript generics | Cek `charBefore` — skip jika identifier char |
|
||||
| `Bun.spawn` crash | Editor tidak ada di PATH | Selalu `Bun.which()` dulu |
|
||||
| Hotkey tidak response | `e.key` return 'C' (uppercase) karena Shift | Pakai `e.key.toLowerCase()` |
|
||||
| React Refresh duplicate | Vite middlewareMode bug | `dedupeRefreshPlugin()` enforce: 'post' |
|
||||
| Endpoint kena auth middleware | Didaftarkan sebagai route biasa | Tangani di `onRequest` sebelum routing |
|
||||
| `_debugSource` undefined | React 19 menghapusnya | Multi-fallback: reactProps → fiber → DOM attr |
|
||||
|
||||
## Adaptasi untuk Framework Lain
|
||||
|
||||
### Express/Fastify (bukan Elysia)
|
||||
- Endpoint `/__open-in-editor`: gunakan middleware biasa SEBELUM auth
|
||||
- `Bun.spawn` → `child_process.spawn` jika pakai Node.js
|
||||
- `Bun.which` → `which` npm package jika pakai Node.js
|
||||
|
||||
### Next.js
|
||||
- Tidak perlu — Next.js punya built-in click-to-source
|
||||
- Tapi jika ingin custom: taruh endpoint di `middleware.ts`, plugin di `next.config.js`
|
||||
|
||||
### Remix/Tanstack Start (SSR)
|
||||
- Plugin tetap sama (Vite-based)
|
||||
- Endpoint perlu di server entry, bukan di route loader
|
||||
@@ -1,7 +1,6 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
serverExternalPackages: ['@elysiajs/static', 'elysia'],
|
||||
experimental: {},
|
||||
allowedDevOrigins: [
|
||||
"http://192.168.1.82:3000", // buat akses dari HP/device lain
|
||||
@@ -20,6 +19,7 @@ const nextConfig: NextConfig = {
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
14
package.json
14
package.json
@@ -8,8 +8,7 @@
|
||||
"start": "next start",
|
||||
"test:api": "vitest run",
|
||||
"test:e2e": "playwright test",
|
||||
"test": "bun run test:api && bun run test:e2e",
|
||||
"gen:api": ""
|
||||
"test": "bun run test:api && bun run test:e2e"
|
||||
},
|
||||
"prisma": {
|
||||
"seed": "bun run prisma/seed.ts"
|
||||
@@ -34,7 +33,7 @@
|
||||
"@mantine/modals": "^8.3.6",
|
||||
"@mantine/tiptap": "^7.17.4",
|
||||
"@paljs/types": "^8.1.0",
|
||||
"@prisma/client": "6.3.1",
|
||||
"@prisma/client": "^6.3.1",
|
||||
"@tabler/icons-react": "^3.30.0",
|
||||
"@tiptap/extension-highlight": "^2.11.7",
|
||||
"@tiptap/extension-link": "^2.11.7",
|
||||
@@ -71,7 +70,7 @@
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"extract-zip": "^2.0.1",
|
||||
"form-data": "^4.0.2",
|
||||
"framer-motion": "^12.38.0",
|
||||
"framer-motion": "^12.23.5",
|
||||
"get-port": "^7.1.0",
|
||||
"iron-session": "^8.0.4",
|
||||
"jose": "^6.1.0",
|
||||
@@ -90,7 +89,7 @@
|
||||
"p-limit": "^6.2.0",
|
||||
"primeicons": "^7.0.0",
|
||||
"primereact": "^10.9.6",
|
||||
"prisma": "6.3.1",
|
||||
"prisma": "^6.3.1",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-exif-orientation-img": "^0.1.5",
|
||||
@@ -101,7 +100,7 @@
|
||||
"react-transition-group": "^4.4.5",
|
||||
"react-zoom-pan-pinch": "^3.7.0",
|
||||
"readdirp": "^4.1.1",
|
||||
"recharts": "^3.8.0",
|
||||
"recharts": "^2.15.3",
|
||||
"sharp": "^0.34.3",
|
||||
"swr": "^2.3.2",
|
||||
"uuid": "^11.1.0",
|
||||
@@ -121,11 +120,10 @@
|
||||
"@types/react-dom": "^19",
|
||||
"@vitest/ui": "^4.0.18",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.5.12",
|
||||
"eslint-config-next": "15.1.6",
|
||||
"jsdom": "^28.0.0",
|
||||
"msw": "^2.12.9",
|
||||
"parcel": "^2.6.2",
|
||||
"playwright-mcp": "^0.0.19",
|
||||
"postcss": "^8.5.1",
|
||||
"postcss-preset-mantine": "^1.17.0",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
|
||||
@@ -26,24 +26,7 @@ export async function seedBerita() {
|
||||
|
||||
console.log("🔄 Seeding Berita...");
|
||||
|
||||
// Build a map of valid kategori IDs
|
||||
const validKategoriIds = new Set<string>();
|
||||
const kategoriList = await prisma.kategoriBerita.findMany({
|
||||
select: { id: true, name: true },
|
||||
});
|
||||
kategoriList.forEach((k) => validKategoriIds.add(k.id));
|
||||
|
||||
console.log(`📋 Found ${validKategoriIds.size} valid kategori IDs in database`);
|
||||
|
||||
for (const b of beritaJson) {
|
||||
// Validate kategoriBeritaId exists
|
||||
if (!b.kategoriBeritaId || !validKategoriIds.has(b.kategoriBeritaId)) {
|
||||
console.warn(
|
||||
`⚠️ Skipping berita "${b.judul}": Invalid kategoriBeritaId "${b.kategoriBeritaId}"`,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
let imageId: string | null = null;
|
||||
|
||||
if (b.imageName) {
|
||||
@@ -61,32 +44,26 @@ export async function seedBerita() {
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await prisma.berita.upsert({
|
||||
where: { id: b.id },
|
||||
update: {
|
||||
judul: b.judul,
|
||||
deskripsi: b.deskripsi,
|
||||
content: b.content,
|
||||
kategoriBeritaId: b.kategoriBeritaId,
|
||||
imageId,
|
||||
},
|
||||
create: {
|
||||
id: b.id,
|
||||
judul: b.judul,
|
||||
deskripsi: b.deskripsi,
|
||||
content: b.content,
|
||||
kategoriBeritaId: b.kategoriBeritaId,
|
||||
imageId,
|
||||
},
|
||||
});
|
||||
await prisma.berita.upsert({
|
||||
where: { id: b.id },
|
||||
update: {
|
||||
judul: b.judul,
|
||||
deskripsi: b.deskripsi,
|
||||
content: b.content,
|
||||
kategoriBeritaId: b.kategoriBeritaId,
|
||||
imageId,
|
||||
},
|
||||
create: {
|
||||
id: b.id,
|
||||
judul: b.judul,
|
||||
deskripsi: b.deskripsi,
|
||||
content: b.content,
|
||||
kategoriBeritaId: b.kategoriBeritaId,
|
||||
imageId,
|
||||
},
|
||||
});
|
||||
|
||||
console.log(`✅ Berita seeded: ${b.judul}`);
|
||||
} catch (error: any) {
|
||||
console.error(
|
||||
`❌ Failed to seed berita "${b.judul}": ${error.message}`,
|
||||
);
|
||||
}
|
||||
console.log(`✅ Berita seeded: ${b.judul}`);
|
||||
}
|
||||
|
||||
console.log("🎉 Berita seed selesai");
|
||||
|
||||
@@ -1,170 +0,0 @@
|
||||
/*
|
||||
Warnings:
|
||||
|
||||
- You are about to alter the column `nama` on the `KategoriPotensi` table. The data in that column could be lost. The data in that column will be cast from `Text` to `VarChar(100)`.
|
||||
- You are about to alter the column `name` on the `PotensiDesa` table. The data in that column could be lost. The data in that column will be cast from `Text` to `VarChar(255)`.
|
||||
- You are about to alter the column `kategoriId` on the `PotensiDesa` table. The data in that column could be lost. The data in that column will be cast from `Text` to `VarChar(36)`.
|
||||
- A unique constraint covering the columns `[nama]` on the table `KategoriPotensi` will be added. If there are existing duplicate values, this will fail.
|
||||
- A unique constraint covering the columns `[name]` on the table `PotensiDesa` will be added. If there are existing duplicate values, this will fail.
|
||||
- Made the column `kategoriId` on table `PotensiDesa` required. This step will fail if there are existing NULL values in that column.
|
||||
|
||||
*/
|
||||
-- DropForeignKey
|
||||
ALTER TABLE "DataPerpustakaan" DROP CONSTRAINT "DataPerpustakaan_imageId_fkey";
|
||||
|
||||
-- DropForeignKey
|
||||
ALTER TABLE "DesaDigital" DROP CONSTRAINT "DesaDigital_imageId_fkey";
|
||||
|
||||
-- DropForeignKey
|
||||
ALTER TABLE "InfoTekno" DROP CONSTRAINT "InfoTekno_imageId_fkey";
|
||||
|
||||
-- DropForeignKey
|
||||
ALTER TABLE "KegiatanDesa" DROP CONSTRAINT "KegiatanDesa_imageId_fkey";
|
||||
|
||||
-- DropForeignKey
|
||||
ALTER TABLE "PengaduanMasyarakat" DROP CONSTRAINT "PengaduanMasyarakat_imageId_fkey";
|
||||
|
||||
-- DropForeignKey
|
||||
ALTER TABLE "PotensiDesa" DROP CONSTRAINT "PotensiDesa_kategoriId_fkey";
|
||||
|
||||
-- DropForeignKey
|
||||
ALTER TABLE "ProfileDesaImage" DROP CONSTRAINT "ProfileDesaImage_imageId_fkey";
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "CaraMemperolehInformasi" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "CaraMemperolehSalinanInformasi" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "DaftarInformasiPublik" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "DasarHukumPPID" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "DataPerpustakaan" ALTER COLUMN "imageId" DROP NOT NULL;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "DesaDigital" ALTER COLUMN "imageId" DROP NOT NULL;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "FormulirPermohonanKeberatan" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "InfoTekno" ALTER COLUMN "imageId" DROP NOT NULL;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "JenisInformasiDiminta" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "JenisKelaminResponden" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "KategoriPotensi" ALTER COLUMN "nama" SET DATA TYPE VARCHAR(100),
|
||||
ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "KategoriPrestasiDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "KegiatanDesa" ALTER COLUMN "imageId" DROP NOT NULL;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "LambangDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "MaskotDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "PegawaiPPID" ADD COLUMN "deletedAt" TIMESTAMP(3);
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "PengaduanMasyarakat" ALTER COLUMN "imageId" DROP NOT NULL;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "PermohonanInformasiPublik" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "PilihanRatingResponden" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "PosisiOrganisasiPPID" ADD COLUMN "deletedAt" TIMESTAMP(3);
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "PotensiDesa" ALTER COLUMN "name" SET DATA TYPE VARCHAR(255),
|
||||
ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT,
|
||||
ALTER COLUMN "kategoriId" SET NOT NULL,
|
||||
ALTER COLUMN "kategoriId" SET DATA TYPE VARCHAR(36);
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "PrestasiDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "ProfileDesaImage" ALTER COLUMN "imageId" DROP NOT NULL;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "ProfilePPID" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "Responden" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "SejarahDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "UmurResponden" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "VisiMisiDesa" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "VisiMisiPPID" ALTER COLUMN "deletedAt" DROP NOT NULL,
|
||||
ALTER COLUMN "deletedAt" DROP DEFAULT;
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "KategoriPotensi_nama_key" ON "KategoriPotensi"("nama");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "PotensiDesa_name_key" ON "PotensiDesa"("name");
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "ProfileDesaImage" ADD CONSTRAINT "ProfileDesaImage_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "PotensiDesa" ADD CONSTRAINT "PotensiDesa_kategoriId_fkey" FOREIGN KEY ("kategoriId") REFERENCES "KategoriPotensi"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "DesaDigital" ADD CONSTRAINT "DesaDigital_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "InfoTekno" ADD CONSTRAINT "InfoTekno_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "PengaduanMasyarakat" ADD CONSTRAINT "PengaduanMasyarakat_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "KegiatanDesa" ADD CONSTRAINT "KegiatanDesa_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "DataPerpustakaan" ADD CONSTRAINT "DataPerpustakaan_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||
@@ -1,94 +0,0 @@
|
||||
/*
|
||||
Warnings:
|
||||
|
||||
- You are about to drop the column `realisasi` on the `APBDesItem` table. All the data in the column will be lost.
|
||||
|
||||
*/
|
||||
-- AlterTable
|
||||
ALTER TABLE "APBDesItem" DROP COLUMN "realisasi",
|
||||
ADD COLUMN "totalRealisasi" DOUBLE PRECISION NOT NULL DEFAULT 0,
|
||||
ALTER COLUMN "selisih" SET DEFAULT 0,
|
||||
ALTER COLUMN "persentase" SET DEFAULT 0;
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "Berita" ADD COLUMN "linkVideo" VARCHAR(500);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "RealisasiItem" (
|
||||
"id" TEXT NOT NULL,
|
||||
"kode" TEXT,
|
||||
"apbdesItemId" TEXT NOT NULL,
|
||||
"jumlah" DOUBLE PRECISION NOT NULL,
|
||||
"tanggal" DATE NOT NULL,
|
||||
"keterangan" TEXT,
|
||||
"buktiFileId" TEXT,
|
||||
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||
"deletedAt" TIMESTAMP(3),
|
||||
"isActive" BOOLEAN NOT NULL DEFAULT true,
|
||||
|
||||
CONSTRAINT "RealisasiItem_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "MusikDesa" (
|
||||
"id" TEXT NOT NULL,
|
||||
"judul" VARCHAR(255) NOT NULL,
|
||||
"artis" VARCHAR(255) NOT NULL,
|
||||
"deskripsi" TEXT,
|
||||
"durasi" VARCHAR(20) NOT NULL,
|
||||
"audioFileId" TEXT,
|
||||
"coverImageId" TEXT,
|
||||
"genre" VARCHAR(100),
|
||||
"tahunRilis" INTEGER,
|
||||
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||
"deletedAt" TIMESTAMP(3),
|
||||
"isActive" BOOLEAN NOT NULL DEFAULT true,
|
||||
|
||||
CONSTRAINT "MusikDesa_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "_BeritaImages" (
|
||||
"A" TEXT NOT NULL,
|
||||
"B" TEXT NOT NULL,
|
||||
|
||||
CONSTRAINT "_BeritaImages_AB_pkey" PRIMARY KEY ("A","B")
|
||||
);
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "RealisasiItem_kode_idx" ON "RealisasiItem"("kode");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "RealisasiItem_apbdesItemId_idx" ON "RealisasiItem"("apbdesItemId");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "RealisasiItem_tanggal_idx" ON "RealisasiItem"("tanggal");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "MusikDesa_judul_idx" ON "MusikDesa"("judul");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "MusikDesa_artis_idx" ON "MusikDesa"("artis");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "_BeritaImages_B_index" ON "_BeritaImages"("B");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "Berita_kategoriBeritaId_idx" ON "Berita"("kategoriBeritaId");
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "RealisasiItem" ADD CONSTRAINT "RealisasiItem_apbdesItemId_fkey" FOREIGN KEY ("apbdesItemId") REFERENCES "APBDesItem"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "MusikDesa" ADD CONSTRAINT "MusikDesa_audioFileId_fkey" FOREIGN KEY ("audioFileId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "MusikDesa" ADD CONSTRAINT "MusikDesa_coverImageId_fkey" FOREIGN KEY ("coverImageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "_BeritaImages" ADD CONSTRAINT "_BeritaImages_A_fkey" FOREIGN KEY ("A") REFERENCES "Berita"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "_BeritaImages" ADD CONSTRAINT "_BeritaImages_B_fkey" FOREIGN KEY ("B") REFERENCES "FileStorage"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||
@@ -60,9 +60,8 @@ model FileStorage {
|
||||
deletedAt DateTime?
|
||||
isActive Boolean @default(true)
|
||||
link String
|
||||
category String // "image" / "document" / "audio" / "other"
|
||||
Berita Berita[] @relation("BeritaFeaturedImage")
|
||||
BeritaImages Berita[] @relation("BeritaImages")
|
||||
category String // "image" / "document" / "other"
|
||||
Berita Berita[]
|
||||
PotensiDesa PotensiDesa[]
|
||||
Posyandu Posyandu[]
|
||||
StrukturPPID StrukturPPID[]
|
||||
@@ -103,9 +102,6 @@ model FileStorage {
|
||||
|
||||
ArtikelKesehatan ArtikelKesehatan[]
|
||||
StrukturBumDes StrukturBumDes[]
|
||||
|
||||
MusikDesaAudio MusikDesa[] @relation("MusikAudioFile")
|
||||
MusikDesaCover MusikDesa[] @relation("MusikCoverImage")
|
||||
}
|
||||
|
||||
//========================================= MENU LANDING PAGE ========================================= //
|
||||
@@ -209,22 +205,16 @@ model APBDesItem {
|
||||
kode String // contoh: "4", "4.1", "4.1.2"
|
||||
uraian String // nama item, contoh: "Pendapatan Asli Desa", "Hasil Usaha"
|
||||
anggaran Float // dalam satuan Rupiah (bisa DECIMAL di DB, tapi Float umum di TS/JS)
|
||||
tipe String? // "pendapatan" | "belanja" | "pembiayaan" | null
|
||||
realisasi Float
|
||||
selisih Float // realisasi - anggaran
|
||||
persentase Float
|
||||
tipe String? // (realisasi / anggaran) * 100
|
||||
level Int // 1 = kelompok utama, 2 = sub-kelompok, 3 = detail
|
||||
parentId String? // untuk relasi hierarki
|
||||
parent APBDesItem? @relation("APBDesItemParent", fields: [parentId], references: [id])
|
||||
children APBDesItem[] @relation("APBDesItemParent")
|
||||
apbdesId String
|
||||
apbdes APBDes @relation(fields: [apbdesId], references: [id])
|
||||
|
||||
// Field kalkulasi (auto-calculated dari realisasi items)
|
||||
totalRealisasi Float @default(0) // Sum dari semua realisasi
|
||||
selisih Float @default(0) // totalRealisasi - anggaran
|
||||
persentase Float @default(0) // (totalRealisasi / anggaran) * 100
|
||||
|
||||
// Relasi ke realisasi items
|
||||
realisasiItems RealisasiItem[]
|
||||
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
@@ -235,28 +225,6 @@ model APBDesItem {
|
||||
@@index([apbdesId])
|
||||
}
|
||||
|
||||
// Model baru untuk multiple realisasi per item
|
||||
model RealisasiItem {
|
||||
id String @id @default(cuid())
|
||||
kode String? // Kode realisasi, mirip dengan APBDesItem
|
||||
apbdesItemId String
|
||||
apbdesItem APBDesItem @relation(fields: [apbdesItemId], references: [id], onDelete: Cascade)
|
||||
|
||||
jumlah Float // Jumlah realisasi dalam Rupiah
|
||||
tanggal DateTime @db.Date // Tanggal realisasi
|
||||
keterangan String? @db.Text // Keterangan tambahan (opsional)
|
||||
buktiFileId String? // FileStorage ID untuk bukti/foto (opsional)
|
||||
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
isActive Boolean @default(true)
|
||||
|
||||
@@index([kode])
|
||||
@@index([apbdesItemId])
|
||||
@@index([tanggal])
|
||||
}
|
||||
|
||||
//========================================= PRESTASI DESA ========================================= //
|
||||
model PrestasiDesa {
|
||||
id String @id @default(cuid())
|
||||
@@ -268,7 +236,7 @@ model PrestasiDesa {
|
||||
imageId String?
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
@@ -277,7 +245,7 @@ model KategoriPrestasiDesa {
|
||||
name String @unique
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
PrestasiDesa PrestasiDesa[]
|
||||
}
|
||||
@@ -295,7 +263,7 @@ model Responden {
|
||||
kelompokUmurId String
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
@@ -304,7 +272,7 @@ model JenisKelaminResponden {
|
||||
name String @unique
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
Responden Responden[]
|
||||
}
|
||||
@@ -314,7 +282,7 @@ model PilihanRatingResponden {
|
||||
name String @unique
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
Responden Responden[]
|
||||
}
|
||||
@@ -324,7 +292,7 @@ model UmurResponden {
|
||||
name String @unique
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
Responden Responden[]
|
||||
}
|
||||
@@ -358,7 +326,6 @@ model PosisiOrganisasiPPID {
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
parent PosisiOrganisasiPPID? @relation("Parent", fields: [parentId], references: [id])
|
||||
children PosisiOrganisasiPPID[] @relation("Parent")
|
||||
StrukturOrganisasiPPID StrukturOrganisasiPPID[]
|
||||
@@ -378,7 +345,6 @@ model PegawaiPPID {
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
posisi PosisiOrganisasiPPID @relation(fields: [posisiId], references: [id])
|
||||
strukturOrganisasi StrukturPPID[] // Relasi balik
|
||||
StrukturOrganisasiPPID StrukturOrganisasiPPID[]
|
||||
@@ -404,7 +370,7 @@ model VisiMisiPPID {
|
||||
misi String @db.Text
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
@@ -415,7 +381,7 @@ model DasarHukumPPID {
|
||||
content String @db.Text
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
@@ -432,7 +398,7 @@ model ProfilePPID {
|
||||
imageId String?
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
@@ -444,7 +410,7 @@ model DaftarInformasiPublik {
|
||||
tanggal DateTime @db.Date
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
@@ -465,7 +431,7 @@ model PermohonanInformasiPublik {
|
||||
caraMemperolehSalinanInformasiId String?
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
@@ -474,7 +440,7 @@ model JenisInformasiDiminta {
|
||||
name String @unique
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
PermohonanInformasiPublik PermohonanInformasiPublik[]
|
||||
}
|
||||
@@ -484,7 +450,7 @@ model CaraMemperolehInformasi {
|
||||
name String @unique
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
PermohonanInformasiPublik PermohonanInformasiPublik[]
|
||||
}
|
||||
@@ -494,7 +460,7 @@ model CaraMemperolehSalinanInformasi {
|
||||
name String @unique
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
PermohonanInformasiPublik PermohonanInformasiPublik[]
|
||||
}
|
||||
@@ -508,7 +474,7 @@ model FormulirPermohonanKeberatan {
|
||||
alasan String
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
@@ -565,7 +531,7 @@ model SejarahDesa {
|
||||
deskripsi String @db.Text
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
@@ -575,7 +541,7 @@ model VisiMisiDesa {
|
||||
misi String @db.Text
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
@@ -585,7 +551,7 @@ model LambangDesa {
|
||||
deskripsi String @db.Text
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
@@ -596,7 +562,7 @@ model MaskotDesa {
|
||||
images ProfileDesaImage[]
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
@@ -641,19 +607,15 @@ model Berita {
|
||||
id String @id @default(cuid())
|
||||
judul String
|
||||
deskripsi String
|
||||
image FileStorage? @relation("BeritaFeaturedImage", fields: [imageId], references: [id])
|
||||
image FileStorage? @relation(fields: [imageId], references: [id])
|
||||
imageId String?
|
||||
images FileStorage[] @relation("BeritaImages")
|
||||
content String @db.Text
|
||||
linkVideo String? @db.VarChar(500)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
kategoriBerita KategoriBerita? @relation(fields: [kategoriBeritaId], references: [id])
|
||||
kategoriBeritaId String?
|
||||
|
||||
@@index([kategoriBeritaId])
|
||||
}
|
||||
|
||||
model KategoriBerita {
|
||||
@@ -669,25 +631,25 @@ model KategoriBerita {
|
||||
// ========================================= POTENSI DESA ========================================= //
|
||||
model PotensiDesa {
|
||||
id String @id @default(cuid())
|
||||
name String @unique @db.VarChar(255)
|
||||
deskripsi String @db.Text
|
||||
name String
|
||||
deskripsi String
|
||||
kategori KategoriPotensi? @relation(fields: [kategoriId], references: [id])
|
||||
kategoriId String @db.VarChar(36)
|
||||
kategoriId String?
|
||||
image FileStorage? @relation(fields: [imageId], references: [id])
|
||||
imageId String?
|
||||
content String @db.Text
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
model KategoriPotensi {
|
||||
id String @id @default(cuid())
|
||||
nama String @unique @db.VarChar(100)
|
||||
nama String
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
PotensiDesa PotensiDesa[]
|
||||
}
|
||||
@@ -2299,25 +2261,3 @@ model UserMenuAccess {
|
||||
|
||||
@@unique([userId, menuId]) // Satu user tidak bisa punya akses menu yang sama dua kali
|
||||
}
|
||||
|
||||
// ========================================= MUSIK DESA ========================================= //
|
||||
model MusikDesa {
|
||||
id String @id @default(cuid())
|
||||
judul String @db.VarChar(255)
|
||||
artis String @db.VarChar(255)
|
||||
deskripsi String? @db.Text
|
||||
durasi String @db.VarChar(20) // format: "MM:SS"
|
||||
audioFile FileStorage? @relation("MusikAudioFile", fields: [audioFileId], references: [id])
|
||||
audioFileId String?
|
||||
coverImage FileStorage? @relation("MusikCoverImage", fields: [coverImageId], references: [id])
|
||||
coverImageId String?
|
||||
genre String? @db.VarChar(100)
|
||||
tahunRilis Int?
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
isActive Boolean @default(true)
|
||||
|
||||
@@index([judul])
|
||||
@@index([artis])
|
||||
}
|
||||
|
||||
@@ -69,8 +69,8 @@ import { seedProfilPpd } from "./_seeder_list/ppid/profil-ppid/seed_profil_ppd";
|
||||
|
||||
(async () => {
|
||||
// Always run seedAssets to handle new images without duplication
|
||||
console.log("📂 Checking for new assets to seed...");
|
||||
await seedAssets();
|
||||
// console.log("📂 Checking for new assets to seed...");
|
||||
// await seedAssets();
|
||||
|
||||
// // =========== FILE STORAGE ===========
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
@@ -12,8 +12,6 @@ const templateForm = z.object({
|
||||
content: z.string().min(3, "Content minimal 3 karakter"),
|
||||
kategoriBeritaId: z.string().nonempty(),
|
||||
imageId: z.string().nonempty(),
|
||||
imageIds: z.array(z.string()),
|
||||
linkVideo: z.string().optional(),
|
||||
});
|
||||
|
||||
// 2. Default value form berita (hindari uncontrolled input)
|
||||
@@ -23,8 +21,6 @@ const defaultForm = {
|
||||
imageId: "",
|
||||
content: "",
|
||||
kategoriBeritaId: "",
|
||||
imageIds: [] as string[],
|
||||
linkVideo: "",
|
||||
};
|
||||
|
||||
// 4. Berita proxy
|
||||
@@ -66,7 +62,14 @@ const berita = proxy({
|
||||
// State untuk berita utama (hanya 1)
|
||||
|
||||
findMany: {
|
||||
data: null as any[] | null,
|
||||
data: null as
|
||||
| Prisma.BeritaGetPayload<{
|
||||
include: {
|
||||
image: true;
|
||||
kategoriBerita: true;
|
||||
};
|
||||
}>[]
|
||||
| null,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
loading: false,
|
||||
@@ -76,14 +79,14 @@ const berita = proxy({
|
||||
berita.findMany.loading = true;
|
||||
berita.findMany.page = page;
|
||||
berita.findMany.search = search;
|
||||
|
||||
|
||||
try {
|
||||
const query: any = { page, limit };
|
||||
if (search) query.search = search;
|
||||
if (kategori) query.kategori = kategori;
|
||||
|
||||
|
||||
const res = await ApiFetch.api.desa.berita["find-many"].get({ query });
|
||||
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
berita.findMany.data = res.data.data ?? [];
|
||||
berita.findMany.totalPages = res.data.totalPages ?? 1;
|
||||
@@ -100,19 +103,18 @@ const berita = proxy({
|
||||
const elapsed = Date.now() - startTime;
|
||||
const minDelay = 300;
|
||||
const delay = elapsed < minDelay ? minDelay - elapsed : 0;
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
berita.findMany.loading = false;
|
||||
}, delay);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
findUnique: {
|
||||
data: null as Prisma.BeritaGetPayload<{
|
||||
include: {
|
||||
image: true;
|
||||
images: true;
|
||||
kategoriBerita: true;
|
||||
};
|
||||
}> | null,
|
||||
@@ -197,8 +199,6 @@ const berita = proxy({
|
||||
content: data.content,
|
||||
kategoriBeritaId: data.kategoriBeritaId || "",
|
||||
imageId: data.imageId || "",
|
||||
imageIds: data.images?.map((img: any) => img.id) || [],
|
||||
linkVideo: data.linkVideo || "",
|
||||
};
|
||||
return data; // Return the loaded data
|
||||
} else {
|
||||
@@ -237,8 +237,6 @@ const berita = proxy({
|
||||
content: this.form.content,
|
||||
kategoriBeritaId: this.form.kategoriBeritaId || null,
|
||||
imageId: this.form.imageId,
|
||||
imageIds: this.form.imageIds,
|
||||
linkVideo: this.form.linkVideo,
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
@@ -1,297 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import ApiFetch from "@/lib/api-fetch";
|
||||
import { Prisma } from "@prisma/client";
|
||||
import { toast } from "react-toastify";
|
||||
import { proxy } from "valtio";
|
||||
import { z } from "zod";
|
||||
|
||||
// 1. Schema validasi dengan Zod
|
||||
const templateForm = z.object({
|
||||
judul: z.string().min(3, "Judul minimal 3 karakter"),
|
||||
artis: z.string().min(3, "Artis minimal 3 karakter"),
|
||||
deskripsi: z.string().optional(),
|
||||
durasi: z.string().min(3, "Durasi minimal 3 karakter"),
|
||||
audioFileId: z.string().nonempty(),
|
||||
coverImageId: z.string().nonempty(),
|
||||
genre: z.string().optional(),
|
||||
tahunRilis: z.number().optional().or(z.literal(undefined)),
|
||||
});
|
||||
|
||||
// 2. Default value form musik
|
||||
const defaultForm = {
|
||||
judul: "",
|
||||
artis: "",
|
||||
deskripsi: "",
|
||||
durasi: "",
|
||||
audioFileId: "",
|
||||
coverImageId: "",
|
||||
genre: "",
|
||||
tahunRilis: undefined as number | undefined,
|
||||
};
|
||||
|
||||
// 3. Musik proxy
|
||||
const musik = proxy({
|
||||
create: {
|
||||
form: { ...defaultForm },
|
||||
loading: false,
|
||||
async create() {
|
||||
const cek = templateForm.safeParse(musik.create.form);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues
|
||||
.map((v) => `${v.path.join(".")}`)
|
||||
.join("\n")}] required`;
|
||||
return toast.error(err);
|
||||
}
|
||||
|
||||
try {
|
||||
musik.create.loading = true;
|
||||
const res = await ApiFetch.api.desa.musik["create"].post(
|
||||
musik.create.form
|
||||
);
|
||||
if (res.status === 200) {
|
||||
musik.findMany.load();
|
||||
return toast.success("Musik berhasil disimpan!");
|
||||
}
|
||||
|
||||
return toast.error("Gagal menyimpan musik");
|
||||
} catch (error) {
|
||||
console.log((error as Error).message);
|
||||
} finally {
|
||||
musik.create.loading = false;
|
||||
}
|
||||
},
|
||||
resetForm() {
|
||||
musik.create.form = { ...defaultForm };
|
||||
},
|
||||
},
|
||||
|
||||
findMany: {
|
||||
data: null as
|
||||
| Prisma.MusikDesaGetPayload<{
|
||||
include: {
|
||||
audioFile: true;
|
||||
coverImage: true;
|
||||
};
|
||||
}>[]
|
||||
| null,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "", genre = "") => {
|
||||
const startTime = Date.now();
|
||||
musik.findMany.loading = true;
|
||||
musik.findMany.page = page;
|
||||
musik.findMany.search = search;
|
||||
|
||||
try {
|
||||
const query: any = { page, limit };
|
||||
if (search) query.search = search;
|
||||
if (genre) query.genre = genre;
|
||||
|
||||
const res = await ApiFetch.api.desa.musik["find-many"].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
musik.findMany.data = res.data.data ?? [];
|
||||
musik.findMany.totalPages = res.data.totalPages ?? 1;
|
||||
} else {
|
||||
musik.findMany.data = [];
|
||||
musik.findMany.totalPages = 1;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch musik paginated:", err);
|
||||
musik.findMany.data = [];
|
||||
musik.findMany.totalPages = 1;
|
||||
} finally {
|
||||
const elapsed = Date.now() - startTime;
|
||||
const minDelay = 300;
|
||||
const delay = elapsed < minDelay ? minDelay - elapsed : 0;
|
||||
|
||||
setTimeout(() => {
|
||||
musik.findMany.loading = false;
|
||||
}, delay);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
findUnique: {
|
||||
data: null as Prisma.MusikDesaGetPayload<{
|
||||
include: {
|
||||
audioFile: true;
|
||||
coverImage: true;
|
||||
};
|
||||
}> | null,
|
||||
loading: false,
|
||||
async load(id: string) {
|
||||
try {
|
||||
musik.findUnique.loading = true;
|
||||
const res = await fetch(`/api/desa/musik/${id}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
musik.findUnique.data = data.data ?? null;
|
||||
} else {
|
||||
console.error("Failed to fetch musik:", res.statusText);
|
||||
musik.findUnique.data = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching musik:", error);
|
||||
musik.findUnique.data = null;
|
||||
} finally {
|
||||
musik.findUnique.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
|
||||
try {
|
||||
musik.delete.loading = true;
|
||||
|
||||
const response = await fetch(`/api/desa/musik/delete/${id}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result?.success) {
|
||||
toast.success(result.message || "Musik berhasil dihapus");
|
||||
await musik.findMany.load();
|
||||
} else {
|
||||
toast.error(result?.message || "Gagal menghapus musik");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal delete:", error);
|
||||
toast.error("Terjadi kesalahan saat menghapus musik");
|
||||
} finally {
|
||||
musik.delete.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
edit: {
|
||||
id: "",
|
||||
form: { ...defaultForm },
|
||||
loading: false,
|
||||
|
||||
async load(id: string) {
|
||||
if (!id) {
|
||||
toast.warn("ID tidak valid");
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/desa/musik/${id}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result?.success) {
|
||||
const data = result.data;
|
||||
this.id = data.id;
|
||||
this.form = {
|
||||
judul: data.judul,
|
||||
artis: data.artis,
|
||||
deskripsi: data.deskripsi || "",
|
||||
durasi: data.durasi,
|
||||
audioFileId: data.audioFileId || "",
|
||||
coverImageId: data.coverImageId || "",
|
||||
genre: data.genre || "",
|
||||
tahunRilis: data.tahunRilis || undefined,
|
||||
};
|
||||
return data;
|
||||
} else {
|
||||
throw new Error(result?.message || "Gagal memuat data");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading musik:", error);
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : "Gagal memuat data"
|
||||
);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
async update() {
|
||||
const cek = templateForm.safeParse(musik.edit.form);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues
|
||||
.map((v) => `${v.path.join(".")}`)
|
||||
.join("\n")}] required`;
|
||||
toast.error(err);
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
musik.edit.loading = true;
|
||||
|
||||
const response = await fetch(`/api/desa/musik/${this.id}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
judul: this.form.judul,
|
||||
artis: this.form.artis,
|
||||
deskripsi: this.form.deskripsi,
|
||||
durasi: this.form.durasi,
|
||||
audioFileId: this.form.audioFileId,
|
||||
coverImageId: this.form.coverImageId,
|
||||
genre: this.form.genre,
|
||||
tahunRilis: this.form.tahunRilis,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(
|
||||
errorData.message || `HTTP error! status: ${response.status}`
|
||||
);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
toast.success("Musik berhasil diupdate");
|
||||
await musik.findMany.load();
|
||||
return true;
|
||||
} else {
|
||||
throw new Error(result.message || "Gagal update musik");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error updating musik:", error);
|
||||
toast.error(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Terjadi kesalahan saat update musik"
|
||||
);
|
||||
return false;
|
||||
} finally {
|
||||
musik.edit.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
reset() {
|
||||
musik.edit.id = "";
|
||||
musik.edit.form = { ...defaultForm };
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 4. State global
|
||||
const stateDashboardMusik = proxy({
|
||||
musik,
|
||||
});
|
||||
|
||||
export default stateDashboardMusik;
|
||||
@@ -1,27 +0,0 @@
|
||||
import ApiFetch from "@/lib/api-fetch";
|
||||
import { proxy } from "valtio";
|
||||
|
||||
const kependudukanDashboard = proxy({
|
||||
summary: {
|
||||
data: null as any,
|
||||
loading: false,
|
||||
async load() {
|
||||
kependudukanDashboard.summary.loading = true;
|
||||
try {
|
||||
const res = await ApiFetch.api.kependudukan.dashboard.summary.get();
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
kependudukanDashboard.summary.data = res.data.data;
|
||||
} else {
|
||||
kependudukanDashboard.summary.data = null;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch dashboard summary:", err);
|
||||
kependudukanDashboard.summary.data = null;
|
||||
} finally {
|
||||
kependudukanDashboard.summary.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default kependudukanDashboard;
|
||||
@@ -1,205 +0,0 @@
|
||||
import ApiFetch from "@/lib/api-fetch";
|
||||
import { proxy } from "valtio";
|
||||
import { toast } from "react-toastify";
|
||||
import { z } from "zod";
|
||||
|
||||
const templateDataBanjar = z.object({
|
||||
nama: z.string().min(1, "Nama banjar harus diisi"),
|
||||
penduduk: z.number().min(0, "Jumlah penduduk harus diisi"),
|
||||
kk: z.number().min(0, "Jumlah KK harus diisi"),
|
||||
miskin: z.number().min(0, "Jumlah penduduk miskin harus diisi"),
|
||||
tahun: z.number().min(2000, "Tahun harus diisi"),
|
||||
});
|
||||
|
||||
const dataBanjar = proxy({
|
||||
create: {
|
||||
form: {
|
||||
nama: "",
|
||||
penduduk: 0,
|
||||
kk: 0,
|
||||
miskin: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
},
|
||||
loading: false,
|
||||
async create() {
|
||||
const cek = templateDataBanjar.safeParse(dataBanjar.create.form);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
|
||||
toast.error(err);
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
dataBanjar.create.loading = true;
|
||||
const res = await ApiFetch.api.kependudukan.databanjar["create"].post(dataBanjar.create.form);
|
||||
|
||||
if (res.status === 200) {
|
||||
const id = res.data?.data?.id;
|
||||
if (id) {
|
||||
toast.success("Sukses menambahkan data banjar");
|
||||
dataBanjar.create.form = { nama: "", penduduk: 0, kk: 0, miskin: 0, tahun: new Date().getFullYear() };
|
||||
dataBanjar.findMany.load();
|
||||
return id;
|
||||
}
|
||||
}
|
||||
toast.error("Gagal menambahkan data");
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.log((error as Error).message);
|
||||
return null;
|
||||
} finally {
|
||||
dataBanjar.create.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
findMany: {
|
||||
data: null as any[] | null,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "", tahun = new Date().getFullYear()) => {
|
||||
dataBanjar.findMany.loading = true;
|
||||
dataBanjar.findMany.page = page;
|
||||
dataBanjar.findMany.search = search;
|
||||
|
||||
try {
|
||||
const query: any = { page, limit, tahun };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.kependudukan.databanjar["find-many"].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
dataBanjar.findMany.data = res.data.data ?? [];
|
||||
dataBanjar.findMany.totalPages = res.data.totalPages ?? 1;
|
||||
} else {
|
||||
dataBanjar.findMany.data = [];
|
||||
dataBanjar.findMany.totalPages = 1;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch data banjar paginated:", err);
|
||||
dataBanjar.findMany.data = [];
|
||||
dataBanjar.findMany.totalPages = 1;
|
||||
} finally {
|
||||
dataBanjar.findMany.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
findUnique: {
|
||||
data: null as any | null,
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(`/api/kependudukan/databanjar/${id}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
dataBanjar.findUnique.data = data.data ?? null;
|
||||
} else {
|
||||
console.error("Failed to fetch data banjar:", res.statusText);
|
||||
dataBanjar.findUnique.data = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching data banjar:", error);
|
||||
dataBanjar.findUnique.data = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
update: {
|
||||
id: "",
|
||||
form: {
|
||||
nama: "",
|
||||
penduduk: 0,
|
||||
kk: 0,
|
||||
miskin: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
},
|
||||
loading: false,
|
||||
async submit() {
|
||||
const id = this.id;
|
||||
if (!id) {
|
||||
toast.warn("ID tidak valid");
|
||||
return null;
|
||||
}
|
||||
|
||||
const formData = {
|
||||
nama: this.form.nama,
|
||||
penduduk: this.form.penduduk,
|
||||
kk: this.form.kk,
|
||||
miskin: this.form.miskin,
|
||||
tahun: this.form.tahun,
|
||||
};
|
||||
|
||||
const cek = templateDataBanjar.safeParse(formData);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
|
||||
toast.error(err);
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
const res = await fetch(`/api/kependudukan/databanjar/${id}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
const result = await res.json();
|
||||
|
||||
if (!res.ok || !result?.success) {
|
||||
throw new Error(result?.message || "Gagal update data");
|
||||
}
|
||||
|
||||
toast.success("Berhasil update data!");
|
||||
await dataBanjar.findMany.load();
|
||||
return result.data;
|
||||
} catch (error) {
|
||||
console.error("Update error:", error);
|
||||
toast.error("Gagal update data banjar");
|
||||
throw error;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
delete: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
|
||||
try {
|
||||
dataBanjar.delete.loading = true;
|
||||
|
||||
const response = await fetch(
|
||||
`/api/kependudukan/databanjar/del/${id}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result?.success) {
|
||||
toast.success(result.message || "Data banjar berhasil dihapus");
|
||||
await dataBanjar.findMany.load();
|
||||
} else {
|
||||
toast.error(result?.message || "Gagal menghapus data banjar");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal delete:", error);
|
||||
toast.error("Terjadi kesalahan saat menghapus data banjar");
|
||||
} finally {
|
||||
dataBanjar.delete.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default dataBanjar;
|
||||
@@ -1,197 +0,0 @@
|
||||
import ApiFetch from "@/lib/api-fetch";
|
||||
import { proxy } from "valtio";
|
||||
import { toast } from "react-toastify";
|
||||
import { z } from "zod";
|
||||
|
||||
const templateDistribusiAgama = z.object({
|
||||
agama: z.string().min(1, "Agama harus diisi"),
|
||||
jumlah: z.number().min(0, "Jumlah harus diisi"),
|
||||
tahun: z.number().min(2000, "Tahun harus diisi"),
|
||||
});
|
||||
|
||||
const distribusiAgama = proxy({
|
||||
create: {
|
||||
form: {
|
||||
agama: "",
|
||||
jumlah: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
},
|
||||
loading: false,
|
||||
async create() {
|
||||
const cek = templateDistribusiAgama.safeParse(distribusiAgama.create.form);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
|
||||
toast.error(err);
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
distribusiAgama.create.loading = true;
|
||||
const res = await ApiFetch.api.kependudukan.distribusiagama["create"].post(distribusiAgama.create.form);
|
||||
|
||||
if (res.status === 200) {
|
||||
const id = res.data?.data?.id;
|
||||
if (id) {
|
||||
toast.success("Sukses menambahkan distribusi agama");
|
||||
distribusiAgama.create.form = { agama: "", jumlah: 0, tahun: new Date().getFullYear() };
|
||||
distribusiAgama.findMany.load();
|
||||
return id;
|
||||
}
|
||||
}
|
||||
toast.error("Gagal menambahkan data");
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.log((error as Error).message);
|
||||
return null;
|
||||
} finally {
|
||||
distribusiAgama.create.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
findMany: {
|
||||
data: null as any[] | null,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "", tahun = new Date().getFullYear()) => {
|
||||
distribusiAgama.findMany.loading = true;
|
||||
distribusiAgama.findMany.page = page;
|
||||
distribusiAgama.findMany.search = search;
|
||||
|
||||
try {
|
||||
const query: any = { page, limit, tahun };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.kependudukan.distribusiagama["find-many"].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
distribusiAgama.findMany.data = res.data.data ?? [];
|
||||
distribusiAgama.findMany.totalPages = res.data.totalPages ?? 1;
|
||||
} else {
|
||||
distribusiAgama.findMany.data = [];
|
||||
distribusiAgama.findMany.totalPages = 1;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch distribusi agama paginated:", err);
|
||||
distribusiAgama.findMany.data = [];
|
||||
distribusiAgama.findMany.totalPages = 1;
|
||||
} finally {
|
||||
distribusiAgama.findMany.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
findUnique: {
|
||||
data: null as any | null,
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(`/api/kependudukan/distribusiagama/${id}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
distribusiAgama.findUnique.data = data.data ?? null;
|
||||
} else {
|
||||
console.error("Failed to fetch distribusiAgama:", res.statusText);
|
||||
distribusiAgama.findUnique.data = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching distribusiAgama:", error);
|
||||
distribusiAgama.findUnique.data = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
update: {
|
||||
id: "",
|
||||
form: {
|
||||
agama: "",
|
||||
jumlah: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
},
|
||||
loading: false,
|
||||
async submit() {
|
||||
const id = this.id;
|
||||
if (!id) {
|
||||
toast.warn("ID tidak valid");
|
||||
return null;
|
||||
}
|
||||
|
||||
const formData = {
|
||||
agama: this.form.agama,
|
||||
jumlah: this.form.jumlah,
|
||||
tahun: this.form.tahun,
|
||||
};
|
||||
|
||||
const cek = templateDistribusiAgama.safeParse(formData);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
|
||||
toast.error(err);
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
const res = await fetch(`/api/kependudukan/distribusiagama/${id}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
const result = await res.json();
|
||||
|
||||
if (!res.ok || !result?.success) {
|
||||
throw new Error(result?.message || "Gagal update data");
|
||||
}
|
||||
|
||||
toast.success("Berhasil update data!");
|
||||
await distribusiAgama.findMany.load();
|
||||
return result.data;
|
||||
} catch (error) {
|
||||
console.error("Update error:", error);
|
||||
toast.error("Gagal update data distribusi agama");
|
||||
throw error;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
delete: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
|
||||
try {
|
||||
distribusiAgama.delete.loading = true;
|
||||
|
||||
const response = await fetch(
|
||||
`/api/kependudukan/distribusiagama/del/${id}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result?.success) {
|
||||
toast.success(result.message || "Distribusi agama berhasil dihapus");
|
||||
await distribusiAgama.findMany.load();
|
||||
} else {
|
||||
toast.error(result?.message || "Gagal menghapus distribusi agama");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal delete:", error);
|
||||
toast.error("Terjadi kesalahan saat menghapus distribusi agama");
|
||||
} finally {
|
||||
distribusiAgama.delete.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default distribusiAgama;
|
||||
@@ -1,197 +0,0 @@
|
||||
import ApiFetch from "@/lib/api-fetch";
|
||||
import { proxy } from "valtio";
|
||||
import { toast } from "react-toastify";
|
||||
import { z } from "zod";
|
||||
|
||||
const templateDistribusiUmur = z.object({
|
||||
rentangUmur: z.string().min(1, "Rentang umur harus diisi"),
|
||||
jumlah: z.number().min(0, "Jumlah harus diisi"),
|
||||
tahun: z.number().min(2000, "Tahun harus diisi"),
|
||||
});
|
||||
|
||||
const distribusiUmur = proxy({
|
||||
create: {
|
||||
form: {
|
||||
rentangUmur: "",
|
||||
jumlah: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
},
|
||||
loading: false,
|
||||
async create() {
|
||||
const cek = templateDistribusiUmur.safeParse(distribusiUmur.create.form);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
|
||||
toast.error(err);
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
distribusiUmur.create.loading = true;
|
||||
const res = await ApiFetch.api.kependudukan.distribusiumur["create"].post(distribusiUmur.create.form);
|
||||
|
||||
if (res.status === 200) {
|
||||
const id = res.data?.data?.id;
|
||||
if (id) {
|
||||
toast.success("Sukses menambahkan distribusi umur");
|
||||
distribusiUmur.create.form = { rentangUmur: "", jumlah: 0, tahun: new Date().getFullYear() };
|
||||
distribusiUmur.findMany.load();
|
||||
return id;
|
||||
}
|
||||
}
|
||||
toast.error("Gagal menambahkan data");
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.log((error as Error).message);
|
||||
return null;
|
||||
} finally {
|
||||
distribusiUmur.create.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
findMany: {
|
||||
data: null as any[] | null,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "", tahun = new Date().getFullYear()) => {
|
||||
distribusiUmur.findMany.loading = true;
|
||||
distribusiUmur.findMany.page = page;
|
||||
distribusiUmur.findMany.search = search;
|
||||
|
||||
try {
|
||||
const query: any = { page, limit, tahun };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.kependudukan.distribusiumur["find-many"].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
distribusiUmur.findMany.data = res.data.data ?? [];
|
||||
distribusiUmur.findMany.totalPages = res.data.totalPages ?? 1;
|
||||
} else {
|
||||
distribusiUmur.findMany.data = [];
|
||||
distribusiUmur.findMany.totalPages = 1;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch distribusi umur paginated:", err);
|
||||
distribusiUmur.findMany.data = [];
|
||||
distribusiUmur.findMany.totalPages = 1;
|
||||
} finally {
|
||||
distribusiUmur.findMany.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
findUnique: {
|
||||
data: null as any | null,
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(`/api/kependudukan/distribusiumur/${id}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
distribusiUmur.findUnique.data = data.data ?? null;
|
||||
} else {
|
||||
console.error("Failed to fetch distribusi umur:", res.statusText);
|
||||
distribusiUmur.findUnique.data = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching distribusi umur:", error);
|
||||
distribusiUmur.findUnique.data = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
update: {
|
||||
id: "",
|
||||
form: {
|
||||
rentangUmur: "",
|
||||
jumlah: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
},
|
||||
loading: false,
|
||||
async submit() {
|
||||
const id = this.id;
|
||||
if (!id) {
|
||||
toast.warn("ID tidak valid");
|
||||
return null;
|
||||
}
|
||||
|
||||
const formData = {
|
||||
rentangUmur: this.form.rentangUmur,
|
||||
jumlah: this.form.jumlah,
|
||||
tahun: this.form.tahun,
|
||||
};
|
||||
|
||||
const cek = templateDistribusiUmur.safeParse(formData);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
|
||||
toast.error(err);
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
const res = await fetch(`/api/kependudukan/distribusiumur/${id}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
const result = await res.json();
|
||||
|
||||
if (!res.ok || !result?.success) {
|
||||
throw new Error(result?.message || "Gagal update data");
|
||||
}
|
||||
|
||||
toast.success("Berhasil update data!");
|
||||
await distribusiUmur.findMany.load();
|
||||
return result.data;
|
||||
} catch (error) {
|
||||
console.error("Update error:", error);
|
||||
toast.error("Gagal update data distribusi umur");
|
||||
throw error;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
delete: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
|
||||
try {
|
||||
distribusiUmur.delete.loading = true;
|
||||
|
||||
const response = await fetch(
|
||||
`/api/kependudukan/distribusiumur/del/${id}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result?.success) {
|
||||
toast.success(result.message || "Distribusi umur berhasil dihapus");
|
||||
await distribusiUmur.findMany.load();
|
||||
} else {
|
||||
toast.error(result?.message || "Gagal menghapus distribusi umur");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal delete:", error);
|
||||
toast.error("Terjadi kesalahan saat menghapus distribusi umur");
|
||||
} finally {
|
||||
distribusiUmur.delete.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default distribusiUmur;
|
||||
@@ -1,209 +0,0 @@
|
||||
import ApiFetch from "@/lib/api-fetch";
|
||||
import { proxy } from "valtio";
|
||||
import { toast } from "react-toastify";
|
||||
import { z } from "zod";
|
||||
|
||||
const templateMigrasiPenduduk = z.object({
|
||||
jenis: z.string().min(1, "Jenis migrasi harus diisi"),
|
||||
nama: z.string().min(1, "Nama harus diisi"),
|
||||
tanggal: z.string().min(1, "Tanggal harus diisi"),
|
||||
asalTujuan: z.string().min(1, "Asal/Tujuan harus diisi"),
|
||||
alasan: z.string().optional(),
|
||||
jenisKelamin: z.string().optional(),
|
||||
});
|
||||
|
||||
const migrasiPenduduk = proxy({
|
||||
create: {
|
||||
form: {
|
||||
jenis: "",
|
||||
nama: "",
|
||||
tanggal: "",
|
||||
asalTujuan: "",
|
||||
alasan: "",
|
||||
jenisKelamin: "",
|
||||
},
|
||||
loading: false,
|
||||
async create() {
|
||||
const cek = templateMigrasiPenduduk.safeParse(migrasiPenduduk.create.form);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
|
||||
toast.error(err);
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
migrasiPenduduk.create.loading = true;
|
||||
const res = await ApiFetch.api.kependudukan.migrasipenduduk["create"].post(migrasiPenduduk.create.form);
|
||||
|
||||
if (res.status === 200) {
|
||||
const id = res.data?.data?.id;
|
||||
if (id) {
|
||||
toast.success("Sukses menambahkan data migrasi penduduk");
|
||||
migrasiPenduduk.create.form = { jenis: "", nama: "", tanggal: "", asalTujuan: "", alasan: "", jenisKelamin: "" };
|
||||
migrasiPenduduk.findMany.load();
|
||||
return id;
|
||||
}
|
||||
}
|
||||
toast.error("Gagal menambahkan data");
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.log((error as Error).message);
|
||||
return null;
|
||||
} finally {
|
||||
migrasiPenduduk.create.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
findMany: {
|
||||
data: null as any[] | null,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "", tahun = new Date().getFullYear()) => {
|
||||
migrasiPenduduk.findMany.loading = true;
|
||||
migrasiPenduduk.findMany.page = page;
|
||||
migrasiPenduduk.findMany.search = search;
|
||||
|
||||
try {
|
||||
const query: any = { page, limit, tahun };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.kependudukan.migrasipenduduk["find-many"].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
migrasiPenduduk.findMany.data = res.data.data ?? [];
|
||||
migrasiPenduduk.findMany.totalPages = res.data.totalPages ?? 1;
|
||||
} else {
|
||||
migrasiPenduduk.findMany.data = [];
|
||||
migrasiPenduduk.findMany.totalPages = 1;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch migrasi penduduk paginated:", err);
|
||||
migrasiPenduduk.findMany.data = [];
|
||||
migrasiPenduduk.findMany.totalPages = 1;
|
||||
} finally {
|
||||
migrasiPenduduk.findMany.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
findUnique: {
|
||||
data: null as any | null,
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(`/api/kependudukan/migrasipenduduk/${id}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
migrasiPenduduk.findUnique.data = data.data ?? null;
|
||||
} else {
|
||||
console.error("Failed to fetch migrasi penduduk:", res.statusText);
|
||||
migrasiPenduduk.findUnique.data = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching migrasi penduduk:", error);
|
||||
migrasiPenduduk.findUnique.data = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
update: {
|
||||
id: "",
|
||||
form: {
|
||||
jenis: "",
|
||||
nama: "",
|
||||
tanggal: "",
|
||||
asalTujuan: "",
|
||||
alasan: "",
|
||||
jenisKelamin: "",
|
||||
},
|
||||
loading: false,
|
||||
async submit() {
|
||||
const id = this.id;
|
||||
if (!id) {
|
||||
toast.warn("ID tidak valid");
|
||||
return null;
|
||||
}
|
||||
|
||||
const formData = {
|
||||
jenis: this.form.jenis,
|
||||
nama: this.form.nama,
|
||||
tanggal: this.form.tanggal,
|
||||
asalTujuan: this.form.asalTujuan,
|
||||
alasan: this.form.alasan,
|
||||
jenisKelamin: this.form.jenisKelamin,
|
||||
};
|
||||
|
||||
const cek = templateMigrasiPenduduk.safeParse(formData);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
|
||||
toast.error(err);
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
const res = await fetch(`/api/kependudukan/migrasipenduduk/${id}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
const result = await res.json();
|
||||
|
||||
if (!res.ok || !result?.success) {
|
||||
throw new Error(result?.message || "Gagal update data");
|
||||
}
|
||||
|
||||
toast.success("Berhasil update data!");
|
||||
await migrasiPenduduk.findMany.load();
|
||||
return result.data;
|
||||
} catch (error) {
|
||||
console.error("Update error:", error);
|
||||
toast.error("Gagal update data migrasi penduduk");
|
||||
throw error;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
delete: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
|
||||
try {
|
||||
migrasiPenduduk.delete.loading = true;
|
||||
|
||||
const response = await fetch(
|
||||
`/api/kependudukan/migrasipenduduk/del/${id}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result?.success) {
|
||||
toast.success(result.message || "Data migrasi penduduk berhasil dihapus");
|
||||
await migrasiPenduduk.findMany.load();
|
||||
} else {
|
||||
toast.error(result?.message || "Gagal menghapus data migrasi penduduk");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal delete:", error);
|
||||
toast.error("Terjadi kesalahan saat menghapus data migrasi penduduk");
|
||||
} finally {
|
||||
migrasiPenduduk.delete.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default migrasiPenduduk;
|
||||
@@ -5,52 +5,53 @@ import { toast } from "react-toastify";
|
||||
import { proxy } from "valtio";
|
||||
import { z } from "zod";
|
||||
|
||||
// --- Zod Schema untuk APBDes Item (dengan field kalkulasi) ---
|
||||
// --- Zod Schema ---
|
||||
const ApbdesItemSchema = z.object({
|
||||
kode: z.string().min(1, "Kode wajib diisi"),
|
||||
uraian: z.string().min(1, "Uraian wajib diisi"),
|
||||
anggaran: z.number().min(0, "Anggaran tidak boleh negatif"),
|
||||
anggaran: z.number().min(0),
|
||||
realisasi: z.number().min(0),
|
||||
selisih: z.number(),
|
||||
persentase: z.number(),
|
||||
level: z.number().int().min(1).max(3),
|
||||
tipe: z.enum(['pendapatan', 'belanja', 'pembiayaan']).nullable().optional(),
|
||||
// Field kalkulasi dari realisasiItems (auto-calculated di backend)
|
||||
realisasi: z.number().min(0).default(0),
|
||||
selisih: z.number().default(0),
|
||||
persentase: z.number().default(0),
|
||||
});
|
||||
|
||||
const ApbdesFormSchema = z.object({
|
||||
tahun: z.number().int().min(2000, "Tahun tidak valid"),
|
||||
name: z.string().optional(),
|
||||
deskripsi: z.string().optional(),
|
||||
jumlah: z.string().optional(),
|
||||
// Image dan file opsional (bisa kosong)
|
||||
imageId: z.string().optional(),
|
||||
fileId: z.string().optional(),
|
||||
imageId: z.string().min(1, "Gambar wajib diunggah"),
|
||||
fileId: z.string().min(1, "File wajib diunggah"),
|
||||
items: z.array(ApbdesItemSchema).min(1, "Minimal ada 1 item"),
|
||||
});
|
||||
|
||||
// --- Default Form ---
|
||||
const defaultApbdesForm = {
|
||||
tahun: new Date().getFullYear(),
|
||||
name: "",
|
||||
deskripsi: "",
|
||||
jumlah: "",
|
||||
imageId: "",
|
||||
fileId: "",
|
||||
items: [] as z.infer<typeof ApbdesItemSchema>[],
|
||||
};
|
||||
|
||||
// --- Helper: Normalize item (dengan field kalkulasi) ---
|
||||
// --- Helper: hitung selisih & persentase otomatis (opsional di frontend) ---
|
||||
// --- Helper: hitung selisih & persentase otomatis (opsional di frontend) ---
|
||||
function normalizeItem(item: Partial<z.infer<typeof ApbdesItemSchema>>): z.infer<typeof ApbdesItemSchema> {
|
||||
const anggaran = item.anggaran ?? 0;
|
||||
const realisasi = item.realisasi ?? 0;
|
||||
|
||||
|
||||
// ✅ Formula yang benar
|
||||
const selisih = realisasi - anggaran; // positif = sisa anggaran, negatif = over budget
|
||||
const persentase = anggaran > 0 ? (realisasi / anggaran) * 100 : 0; // persentase realisasi terhadap anggaran
|
||||
|
||||
return {
|
||||
kode: item.kode || "",
|
||||
uraian: item.uraian || "",
|
||||
anggaran: item.anggaran ?? 0,
|
||||
anggaran,
|
||||
realisasi,
|
||||
selisih,
|
||||
persentase,
|
||||
level: item.level || 1,
|
||||
tipe: item.tipe ?? null,
|
||||
realisasi: item.realisasi ?? 0,
|
||||
selisih: item.selisih ?? 0,
|
||||
persentase: item.persentase ?? 0,
|
||||
tipe: item.tipe, // biarkan null jika memang null
|
||||
};
|
||||
}
|
||||
|
||||
@@ -112,7 +113,7 @@ const apbdes = proxy({
|
||||
findMany: {
|
||||
data: null as
|
||||
| Prisma.APBDesGetPayload<{
|
||||
include: { image: true; file: true; items: { include: { realisasiItems: true } } };
|
||||
include: { image: true; file: true; items: true };
|
||||
}>[]
|
||||
| null,
|
||||
page: 1,
|
||||
@@ -157,37 +158,33 @@ const apbdes = proxy({
|
||||
findUnique: {
|
||||
data: null as
|
||||
| Prisma.APBDesGetPayload<{
|
||||
include: { image: true; file: true; items: { include: { realisasiItems: true } } };
|
||||
include: { image: true; file: true; items: true };
|
||||
}>
|
||||
| null,
|
||||
loading: false,
|
||||
error: null as string | null,
|
||||
|
||||
|
||||
async load(id: string) {
|
||||
if (!id || id.trim() === '') {
|
||||
this.data = null;
|
||||
this.error = "ID tidak valid";
|
||||
return;
|
||||
}
|
||||
|
||||
// Prevent multiple simultaneous loads
|
||||
if (this.loading) {
|
||||
console.log("⚠️ Already loading, skipping...");
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
|
||||
try {
|
||||
// Pastikan URL-nya benar
|
||||
const url = `/api/landingpage/apbdes/${id}`;
|
||||
console.log("🌐 Fetching:", url);
|
||||
|
||||
|
||||
// Gunakan fetch biasa atau ApiFetch dengan cara yang benar
|
||||
const response = await fetch(url);
|
||||
const res = await response.json();
|
||||
|
||||
|
||||
console.log("📦 Response:", res);
|
||||
|
||||
|
||||
if (res.success && res.data) {
|
||||
this.data = res.data;
|
||||
} else {
|
||||
@@ -247,18 +244,15 @@ const apbdes = proxy({
|
||||
this.id = data.id;
|
||||
this.form = {
|
||||
tahun: data.tahun || new Date().getFullYear(),
|
||||
name: data.name || "",
|
||||
deskripsi: data.deskripsi || "",
|
||||
jumlah: data.jumlah || "",
|
||||
imageId: data.imageId || "",
|
||||
fileId: data.fileId || "",
|
||||
items: (data.items || []).map((item: any) => ({
|
||||
kode: item.kode,
|
||||
uraian: item.uraian,
|
||||
anggaran: item.anggaran,
|
||||
realisasi: item.totalRealisasi || 0,
|
||||
selisih: item.selisih || 0,
|
||||
persentase: item.persentase || 0,
|
||||
realisasi: item.realisasi,
|
||||
selisih: item.selisih,
|
||||
persentase: item.persentase,
|
||||
level: item.level,
|
||||
tipe: item.tipe || 'pendapatan',
|
||||
})),
|
||||
@@ -286,24 +280,11 @@ const apbdes = proxy({
|
||||
try {
|
||||
this.loading = true;
|
||||
// Include the ID in the request body
|
||||
// Omit realisasi, selisih, persentase karena itu calculated fields di backend
|
||||
const requestData = {
|
||||
tahun: parsed.data.tahun,
|
||||
name: parsed.data.name,
|
||||
deskripsi: parsed.data.deskripsi,
|
||||
jumlah: parsed.data.jumlah,
|
||||
imageId: parsed.data.imageId,
|
||||
fileId: parsed.data.fileId,
|
||||
id: this.id,
|
||||
items: parsed.data.items.map(item => ({
|
||||
kode: item.kode,
|
||||
uraian: item.uraian,
|
||||
anggaran: item.anggaran,
|
||||
level: item.level,
|
||||
tipe: item.tipe ?? null,
|
||||
})),
|
||||
...parsed.data,
|
||||
id: this.id, // Add the ID to the request body
|
||||
};
|
||||
|
||||
|
||||
const res = await (ApiFetch.api.landingpage.apbdes as any)[this.id].put(requestData);
|
||||
|
||||
if (res.data?.success) {
|
||||
@@ -336,82 +317,6 @@ const apbdes = proxy({
|
||||
this.form = { ...defaultApbdesForm };
|
||||
},
|
||||
},
|
||||
|
||||
// =========================================
|
||||
// REALISASI STATE MANAGEMENT
|
||||
// =========================================
|
||||
realisasi: {
|
||||
// Create realisasi
|
||||
async create(itemId: string, data: { kode: string; jumlah: number; tanggal: string; keterangan?: string; buktiFileId?: string }) {
|
||||
try {
|
||||
const res = await (ApiFetch.api.landingpage.apbdes as any)[itemId].realisasi.post(data);
|
||||
|
||||
if (res.data?.success) {
|
||||
toast.success("Realisasi berhasil ditambahkan");
|
||||
// Reload findUnique untuk update data
|
||||
const currentId = apbdes.findUnique.data?.id;
|
||||
if (currentId) {
|
||||
await apbdes.findUnique.load(currentId);
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
toast.error(res.data?.message || "Gagal menambahkan realisasi");
|
||||
return false;
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Create realisasi error:", error);
|
||||
toast.error(error?.message || "Terjadi kesalahan saat menambahkan realisasi");
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// Update realisasi
|
||||
async update(realisasiId: string, data: { kode?: string; jumlah?: number; tanggal?: string; keterangan?: string; buktiFileId?: string }) {
|
||||
try {
|
||||
const res = await (ApiFetch.api.landingpage.apbdes as any).realisasi[realisasiId].put(data);
|
||||
|
||||
if (res.data?.success) {
|
||||
toast.success("Realisasi berhasil diperbarui");
|
||||
// Reload findUnique untuk update data
|
||||
const currentId = apbdes.findUnique.data?.id;
|
||||
if (currentId) {
|
||||
await apbdes.findUnique.load(currentId);
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
toast.error(res.data?.message || "Gagal memperbarui realisasi");
|
||||
return false;
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Update realisasi error:", error);
|
||||
toast.error(error?.message || "Terjadi kesalahan saat memperbarui realisasi");
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// Delete realisasi
|
||||
async delete(realisasiId: string) {
|
||||
try {
|
||||
const res = await (ApiFetch.api.landingpage.apbdes as any).realisasi[realisasiId].delete();
|
||||
|
||||
if (res.data?.success) {
|
||||
toast.success("Realisasi berhasil dihapus");
|
||||
// Reload findUnique untuk update data
|
||||
if (apbdes.findUnique.data) {
|
||||
await apbdes.findUnique.load(apbdes.findUnique.data.id);
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
toast.error(res.data?.message || "Gagal menghapus realisasi");
|
||||
return false;
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Delete realisasi error:", error);
|
||||
toast.error(error?.message || "Terjadi kesalahan saat menghapus realisasi");
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default apbdes;
|
||||
@@ -160,7 +160,7 @@ function ListKategoriBerita({ search }: { search: string }) {
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={3}> {/* ✅ Match column count (3 columns) */}
|
||||
<TableTd colSpan={4}>
|
||||
<Center py={24}>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data kategori berita yang cocok
|
||||
|
||||
@@ -9,8 +9,6 @@ import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Grid,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
@@ -19,7 +17,7 @@ import {
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Loader,
|
||||
Loader
|
||||
} from "@mantine/core";
|
||||
import { Dropzone } from "@mantine/dropzone";
|
||||
import {
|
||||
@@ -27,51 +25,19 @@ import {
|
||||
IconPhoto,
|
||||
IconUpload,
|
||||
IconX,
|
||||
IconVideo,
|
||||
IconTrash,
|
||||
} from "@tabler/icons-react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import { useProxy } from "valtio/utils";
|
||||
import { convertYoutubeUrlToEmbed } from '@/app/admin/(dashboard)/desa/gallery/lib/youtube-utils';
|
||||
|
||||
interface ExistingImage {
|
||||
id: string;
|
||||
link: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface BeritaData {
|
||||
id: string;
|
||||
judul: string;
|
||||
deskripsi: string;
|
||||
content: string;
|
||||
kategoriBeritaId: string | null;
|
||||
imageId: string | null;
|
||||
image?: { link: string } | null;
|
||||
images?: ExistingImage[];
|
||||
linkVideo?: string | null;
|
||||
}
|
||||
|
||||
function EditBerita() {
|
||||
const beritaState = useProxy(stateDashboardBerita);
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
// Featured image state
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
|
||||
// Gallery images state
|
||||
const [existingGalleryImages, setExistingGalleryImages] = useState<ExistingImage[]>([]);
|
||||
const [galleryFiles, setGalleryFiles] = useState<File[]>([]);
|
||||
const [galleryPreviews, setGalleryPreviews] = useState<string[]>([]);
|
||||
|
||||
// YouTube link state
|
||||
const [youtubeLink, setYoutubeLink] = useState('');
|
||||
const [originalYoutubeLink, setOriginalYoutubeLink] = useState('');
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
judul: "",
|
||||
deskripsi: "",
|
||||
@@ -82,17 +48,9 @@ function EditBerita() {
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const [originalData, setOriginalData] = useState({
|
||||
judul: "",
|
||||
deskripsi: "",
|
||||
kategoriBeritaId: "",
|
||||
content: "",
|
||||
imageId: "",
|
||||
imageUrl: ""
|
||||
});
|
||||
|
||||
// Helper function to check if HTML content is empty
|
||||
const isHtmlEmpty = (html: string) => {
|
||||
// Remove all HTML tags and check if there's any text content
|
||||
const textContent = html.replace(/<[^>]*>/g, '').trim();
|
||||
return textContent === '';
|
||||
};
|
||||
@@ -103,12 +61,21 @@ function EditBerita() {
|
||||
formData.judul?.trim() !== '' &&
|
||||
formData.kategoriBeritaId !== '' &&
|
||||
!isHtmlEmpty(formData.deskripsi) &&
|
||||
(file !== null || originalData.imageId !== '') &&
|
||||
(file !== null || originalData.imageId !== '') && // Either a new file is selected or an existing image exists
|
||||
!isHtmlEmpty(formData.content)
|
||||
);
|
||||
};
|
||||
|
||||
// Load data
|
||||
const [originalData, setOriginalData] = useState({
|
||||
judul: "",
|
||||
deskripsi: "",
|
||||
kategoriBeritaId: "",
|
||||
content: "",
|
||||
imageId: "",
|
||||
imageUrl: ""
|
||||
});
|
||||
|
||||
// Load kategori + berita
|
||||
useEffect(() => {
|
||||
beritaState.kategoriBerita.findMany.load();
|
||||
|
||||
@@ -117,7 +84,7 @@ function EditBerita() {
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const data = await stateDashboardBerita.berita.edit.load(id) as BeritaData | null;
|
||||
const data = await stateDashboardBerita.berita.edit.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
judul: data.judul || "",
|
||||
@@ -139,17 +106,6 @@ function EditBerita() {
|
||||
if (data?.image?.link) {
|
||||
setPreviewImage(data.image.link);
|
||||
}
|
||||
|
||||
// Load gallery images
|
||||
if (data?.images && data.images.length > 0) {
|
||||
setExistingGalleryImages(data.images);
|
||||
}
|
||||
|
||||
// Load YouTube link
|
||||
if (data?.linkVideo) {
|
||||
setYoutubeLink(data.linkVideo);
|
||||
setOriginalYoutubeLink(data.linkVideo);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading berita:", error);
|
||||
@@ -164,59 +120,27 @@ function EditBerita() {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleGalleryDrop = (files: File[]) => {
|
||||
const maxImages = 10;
|
||||
const currentCount = existingGalleryImages.length + galleryFiles.length;
|
||||
const availableSlots = maxImages - currentCount;
|
||||
|
||||
if (availableSlots <= 0) {
|
||||
toast.warn('Maksimal 10 gambar untuk galeri');
|
||||
return;
|
||||
}
|
||||
|
||||
const newFiles = files.slice(0, availableSlots);
|
||||
|
||||
if (newFiles.length === 0) {
|
||||
toast.warn('Tidak ada slot tersisa untuk gambar galeri');
|
||||
return;
|
||||
}
|
||||
|
||||
setGalleryFiles([...galleryFiles, ...newFiles]);
|
||||
|
||||
const newPreviews = newFiles.map((f) => URL.createObjectURL(f));
|
||||
setGalleryPreviews([...galleryPreviews, ...newPreviews]);
|
||||
};
|
||||
|
||||
const removeGalleryImage = (index: number, isExisting: boolean = false) => {
|
||||
if (isExisting) {
|
||||
setExistingGalleryImages(existingGalleryImages.filter((_, i) => i !== index));
|
||||
} else {
|
||||
setGalleryFiles(galleryFiles.filter((_, i) => i !== index));
|
||||
setGalleryPreviews(galleryPreviews.filter((_, i) => i !== index));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.judul?.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!formData.kategoriBeritaId) {
|
||||
toast.error('Kategori wajib dipilih');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (isHtmlEmpty(formData.deskripsi)) {
|
||||
toast.error('Deskripsi singkat wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!file && !originalData.imageId) {
|
||||
toast.error('Gambar utama wajib dipilih');
|
||||
toast.error('Gambar wajib dipilih');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (isHtmlEmpty(formData.content)) {
|
||||
toast.error('Konten wajib diisi');
|
||||
return;
|
||||
@@ -224,14 +148,12 @@ function EditBerita() {
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Update global state
|
||||
// Update global state hanya sekali di sini
|
||||
beritaState.berita.edit.form = {
|
||||
...beritaState.berita.edit.form,
|
||||
...formData,
|
||||
};
|
||||
|
||||
// Upload new featured image if changed
|
||||
if (file) {
|
||||
const res = await ApiFetch.api.fileStorage.create.post({
|
||||
file,
|
||||
@@ -240,33 +162,12 @@ function EditBerita() {
|
||||
const uploaded = res.data?.data;
|
||||
|
||||
if (!uploaded?.id) {
|
||||
return toast.error("Gagal upload gambar utama");
|
||||
return toast.error("Gagal upload gambar");
|
||||
}
|
||||
|
||||
beritaState.berita.edit.form.imageId = uploaded.id;
|
||||
}
|
||||
|
||||
// Upload new gallery images
|
||||
const newGalleryIds: string[] = [];
|
||||
for (const galleryFile of galleryFiles) {
|
||||
const galleryRes = await ApiFetch.api.fileStorage.create.post({
|
||||
file: galleryFile,
|
||||
name: galleryFile.name,
|
||||
});
|
||||
const galleryUploaded = galleryRes.data?.data;
|
||||
if (galleryUploaded?.id) {
|
||||
newGalleryIds.push(galleryUploaded.id);
|
||||
}
|
||||
}
|
||||
|
||||
// Combine existing (not removed) and new gallery images
|
||||
const remainingExistingIds = existingGalleryImages.map(img => img.id);
|
||||
beritaState.berita.edit.form.imageIds = [...remainingExistingIds, ...newGalleryIds];
|
||||
|
||||
// Set YouTube link
|
||||
const embedLink = convertYoutubeUrlToEmbed(youtubeLink);
|
||||
beritaState.berita.edit.form.linkVideo = embedLink || '';
|
||||
|
||||
await beritaState.berita.edit.update();
|
||||
toast.success("Berita berhasil diperbarui!");
|
||||
router.push("/admin/desa/berita/list-berita");
|
||||
@@ -288,12 +189,9 @@ function EditBerita() {
|
||||
});
|
||||
setPreviewImage(originalData.imageUrl || null);
|
||||
setFile(null);
|
||||
setYoutubeLink(originalYoutubeLink);
|
||||
toast.info("Form dikembalikan ke data awal");
|
||||
};
|
||||
|
||||
const embedLink = convertYoutubeUrlToEmbed(youtubeLink);
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'lg' }} py="xs">
|
||||
{/* Header */}
|
||||
@@ -321,7 +219,6 @@ function EditBerita() {
|
||||
style={{ border: "1px solid #e0e0e0" }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Judul */}
|
||||
<TextInput
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul"
|
||||
@@ -330,7 +227,6 @@ function EditBerita() {
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Kategori */}
|
||||
<Select
|
||||
value={formData.kategoriBeritaId}
|
||||
onChange={(val) => handleChange("kategoriBeritaId", val || "")}
|
||||
@@ -345,9 +241,9 @@ function EditBerita() {
|
||||
clearable
|
||||
searchable
|
||||
required
|
||||
error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
|
||||
/>
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">
|
||||
Deskripsi Singkat
|
||||
@@ -360,10 +256,11 @@ function EditBerita() {
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Featured Image */}
|
||||
|
||||
{/* Upload Gambar */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Gambar Utama (Featured)
|
||||
Gambar Berita
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
@@ -377,13 +274,17 @@ function EditBerita() {
|
||||
toast.error("File tidak valid, gunakan format gambar")
|
||||
}
|
||||
maxSize={5 * 1024 ** 2}
|
||||
accept={{ "image/*": ['.jpeg', '.jpg', '.png', '.webp'] }}
|
||||
accept={{ "image/*": [] }}
|
||||
radius="md"
|
||||
p="xl"
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={180}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
|
||||
<IconUpload
|
||||
size={48}
|
||||
color={colors["blue-button"]}
|
||||
stroke={1.5}
|
||||
/>
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={48} color="red" stroke={1.5} />
|
||||
@@ -391,6 +292,14 @@ function EditBerita() {
|
||||
<Dropzone.Idle>
|
||||
<IconPhoto size={48} color="#868e96" stroke={1.5} />
|
||||
</Dropzone.Idle>
|
||||
<Stack gap="xs" align="center">
|
||||
<Text size="md" fw={500}>
|
||||
Seret gambar atau klik untuk memilih file
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
Maksimal 5MB, format gambar .png, .jpg, .jpeg, webp
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Dropzone>
|
||||
|
||||
@@ -419,7 +328,9 @@ function EditBerita() {
|
||||
setPreviewImage(null);
|
||||
setFile(null);
|
||||
}}
|
||||
style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
|
||||
style={{
|
||||
boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
<IconX size={14} />
|
||||
</ActionIcon>
|
||||
@@ -427,138 +338,6 @@ function EditBerita() {
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Gallery Images */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Galeri Gambar (Opsional - Maksimal 10)
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={handleGalleryDrop}
|
||||
onReject={() => toast.error("File tidak valid, gunakan format gambar")}
|
||||
maxSize={5 * 1024 ** 2}
|
||||
accept={{ "image/*": ['.jpeg', '.jpg', '.png', '.webp'] }}
|
||||
radius="md"
|
||||
p="md"
|
||||
multiple
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={120}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={40} color={colors["blue-button"]} stroke={1.5} />
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={40} color="red" stroke={1.5} />
|
||||
</Dropzone.Reject>
|
||||
<Dropzone.Idle>
|
||||
<IconPhoto size={40} color="#868e96" stroke={1.5} />
|
||||
</Dropzone.Idle>
|
||||
</Group>
|
||||
<Text ta="center" mt="sm" size="xs" color="dimmed">
|
||||
Seret gambar untuk menambahkan ke galeri
|
||||
</Text>
|
||||
</Dropzone>
|
||||
|
||||
{/* Existing Gallery Images */}
|
||||
{existingGalleryImages.length > 0 && (
|
||||
<Box mt="sm">
|
||||
<Text fz="xs" fw="bold" mb={6} c="dimmed">
|
||||
Gambar Existing ({existingGalleryImages.length})
|
||||
</Text>
|
||||
<Grid gutter="sm">
|
||||
{existingGalleryImages.map((img, index) => (
|
||||
<Grid.Col span={4} key={img.id}>
|
||||
<Card p="xs" radius="md" withBorder>
|
||||
<Image src={img.link} alt={img.name} radius="sm" height={100} fit="cover" />
|
||||
<ActionIcon
|
||||
variant="filled"
|
||||
color="red"
|
||||
radius="xl"
|
||||
size="sm"
|
||||
pos="absolute"
|
||||
top={5}
|
||||
right={5}
|
||||
onClick={() => removeGalleryImage(index, true)}
|
||||
style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</ActionIcon>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* New Gallery Images */}
|
||||
{galleryPreviews.length > 0 && (
|
||||
<Box mt="sm">
|
||||
<Text fz="xs" fw="bold" mb={6} c="dimmed">
|
||||
Gambar Baru ({galleryPreviews.length})
|
||||
</Text>
|
||||
<Grid gutter="sm">
|
||||
{galleryPreviews.map((preview, index) => (
|
||||
<Grid.Col span={4} key={index}>
|
||||
<Card p="xs" radius="md" withBorder>
|
||||
<Image src={preview} alt={`New ${index}`} radius="sm" height={100} fit="cover" />
|
||||
<ActionIcon
|
||||
variant="filled"
|
||||
color="red"
|
||||
radius="xl"
|
||||
size="sm"
|
||||
pos="absolute"
|
||||
top={5}
|
||||
right={5}
|
||||
onClick={() => removeGalleryImage(index, false)}
|
||||
style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</ActionIcon>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* YouTube Video */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Link Video YouTube (Opsional)
|
||||
</Text>
|
||||
<TextInput
|
||||
placeholder="https://www.youtube.com/watch?v=..."
|
||||
value={youtubeLink}
|
||||
onChange={(e) => setYoutubeLink(e.currentTarget.value)}
|
||||
leftSection={<IconVideo size={18} />}
|
||||
rightSection={
|
||||
youtubeLink && (
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
onClick={() => setYoutubeLink('')}
|
||||
>
|
||||
<IconX size={18} />
|
||||
</ActionIcon>
|
||||
)
|
||||
}
|
||||
/>
|
||||
{embedLink && (
|
||||
<Box mt="sm" pos="relative">
|
||||
<iframe
|
||||
style={{
|
||||
borderRadius: 10,
|
||||
width: '100%',
|
||||
height: 250,
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
src={embedLink}
|
||||
title="Preview Video"
|
||||
allowFullScreen
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Konten */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">
|
||||
@@ -572,8 +351,9 @@ function EditBerita() {
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Action Buttons */}
|
||||
{/* Action */}
|
||||
<Group justify="right">
|
||||
{/* Tombol Batal */}
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
@@ -583,6 +363,8 @@ function EditBerita() {
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client'
|
||||
import { Box, Button, Card, Grid, Group, Image, Paper, Skeleton, Stack, Text, Badge, AspectRatio } from '@mantine/core';
|
||||
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconEdit, IconTrash, IconVideo } from '@tabler/icons-react';
|
||||
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
@@ -10,23 +10,6 @@ import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirma
|
||||
import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
|
||||
import colors from '@/con/colors';
|
||||
|
||||
interface ExistingImage {
|
||||
id: string;
|
||||
link: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface BeritaDetail {
|
||||
id: string;
|
||||
judul: string;
|
||||
deskripsi: string;
|
||||
content: string;
|
||||
image?: { link: string } | null;
|
||||
images?: ExistingImage[];
|
||||
linkVideo?: string | null;
|
||||
kategoriBerita?: { name: string } | null;
|
||||
}
|
||||
|
||||
function DetailBerita() {
|
||||
const beritaState = useProxy(stateDashboardBerita);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
@@ -55,7 +38,7 @@ function DetailBerita() {
|
||||
);
|
||||
}
|
||||
|
||||
const data = beritaState.berita.findUnique.data as unknown as BeritaDetail;
|
||||
const data = beritaState.berita.findUnique.data;
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
@@ -85,131 +68,71 @@ function DetailBerita() {
|
||||
|
||||
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
|
||||
<Stack gap="sm">
|
||||
{/* Kategori */}
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Kategori</Text>
|
||||
<Text fz="md" c="dimmed">{data.kategoriBerita?.name || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
{/* Judul */}
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Judul</Text>
|
||||
<Text fz="md" c="dimmed">{data.judul || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi</Text>
|
||||
<Text
|
||||
fz="md"
|
||||
c="dimmed"
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
|
||||
/>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
|
||||
</Box>
|
||||
|
||||
{/* Gambar Utama (Featured) */}
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Gambar Utama</Text>
|
||||
<Text fz="lg" fw="bold">Gambar</Text>
|
||||
{data.image?.link ? (
|
||||
<Image
|
||||
src={data.image.link}
|
||||
alt={data.judul || 'Gambar Berita'}
|
||||
w={{ base: '100%', md: 400 }}
|
||||
h={300}
|
||||
w={200}
|
||||
h={200}
|
||||
radius="md"
|
||||
fit="cover"
|
||||
loading="lazy"
|
||||
loading='lazy'
|
||||
/>
|
||||
) : (
|
||||
<Text fz="sm" c="dimmed">Tidak ada gambar utama</Text>
|
||||
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Gallery Images */}
|
||||
{data.images && data.images.length > 0 && (
|
||||
<Box>
|
||||
<Group gap="xs" mb="sm">
|
||||
<Text fz="lg" fw="bold">Galeri Gambar</Text>
|
||||
<Badge color="blue" variant="light">
|
||||
{data.images.length}
|
||||
</Badge>
|
||||
</Group>
|
||||
<Grid gutter="md">
|
||||
{data.images.map((img, index) => (
|
||||
<Grid.Col span={{ base: 6, md: 4 }} key={img.id}>
|
||||
<Card p="xs" radius="md" withBorder>
|
||||
<Image
|
||||
src={img.link}
|
||||
alt={img.name || `Gallery ${index + 1}`}
|
||||
h={150}
|
||||
radius="sm"
|
||||
fit="cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* YouTube Video */}
|
||||
{data.linkVideo && (
|
||||
<Box>
|
||||
<Group gap="xs" mb="sm">
|
||||
<Text fz="lg" fw="bold">Video YouTube</Text>
|
||||
<IconVideo size={20} color={colors['blue-button']} />
|
||||
</Group>
|
||||
<AspectRatio ratio={16 / 9} mah={400}>
|
||||
<iframe
|
||||
src={data.linkVideo}
|
||||
title="YouTube Video"
|
||||
allowFullScreen
|
||||
style={{ borderRadius: 10, border: '1px solid #ddd' }}
|
||||
/>
|
||||
</AspectRatio>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Konten */}
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Konten</Text>
|
||||
<Paper bg="white" p="md" radius="md" mt="xs">
|
||||
<Text
|
||||
fz="md"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.content || '-' }}
|
||||
/>
|
||||
</Paper>
|
||||
<Text
|
||||
fz="md"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.content || '-' }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<Group gap="sm" mt="md">
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
setSelectedId(data.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
leftSection={<IconTrash size={20} />}
|
||||
>
|
||||
Hapus
|
||||
</Button>
|
||||
{/* Action Button */}
|
||||
<Group gap="sm">
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
setSelectedId(data.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
color="green"
|
||||
onClick={() => router.push(`/admin/desa/berita/list-berita/${data.id}/edit`)}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
leftSection={<IconEdit size={20} />}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
color="green"
|
||||
onClick={() => router.push(`/admin/desa/berita/list-berita/${data.id}/edit`)}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
@@ -15,38 +15,26 @@ import {
|
||||
TextInput,
|
||||
Title,
|
||||
Loader,
|
||||
ActionIcon,
|
||||
Grid,
|
||||
Card,
|
||||
ActionIcon
|
||||
} from '@mantine/core';
|
||||
import { Dropzone } from '@mantine/dropzone';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconPhoto, IconUpload, IconX, IconVideo, IconTrash } from '@tabler/icons-react';
|
||||
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { convertYoutubeUrlToEmbed } from '@/app/admin/(dashboard)/desa/gallery/lib/youtube-utils';
|
||||
|
||||
export default function CreateBerita() {
|
||||
const beritaState = useProxy(stateDashboardBerita);
|
||||
const router = useRouter();
|
||||
|
||||
// Featured image state
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
|
||||
// Gallery images state
|
||||
const [galleryFiles, setGalleryFiles] = useState<File[]>([]);
|
||||
const [galleryPreviews, setGalleryPreviews] = useState<string[]>([]);
|
||||
|
||||
// YouTube link state
|
||||
const [youtubeLink, setYoutubeLink] = useState('');
|
||||
|
||||
const router = useRouter();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Helper function to check if HTML content is empty
|
||||
const isHtmlEmpty = (html: string) => {
|
||||
// Remove all HTML tags and check if there's any text content
|
||||
const textContent = html.replace(/<[^>]*>/g, '').trim();
|
||||
return textContent === '';
|
||||
};
|
||||
@@ -73,35 +61,9 @@ export default function CreateBerita() {
|
||||
kategoriBeritaId: '',
|
||||
imageId: '',
|
||||
content: '',
|
||||
imageIds: [],
|
||||
linkVideo: '',
|
||||
};
|
||||
setPreviewImage(null);
|
||||
setFile(null);
|
||||
setGalleryFiles([]);
|
||||
setGalleryPreviews([]);
|
||||
setYoutubeLink('');
|
||||
};
|
||||
|
||||
const handleGalleryDrop = (files: File[]) => {
|
||||
const newFiles = files.filter(
|
||||
(_, index) => galleryFiles.length + index < 10 // Max 10 images
|
||||
);
|
||||
|
||||
if (newFiles.length === 0) {
|
||||
toast.warn('Maksimal 10 gambar untuk galeri');
|
||||
return;
|
||||
}
|
||||
|
||||
setGalleryFiles([...galleryFiles, ...newFiles]);
|
||||
|
||||
const newPreviews = newFiles.map((f) => URL.createObjectURL(f));
|
||||
setGalleryPreviews([...galleryPreviews, ...newPreviews]);
|
||||
};
|
||||
|
||||
const removeGalleryImage = (index: number) => {
|
||||
setGalleryFiles(galleryFiles.filter((_, i) => i !== index));
|
||||
setGalleryPreviews(galleryPreviews.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
@@ -109,22 +71,22 @@ export default function CreateBerita() {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!beritaState.berita.create.form.kategoriBeritaId) {
|
||||
toast.error('Kategori wajib dipilih');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (isHtmlEmpty(beritaState.berita.create.form.deskripsi)) {
|
||||
toast.error('Deskripsi singkat wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!file) {
|
||||
toast.error('Gambar utama wajib dipilih');
|
||||
toast.error('Gambar wajib dipilih');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (isHtmlEmpty(beritaState.berita.create.form.content)) {
|
||||
toast.error('Konten wajib diisi');
|
||||
return;
|
||||
@@ -132,37 +94,21 @@ export default function CreateBerita() {
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
if (!file) {
|
||||
return toast.warn('Silakan pilih file gambar terlebih dahulu');
|
||||
}
|
||||
|
||||
// Upload featured image
|
||||
const featuredRes = await ApiFetch.api.fileStorage.create.post({
|
||||
const res = await ApiFetch.api.fileStorage.create.post({
|
||||
file,
|
||||
name: file.name,
|
||||
});
|
||||
const featuredUploaded = featuredRes.data?.data;
|
||||
if (!featuredUploaded?.id) {
|
||||
return toast.error('Gagal mengunggah gambar utama');
|
||||
}
|
||||
beritaState.berita.create.form.imageId = featuredUploaded.id;
|
||||
|
||||
// Upload gallery images
|
||||
const galleryIds: string[] = [];
|
||||
for (const galleryFile of galleryFiles) {
|
||||
const galleryRes = await ApiFetch.api.fileStorage.create.post({
|
||||
file: galleryFile,
|
||||
name: galleryFile.name,
|
||||
});
|
||||
const galleryUploaded = galleryRes.data?.data;
|
||||
if (galleryUploaded?.id) {
|
||||
galleryIds.push(galleryUploaded.id);
|
||||
}
|
||||
const uploaded = res.data?.data;
|
||||
if (!uploaded?.id) {
|
||||
return toast.error('Gagal mengunggah gambar, silakan coba lagi');
|
||||
}
|
||||
beritaState.berita.create.form.imageIds = galleryIds;
|
||||
|
||||
// Set YouTube link if provided
|
||||
const embedLink = convertYoutubeUrlToEmbed(youtubeLink);
|
||||
if (embedLink) {
|
||||
beritaState.berita.create.form.linkVideo = embedLink;
|
||||
}
|
||||
beritaState.berita.create.form.imageId = uploaded.id;
|
||||
|
||||
await beritaState.berita.create.create();
|
||||
|
||||
@@ -176,13 +122,16 @@ export default function CreateBerita() {
|
||||
}
|
||||
};
|
||||
|
||||
const embedLink = convertYoutubeUrlToEmbed(youtubeLink);
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'lg' }} py="xs">
|
||||
{/* Header */}
|
||||
{/* Header dengan tombol kembali */}
|
||||
<Group mb="md">
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
@@ -199,7 +148,6 @@ export default function CreateBerita() {
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Judul */}
|
||||
<TextInput
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul berita"
|
||||
@@ -208,7 +156,6 @@ export default function CreateBerita() {
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Kategori */}
|
||||
<Select
|
||||
label="Kategori"
|
||||
placeholder="Pilih kategori"
|
||||
@@ -235,7 +182,6 @@ export default function CreateBerita() {
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi Singkat
|
||||
@@ -248,10 +194,9 @@ export default function CreateBerita() {
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Featured Image */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Gambar Utama (Featured)
|
||||
Gambar Berita
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
@@ -287,11 +232,17 @@ export default function CreateBerita() {
|
||||
<Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
|
||||
<Image
|
||||
src={previewImage}
|
||||
alt="Preview Gambar Utama"
|
||||
alt="Preview Gambar"
|
||||
radius="md"
|
||||
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
|
||||
style={{
|
||||
maxHeight: 200,
|
||||
objectFit: 'contain',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
{/* Tombol hapus (pojok kanan atas) */}
|
||||
<ActionIcon
|
||||
variant="filled"
|
||||
color="red"
|
||||
@@ -304,7 +255,9 @@ export default function CreateBerita() {
|
||||
setPreviewImage(null);
|
||||
setFile(null);
|
||||
}}
|
||||
style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
|
||||
style={{
|
||||
boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
<IconX size={14} />
|
||||
</ActionIcon>
|
||||
@@ -312,102 +265,6 @@ export default function CreateBerita() {
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Gallery Images */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Galeri Gambar (Opsional - Maksimal 10)
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={handleGalleryDrop}
|
||||
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
|
||||
maxSize={5 * 1024 ** 2}
|
||||
accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
|
||||
radius="md"
|
||||
p="md"
|
||||
multiple
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={120}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={40} color="var(--mantine-color-blue-6)" stroke={1.5} />
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={40} color="var(--mantine-color-red-6)" stroke={1.5} />
|
||||
</Dropzone.Reject>
|
||||
<Dropzone.Idle>
|
||||
<IconPhoto size={40} color="var(--mantine-color-dimmed)" stroke={1.5} />
|
||||
</Dropzone.Idle>
|
||||
</Group>
|
||||
<Text ta="center" mt="sm" size="xs" color="dimmed">
|
||||
Seret gambar atau klik untuk menambahkan ke galeri
|
||||
</Text>
|
||||
</Dropzone>
|
||||
|
||||
{galleryPreviews.length > 0 && (
|
||||
<Grid mt="sm" gutter="sm">
|
||||
{galleryPreviews.map((preview, index) => (
|
||||
<Grid.Col span={4} key={index}>
|
||||
<Card p="xs" radius="md" withBorder>
|
||||
<Image src={preview} alt={`Gallery ${index}`} radius="sm" height={100} fit="cover" />
|
||||
<ActionIcon
|
||||
variant="filled"
|
||||
color="red"
|
||||
radius="xl"
|
||||
size="sm"
|
||||
pos="absolute"
|
||||
top={5}
|
||||
right={5}
|
||||
onClick={() => removeGalleryImage(index)}
|
||||
style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</ActionIcon>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* YouTube Video */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Link Video YouTube (Opsional)
|
||||
</Text>
|
||||
<TextInput
|
||||
placeholder="https://www.youtube.com/watch?v=..."
|
||||
value={youtubeLink}
|
||||
onChange={(e) => setYoutubeLink(e.currentTarget.value)}
|
||||
leftSection={<IconVideo size={18} />}
|
||||
rightSection={
|
||||
youtubeLink && (
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
onClick={() => setYoutubeLink('')}
|
||||
>
|
||||
<IconX size={18} />
|
||||
</ActionIcon>
|
||||
)
|
||||
}
|
||||
/>
|
||||
{embedLink && (
|
||||
<Box mt="sm" pos="relative">
|
||||
<iframe
|
||||
style={{
|
||||
borderRadius: 10,
|
||||
width: '100%',
|
||||
height: 250,
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
src={embedLink}
|
||||
title="Preview Video"
|
||||
allowFullScreen
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Konten */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Konten
|
||||
@@ -420,7 +277,6 @@ export default function CreateBerita() {
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Buttons */}
|
||||
<Group justify="right">
|
||||
<Button
|
||||
variant="outline"
|
||||
@@ -431,6 +287,8 @@ export default function CreateBerita() {
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
|
||||
@@ -187,7 +187,7 @@ function ListBerita({ search }: { search: string }) {
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10, debouncedSearch); // ✅ Include search parameter
|
||||
load(newPage, 10);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
|
||||
@@ -8,7 +8,6 @@ import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import DOMPurify from 'dompurify';
|
||||
|
||||
export default function DetailPotensi() {
|
||||
const router = useRouter();
|
||||
@@ -78,17 +77,7 @@ export default function DetailPotensi() {
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi</Text>
|
||||
<Text
|
||||
fz="md"
|
||||
c="dimmed"
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(data.deskripsi || '-', {
|
||||
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
|
||||
ALLOWED_ATTR: []
|
||||
})
|
||||
}}
|
||||
></Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}></Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
@@ -113,12 +102,7 @@ export default function DetailPotensi() {
|
||||
<Text
|
||||
fz="md"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(data.content || '-', {
|
||||
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
|
||||
ALLOWED_ATTR: []
|
||||
})
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: data.content || '-' }}
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -27,7 +27,6 @@ import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../../_com/header';
|
||||
import potensiDesaState from '../../../_state/desa/potensi';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
import DOMPurify from 'dompurify';
|
||||
|
||||
function Potensi() {
|
||||
const [search, setSearch] = useState("");
|
||||
@@ -138,12 +137,7 @@ function ListPotensi({ search }: { search: string }) {
|
||||
fz="sm"
|
||||
lh={1.5}
|
||||
lineClamp={2}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(item.deskripsi, {
|
||||
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
|
||||
ALLOWED_ATTR: []
|
||||
})
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
|
||||
style={{ wordBreak: 'break-word' }}
|
||||
/>
|
||||
</TableTd>
|
||||
@@ -205,12 +199,7 @@ function ListPotensi({ search }: { search: string }) {
|
||||
<Text
|
||||
fz="sm"
|
||||
lh={1.5}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(item.deskripsi, {
|
||||
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li'],
|
||||
ALLOWED_ATTR: []
|
||||
})
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
|
||||
style={{ wordBreak: 'break-word' }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -1,249 +0,0 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client';
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
Stack,
|
||||
Title,
|
||||
NumberInput,
|
||||
TextInput
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import dataBanjar from '../../../_state/kependudukan/data-banjar';
|
||||
|
||||
interface FormData {
|
||||
nama: string;
|
||||
penduduk: number;
|
||||
kk: number;
|
||||
miskin: number;
|
||||
tahun: number;
|
||||
}
|
||||
|
||||
export default function EditDataBanjar() {
|
||||
const router = useRouter();
|
||||
const { id } = useParams() as { id: string };
|
||||
const stateDataBanjar = useProxy(dataBanjar);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
nama: '',
|
||||
penduduk: 0,
|
||||
kk: 0,
|
||||
miskin: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
});
|
||||
const [originalData, setOriginalData] = useState<FormData>({
|
||||
nama: '',
|
||||
penduduk: 0,
|
||||
kk: 0,
|
||||
miskin: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
});
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
formData.nama?.trim() !== '' &&
|
||||
formData.penduduk !== null &&
|
||||
formData.penduduk >= 0 &&
|
||||
formData.kk !== null &&
|
||||
formData.kk >= 0 &&
|
||||
formData.miskin !== null &&
|
||||
formData.miskin >= 0 &&
|
||||
formData.tahun !== null
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
stateDataBanjar.update.id = id;
|
||||
await stateDataBanjar.findUnique.load(id);
|
||||
|
||||
const data = stateDataBanjar.findUnique.data;
|
||||
if (data) {
|
||||
setFormData({
|
||||
nama: data.nama ?? '',
|
||||
penduduk: Number(data.penduduk ?? 0),
|
||||
kk: Number(data.kk ?? 0),
|
||||
miskin: Number(data.miskin ?? 0),
|
||||
tahun: Number(data.tahun ?? currentYear),
|
||||
});
|
||||
setOriginalData({
|
||||
nama: data.nama ?? '',
|
||||
penduduk: Number(data.penduduk ?? 0),
|
||||
kk: Number(data.kk ?? 0),
|
||||
miskin: Number(data.miskin ?? 0),
|
||||
tahun: Number(data.tahun ?? currentYear),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
toast.error('Gagal memuat data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(field: keyof FormData) =>
|
||||
(value: any) => {
|
||||
const val =
|
||||
field === 'penduduk' || field === 'kk' || field === 'miskin' || field === 'tahun'
|
||||
? Number(value || 0)
|
||||
: value;
|
||||
|
||||
setFormData((prev) => ({ ...prev, [field]: val }));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleResetForm = () => {
|
||||
setFormData({
|
||||
nama: originalData.nama,
|
||||
penduduk: Number(originalData.penduduk),
|
||||
kk: Number(originalData.kk),
|
||||
miskin: Number(originalData.miskin),
|
||||
tahun: Number(originalData.tahun),
|
||||
});
|
||||
toast.info("Form dikembalikan ke data awal");
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
stateDataBanjar.update.id = id;
|
||||
stateDataBanjar.update.form = { ...formData };
|
||||
|
||||
await stateDataBanjar.update.submit();
|
||||
|
||||
toast.success('Data berhasil diperbarui');
|
||||
router.push('/admin/kependudukan/data-banjar');
|
||||
} catch (error) {
|
||||
console.error('Error updating data:', error);
|
||||
toast.error('Gagal memperbarui data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Data Banjar
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form Card */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Nama Banjar"
|
||||
placeholder="Masukkan nama banjar"
|
||||
value={formData.nama}
|
||||
onChange={handleChange('nama')}
|
||||
required
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Jumlah Penduduk"
|
||||
placeholder="Masukkan jumlah penduduk"
|
||||
value={formData.penduduk}
|
||||
onChange={handleChange('penduduk')}
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Jumlah KK"
|
||||
placeholder="Masukkan jumlah KK"
|
||||
value={formData.kk}
|
||||
onChange={handleChange('kk')}
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Jumlah Penduduk Miskin"
|
||||
placeholder="Masukkan jumlah penduduk miskin"
|
||||
value={formData.miskin}
|
||||
onChange={handleChange('miskin')}
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Tahun"
|
||||
placeholder="Masukkan tahun"
|
||||
value={formData.tahun}
|
||||
onChange={handleChange('tahun')}
|
||||
min={2000}
|
||||
max={currentYear + 1}
|
||||
required
|
||||
/>
|
||||
|
||||
<Group justify="flex-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={handleResetForm}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
style={{
|
||||
background: !isFormValid() || isSubmitting
|
||||
? `linear-gradient(135deg, #cccccc, #eeeeee)`
|
||||
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,189 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client';
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
Stack,
|
||||
Title,
|
||||
NumberInput,
|
||||
TextInput
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import dataBanjar from '../../../_state/kependudukan/data-banjar';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
function CreateDataBanjar() {
|
||||
const stateDataBanjar = useProxy(dataBanjar);
|
||||
const router = useRouter();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const yearOptions = Array.from({ length: 10 }, (_, i) => ({
|
||||
value: String(currentYear - i),
|
||||
label: String(currentYear - i),
|
||||
}));
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
stateDataBanjar.create.form.nama?.trim() !== '' &&
|
||||
stateDataBanjar.create.form.penduduk !== null &&
|
||||
stateDataBanjar.create.form.penduduk >= 0 &&
|
||||
stateDataBanjar.create.form.kk !== null &&
|
||||
stateDataBanjar.create.form.kk >= 0 &&
|
||||
stateDataBanjar.create.form.miskin !== null &&
|
||||
stateDataBanjar.create.form.miskin >= 0 &&
|
||||
stateDataBanjar.create.form.tahun !== null
|
||||
);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
stateDataBanjar.create.form = {
|
||||
nama: '',
|
||||
penduduk: 0,
|
||||
kk: 0,
|
||||
miskin: 0,
|
||||
tahun: currentYear,
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const id = await stateDataBanjar.create.create();
|
||||
if (id) {
|
||||
resetForm();
|
||||
router.push('/admin/kependudukan/data-banjar');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating data banjar:', error);
|
||||
toast.error('Terjadi kesalahan saat menambah data banjar');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Data Banjar
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Nama Banjar"
|
||||
placeholder="Masukkan nama banjar"
|
||||
value={stateDataBanjar.create.form.nama}
|
||||
onChange={(e) => {
|
||||
stateDataBanjar.create.form.nama = e.currentTarget.value;
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Jumlah Penduduk"
|
||||
placeholder="Masukkan jumlah penduduk"
|
||||
value={stateDataBanjar.create.form.penduduk}
|
||||
onChange={(val) => {
|
||||
stateDataBanjar.create.form.penduduk = Number(val || 0);
|
||||
}}
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Jumlah KK"
|
||||
placeholder="Masukkan jumlah KK"
|
||||
value={stateDataBanjar.create.form.kk}
|
||||
onChange={(val) => {
|
||||
stateDataBanjar.create.form.kk = Number(val || 0);
|
||||
}}
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Jumlah Penduduk Miskin"
|
||||
placeholder="Masukkan jumlah penduduk miskin"
|
||||
value={stateDataBanjar.create.form.miskin}
|
||||
onChange={(val) => {
|
||||
stateDataBanjar.create.form.miskin = Number(val || 0);
|
||||
}}
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Tahun"
|
||||
placeholder="Masukkan tahun"
|
||||
value={stateDataBanjar.create.form.tahun}
|
||||
onChange={(val) => {
|
||||
stateDataBanjar.create.form.tahun = Number(val || currentYear);
|
||||
}}
|
||||
min={2000}
|
||||
max={currentYear + 1}
|
||||
required
|
||||
/>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={resetForm}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
style={{
|
||||
background: !isFormValid() || isSubmitting
|
||||
? `linear-gradient(135deg, #cccccc, #eeeeee)`
|
||||
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateDataBanjar;
|
||||
@@ -1,304 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Pagination,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Table,
|
||||
TableTbody,
|
||||
TableTd,
|
||||
TableTh,
|
||||
TableThead,
|
||||
TableTr,
|
||||
Text,
|
||||
Title
|
||||
} from '@mantine/core';
|
||||
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../_com/header';
|
||||
import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
|
||||
import dataBanjar from '../../_state/kependudukan/data-banjar';
|
||||
|
||||
function DataBanjarAdmin() {
|
||||
const [search, setSearch] = useState('');
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Data Banjar'
|
||||
placeholder='Cari nama banjar...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListDataBanjar search={search} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ListDataBanjar({ search }: { search: string }) {
|
||||
type DataBanjarType = {
|
||||
id: string;
|
||||
nama: string;
|
||||
penduduk: number;
|
||||
kk: number;
|
||||
miskin: number;
|
||||
tahun: number;
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
const stateDataBanjar = useProxy(dataBanjar);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load,
|
||||
} = stateDataBanjar.findMany;
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedId) {
|
||||
stateDataBanjar.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
}
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 10, debouncedSearch);
|
||||
}, [page, debouncedSearch]);
|
||||
|
||||
const filteredData = data || [];
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton height={600} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={{ base: 'sm', md: 'md' }}>
|
||||
<Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
|
||||
<Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
|
||||
<Title order={4} lh={{ base: 1.2, md: 1.15 }}>
|
||||
List Data Banjar
|
||||
</Title>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/kependudukan/data-banjar/create')}
|
||||
fz={{ base: 'sm', md: 'md' }}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* Desktop Table */}
|
||||
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
|
||||
<Table
|
||||
highlightOnHover
|
||||
miw={0}
|
||||
style={{
|
||||
tableLayout: 'fixed',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh style={{ width: '25%' }}>Nama Banjar</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Penduduk</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>KK</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Miskin</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Tahun</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Edit</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Hapus</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item: DataBanjarType) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.nama}</TableTd>
|
||||
<TableTd>{item.penduduk.toLocaleString('id-ID')}</TableTd>
|
||||
<TableTd>{item.kk.toLocaleString('id-ID')}</TableTd>
|
||||
<TableTd>{item.miskin.toLocaleString('id-ID')}</TableTd>
|
||||
<TableTd>{item.tahun}</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/kependudukan/data-banjar/${item.id}`)
|
||||
}
|
||||
fz="sm"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconEdit size={16} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
disabled={stateDataBanjar.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
fz="sm"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconTrash size={16} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={7}>
|
||||
<Center py={20}>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data banjar yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
|
||||
{/* Mobile Card */}
|
||||
<Box hiddenFrom="md">
|
||||
<Stack gap="xs">
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item: DataBanjarType) => (
|
||||
<Paper key={item.id} withBorder p="sm" radius="sm">
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Nama Banjar
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.nama}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Jumlah Penduduk
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.penduduk.toLocaleString('id-ID')}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
KK
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.kk.toLocaleString('id-ID')}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Penduduk Miskin
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.miskin.toLocaleString('id-ID')}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Tahun
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.tahun}
|
||||
</Text>
|
||||
</Box>
|
||||
<Group justify="flex-end" gap="xs">
|
||||
<Button
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/kependudukan/data-banjar/${item.id}`)
|
||||
}
|
||||
fz="xs"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconEdit size={14} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
disabled={stateDataBanjar.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
fz="xs"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))
|
||||
) : (
|
||||
<Center py={20}>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data banjar yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Pagination */}
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10, search);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleDelete}
|
||||
text="Apakah anda yakin ingin menghapus data banjar ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default DataBanjarAdmin;
|
||||
@@ -1,232 +0,0 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client';
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
NumberInput,
|
||||
Select
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import distribusiAgama from '../../../_state/kependudukan/distribusi-agama';
|
||||
|
||||
interface FormData {
|
||||
agama: string;
|
||||
jumlah: number;
|
||||
tahun: number;
|
||||
}
|
||||
|
||||
export default function EditDistribusiAgama() {
|
||||
const router = useRouter();
|
||||
const { id } = useParams() as { id: string };
|
||||
const stateDistribusiAgama = useProxy(distribusiAgama);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
agama: '',
|
||||
jumlah: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
});
|
||||
const [originalData, setOriginalData] = useState<FormData>({
|
||||
agama: '',
|
||||
jumlah: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
});
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const yearOptions = Array.from({ length: 10 }, (_, i) => ({
|
||||
value: String(currentYear - i),
|
||||
label: String(currentYear - i),
|
||||
}));
|
||||
|
||||
const agamaOptions = [
|
||||
{ value: 'HINDU', label: 'Hindu' },
|
||||
{ value: 'ISLAM', label: 'Islam' },
|
||||
{ value: 'KRISTEN', label: 'Kristen' },
|
||||
{ value: 'KRISTEN_PROTESTAN', label: 'Kristen Protestan' },
|
||||
{ value: 'KRISTEN_KATOLIK', label: 'Kristen Katolik' },
|
||||
{ value: 'BUDDHA', label: 'Buddha' },
|
||||
{ value: 'KONGHUCU', label: 'Konghucu' },
|
||||
{ value: 'LAINNYA', label: 'Lainnya' },
|
||||
];
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
formData.agama?.trim() !== '' &&
|
||||
formData.jumlah !== null &&
|
||||
formData.jumlah >= 0 &&
|
||||
formData.tahun !== null
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
stateDistribusiAgama.update.id = id;
|
||||
await stateDistribusiAgama.findUnique.load(id);
|
||||
|
||||
const data = stateDistribusiAgama.findUnique.data;
|
||||
if (data) {
|
||||
setFormData({
|
||||
agama: data.agama ?? '',
|
||||
jumlah: Number(data.jumlah ?? 0),
|
||||
tahun: Number(data.tahun ?? currentYear),
|
||||
});
|
||||
setOriginalData({
|
||||
agama: data.agama ?? '',
|
||||
jumlah: Number(data.jumlah ?? 0),
|
||||
tahun: Number(data.tahun ?? currentYear),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
toast.error('Gagal memuat data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(field: keyof FormData) =>
|
||||
(value: any) => {
|
||||
const val =
|
||||
field === 'jumlah' || field === 'tahun'
|
||||
? Number(value || 0)
|
||||
: value;
|
||||
|
||||
setFormData((prev) => ({ ...prev, [field]: val }));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleResetForm = () => {
|
||||
setFormData({
|
||||
agama: originalData.agama,
|
||||
jumlah: Number(originalData.jumlah),
|
||||
tahun: Number(originalData.tahun),
|
||||
});
|
||||
toast.info("Form dikembalikan ke data awal");
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
stateDistribusiAgama.update.id = id;
|
||||
stateDistribusiAgama.update.form = { ...formData };
|
||||
|
||||
await stateDistribusiAgama.update.submit();
|
||||
|
||||
toast.success('Data berhasil diperbarui');
|
||||
router.push('/admin/kependudukan/distribusi-agama');
|
||||
} catch (error) {
|
||||
console.error('Error updating data:', error);
|
||||
toast.error('Gagal memperbarui data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Distribusi Agama
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form Card */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Select
|
||||
label="Agama"
|
||||
placeholder="Pilih agama"
|
||||
data={agamaOptions}
|
||||
value={formData.agama}
|
||||
onChange={handleChange('agama')}
|
||||
required
|
||||
searchable
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Jumlah"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={formData.jumlah}
|
||||
onChange={handleChange('jumlah')}
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Tahun"
|
||||
placeholder="Pilih tahun"
|
||||
data={yearOptions}
|
||||
value={String(formData.tahun)}
|
||||
onChange={handleChange('tahun')}
|
||||
required
|
||||
/>
|
||||
|
||||
<Group justify="flex-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={handleResetForm}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
style={{
|
||||
background: !isFormValid() || isSubmitting
|
||||
? `linear-gradient(135deg, #cccccc, #eeeeee)`
|
||||
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,174 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client';
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
NumberInput,
|
||||
Select
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import distribusiAgama from '../../../_state/kependudukan/distribusi-agama';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
function CreateDistribusiAgama() {
|
||||
const stateDistribusiAgama = useProxy(distribusiAgama);
|
||||
const router = useRouter();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const agamaOptions = [
|
||||
{ value: 'HINDU', label: 'Hindu' },
|
||||
{ value: 'ISLAM', label: 'Islam' },
|
||||
{ value: 'KRISTEN', label: 'Kristen' },
|
||||
{ value: 'KRISTEN_PROTESTAN', label: 'Kristen Protestan' },
|
||||
{ value: 'KRISTEN_KATOLIK', label: 'Kristen Katolik' },
|
||||
{ value: 'BUDDHA', label: 'Buddha' },
|
||||
{ value: 'KONGHUCU', label: 'Konghucu' },
|
||||
{ value: 'LAINNYA', label: 'Lainnya' },
|
||||
];
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const yearOptions = Array.from({ length: 10 }, (_, i) => ({
|
||||
value: String(currentYear - i),
|
||||
label: String(currentYear - i),
|
||||
}));
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
stateDistribusiAgama.create.form.agama?.trim() !== '' &&
|
||||
stateDistribusiAgama.create.form.jumlah !== null &&
|
||||
stateDistribusiAgama.create.form.jumlah >= 0 &&
|
||||
stateDistribusiAgama.create.form.tahun !== null
|
||||
);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
stateDistribusiAgama.create.form = {
|
||||
agama: '',
|
||||
jumlah: 0,
|
||||
tahun: currentYear,
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const id = await stateDistribusiAgama.create.create();
|
||||
if (id) {
|
||||
resetForm();
|
||||
router.push('/admin/kependudukan/distribusi-agama');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating distribusi agama:', error);
|
||||
toast.error('Terjadi kesalahan saat menambah distribusi agama');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Distribusi Agama
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Select
|
||||
label="Agama"
|
||||
placeholder="Pilih agama"
|
||||
data={agamaOptions}
|
||||
value={stateDistribusiAgama.create.form.agama}
|
||||
onChange={(val) => {
|
||||
stateDistribusiAgama.create.form.agama = val || '';
|
||||
}}
|
||||
required
|
||||
searchable
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Jumlah"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stateDistribusiAgama.create.form.jumlah}
|
||||
onChange={(val) => {
|
||||
stateDistribusiAgama.create.form.jumlah = Number(val || 0);
|
||||
}}
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Tahun"
|
||||
placeholder="Pilih tahun"
|
||||
data={yearOptions}
|
||||
value={String(stateDistribusiAgama.create.form.tahun)}
|
||||
onChange={(val) => {
|
||||
stateDistribusiAgama.create.form.tahun = Number(val || currentYear);
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={resetForm}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
style={{
|
||||
background: !isFormValid() || isSubmitting
|
||||
? `linear-gradient(135deg, #cccccc, #eeeeee)`
|
||||
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateDistribusiAgama;
|
||||
@@ -1,283 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Flex,
|
||||
Group,
|
||||
Pagination,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Table,
|
||||
TableTbody,
|
||||
TableTd,
|
||||
TableTh,
|
||||
TableThead,
|
||||
TableTr,
|
||||
Text,
|
||||
Title
|
||||
} from '@mantine/core';
|
||||
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../_com/header';
|
||||
import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
|
||||
import distribusiAgama from '../../_state/kependudukan/distribusi-agama';
|
||||
|
||||
function DistribusiAgamaAdmin() {
|
||||
const [search, setSearch] = useState('');
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Distribusi Agama'
|
||||
placeholder='Cari agama...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListDistribusiAgama search={search} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ListDistribusiAgama({ search }: { search: string }) {
|
||||
type DistribusiAgamaType = {
|
||||
id: string;
|
||||
agama: string;
|
||||
jumlah: number;
|
||||
tahun: number;
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
const stateDistribusiAgama = useProxy(distribusiAgama);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load,
|
||||
} = stateDistribusiAgama.findMany;
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedId) {
|
||||
stateDistribusiAgama.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
}
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 10, debouncedSearch);
|
||||
}, [page, debouncedSearch]);
|
||||
|
||||
const filteredData = data || [];
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton height={600} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={{ base: 'sm', md: 'md' }}>
|
||||
<Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
|
||||
<Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
|
||||
<Title order={4} lh={{ base: 1.2, md: 1.15 }}>
|
||||
List Distribusi Agama
|
||||
</Title>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/kependudukan/distribusi-agama/create')}
|
||||
fz={{ base: 'sm', md: 'md' }}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* Desktop Table */}
|
||||
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
|
||||
<Table
|
||||
highlightOnHover
|
||||
miw={0}
|
||||
style={{
|
||||
tableLayout: 'fixed',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh style={{ width: '40%' }}>Agama</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Jumlah</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Tahun</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Edit</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Hapus</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item: DistribusiAgamaType) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.agama}</TableTd>
|
||||
<TableTd>{item.jumlah.toLocaleString('id-ID')}</TableTd>
|
||||
<TableTd>{item.tahun}</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/kependudukan/distribusi-agama/${item.id}`)
|
||||
}
|
||||
fz="sm"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconEdit size={16} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
disabled={stateDistribusiAgama.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
fz="sm"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconTrash size={16} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={5}>
|
||||
<Center py={20}>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data distribusi agama yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
|
||||
{/* Mobile Card */}
|
||||
<Box hiddenFrom="md">
|
||||
<Stack gap="xs">
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item: DistribusiAgamaType) => (
|
||||
<Paper key={item.id} withBorder p="sm" radius="sm">
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Agama
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.agama}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Jumlah
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.jumlah.toLocaleString('id-ID')}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Tahun
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.tahun}
|
||||
</Text>
|
||||
</Box>
|
||||
<Group justify="flex-end" gap="xs">
|
||||
<Button
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/kependudukan/distribusi-agama/${item.id}`)
|
||||
}
|
||||
fz="xs"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconEdit size={14} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
disabled={stateDistribusiAgama.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
fz="xs"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))
|
||||
) : (
|
||||
<Center py={20}>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data distribusi agama yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Pagination */}
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10, search);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleDelete}
|
||||
text="Apakah anda yakin ingin menghapus data distribusi agama ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default DistribusiAgamaAdmin;
|
||||
@@ -1,232 +0,0 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client';
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
Stack,
|
||||
Title,
|
||||
NumberInput,
|
||||
Select
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import distribusiUmur from '../../../_state/kependudukan/distribusi-umur';
|
||||
|
||||
interface FormData {
|
||||
rentangUmur: string;
|
||||
jumlah: number;
|
||||
tahun: number;
|
||||
}
|
||||
|
||||
export default function EditDistribusiUmur() {
|
||||
const router = useRouter();
|
||||
const { id } = useParams() as { id: string };
|
||||
const stateDistribusiUmur = useProxy(distribusiUmur);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
rentangUmur: '',
|
||||
jumlah: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
});
|
||||
const [originalData, setOriginalData] = useState<FormData>({
|
||||
rentangUmur: '',
|
||||
jumlah: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
});
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const yearOptions = Array.from({ length: 10 }, (_, i) => ({
|
||||
value: String(currentYear - i),
|
||||
label: String(currentYear - i),
|
||||
}));
|
||||
|
||||
const rentangUmurOptions = [
|
||||
{ value: '0-5', label: '0-5 Tahun' },
|
||||
{ value: '6-12', label: '6-12 Tahun' },
|
||||
{ value: '13-17', label: '13-17 Tahun' },
|
||||
{ value: '18-25', label: '18-25 Tahun' },
|
||||
{ value: '26-35', label: '26-35 Tahun' },
|
||||
{ value: '36-45', label: '36-45 Tahun' },
|
||||
{ value: '46-55', label: '46-55 Tahun' },
|
||||
{ value: '56-65', label: '56-65 Tahun' },
|
||||
{ value: '65+', label: '65+ Tahun' },
|
||||
];
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
formData.rentangUmur?.trim() !== '' &&
|
||||
formData.jumlah !== null &&
|
||||
formData.jumlah >= 0 &&
|
||||
formData.tahun !== null
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
stateDistribusiUmur.update.id = id;
|
||||
await stateDistribusiUmur.findUnique.load(id);
|
||||
|
||||
const data = stateDistribusiUmur.findUnique.data;
|
||||
if (data) {
|
||||
setFormData({
|
||||
rentangUmur: data.rentangUmur ?? '',
|
||||
jumlah: Number(data.jumlah ?? 0),
|
||||
tahun: Number(data.tahun ?? currentYear),
|
||||
});
|
||||
setOriginalData({
|
||||
rentangUmur: data.rentangUmur ?? '',
|
||||
jumlah: Number(data.jumlah ?? 0),
|
||||
tahun: Number(data.tahun ?? currentYear),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
toast.error('Gagal memuat data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(field: keyof FormData) =>
|
||||
(value: any) => {
|
||||
const val =
|
||||
field === 'jumlah' || field === 'tahun'
|
||||
? Number(value || 0)
|
||||
: value;
|
||||
|
||||
setFormData((prev) => ({ ...prev, [field]: val }));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleResetForm = () => {
|
||||
setFormData({
|
||||
rentangUmur: originalData.rentangUmur,
|
||||
jumlah: Number(originalData.jumlah),
|
||||
tahun: Number(originalData.tahun),
|
||||
});
|
||||
toast.info("Form dikembalikan ke data awal");
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
stateDistribusiUmur.update.id = id;
|
||||
stateDistribusiUmur.update.form = { ...formData };
|
||||
|
||||
await stateDistribusiUmur.update.submit();
|
||||
|
||||
toast.success('Data berhasil diperbarui');
|
||||
router.push('/admin/kependudukan/distribusi-umur');
|
||||
} catch (error) {
|
||||
console.error('Error updating data:', error);
|
||||
toast.error('Gagal memperbarui data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Distribusi Umur
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form Card */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Select
|
||||
label="Rentang Umur"
|
||||
placeholder="Pilih rentang umur"
|
||||
data={rentangUmurOptions}
|
||||
value={formData.rentangUmur}
|
||||
onChange={handleChange('rentangUmur')}
|
||||
required
|
||||
searchable
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Jumlah"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={formData.jumlah}
|
||||
onChange={handleChange('jumlah')}
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Tahun"
|
||||
placeholder="Pilih tahun"
|
||||
data={yearOptions}
|
||||
value={String(formData.tahun)}
|
||||
onChange={handleChange('tahun')}
|
||||
required
|
||||
/>
|
||||
|
||||
<Group justify="flex-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={handleResetForm}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
style={{
|
||||
background: !isFormValid() || isSubmitting
|
||||
? `linear-gradient(135deg, #cccccc, #eeeeee)`
|
||||
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,174 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client';
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
Stack,
|
||||
Title,
|
||||
NumberInput,
|
||||
Select
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import distribusiUmur from '../../../_state/kependudukan/distribusi-umur';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
function CreateDistribusiUmur() {
|
||||
const stateDistribusiUmur = useProxy(distribusiUmur);
|
||||
const router = useRouter();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const rentangUmurOptions = [
|
||||
{ value: '0-5', label: '0-5 Tahun' },
|
||||
{ value: '6-12', label: '6-12 Tahun' },
|
||||
{ value: '13-17', label: '13-17 Tahun' },
|
||||
{ value: '18-25', label: '18-25 Tahun' },
|
||||
{ value: '26-35', label: '26-35 Tahun' },
|
||||
{ value: '36-45', label: '36-45 Tahun' },
|
||||
{ value: '46-55', label: '46-55 Tahun' },
|
||||
{ value: '56-65', label: '56-65 Tahun' },
|
||||
{ value: '65+', label: '65+ Tahun' },
|
||||
];
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const yearOptions = Array.from({ length: 10 }, (_, i) => ({
|
||||
value: String(currentYear - i),
|
||||
label: String(currentYear - i),
|
||||
}));
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
stateDistribusiUmur.create.form.rentangUmur?.trim() !== '' &&
|
||||
stateDistribusiUmur.create.form.jumlah !== null &&
|
||||
stateDistribusiUmur.create.form.jumlah >= 0 &&
|
||||
stateDistribusiUmur.create.form.tahun !== null
|
||||
);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
stateDistribusiUmur.create.form = {
|
||||
rentangUmur: '',
|
||||
jumlah: 0,
|
||||
tahun: currentYear,
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const id = await stateDistribusiUmur.create.create();
|
||||
if (id) {
|
||||
resetForm();
|
||||
router.push('/admin/kependudukan/distribusi-umur');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating distribusi umur:', error);
|
||||
toast.error('Terjadi kesalahan saat menambah distribusi umur');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Distribusi Umur
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Select
|
||||
label="Rentang Umur"
|
||||
placeholder="Pilih rentang umur"
|
||||
data={rentangUmurOptions}
|
||||
value={stateDistribusiUmur.create.form.rentangUmur}
|
||||
onChange={(val) => {
|
||||
stateDistribusiUmur.create.form.rentangUmur = val || '';
|
||||
}}
|
||||
required
|
||||
searchable
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Jumlah"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stateDistribusiUmur.create.form.jumlah}
|
||||
onChange={(val) => {
|
||||
stateDistribusiUmur.create.form.jumlah = Number(val || 0);
|
||||
}}
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Tahun"
|
||||
placeholder="Pilih tahun"
|
||||
data={yearOptions}
|
||||
value={String(stateDistribusiUmur.create.form.tahun)}
|
||||
onChange={(val) => {
|
||||
stateDistribusiUmur.create.form.tahun = Number(val || currentYear);
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={resetForm}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
style={{
|
||||
background: !isFormValid() || isSubmitting
|
||||
? `linear-gradient(135deg, #cccccc, #eeeeee)`
|
||||
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateDistribusiUmur;
|
||||
@@ -1,284 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Flex,
|
||||
Group,
|
||||
Pagination,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Table,
|
||||
TableTbody,
|
||||
TableTd,
|
||||
TableTh,
|
||||
TableThead,
|
||||
TableTr,
|
||||
Text,
|
||||
Title
|
||||
} from '@mantine/core';
|
||||
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../_com/header';
|
||||
import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
|
||||
import distribusiUmur from '../../_state/kependudukan/distribusi-umur';
|
||||
|
||||
function DistribusiUmurAdmin() {
|
||||
const [search, setSearch] = useState('');
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Distribusi Umur'
|
||||
placeholder='Cari rentang umur...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListDistribusiUmur search={search} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ListDistribusiUmur({ search }: { search: string }) {
|
||||
type DistribusiUmurType = {
|
||||
id: string;
|
||||
rentangUmur: string;
|
||||
jumlah: number;
|
||||
tahun: number;
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
const stateDistribusiUmur = useProxy(distribusiUmur);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load,
|
||||
} = stateDistribusiUmur.findMany;
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedId) {
|
||||
stateDistribusiUmur.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
}
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 10, debouncedSearch);
|
||||
}, [page, debouncedSearch]);
|
||||
|
||||
const filteredData = data || [];
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton height={600} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={{ base: 'sm', md: 'md' }}>
|
||||
<Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
|
||||
<Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
|
||||
<Title order={4} lh={{ base: 1.2, md: 1.15 }}>
|
||||
List Distribusi Umur
|
||||
</Title>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/kependudukan/distribusi-umur/create')}
|
||||
fz={{ base: 'sm', md: 'md' }}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* Desktop Table */}
|
||||
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
|
||||
<Table
|
||||
highlightOnHover
|
||||
miw={0}
|
||||
style={{
|
||||
tableLayout: 'fixed',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh style={{ width: '40%' }}>Rentang Umur</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Jumlah</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Tahun</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Edit</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Hapus</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item: DistribusiUmurType) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.rentangUmur}</TableTd>
|
||||
<TableTd>{item.jumlah.toLocaleString('id-ID')}</TableTd>
|
||||
<TableTd>{item.tahun}</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/kependudukan/distribusi-umur/${item.id}`)
|
||||
}
|
||||
fz="sm"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconEdit size={16} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
disabled={stateDistribusiUmur.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
fz="sm"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconTrash size={16} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={5}>
|
||||
<Center py={20}>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data distribusi umur yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
|
||||
{/* Mobile Card */}
|
||||
<Box hiddenFrom="md">
|
||||
<Stack gap="xs">
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item: DistribusiUmurType) => (
|
||||
<Paper key={item.id} withBorder p="sm" radius="sm">
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Rentang Umur
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.rentangUmur}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Jumlah
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.jumlah.toLocaleString('id-ID')}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Tahun
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.tahun}
|
||||
</Text>
|
||||
</Box>
|
||||
<Group justify="flex-end" gap="xs">
|
||||
<Button
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/kependudukan/distribusi-umur/${item.id}`)
|
||||
}
|
||||
fz="xs"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconEdit size={14} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
disabled={stateDistribusiUmur.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
fz="xs"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))
|
||||
) : (
|
||||
<Center py={20}>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data distribusi umur yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Pagination */}
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10, search);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleDelete}
|
||||
text="Apakah anda yakin ingin menghapus data distribusi umur ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default DistribusiUmurAdmin;
|
||||
@@ -1,267 +0,0 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client';
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
Stack,
|
||||
Title,
|
||||
TextInput,
|
||||
Select,
|
||||
Textarea
|
||||
} from '@mantine/core';
|
||||
import { DatePickerInput } from '@mantine/dates';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import migrasiPenduduk from '../../../_state/kependudukan/migrasi-penduduk';
|
||||
|
||||
interface FormData {
|
||||
jenis: string;
|
||||
nama: string;
|
||||
tanggal: string;
|
||||
asalTujuan: string;
|
||||
alasan: string;
|
||||
jenisKelamin: string;
|
||||
}
|
||||
|
||||
export default function EditMigrasiPenduduk() {
|
||||
const router = useRouter();
|
||||
const { id } = useParams() as { id: string };
|
||||
const stateMigrasiPenduduk = useProxy(migrasiPenduduk);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
jenis: '',
|
||||
nama: '',
|
||||
tanggal: '',
|
||||
asalTujuan: '',
|
||||
alasan: '',
|
||||
jenisKelamin: '',
|
||||
});
|
||||
const [originalData, setOriginalData] = useState<FormData>({
|
||||
jenis: '',
|
||||
nama: '',
|
||||
tanggal: '',
|
||||
asalTujuan: '',
|
||||
alasan: '',
|
||||
jenisKelamin: '',
|
||||
});
|
||||
|
||||
const jenisOptions = [
|
||||
{ value: 'MASUK', label: 'Masuk' },
|
||||
{ value: 'KELUAR', label: 'Keluar' },
|
||||
];
|
||||
|
||||
const jenisKelaminOptions = [
|
||||
{ value: 'L', label: 'Laki-laki' },
|
||||
{ value: 'P', label: 'Perempuan' },
|
||||
];
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
formData.jenis?.trim() !== '' &&
|
||||
formData.nama?.trim() !== '' &&
|
||||
formData.tanggal?.trim() !== '' &&
|
||||
formData.asalTujuan?.trim() !== ''
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
stateMigrasiPenduduk.update.id = id;
|
||||
await stateMigrasiPenduduk.findUnique.load(id);
|
||||
|
||||
const data = stateMigrasiPenduduk.findUnique.data;
|
||||
if (data) {
|
||||
setFormData({
|
||||
jenis: data.jenis ?? '',
|
||||
nama: data.nama ?? '',
|
||||
tanggal: data.tanggal ?? '',
|
||||
asalTujuan: data.asalTujuan ?? '',
|
||||
alasan: data.alasan ?? '',
|
||||
jenisKelamin: data.jenisKelamin ?? '',
|
||||
});
|
||||
setOriginalData({
|
||||
jenis: data.jenis ?? '',
|
||||
nama: data.nama ?? '',
|
||||
tanggal: data.tanggal ?? '',
|
||||
asalTujuan: data.asalTujuan ?? '',
|
||||
alasan: data.alasan ?? '',
|
||||
jenisKelamin: data.jenisKelamin ?? '',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
toast.error('Gagal memuat data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(field: keyof FormData) =>
|
||||
(value: any) => {
|
||||
const val = value || '';
|
||||
setFormData((prev) => ({ ...prev, [field]: val }));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleResetForm = () => {
|
||||
setFormData({
|
||||
jenis: originalData.jenis,
|
||||
nama: originalData.nama,
|
||||
tanggal: originalData.tanggal,
|
||||
asalTujuan: originalData.asalTujuan,
|
||||
alasan: originalData.alasan,
|
||||
jenisKelamin: originalData.jenisKelamin,
|
||||
});
|
||||
toast.info("Form dikembalikan ke data awal");
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
stateMigrasiPenduduk.update.id = id;
|
||||
stateMigrasiPenduduk.update.form = { ...formData };
|
||||
|
||||
await stateMigrasiPenduduk.update.submit();
|
||||
|
||||
toast.success('Data berhasil diperbarui');
|
||||
router.push('/admin/kependudukan/migrasi-penduduk');
|
||||
} catch (error) {
|
||||
console.error('Error updating data:', error);
|
||||
toast.error('Gagal memperbarui data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Migrasi Penduduk
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form Card */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Select
|
||||
label="Jenis Migrasi"
|
||||
placeholder="Pilih jenis migrasi"
|
||||
data={jenisOptions}
|
||||
value={formData.jenis}
|
||||
onChange={handleChange('jenis')}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Nama"
|
||||
placeholder="Masukkan nama lengkap"
|
||||
value={formData.nama}
|
||||
onChange={handleChange('nama')}
|
||||
required
|
||||
/>
|
||||
|
||||
<DatePickerInput
|
||||
label="Tanggal"
|
||||
placeholder="Pilih tanggal"
|
||||
value={formData.tanggal ? new Date(formData.tanggal) : null}
|
||||
onChange={(val: string | null) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
tanggal: val || '',
|
||||
}));
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label={formData.jenis === 'MASUK' ? 'Asal' : 'Tujuan'}
|
||||
placeholder={formData.jenis === 'MASUK' ? 'Masukkan asal' : 'Masukkan tujuan'}
|
||||
value={formData.asalTujuan}
|
||||
onChange={handleChange('asalTujuan')}
|
||||
required
|
||||
/>
|
||||
|
||||
<Textarea
|
||||
label="Alasan"
|
||||
placeholder="Masukkan alasan (opsional)"
|
||||
value={formData.alasan}
|
||||
onChange={handleChange('alasan')}
|
||||
autosize
|
||||
minRows={2}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Jenis Kelamin"
|
||||
placeholder="Pilih jenis kelamin"
|
||||
data={jenisKelaminOptions}
|
||||
value={formData.jenisKelamin}
|
||||
onChange={handleChange('jenisKelamin')}
|
||||
/>
|
||||
|
||||
<Group justify="flex-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={handleResetForm}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
style={{
|
||||
background: !isFormValid() || isSubmitting
|
||||
? `linear-gradient(135deg, #cccccc, #eeeeee)`
|
||||
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,199 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client';
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
Stack,
|
||||
Title,
|
||||
TextInput,
|
||||
Select,
|
||||
Textarea
|
||||
} from '@mantine/core';
|
||||
import { DatePickerInput } from '@mantine/dates';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import migrasiPenduduk from '../../../_state/kependudukan/migrasi-penduduk';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
function CreateMigrasiPenduduk() {
|
||||
const stateMigrasiPenduduk = useProxy(migrasiPenduduk);
|
||||
const router = useRouter();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const jenisOptions = [
|
||||
{ value: 'MASUK', label: 'Masuk' },
|
||||
{ value: 'KELUAR', label: 'Keluar' },
|
||||
];
|
||||
|
||||
const jenisKelaminOptions = [
|
||||
{ value: 'L', label: 'Laki-laki' },
|
||||
{ value: 'P', label: 'Perempuan' },
|
||||
];
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
stateMigrasiPenduduk.create.form.jenis?.trim() !== '' &&
|
||||
stateMigrasiPenduduk.create.form.nama?.trim() !== '' &&
|
||||
stateMigrasiPenduduk.create.form.tanggal?.trim() !== '' &&
|
||||
stateMigrasiPenduduk.create.form.asalTujuan?.trim() !== ''
|
||||
);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
stateMigrasiPenduduk.create.form = {
|
||||
jenis: '',
|
||||
nama: '',
|
||||
tanggal: '',
|
||||
asalTujuan: '',
|
||||
alasan: '',
|
||||
jenisKelamin: '',
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const id = await stateMigrasiPenduduk.create.create();
|
||||
if (id) {
|
||||
resetForm();
|
||||
router.push('/admin/kependudukan/migrasi-penduduk');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating migrasi penduduk:', error);
|
||||
toast.error('Terjadi kesalahan saat menambah data migrasi penduduk');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Migrasi Penduduk
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Select
|
||||
label="Jenis Migrasi"
|
||||
placeholder="Pilih jenis migrasi"
|
||||
data={jenisOptions}
|
||||
value={stateMigrasiPenduduk.create.form.jenis}
|
||||
onChange={(val) => {
|
||||
stateMigrasiPenduduk.create.form.jenis = val || '';
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Nama"
|
||||
placeholder="Masukkan nama lengkap"
|
||||
value={stateMigrasiPenduduk.create.form.nama}
|
||||
onChange={(e) => {
|
||||
stateMigrasiPenduduk.create.form.nama = e.currentTarget.value;
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
<DatePickerInput
|
||||
label="Tanggal"
|
||||
placeholder="Pilih tanggal"
|
||||
value={stateMigrasiPenduduk.create.form.tanggal ? new Date(stateMigrasiPenduduk.create.form.tanggal) : null}
|
||||
onChange={(val: string | null) => {
|
||||
stateMigrasiPenduduk.create.form.tanggal = val || '';
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label={stateMigrasiPenduduk.create.form.jenis === 'MASUK' ? 'Asal' : 'Tujuan'}
|
||||
placeholder={stateMigrasiPenduduk.create.form.jenis === 'MASUK' ? 'Masukkan asal' : 'Masukkan tujuan'}
|
||||
value={stateMigrasiPenduduk.create.form.asalTujuan}
|
||||
onChange={(e) => {
|
||||
stateMigrasiPenduduk.create.form.asalTujuan = e.currentTarget.value;
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
<Textarea
|
||||
label="Alasan"
|
||||
placeholder="Masukkan alasan (opsional)"
|
||||
value={stateMigrasiPenduduk.create.form.alasan}
|
||||
onChange={(e) => {
|
||||
stateMigrasiPenduduk.create.form.alasan = e.currentTarget.value;
|
||||
}}
|
||||
autosize
|
||||
minRows={2}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Jenis Kelamin"
|
||||
placeholder="Pilih jenis kelamin"
|
||||
data={jenisKelaminOptions}
|
||||
value={stateMigrasiPenduduk.create.form.jenisKelamin}
|
||||
onChange={(val) => {
|
||||
stateMigrasiPenduduk.create.form.jenisKelamin = val || '';
|
||||
}}
|
||||
/>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={resetForm}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
style={{
|
||||
background: !isFormValid() || isSubmitting
|
||||
? `linear-gradient(135deg, #cccccc, #eeeeee)`
|
||||
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateMigrasiPenduduk;
|
||||
@@ -1,339 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Pagination,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Table,
|
||||
TableTbody,
|
||||
TableTd,
|
||||
TableTh,
|
||||
TableThead,
|
||||
TableTr,
|
||||
Text,
|
||||
Title
|
||||
} from '@mantine/core';
|
||||
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../_com/header';
|
||||
import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
|
||||
import migrasiPenduduk from '../../_state/kependudukan/migrasi-penduduk';
|
||||
|
||||
function MigrasiPendudukAdmin() {
|
||||
const [search, setSearch] = useState('');
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Migrasi Penduduk'
|
||||
placeholder='Cari nama...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListMigrasiPenduduk search={search} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ListMigrasiPenduduk({ search }: { search: string }) {
|
||||
type MigrasiPendudukType = {
|
||||
id: string;
|
||||
jenis: string;
|
||||
nama: string;
|
||||
tanggal: string;
|
||||
asalTujuan: string;
|
||||
alasan: string | null;
|
||||
jenisKelamin: string | null;
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
const stateMigrasiPenduduk = useProxy(migrasiPenduduk);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load,
|
||||
} = stateMigrasiPenduduk.findMany;
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedId) {
|
||||
stateMigrasiPenduduk.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
}
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 10, debouncedSearch);
|
||||
}, [page, debouncedSearch]);
|
||||
|
||||
const filteredData = data || [];
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton height={600} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
const formatTanggal = (tanggal: string) => {
|
||||
try {
|
||||
return new Date(tanggal).toLocaleDateString('id-ID', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
});
|
||||
} catch {
|
||||
return tanggal;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box py={{ base: 'sm', md: 'md' }}>
|
||||
<Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
|
||||
<Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
|
||||
<Title order={4} lh={{ base: 1.2, md: 1.15 }}>
|
||||
List Migrasi Penduduk
|
||||
</Title>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/kependudukan/migrasi-penduduk/create')}
|
||||
fz={{ base: 'sm', md: 'md' }}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* Desktop Table */}
|
||||
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
|
||||
<Table
|
||||
highlightOnHover
|
||||
miw={0}
|
||||
style={{
|
||||
tableLayout: 'fixed',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh style={{ width: '10%' }}>Jenis</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Nama</TableTh>
|
||||
<TableTh style={{ width: '12%' }}>Tanggal</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Asal/Tujuan</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>L/P</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Edit</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Hapus</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item: MigrasiPendudukType) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Text
|
||||
fz="sm"
|
||||
fw={500}
|
||||
c={item.jenis === 'MASUK' ? 'green' : 'red'}
|
||||
>
|
||||
{item.jenis}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>{item.nama}</TableTd>
|
||||
<TableTd>{formatTanggal(item.tanggal)}</TableTd>
|
||||
<TableTd>{item.asalTujuan}</TableTd>
|
||||
<TableTd>{item.jenisKelamin || '-'}</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/kependudukan/migrasi-penduduk/${item.id}`)
|
||||
}
|
||||
fz="sm"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconEdit size={16} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
disabled={stateMigrasiPenduduk.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
fz="sm"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconTrash size={16} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={7}>
|
||||
<Center py={20}>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data migrasi penduduk yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
|
||||
{/* Mobile Card */}
|
||||
<Box hiddenFrom="md">
|
||||
<Stack gap="xs">
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item: MigrasiPendudukType) => (
|
||||
<Paper key={item.id} withBorder p="sm" radius="sm">
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Jenis Migrasi
|
||||
</Text>
|
||||
<Text
|
||||
fz="sm"
|
||||
fw={500}
|
||||
c={item.jenis === 'MASUK' ? 'green' : 'red'}
|
||||
>
|
||||
{item.jenis}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Nama
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.nama}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Tanggal
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{formatTanggal(item.tanggal)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Asal/Tujuan
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.asalTujuan}
|
||||
</Text>
|
||||
</Box>
|
||||
{item.alasan && (
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Alasan
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.alasan}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>
|
||||
Jenis Kelamin
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{item.jenisKelamin || '-'}
|
||||
</Text>
|
||||
</Box>
|
||||
<Group justify="flex-end" gap="xs">
|
||||
<Button
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/kependudukan/migrasi-penduduk/${item.id}`)
|
||||
}
|
||||
fz="xs"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconEdit size={14} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
disabled={stateMigrasiPenduduk.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
fz="xs"
|
||||
px="xs"
|
||||
py="xs"
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))
|
||||
) : (
|
||||
<Center py={20}>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data migrasi penduduk yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Pagination */}
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10, search);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleDelete}
|
||||
text="Apakah anda yakin ingin menghapus data migrasi penduduk ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default MigrasiPendudukAdmin;
|
||||
@@ -1,429 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client';
|
||||
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
NumberInput,
|
||||
Title,
|
||||
Table,
|
||||
TableThead,
|
||||
TableTbody,
|
||||
TableTr,
|
||||
TableTh,
|
||||
TableTd,
|
||||
ActionIcon,
|
||||
Badge,
|
||||
Modal,
|
||||
Divider,
|
||||
Center,
|
||||
} from '@mantine/core';
|
||||
import {
|
||||
IconPlus,
|
||||
IconEdit,
|
||||
IconTrash,
|
||||
IconCalendar,
|
||||
IconCoin,
|
||||
} from '@tabler/icons-react';
|
||||
|
||||
interface RealisasiManagerProps {
|
||||
itemId: string;
|
||||
itemKode: string;
|
||||
itemUraian: string;
|
||||
itemAnggaran: number;
|
||||
itemTotalRealisasi: number;
|
||||
itemPersentase: number;
|
||||
realisasiItems: any[];
|
||||
}
|
||||
|
||||
export default function RealisasiManager({
|
||||
itemId,
|
||||
itemKode,
|
||||
itemUraian,
|
||||
itemAnggaran,
|
||||
itemTotalRealisasi,
|
||||
itemPersentase,
|
||||
realisasiItems,
|
||||
}: RealisasiManagerProps) {
|
||||
const state = useProxy(apbdes);
|
||||
const [modalOpened, setModalOpened] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Form state
|
||||
const [formData, setFormData] = useState({
|
||||
kode: '',
|
||||
jumlah: 0,
|
||||
tanggal: new Date().toISOString().split('T')[0], // YYYY-MM-DD format for input
|
||||
keterangan: '',
|
||||
});
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
kode: '',
|
||||
jumlah: 0,
|
||||
tanggal: new Date().toISOString().split('T')[0],
|
||||
keterangan: '',
|
||||
});
|
||||
setEditingId(null);
|
||||
};
|
||||
|
||||
const handleOpenCreate = () => {
|
||||
resetForm();
|
||||
setModalOpened(true);
|
||||
};
|
||||
|
||||
const handleOpenEdit = (realisasi: any) => {
|
||||
const tanggal = new Date(realisasi.tanggal);
|
||||
const tanggalStr = tanggal.toISOString().split('T')[0]; // YYYY-MM-DD
|
||||
|
||||
setFormData({
|
||||
kode: realisasi.kode || '',
|
||||
jumlah: realisasi.jumlah,
|
||||
tanggal: tanggalStr,
|
||||
keterangan: realisasi.keterangan || '',
|
||||
});
|
||||
setEditingId(realisasi.id);
|
||||
setModalOpened(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (formData.jumlah <= 0) {
|
||||
return toast.warn('Jumlah realisasi harus lebih dari 0');
|
||||
}
|
||||
|
||||
if (!formData.kode || formData.kode.trim() === '') {
|
||||
return toast.warn('Kode realisasi wajib diisi');
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
if (editingId) {
|
||||
// Update existing realisasi
|
||||
const success = await state.realisasi.update(editingId, {
|
||||
kode: formData.kode,
|
||||
jumlah: formData.jumlah,
|
||||
tanggal: new Date(formData.tanggal).toISOString(),
|
||||
keterangan: formData.keterangan,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
toast.success('Realisasi berhasil diperbarui');
|
||||
}
|
||||
} else {
|
||||
// Create new realisasi
|
||||
const success = await state.realisasi.create(itemId, {
|
||||
kode: formData.kode,
|
||||
jumlah: formData.jumlah,
|
||||
tanggal: new Date(formData.tanggal).toISOString(),
|
||||
keterangan: formData.keterangan,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
toast.success('Realisasi berhasil ditambahkan');
|
||||
}
|
||||
}
|
||||
|
||||
setModalOpened(false);
|
||||
resetForm();
|
||||
} catch (error: any) {
|
||||
console.error('Error saving realisasi:', error);
|
||||
toast.error(error?.message || 'Gagal menyimpan realisasi');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (realisasiId: string) => {
|
||||
if (!confirm('Apakah Anda yakin ingin menghapus realisasi ini?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const success = await state.realisasi.delete(realisasiId);
|
||||
|
||||
if (success) {
|
||||
toast.success('Realisasi berhasil dihapus');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Error deleting realisasi:', error);
|
||||
toast.error(error?.message || 'Gagal menghapus realisasi');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatRupiah = (amount: number) => {
|
||||
return new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('id-ID', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const getSisaAnggaran = () => {
|
||||
return itemAnggaran - itemTotalRealisasi;
|
||||
};
|
||||
|
||||
const getPersentaseColor = (persen: number) => {
|
||||
if (persen >= 100) return 'teal';
|
||||
if (persen >= 80) return 'blue';
|
||||
if (persen >= 60) return 'yellow';
|
||||
return 'red';
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper withBorder p="md" radius="md" mt="md">
|
||||
{/* Header */}
|
||||
<Group justify="space-between" mb="md">
|
||||
<Stack gap="xs">
|
||||
<Title order={6}>
|
||||
{itemKode} - {itemUraian}
|
||||
</Title>
|
||||
<Text fz="sm" c="dimmed">
|
||||
Kelola realisasi untuk item ini
|
||||
</Text>
|
||||
</Stack>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
onClick={handleOpenCreate}
|
||||
color="blue"
|
||||
variant="light"
|
||||
radius="md"
|
||||
>
|
||||
Tambah Realisasi
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* Summary Cards */}
|
||||
<Group grow mb="md">
|
||||
<Paper withBorder p="md" radius="md" bg="blue.0">
|
||||
<Text fz="xs" c="blue.9" fw={600}>
|
||||
ANGGARAN
|
||||
</Text>
|
||||
<Text fz="lg" c="blue.9" fw={700}>
|
||||
{formatRupiah(itemAnggaran)}
|
||||
</Text>
|
||||
</Paper>
|
||||
|
||||
<Paper withBorder p="md" radius="md" bg="teal.0">
|
||||
<Text fz="xs" c="teal.9" fw={600}>
|
||||
TOTAL REALISASI
|
||||
</Text>
|
||||
<Text fz="lg" c="teal.9" fw={700}>
|
||||
{formatRupiah(itemTotalRealisasi)}
|
||||
</Text>
|
||||
</Paper>
|
||||
|
||||
<Paper withBorder p="md" radius="md" bg={getSisaAnggaran() >= 0 ? 'green.0' : 'red.0'}>
|
||||
<Text fz="xs" c={getSisaAnggaran() >= 0 ? 'green.9' : 'red.9'} fw={600}>
|
||||
SISA ANGGARAN
|
||||
</Text>
|
||||
<Text fz="lg" c={getSisaAnggaran() >= 0 ? 'green.9' : 'red.9'} fw={700}>
|
||||
{formatRupiah(getSisaAnggaran())}
|
||||
</Text>
|
||||
</Paper>
|
||||
|
||||
<Paper withBorder p="md" radius="md" bg={getPersentaseColor(itemPersentase) + '.0'}>
|
||||
<Text fz="xs" c={getPersentaseColor(itemPersentase) + '.9'} fw={600}>
|
||||
PERSENTASE
|
||||
</Text>
|
||||
<Text fz="lg" c={getPersentaseColor(itemPersentase) + '.9'} fw={700}>
|
||||
{itemPersentase.toFixed(2)}%
|
||||
</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
|
||||
{/* Realisasi List */}
|
||||
{realisasiItems && realisasiItems.length > 0 ? (
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} mb="xs">
|
||||
Daftar Realisasi ({realisasiItems.length})
|
||||
</Text>
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table striped highlightOnHover fz="sm">
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Kode</TableTh>
|
||||
<TableTh>Tanggal</TableTh>
|
||||
<TableTh>Uraian</TableTh>
|
||||
<TableTh ta="right">Jumlah</TableTh>
|
||||
<TableTh ta="center">Aksi</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{realisasiItems.map((realisasi) => (
|
||||
<TableTr key={realisasi.id}>
|
||||
<TableTd>
|
||||
<Badge variant="light" color="blue" size="sm">
|
||||
{realisasi.kode || '-'}
|
||||
</Badge>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={16} />
|
||||
<Text fz="sm">{formatDate(realisasi.tanggal)}</Text>
|
||||
</Group>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text fz="sm">{realisasi.keterangan || '-'}</Text>
|
||||
</TableTd>
|
||||
<TableTd ta="right">
|
||||
<Text fz="sm" fw={600} c="blue">
|
||||
{formatRupiah(realisasi.jumlah)}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd ta="center">
|
||||
<Group gap="xs" justify="center">
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
color="blue"
|
||||
size="sm"
|
||||
onClick={() => handleOpenEdit(realisasi)}
|
||||
>
|
||||
<IconEdit size={16} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
color="red"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(realisasi.id)}
|
||||
disabled={loading}
|
||||
>
|
||||
<IconTrash size={16} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<Center py="xl">
|
||||
<Stack align="center" gap="xs">
|
||||
<Text fz="sm" c="dimmed">
|
||||
Belum ada realisasi untuk item ini
|
||||
</Text>
|
||||
<Text fz="xs" c="dimmed">
|
||||
Klik tombol "Tambah Realisasi" untuk menambahkan
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
)}
|
||||
|
||||
{/* Modal Create/Edit */}
|
||||
<Modal
|
||||
opened={modalOpened}
|
||||
onClose={() => {
|
||||
setModalOpened(false);
|
||||
resetForm();
|
||||
}}
|
||||
title={
|
||||
<Text fz="lg" fw={600}>
|
||||
{editingId ? 'Edit Realisasi' : 'Tambah Realisasi Baru'}
|
||||
</Text>
|
||||
}
|
||||
size="md"
|
||||
centered
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Info Item */}
|
||||
<Paper p="sm" bg="gray.0" radius="md">
|
||||
<Text fz="xs" c="dimmed">
|
||||
Item: {itemKode} - {itemUraian}
|
||||
</Text>
|
||||
<Text fz="xs" c="dimmed">
|
||||
Anggaran: {formatRupiah(itemAnggaran)}
|
||||
</Text>
|
||||
<Text fz="xs" c="dimmed">
|
||||
Sudah terealisasi: {formatRupiah(itemTotalRealisasi)}
|
||||
</Text>
|
||||
</Paper>
|
||||
|
||||
<TextInput
|
||||
label="Kode Realisasi"
|
||||
placeholder="Contoh: 4.1.1-R1"
|
||||
value={formData.kode}
|
||||
onChange={(e) => setFormData({ ...formData, kode: e.target.value })}
|
||||
description="Kode unik untuk realisasi ini"
|
||||
required
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Jumlah Realisasi (Rp)"
|
||||
value={formData.jumlah}
|
||||
onChange={(val) => setFormData({ ...formData, jumlah: Number(val) || 0 })}
|
||||
leftSection={<IconCoin size={16} />}
|
||||
thousandSeparator
|
||||
min={0}
|
||||
step={100000}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Tanggal Realisasi"
|
||||
type="date"
|
||||
value={formData.tanggal}
|
||||
onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
|
||||
leftSection={<IconCalendar size={18} />}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Keterangan / Uraian"
|
||||
placeholder="Contoh: Penyaluran BLT Tahap 1"
|
||||
value={formData.keterangan}
|
||||
onChange={(e) => setFormData({ ...formData, keterangan: e.target.value })}
|
||||
description="Deskripsi singkat tentang realisasi ini"
|
||||
/>
|
||||
|
||||
<Divider my="xs" />
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
onClick={() => {
|
||||
setModalOpened(false);
|
||||
resetForm();
|
||||
}}
|
||||
disabled={loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
loading={loading}
|
||||
color="blue"
|
||||
leftSection={editingId ? <IconEdit size={16} /> : <IconPlus size={16} />}
|
||||
>
|
||||
{editingId ? 'Perbarui' : 'Tambah'} Realisasi
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -42,11 +42,9 @@ type ItemForm = {
|
||||
kode: string;
|
||||
uraian: string;
|
||||
anggaran: number;
|
||||
realisasi: number;
|
||||
level: number;
|
||||
tipe: 'pendapatan' | 'belanja' | 'pembiayaan';
|
||||
realisasi?: number;
|
||||
selisih?: number;
|
||||
persentase?: number;
|
||||
};
|
||||
|
||||
function EditAPBDes() {
|
||||
@@ -73,19 +71,14 @@ function EditAPBDes() {
|
||||
kode: '',
|
||||
uraian: '',
|
||||
anggaran: 0,
|
||||
realisasi: 0,
|
||||
level: 1,
|
||||
tipe: 'pendapatan',
|
||||
realisasi: 0,
|
||||
selisih: 0,
|
||||
persentase: 0,
|
||||
});
|
||||
|
||||
// Simpan data original untuk reset form
|
||||
const [originalData, setOriginalData] = useState({
|
||||
tahun: 0,
|
||||
name: '',
|
||||
deskripsi: '',
|
||||
jumlah: '',
|
||||
imageId: '',
|
||||
fileId: '',
|
||||
imageUrl: '',
|
||||
@@ -110,9 +103,6 @@ function EditAPBDes() {
|
||||
// Simpan data original untuk reset
|
||||
setOriginalData({
|
||||
tahun: data.tahun || new Date().getFullYear(),
|
||||
name: data.name || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
jumlah: data.jumlah || '',
|
||||
imageId: data.imageId || '',
|
||||
fileId: data.fileId || '',
|
||||
imageUrl: data.image?.link || '',
|
||||
@@ -122,18 +112,15 @@ function EditAPBDes() {
|
||||
// Set form dengan data lama (termasuk imageId dan fileId)
|
||||
apbdesState.edit.form = {
|
||||
tahun: data.tahun || new Date().getFullYear(),
|
||||
name: data.name || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
jumlah: data.jumlah || '',
|
||||
imageId: data.imageId || '',
|
||||
fileId: data.fileId || '',
|
||||
items: (data.items || []).map((item: any) => ({
|
||||
kode: item.kode,
|
||||
uraian: item.uraian,
|
||||
anggaran: item.anggaran,
|
||||
realisasi: item.totalRealisasi || 0,
|
||||
selisih: item.selisih || 0,
|
||||
persentase: item.persentase || 0,
|
||||
realisasi: item.realisasi,
|
||||
selisih: item.selisih,
|
||||
persentase: item.persentase,
|
||||
level: item.level,
|
||||
tipe: item.tipe || 'pendapatan',
|
||||
})),
|
||||
@@ -161,33 +148,34 @@ function EditAPBDes() {
|
||||
};
|
||||
|
||||
const handleAddItem = () => {
|
||||
const { kode, uraian, anggaran, level, tipe, realisasi, selisih, persentase } = newItem;
|
||||
const { kode, uraian, anggaran, realisasi, level, tipe } = newItem;
|
||||
if (!kode || !uraian) {
|
||||
return toast.warn('Kode dan uraian wajib diisi');
|
||||
}
|
||||
|
||||
const finalTipe = level === 1 ? null : tipe;
|
||||
const selisih = realisasi - anggaran;
|
||||
const persentase = anggaran > 0 ? (realisasi / anggaran) * 100 : 0;
|
||||
|
||||
apbdesState.edit.addItem({
|
||||
kode,
|
||||
uraian,
|
||||
anggaran,
|
||||
realisasi: realisasi || 0,
|
||||
selisih: selisih || 0,
|
||||
persentase: persentase || 0,
|
||||
realisasi,
|
||||
selisih,
|
||||
persentase,
|
||||
level,
|
||||
tipe: finalTipe,
|
||||
tipe: finalTipe, // ✅ Tidak akan undefined
|
||||
});
|
||||
|
||||
|
||||
setNewItem({
|
||||
kode: '',
|
||||
uraian: '',
|
||||
anggaran: 0,
|
||||
realisasi: 0,
|
||||
level: 1,
|
||||
tipe: 'pendapatan',
|
||||
realisasi: 0,
|
||||
selisih: 0,
|
||||
persentase: 0,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -205,6 +193,7 @@ function EditAPBDes() {
|
||||
|
||||
// Upload file baru jika ada perubahan
|
||||
if (imageFile) {
|
||||
// Hapus file lama dari form jika ada file baru
|
||||
const res = await ApiFetch.api.fileStorage.create.post({
|
||||
file: imageFile,
|
||||
name: imageFile.name,
|
||||
@@ -216,6 +205,7 @@ function EditAPBDes() {
|
||||
}
|
||||
|
||||
if (docFile) {
|
||||
// Hapus file lama dari form jika ada file baru
|
||||
const res = await ApiFetch.api.fileStorage.create.post({
|
||||
file: docFile,
|
||||
name: docFile.name,
|
||||
@@ -226,7 +216,15 @@ function EditAPBDes() {
|
||||
}
|
||||
}
|
||||
|
||||
// Image dan file sekarang opsional, tidak perlu validasi
|
||||
// Jika tidak ada file baru, gunakan ID lama (sudah ada di form)
|
||||
// Pastikan imageId dan fileId tetap ada
|
||||
if (!apbdesState.edit.form.imageId) {
|
||||
return toast.warn('Gambar wajib diunggah');
|
||||
}
|
||||
if (!apbdesState.edit.form.fileId) {
|
||||
return toast.warn('Dokumen wajib diunggah');
|
||||
}
|
||||
|
||||
const success = await apbdesState.edit.update();
|
||||
if (success) {
|
||||
router.push('/admin/landing-page/apbdes');
|
||||
@@ -240,12 +238,9 @@ function EditAPBDes() {
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
// Reset ke data original (tahun, name, deskripsi, jumlah, imageId, fileId)
|
||||
// Reset ke data original (tahun, imageId, fileId)
|
||||
apbdesState.edit.form = {
|
||||
tahun: originalData.tahun,
|
||||
name: originalData.name,
|
||||
deskripsi: originalData.deskripsi,
|
||||
jumlah: originalData.jumlah,
|
||||
imageId: originalData.imageId,
|
||||
fileId: originalData.fileId,
|
||||
items: [...apbdesState.edit.form.items], // keep existing items
|
||||
@@ -254,23 +249,21 @@ function EditAPBDes() {
|
||||
// Reset preview ke data original
|
||||
setPreviewImage(originalData.imageUrl || null);
|
||||
setPreviewDoc(originalData.fileUrl || null);
|
||||
|
||||
|
||||
// Reset file uploads
|
||||
setImageFile(null);
|
||||
setDocFile(null);
|
||||
|
||||
|
||||
// Reset new item form
|
||||
setNewItem({
|
||||
kode: '',
|
||||
uraian: '',
|
||||
anggaran: 0,
|
||||
realisasi: 0,
|
||||
level: 1,
|
||||
tipe: 'pendapatan',
|
||||
realisasi: 0,
|
||||
selisih: 0,
|
||||
persentase: 0,
|
||||
});
|
||||
|
||||
|
||||
toast.info('Form dikembalikan ke data awal');
|
||||
};
|
||||
|
||||
@@ -295,33 +288,6 @@ function EditAPBDes() {
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Header Form */}
|
||||
<TextInput
|
||||
label="Nama APBDes"
|
||||
placeholder="Contoh: APBDes Tahun 2025"
|
||||
value={apbdesState.edit.form.name}
|
||||
onChange={(e) =>
|
||||
(apbdesState.edit.form.name = e.target.value)
|
||||
}
|
||||
description="Opsional - akan diisi otomatis jika kosong"
|
||||
/>
|
||||
<TextInput
|
||||
label="Deskripsi"
|
||||
placeholder="Deskripsi APBDes (opsional)"
|
||||
value={apbdesState.edit.form.deskripsi}
|
||||
onChange={(e) =>
|
||||
(apbdesState.edit.form.deskripsi = e.target.value)
|
||||
}
|
||||
description="Opsional"
|
||||
/>
|
||||
<TextInput
|
||||
label="Jumlah Total"
|
||||
placeholder="Contoh: Rp 1.000.000.000"
|
||||
value={apbdesState.edit.form.jumlah}
|
||||
onChange={(e) =>
|
||||
(apbdesState.edit.form.jumlah = e.target.value)
|
||||
}
|
||||
description="Opsional - total keseluruhan anggaran"
|
||||
/>
|
||||
<NumberInput
|
||||
label="Tahun"
|
||||
value={apbdesState.edit.form.tahun || new Date().getFullYear()}
|
||||
@@ -333,11 +299,11 @@ function EditAPBDes() {
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Gambar & Dokumen (Opsional) */}
|
||||
{/* Gambar & Dokumen */}
|
||||
<Stack gap="xs">
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Gambar APBDes (Opsional)
|
||||
Gambar APBDes
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={handleDrop('image')}
|
||||
@@ -377,7 +343,6 @@ function EditAPBDes() {
|
||||
onClick={() => {
|
||||
setPreviewImage(null);
|
||||
setImageFile(null);
|
||||
apbdesState.edit.form.imageId = ''; // Clear imageId from form
|
||||
}}
|
||||
>
|
||||
<IconX size={14} />
|
||||
@@ -388,7 +353,7 @@ function EditAPBDes() {
|
||||
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Dokumen APBDes (Opsional)
|
||||
Dokumen APBDes
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={handleDrop('doc')}
|
||||
@@ -437,7 +402,6 @@ function EditAPBDes() {
|
||||
onClick={() => {
|
||||
setPreviewDoc(null);
|
||||
setDocFile(null);
|
||||
apbdesState.edit.form.fileId = ''; // Clear fileId from form
|
||||
}}
|
||||
>
|
||||
<IconX size={14} />
|
||||
@@ -511,6 +475,13 @@ function EditAPBDes() {
|
||||
thousandSeparator
|
||||
min={0}
|
||||
/>
|
||||
<NumberInput
|
||||
label="Realisasi (Rp)"
|
||||
value={newItem.realisasi}
|
||||
onChange={(val) => setNewItem({ ...newItem, realisasi: Number(val) || 0 })}
|
||||
thousandSeparator
|
||||
min={0}
|
||||
/>
|
||||
</Group>
|
||||
<Button
|
||||
leftSection={<IconPlus size={16} />}
|
||||
@@ -535,8 +506,6 @@ function EditAPBDes() {
|
||||
<th>Uraian</th>
|
||||
<th>Anggaran</th>
|
||||
<th>Realisasi</th>
|
||||
<th>Selisih</th>
|
||||
<th>%</th>
|
||||
<th>Level</th>
|
||||
<th>Tipe</th>
|
||||
<th style={{ width: '50px' }}>Aksi</th>
|
||||
@@ -552,11 +521,7 @@ function EditAPBDes() {
|
||||
</td>
|
||||
<td>{item.uraian}</td>
|
||||
<td>{item.anggaran.toLocaleString('id-ID')}</td>
|
||||
<td>{item.realisasi?.toLocaleString('id-ID') || '0'}</td>
|
||||
<td style={{ color: item.selisih && item.selisih > 0 ? 'red' : 'green' }}>
|
||||
{item.selisih?.toLocaleString('id-ID') || '0'}
|
||||
</td>
|
||||
<td>{item.persentase?.toFixed(2) || '0'}%</td>
|
||||
<td>{item.realisasi.toLocaleString('id-ID')}</td>
|
||||
<td>
|
||||
<Badge size="sm" color={item.level === 1 ? 'blue' : item.level === 2 ? 'green' : 'grape'}>
|
||||
L{item.level}
|
||||
@@ -568,7 +533,7 @@ function EditAPBDes() {
|
||||
{item.tipe}
|
||||
</Badge>
|
||||
) : (
|
||||
<Text size="sm" c="dimmed">-</Text>
|
||||
'-'
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
|
||||
@@ -25,7 +25,6 @@ import { useEffect, useState } from 'react';
|
||||
import colors from '@/con/colors';
|
||||
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
|
||||
import apbdes from '../../../_state/landing-page/apbdes';
|
||||
import RealisasiManager from './RealisasiManager';
|
||||
|
||||
|
||||
|
||||
@@ -95,7 +94,7 @@ function DetailAPBDes() {
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Nama APBDes</Text>
|
||||
<Text fz="md" c="dimmed">
|
||||
{data.name || `APBDes Tahun ${data.tahun}`}
|
||||
{data.name || '-'}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -106,24 +105,6 @@ function DetailAPBDes() {
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{data.deskripsi && (
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi</Text>
|
||||
<Text fz="md" c="dimmed">
|
||||
{data.deskripsi}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{data.jumlah && (
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Jumlah Total</Text>
|
||||
<Text fz="md" c="dimmed">
|
||||
{data.jumlah}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Gambar</Text>
|
||||
{data.image?.link ? (
|
||||
@@ -192,60 +173,48 @@ function DetailAPBDes() {
|
||||
|
||||
{/* Tabel Items */}
|
||||
{data.items && data.items.length > 0 ? (
|
||||
<Stack gap="md">
|
||||
<Text fz="lg" fw="bold">
|
||||
<Paper withBorder p="md" radius="md">
|
||||
<Text fz="lg" fw="bold" mb="sm">
|
||||
Rincian Pendapatan & Belanja ({data.items.length} item)
|
||||
</Text>
|
||||
<Table striped highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Uraian</TableTh>
|
||||
<TableTh>Anggaran (Rp)</TableTh>
|
||||
<TableTh>Realisasi (Rp)</TableTh>
|
||||
<TableTh>Selisih (Rp)</TableTh>
|
||||
<TableTh>Persentase (%)</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{[...data.items]
|
||||
.sort((a, b) => a.kode.localeCompare(b.kode))
|
||||
.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd style={getIndent(item.level)}>
|
||||
<Group>
|
||||
<Text fw={item.level === 1 ? 'bold' : 'normal'}>{item.kode}</Text>
|
||||
<Text fz="sm" c="dimmed">{item.uraian}</Text>
|
||||
</Group>
|
||||
</TableTd>
|
||||
<TableTd>{item.anggaran.toLocaleString('id-ID')}</TableTd>
|
||||
<TableTd>{item.totalRealisasi.toLocaleString('id-ID')}</TableTd>
|
||||
<TableTd>
|
||||
<Text c={item.selisih >= 0 ? 'green' : 'red'}>
|
||||
{item.selisih.toLocaleString('id-ID')}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text fw={500}>{item.persentase.toFixed(2)}%</Text>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
|
||||
{/* Realisasi Manager untuk setiap item */}
|
||||
{data.items.map((item) => (
|
||||
<RealisasiManager
|
||||
key={item.id}
|
||||
itemId={item.id}
|
||||
itemKode={item.kode}
|
||||
itemUraian={item.uraian}
|
||||
itemAnggaran={item.anggaran}
|
||||
itemTotalRealisasi={item.totalRealisasi}
|
||||
itemPersentase={item.persentase}
|
||||
realisasiItems={item.realisasiItems || []}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table striped highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Uraian</TableTh>
|
||||
<TableTh>Anggaran (Rp)</TableTh>
|
||||
<TableTh>Realisasi (Rp)</TableTh>
|
||||
<TableTh>Selisih (Rp)</TableTh>
|
||||
<TableTh>Persentase (%)</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{[...data.items] // Create a new array before sorting
|
||||
.sort((a, b) => a.kode.localeCompare(b.kode))
|
||||
.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd style={getIndent(item.level)}>
|
||||
<Group>
|
||||
<Text fw={item.level === 1 ? 'bold' : 'normal'}>{item.kode}</Text>
|
||||
<Text fz="sm" c="dimmed">{item.uraian}</Text>
|
||||
</Group>
|
||||
</TableTd>
|
||||
<TableTd>{item.anggaran.toLocaleString('id-ID')}</TableTd>
|
||||
<TableTd>{item.realisasi.toLocaleString('id-ID')}</TableTd>
|
||||
<TableTd>
|
||||
<Text c={item.selisih >= 0 ? 'green' : 'red'}>
|
||||
{item.selisih.toLocaleString('id-ID')}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text fw={500}>{item.persentase.toFixed(2)}%</Text>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Paper>
|
||||
) : (
|
||||
<Text>Belum ada data item</Text>
|
||||
)}
|
||||
|
||||
@@ -33,6 +33,7 @@ type ItemForm = {
|
||||
kode: string;
|
||||
uraian: string;
|
||||
anggaran: number;
|
||||
realisasi: number;
|
||||
level: number;
|
||||
tipe: 'pendapatan' | 'belanja' | 'pembiayaan';
|
||||
};
|
||||
@@ -46,9 +47,13 @@ function CreateAPBDes() {
|
||||
const [docFile, setDocFile] = useState<File | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Check if form is valid - hanya cek items, gambar dan file opsional
|
||||
// Check if form is valid
|
||||
const isFormValid = () => {
|
||||
return stateAPBDes.create.form.items.length > 0;
|
||||
return (
|
||||
imageFile !== null &&
|
||||
docFile !== null &&
|
||||
stateAPBDes.create.form.items.length > 0
|
||||
);
|
||||
};
|
||||
|
||||
// Form sementara untuk input item baru
|
||||
@@ -56,6 +61,7 @@ function CreateAPBDes() {
|
||||
kode: '',
|
||||
uraian: '',
|
||||
anggaran: 0,
|
||||
realisasi: 0,
|
||||
level: 1,
|
||||
tipe: 'pendapatan',
|
||||
});
|
||||
@@ -74,40 +80,35 @@ function CreateAPBDes() {
|
||||
kode: '',
|
||||
uraian: '',
|
||||
anggaran: 0,
|
||||
realisasi: 0,
|
||||
level: 1,
|
||||
tipe: 'pendapatan',
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!imageFile || !docFile) {
|
||||
return toast.warn("Pilih gambar dan dokumen terlebih dahulu");
|
||||
}
|
||||
if (stateAPBDes.create.form.items.length === 0) {
|
||||
return toast.warn("Minimal tambahkan 1 item APBDes");
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
const [uploadImageRes, uploadDocRes] = await Promise.all([
|
||||
ApiFetch.api.fileStorage.create.post({ file: imageFile, name: imageFile.name }),
|
||||
ApiFetch.api.fileStorage.create.post({ file: docFile, name: docFile.name }),
|
||||
]);
|
||||
|
||||
// Upload files hanya jika ada file yang dipilih
|
||||
let imageId = '';
|
||||
let fileId = '';
|
||||
const imageId = uploadImageRes?.data?.data?.id;
|
||||
const fileId = uploadDocRes?.data?.data?.id;
|
||||
|
||||
if (imageFile) {
|
||||
const uploadImageRes = await ApiFetch.api.fileStorage.create.post({
|
||||
file: imageFile,
|
||||
name: imageFile.name,
|
||||
});
|
||||
imageId = uploadImageRes?.data?.data?.id || '';
|
||||
if (!imageId || !fileId) {
|
||||
return toast.error("Gagal mengupload file");
|
||||
}
|
||||
|
||||
if (docFile) {
|
||||
const uploadDocRes = await ApiFetch.api.fileStorage.create.post({
|
||||
file: docFile,
|
||||
name: docFile.name,
|
||||
});
|
||||
fileId = uploadDocRes?.data?.data?.id || '';
|
||||
}
|
||||
|
||||
// Update form dengan ID file (bisa kosong)
|
||||
// Update form dengan ID file
|
||||
stateAPBDes.create.form.imageId = imageId;
|
||||
stateAPBDes.create.form.fileId = fileId;
|
||||
|
||||
@@ -116,9 +117,9 @@ function CreateAPBDes() {
|
||||
toast.success("Berhasil menambahkan APBDes");
|
||||
resetForm();
|
||||
router.push("/admin/landing-page/apbdes");
|
||||
} catch (error: any) {
|
||||
} catch (error) {
|
||||
console.error("Gagal submit:", error);
|
||||
toast.error(error?.message || "Gagal menyimpan data");
|
||||
toast.error("Gagal menyimpan data");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
@@ -126,17 +127,22 @@ function CreateAPBDes() {
|
||||
|
||||
// Tambahkan item ke state
|
||||
const handleAddItem = () => {
|
||||
const { kode, uraian, anggaran, level, tipe } = newItem;
|
||||
const { kode, uraian, anggaran, realisasi, level, tipe } = newItem;
|
||||
if (!kode || !uraian) {
|
||||
return toast.warn("Kode dan uraian wajib diisi");
|
||||
}
|
||||
|
||||
const finalTipe = level === 1 ? null : tipe;
|
||||
const selisih = realisasi - anggaran;
|
||||
const persentase = anggaran > 0 ? (realisasi / anggaran) * 100 : 0;
|
||||
|
||||
stateAPBDes.create.addItem({
|
||||
kode,
|
||||
uraian,
|
||||
anggaran,
|
||||
realisasi,
|
||||
selisih,
|
||||
persentase,
|
||||
level,
|
||||
tipe: finalTipe,
|
||||
});
|
||||
@@ -146,6 +152,7 @@ function CreateAPBDes() {
|
||||
kode: '',
|
||||
uraian: '',
|
||||
anggaran: 0,
|
||||
realisasi: 0,
|
||||
level: 1,
|
||||
tipe: 'pendapatan',
|
||||
});
|
||||
@@ -176,16 +183,12 @@ function CreateAPBDes() {
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Info: File opsional */}
|
||||
<Text fz="sm" c="dimmed" mb="xs">
|
||||
* Upload gambar dan dokumen bersifat opsional. Bisa dikosongkan jika belum ada.
|
||||
</Text>
|
||||
|
||||
{/* Gambar & Dokumen (dipendekkan untuk fokus pada items) */}
|
||||
<Stack gap={"xs"}>
|
||||
{/* Gambar APBDes */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Gambar APBDes (Opsional)
|
||||
Gambar APBDes
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
@@ -255,10 +258,10 @@ function CreateAPBDes() {
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Dokumen APBDes (Opsional) */}
|
||||
{/* Dokumen APBDes */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Dokumen APBDes (Opsional)
|
||||
Dokumen APBDes
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
@@ -331,27 +334,6 @@ function CreateAPBDes() {
|
||||
</Stack>
|
||||
|
||||
{/* Form Header */}
|
||||
<TextInput
|
||||
label="Nama APBDes"
|
||||
placeholder="Contoh: APBDes Tahun 2025"
|
||||
value={stateAPBDes.create.form.name}
|
||||
onChange={(e) => (stateAPBDes.create.form.name = e.target.value)}
|
||||
description="Opsional - akan diisi otomatis jika kosong"
|
||||
/>
|
||||
<TextInput
|
||||
label="Deskripsi"
|
||||
placeholder="Deskripsi APBDes (opsional)"
|
||||
value={stateAPBDes.create.form.deskripsi}
|
||||
onChange={(e) => (stateAPBDes.create.form.deskripsi = e.target.value)}
|
||||
description="Opsional"
|
||||
/>
|
||||
<TextInput
|
||||
label="Jumlah Total"
|
||||
placeholder="Contoh: Rp 1.000.000.000"
|
||||
value={stateAPBDes.create.form.jumlah}
|
||||
onChange={(e) => (stateAPBDes.create.form.jumlah = e.target.value)}
|
||||
description="Opsional - total keseluruhan anggaran"
|
||||
/>
|
||||
<NumberInput
|
||||
label="Tahun"
|
||||
value={stateAPBDes.create.form.tahun || new Date().getFullYear()}
|
||||
@@ -424,6 +406,13 @@ function CreateAPBDes() {
|
||||
thousandSeparator
|
||||
min={0}
|
||||
/>
|
||||
<NumberInput
|
||||
label="Realisasi (Rp)"
|
||||
value={newItem.realisasi}
|
||||
onChange={(val) => setNewItem({ ...newItem, realisasi: Number(val) || 0 })}
|
||||
thousandSeparator
|
||||
min={0}
|
||||
/>
|
||||
</Group>
|
||||
<Button
|
||||
leftSection={<IconPlus size={16} />}
|
||||
@@ -445,30 +434,28 @@ function CreateAPBDes() {
|
||||
<th>Kode</th>
|
||||
<th>Uraian</th>
|
||||
<th>Anggaran</th>
|
||||
<th>Realisasi</th>
|
||||
<th>Level</th>
|
||||
<th>Tipe</th>
|
||||
<th style={{ width: 50 }}>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{stateAPBDes.create.form.items.map((item: any, idx) => (
|
||||
{stateAPBDes.create.form.items.map((item, idx) => (
|
||||
<tr key={idx}>
|
||||
<td><Text size="sm" fw={500}>{item.kode}</Text></td>
|
||||
<td>{item.uraian}</td>
|
||||
<td>{item.anggaran.toLocaleString('id-ID')}</td>
|
||||
<td>{item.realisasi.toLocaleString('id-ID')}</td>
|
||||
<td>
|
||||
<Badge size="sm" color={item.level === 1 ? 'blue' : item.level === 2 ? 'green' : 'grape'}>
|
||||
L{item.level}
|
||||
</Badge>
|
||||
</td>
|
||||
<td>
|
||||
{item.tipe ? (
|
||||
<Badge size="sm" color={item.tipe === 'pendapatan' ? 'teal' : 'red'}>
|
||||
{item.tipe}
|
||||
</Badge>
|
||||
) : (
|
||||
<Text size="sm" c="dimmed">-</Text>
|
||||
)}
|
||||
<Badge size="sm" color={item.tipe === 'pendapatan' ? 'teal' : 'red'}>
|
||||
{item.tipe}
|
||||
</Badge>
|
||||
</td>
|
||||
<td>
|
||||
<ActionIcon color="red" onClick={() => handleRemoveItem(idx)}>
|
||||
|
||||
@@ -45,7 +45,7 @@ function APBDes() {
|
||||
function ListAPBDes({ search }: { search: string }) {
|
||||
const listState = useProxy(apbdes);
|
||||
const router = useRouter();
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000);
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000);
|
||||
|
||||
const { data, page, totalPages, loading, load } = listState.findMany;
|
||||
|
||||
|
||||
@@ -211,9 +211,6 @@ function ListKategoriPrestasi({ search }: { search: string }) {
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
|
||||
@@ -1,428 +0,0 @@
|
||||
'use client'
|
||||
import CreateEditor from '../../../_com/createEditor';
|
||||
import stateDashboardMusik from '../../../_state/desa/musik';
|
||||
import colors from '@/con/colors';
|
||||
import ApiFetch from '@/lib/api-fetch';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Center,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Loader,
|
||||
ActionIcon,
|
||||
NumberInput
|
||||
} from '@mantine/core';
|
||||
import { Dropzone } from '@mantine/dropzone';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconPhoto, IconUpload, IconX, IconMusic } from '@tabler/icons-react';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
export default function EditMusik() {
|
||||
const musikState = useProxy(stateDashboardMusik);
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const id = params.id as string;
|
||||
|
||||
const [previewCover, setPreviewCover] = useState<string | null>(null);
|
||||
const [coverFile, setCoverFile] = useState<File | null>(null);
|
||||
const [previewAudio, setPreviewAudio] = useState<string | null>(null);
|
||||
const [audioFile, setAudioFile] = useState<File | null>(null);
|
||||
const [isExtractingDuration, setIsExtractingDuration] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Fungsi untuk mendapatkan durasi dari file audio
|
||||
const getAudioDuration = (file: File): Promise<string> => {
|
||||
return new Promise((resolve) => {
|
||||
const audio = new Audio();
|
||||
const url = URL.createObjectURL(file);
|
||||
|
||||
audio.addEventListener('loadedmetadata', () => {
|
||||
const duration = audio.duration;
|
||||
const minutes = Math.floor(duration / 60);
|
||||
const seconds = Math.floor(duration % 60);
|
||||
const formatted = `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||
URL.revokeObjectURL(url);
|
||||
resolve(formatted);
|
||||
});
|
||||
|
||||
audio.addEventListener('error', () => {
|
||||
URL.revokeObjectURL(url);
|
||||
resolve('0:00');
|
||||
});
|
||||
|
||||
audio.src = url;
|
||||
});
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
if (id) {
|
||||
musikState.musik.edit.load(id).then(() => setIsLoading(false));
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
musikState.musik.edit.form.judul?.trim() !== '' &&
|
||||
musikState.musik.edit.form.artis?.trim() !== '' &&
|
||||
musikState.musik.edit.form.durasi?.trim() !== '' &&
|
||||
(coverFile !== null || musikState.musik.edit.form.coverImageId !== '') &&
|
||||
(audioFile !== null || musikState.musik.edit.form.audioFileId !== '')
|
||||
);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
musikState.musik.edit.reset();
|
||||
setPreviewCover(null);
|
||||
setCoverFile(null);
|
||||
setPreviewAudio(null);
|
||||
setAudioFile(null);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!musikState.musik.edit.form.judul?.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!musikState.musik.edit.form.artis?.trim()) {
|
||||
toast.error('Artis wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!musikState.musik.edit.form.durasi?.trim()) {
|
||||
toast.error('Durasi wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Upload cover image if new file selected
|
||||
if (coverFile) {
|
||||
const res = await ApiFetch.api.fileStorage.create.post({
|
||||
file: coverFile,
|
||||
name: coverFile.name,
|
||||
});
|
||||
|
||||
const uploaded = res.data?.data;
|
||||
if (!uploaded?.id) {
|
||||
return toast.error('Gagal mengunggah cover, silakan coba lagi');
|
||||
}
|
||||
|
||||
musikState.musik.edit.form.coverImageId = uploaded.id;
|
||||
}
|
||||
|
||||
// Upload audio file if new file selected
|
||||
if (audioFile) {
|
||||
const res = await ApiFetch.api.fileStorage.create.post({
|
||||
file: audioFile,
|
||||
name: audioFile.name,
|
||||
});
|
||||
|
||||
const uploaded = res.data?.data;
|
||||
if (!uploaded?.id) {
|
||||
return toast.error('Gagal mengunggah audio, silakan coba lagi');
|
||||
}
|
||||
|
||||
musikState.musik.edit.form.audioFileId = uploaded.id;
|
||||
}
|
||||
|
||||
await musikState.musik.edit.update();
|
||||
|
||||
resetForm();
|
||||
router.push('/admin/musik');
|
||||
} catch (error) {
|
||||
console.error('Error updating musik:', error);
|
||||
toast.error('Terjadi kesalahan saat mengupdate musik');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'lg' }} py="xl">
|
||||
<Center>
|
||||
<Loader />
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'lg' }} py="xs">
|
||||
{/* Header dengan tombol kembali */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Musik
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul lagu"
|
||||
value={musikState.musik.edit.form.judul}
|
||||
onChange={(e) => (musikState.musik.edit.form.judul = e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Artis"
|
||||
placeholder="Masukkan nama artis"
|
||||
value={musikState.musik.edit.form.artis}
|
||||
onChange={(e) => (musikState.musik.edit.form.artis = e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi
|
||||
</Text>
|
||||
<CreateEditor
|
||||
value={musikState.musik.edit.form.deskripsi}
|
||||
onChange={(htmlContent) => {
|
||||
musikState.musik.edit.form.deskripsi = htmlContent;
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Group gap="md">
|
||||
<TextInput
|
||||
label="Durasi"
|
||||
placeholder="Contoh: 3:45"
|
||||
value={musikState.musik.edit.form.durasi}
|
||||
onChange={(e) => (musikState.musik.edit.form.durasi = e.target.value)}
|
||||
required
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Genre"
|
||||
placeholder="Contoh: Pop, Rock, Jazz"
|
||||
value={musikState.musik.edit.form.genre}
|
||||
onChange={(e) => (musikState.musik.edit.form.genre = e.target.value)}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
<NumberInput
|
||||
label="Tahun Rilis"
|
||||
placeholder="Contoh: 2024"
|
||||
value={musikState.musik.edit.form.tahunRilis}
|
||||
onChange={(val) => (musikState.musik.edit.form.tahunRilis = val as number | undefined)}
|
||||
min={1900}
|
||||
max={new Date().getFullYear() + 1}
|
||||
/>
|
||||
|
||||
{/* Cover Image */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Cover Image
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
const selectedFile = files[0];
|
||||
if (selectedFile) {
|
||||
setCoverFile(selectedFile);
|
||||
setPreviewCover(URL.createObjectURL(selectedFile));
|
||||
}
|
||||
}}
|
||||
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
|
||||
maxSize={5 * 1024 ** 2}
|
||||
accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
|
||||
radius="md"
|
||||
p="xl"
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={180}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
|
||||
</Dropzone.Reject>
|
||||
<Dropzone.Idle>
|
||||
<IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
|
||||
</Dropzone.Idle>
|
||||
</Group>
|
||||
<Text ta="center" mt="sm" size="sm" color="dimmed">
|
||||
Seret gambar atau klik untuk memilih file (maks 5MB)
|
||||
</Text>
|
||||
</Dropzone>
|
||||
|
||||
{(previewCover || musikState.musik.edit.form.coverImageId) && (
|
||||
<Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
|
||||
<Image
|
||||
src={previewCover || '/api/placeholder/200/200'}
|
||||
alt="Preview Cover"
|
||||
radius="md"
|
||||
style={{
|
||||
maxHeight: 200,
|
||||
objectFit: 'contain',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<ActionIcon
|
||||
variant="filled"
|
||||
color="red"
|
||||
radius="xl"
|
||||
size="sm"
|
||||
pos="absolute"
|
||||
top={5}
|
||||
right={5}
|
||||
onClick={() => {
|
||||
setPreviewCover(null);
|
||||
setCoverFile(null);
|
||||
musikState.musik.edit.form.coverImageId = '';
|
||||
}}
|
||||
style={{
|
||||
boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
<IconX size={14} />
|
||||
</ActionIcon>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Audio File */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
File Audio
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={async (files) => {
|
||||
const selectedFile = files[0];
|
||||
if (selectedFile) {
|
||||
setAudioFile(selectedFile);
|
||||
setPreviewAudio(selectedFile.name);
|
||||
|
||||
// Extract durasi otomatis dari audio
|
||||
setIsExtractingDuration(true);
|
||||
try {
|
||||
const duration = await getAudioDuration(selectedFile);
|
||||
musikState.musik.edit.form.durasi = duration;
|
||||
toast.success(`Durasi audio terdeteksi: ${duration}`);
|
||||
} catch (error) {
|
||||
console.error('Error extracting audio duration:', error);
|
||||
toast.error('Gagal mendeteksi durasi audio, silakan isi manual');
|
||||
} finally {
|
||||
setIsExtractingDuration(false);
|
||||
}
|
||||
}
|
||||
}}
|
||||
onReject={() => toast.error('File tidak valid, gunakan format audio (MP3, WAV, OGG)')}
|
||||
maxSize={50 * 1024 ** 2}
|
||||
accept={{ 'audio/*': ['.mp3', '.wav', '.ogg', '.m4a'] }}
|
||||
radius="md"
|
||||
p="xl"
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={180}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
|
||||
</Dropzone.Reject>
|
||||
<Dropzone.Idle>
|
||||
<IconMusic size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
|
||||
</Dropzone.Idle>
|
||||
</Group>
|
||||
<Text ta="center" mt="sm" size="sm" color="dimmed">
|
||||
Seret file audio atau klik untuk memilih file (maks 50MB)
|
||||
</Text>
|
||||
</Dropzone>
|
||||
|
||||
{(previewAudio || musikState.musik.edit.form.audioFileId) && (
|
||||
<Box mt="sm">
|
||||
<Card p="sm" withBorder>
|
||||
<Group gap="sm">
|
||||
<IconMusic size={20} color={colors['blue-button']} />
|
||||
<Text fz="sm" truncate style={{ flex: 1 }}>
|
||||
{previewAudio || 'File audio tersimpan'}
|
||||
</Text>
|
||||
{isExtractingDuration && (
|
||||
<Text fz="xs" c="blue">
|
||||
Mendeteksi durasi...
|
||||
</Text>
|
||||
)}
|
||||
<ActionIcon
|
||||
variant="filled"
|
||||
color="red"
|
||||
radius="xl"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setPreviewAudio(null);
|
||||
setAudioFile(null);
|
||||
musikState.musik.edit.form.audioFileId = '';
|
||||
}}
|
||||
>
|
||||
<IconX size={14} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={resetForm}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
style={{
|
||||
background: !isFormValid() || isSubmitting
|
||||
? `linear-gradient(135deg, #cccccc, #eeeeee)`
|
||||
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Update'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,271 +0,0 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Center,
|
||||
Group,
|
||||
Image,
|
||||
Modal,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
Title
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import stateDashboardMusik from '../../_state/desa/musik';
|
||||
|
||||
export default function DetailMusik() {
|
||||
const musikState = useProxy(stateDashboardMusik);
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const id = params.id as string;
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
const { data, loading, load } = musikState.musik.findUnique;
|
||||
|
||||
useShallowEffect(() => {
|
||||
if (id) {
|
||||
load(id);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'lg' }} py="xs">
|
||||
<Stack>
|
||||
<Skeleton height={50} radius="md" />
|
||||
<Skeleton height={400} radius="md" />
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'lg' }} py="xl">
|
||||
<Center>
|
||||
<Text c="dimmed">Musik tidak ditemukan</Text>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
setIsDeleting(true);
|
||||
await musikState.musik.delete.byId(id);
|
||||
setShowDeleteModal(false);
|
||||
router.push('/admin/musik');
|
||||
} catch (error) {
|
||||
console.error('Error deleting musik:', error);
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'lg' }} py="xs">
|
||||
{/* Header dengan tombol kembali */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.push('/admin/musik')}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Detail Musik
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Cover Image */}
|
||||
{data.coverImage && (
|
||||
<Box
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: 400,
|
||||
margin: '0 auto',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={data.coverImage.link}
|
||||
alt={data.judul}
|
||||
radius="md"
|
||||
style={{
|
||||
width: '100%',
|
||||
aspectRatio: '1/1',
|
||||
objectFit: 'cover',
|
||||
display: 'block',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Info Section */}
|
||||
<Stack gap="sm">
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} c="dimmed">
|
||||
Judul
|
||||
</Text>
|
||||
<Text fz="md" fw={600}>
|
||||
{data.judul}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} c="dimmed">
|
||||
Artis
|
||||
</Text>
|
||||
<Text fz="md" fw={500}>
|
||||
{data.artis}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{data.deskripsi && (
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} c="dimmed">
|
||||
Deskripsi
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Group gap="xl">
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} c="dimmed">
|
||||
Durasi
|
||||
</Text>
|
||||
<Text fz="md" fw={500}>
|
||||
{data.durasi}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{data.genre && (
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} c="dimmed">
|
||||
Genre
|
||||
</Text>
|
||||
<Text fz="md" fw={500}>
|
||||
{data.genre}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{data.tahunRilis && (
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} c="dimmed">
|
||||
Tahun Rilis
|
||||
</Text>
|
||||
<Text fz="md" fw={500}>
|
||||
{data.tahunRilis}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
{/* Audio File */}
|
||||
{data.audioFile && (
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} c="dimmed">
|
||||
File Audio
|
||||
</Text>
|
||||
<Card mt="xs" p="sm" withBorder>
|
||||
<Group gap="sm">
|
||||
<Text fz="sm" truncate style={{ flex: 1 }}>
|
||||
{data.audioFile.realName}
|
||||
</Text>
|
||||
<Button
|
||||
component="a"
|
||||
href={data.audioFile.link}
|
||||
target="_blank"
|
||||
variant="light"
|
||||
size="sm"
|
||||
>
|
||||
Putar
|
||||
</Button>
|
||||
</Group>
|
||||
</Card>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<Group justify="right" mt="md">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="red"
|
||||
radius="md"
|
||||
size="md"
|
||||
leftSection={<IconTrash size={18} />}
|
||||
onClick={() => setShowDeleteModal(true)}
|
||||
>
|
||||
Hapus
|
||||
</Button>
|
||||
<Button
|
||||
variant="filled"
|
||||
color="blue"
|
||||
radius="md"
|
||||
size="md"
|
||||
leftSection={<IconEdit size={18} />}
|
||||
onClick={() => router.push(`/admin/musik/${id}/edit`)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
<Modal
|
||||
opened={showDeleteModal}
|
||||
onClose={() => setShowDeleteModal(false)}
|
||||
title="Konfirmasi Hapus"
|
||||
centered
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text>
|
||||
Apakah Anda yakin ingin menghapus musik "{data.judul}"?
|
||||
</Text>
|
||||
<Text c="red" fz="sm">
|
||||
Tindakan ini tidak dapat dibatalkan.
|
||||
</Text>
|
||||
<Group justify="right" mt="md">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
color="red"
|
||||
onClick={handleDelete}
|
||||
loading={isDeleting}
|
||||
>
|
||||
Hapus
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,440 +0,0 @@
|
||||
'use client'
|
||||
import CreateEditor from '../../_com/createEditor';
|
||||
import stateDashboardMusik from '../../_state/desa/musik';
|
||||
import colors from '@/con/colors';
|
||||
import ApiFetch from '@/lib/api-fetch';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Loader,
|
||||
ActionIcon,
|
||||
NumberInput
|
||||
} from '@mantine/core';
|
||||
import { Dropzone } from '@mantine/dropzone';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconPhoto, IconUpload, IconX, IconMusic } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
export default function CreateMusik() {
|
||||
const musikState = useProxy(stateDashboardMusik);
|
||||
const [previewCover, setPreviewCover] = useState<string | null>(null);
|
||||
const [coverFile, setCoverFile] = useState<File | null>(null);
|
||||
const [previewAudio, setPreviewAudio] = useState<string | null>(null);
|
||||
const [audioFile, setAudioFile] = useState<File | null>(null);
|
||||
const [isExtractingDuration, setIsExtractingDuration] = useState(false);
|
||||
const router = useRouter();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Fungsi untuk mendapatkan durasi dari file audio
|
||||
const getAudioDuration = (file: File): Promise<string> => {
|
||||
return new Promise((resolve) => {
|
||||
const audio = new Audio();
|
||||
const url = URL.createObjectURL(file);
|
||||
|
||||
audio.addEventListener('loadedmetadata', () => {
|
||||
const duration = audio.duration;
|
||||
const minutes = Math.floor(duration / 60);
|
||||
const seconds = Math.floor(duration % 60);
|
||||
const formatted = `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||
URL.revokeObjectURL(url);
|
||||
resolve(formatted);
|
||||
});
|
||||
|
||||
audio.addEventListener('error', () => {
|
||||
URL.revokeObjectURL(url);
|
||||
resolve('0:00');
|
||||
});
|
||||
|
||||
audio.src = url;
|
||||
});
|
||||
};
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
musikState.musik.create.form.judul?.trim() !== '' &&
|
||||
musikState.musik.create.form.artis?.trim() !== '' &&
|
||||
musikState.musik.create.form.durasi?.trim() !== '' &&
|
||||
audioFile !== null &&
|
||||
coverFile !== null
|
||||
);
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
return () => {
|
||||
musikState.musik.create.resetForm();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const resetForm = () => {
|
||||
musikState.musik.create.form = {
|
||||
judul: '',
|
||||
artis: '',
|
||||
deskripsi: '',
|
||||
durasi: '',
|
||||
audioFileId: '',
|
||||
coverImageId: '',
|
||||
genre: '',
|
||||
tahunRilis: undefined,
|
||||
};
|
||||
setPreviewCover(null);
|
||||
setCoverFile(null);
|
||||
setPreviewAudio(null);
|
||||
setAudioFile(null);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!musikState.musik.create.form.judul?.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!musikState.musik.create.form.artis?.trim()) {
|
||||
toast.error('Artis wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!musikState.musik.create.form.durasi?.trim()) {
|
||||
toast.error('Durasi wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!coverFile) {
|
||||
toast.error('Cover image wajib dipilih');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!audioFile) {
|
||||
toast.error('File audio wajib dipilih');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Upload cover image
|
||||
console.log('Uploading cover image:', coverFile.name);
|
||||
const coverRes = await ApiFetch.api.fileStorage.create.post({
|
||||
file: coverFile,
|
||||
name: coverFile.name,
|
||||
});
|
||||
|
||||
console.log('Cover upload response:', coverRes);
|
||||
const coverUploaded = coverRes.data?.data;
|
||||
if (!coverUploaded?.id) {
|
||||
console.error('Cover upload failed:', coverRes);
|
||||
toast.error('Gagal mengunggah cover, silakan coba lagi');
|
||||
return;
|
||||
}
|
||||
|
||||
musikState.musik.create.form.coverImageId = coverUploaded.id;
|
||||
|
||||
// Upload audio file
|
||||
console.log('Uploading audio file:', audioFile.name);
|
||||
const audioRes = await ApiFetch.api.fileStorage.create.post({
|
||||
file: audioFile,
|
||||
name: audioFile.name,
|
||||
});
|
||||
|
||||
console.log('Audio upload response:', audioRes);
|
||||
const audioUploaded = audioRes.data?.data;
|
||||
if (!audioUploaded?.id) {
|
||||
console.error('Audio upload failed:', audioRes);
|
||||
toast.error('Gagal mengunggah audio, silakan coba lagi');
|
||||
return;
|
||||
}
|
||||
|
||||
musikState.musik.create.form.audioFileId = audioUploaded.id;
|
||||
|
||||
// Create musik entry
|
||||
console.log('Creating musik entry with form:', musikState.musik.create.form);
|
||||
await musikState.musik.create.create();
|
||||
|
||||
resetForm();
|
||||
router.push('/admin/musik');
|
||||
} catch (error) {
|
||||
console.error('Error creating musik:', {
|
||||
error,
|
||||
message: error instanceof Error ? error.message : 'Unknown error',
|
||||
stack: error instanceof Error ? error.stack : undefined,
|
||||
});
|
||||
toast.error('Terjadi kesalahan saat membuat musik');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'lg' }} py="xs">
|
||||
{/* Header dengan tombol kembali */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Musik
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul lagu"
|
||||
value={musikState.musik.create.form.judul}
|
||||
onChange={(e) => (musikState.musik.create.form.judul = e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Artis"
|
||||
placeholder="Masukkan nama artis"
|
||||
value={musikState.musik.create.form.artis}
|
||||
onChange={(e) => (musikState.musik.create.form.artis = e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi
|
||||
</Text>
|
||||
<CreateEditor
|
||||
value={musikState.musik.create.form.deskripsi}
|
||||
onChange={(htmlContent) => {
|
||||
musikState.musik.create.form.deskripsi = htmlContent;
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Group gap="md">
|
||||
<TextInput
|
||||
label="Durasi"
|
||||
placeholder="Contoh: 3:45"
|
||||
value={musikState.musik.create.form.durasi}
|
||||
onChange={(e) => (musikState.musik.create.form.durasi = e.target.value)}
|
||||
required
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Genre"
|
||||
placeholder="Contoh: Pop, Rock, Jazz"
|
||||
value={musikState.musik.create.form.genre}
|
||||
onChange={(e) => (musikState.musik.create.form.genre = e.target.value)}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
<NumberInput
|
||||
label="Tahun Rilis"
|
||||
placeholder="Contoh: 2024"
|
||||
value={musikState.musik.create.form.tahunRilis}
|
||||
onChange={(val) => (musikState.musik.create.form.tahunRilis = val as number | undefined)}
|
||||
min={1900}
|
||||
max={new Date().getFullYear() + 1}
|
||||
/>
|
||||
|
||||
{/* Cover Image */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Cover Image
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
const selectedFile = files[0];
|
||||
if (selectedFile) {
|
||||
setCoverFile(selectedFile);
|
||||
setPreviewCover(URL.createObjectURL(selectedFile));
|
||||
}
|
||||
}}
|
||||
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
|
||||
maxSize={5 * 1024 ** 2}
|
||||
accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
|
||||
radius="md"
|
||||
p="xl"
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={180}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
|
||||
</Dropzone.Reject>
|
||||
<Dropzone.Idle>
|
||||
<IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
|
||||
</Dropzone.Idle>
|
||||
</Group>
|
||||
<Text ta="center" mt="sm" size="sm" color="dimmed">
|
||||
Seret gambar atau klik untuk memilih file (maks 5MB)
|
||||
</Text>
|
||||
</Dropzone>
|
||||
|
||||
{previewCover && (
|
||||
<Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
|
||||
<Image
|
||||
src={previewCover}
|
||||
alt="Preview Cover"
|
||||
radius="md"
|
||||
style={{
|
||||
maxHeight: 200,
|
||||
objectFit: 'contain',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<ActionIcon
|
||||
variant="filled"
|
||||
color="red"
|
||||
radius="xl"
|
||||
size="sm"
|
||||
pos="absolute"
|
||||
top={5}
|
||||
right={5}
|
||||
onClick={() => {
|
||||
setPreviewCover(null);
|
||||
setCoverFile(null);
|
||||
}}
|
||||
style={{
|
||||
boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
<IconX size={14} />
|
||||
</ActionIcon>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Audio File */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
File Audio
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={async (files) => {
|
||||
const selectedFile = files[0];
|
||||
if (selectedFile) {
|
||||
setAudioFile(selectedFile);
|
||||
setPreviewAudio(selectedFile.name);
|
||||
|
||||
// Extract durasi otomatis dari audio
|
||||
setIsExtractingDuration(true);
|
||||
try {
|
||||
const duration = await getAudioDuration(selectedFile);
|
||||
musikState.musik.create.form.durasi = duration;
|
||||
toast.success(`Durasi audio terdeteksi: ${duration}`);
|
||||
} catch (error) {
|
||||
console.error('Error extracting audio duration:', error);
|
||||
toast.error('Gagal mendeteksi durasi audio, silakan isi manual');
|
||||
} finally {
|
||||
setIsExtractingDuration(false);
|
||||
}
|
||||
}
|
||||
}}
|
||||
onReject={() => toast.error('File tidak valid, gunakan format audio (MP3, WAV, OGG)')}
|
||||
maxSize={50 * 1024 ** 2}
|
||||
accept={{ 'audio/*': ['.mp3', '.wav', '.ogg', '.m4a'] }}
|
||||
radius="md"
|
||||
p="xl"
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={180}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
|
||||
</Dropzone.Reject>
|
||||
<Dropzone.Idle>
|
||||
<IconMusic size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
|
||||
</Dropzone.Idle>
|
||||
</Group>
|
||||
<Text ta="center" mt="sm" size="sm" color="dimmed">
|
||||
Seret file audio atau klik untuk memilih file (maks 50MB)
|
||||
</Text>
|
||||
</Dropzone>
|
||||
|
||||
{previewAudio && (
|
||||
<Box mt="sm">
|
||||
<Card p="sm" withBorder>
|
||||
<Group gap="sm">
|
||||
<IconMusic size={20} color={colors['blue-button']} />
|
||||
<Text fz="sm" truncate style={{ flex: 1 }}>
|
||||
{previewAudio}
|
||||
</Text>
|
||||
{isExtractingDuration && (
|
||||
<Text fz="xs" c="blue">
|
||||
Mendeteksi durasi...
|
||||
</Text>
|
||||
)}
|
||||
<ActionIcon
|
||||
variant="filled"
|
||||
color="red"
|
||||
radius="xl"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setPreviewAudio(null);
|
||||
setAudioFile(null);
|
||||
}}
|
||||
>
|
||||
<IconX size={14} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={resetForm}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
style={{
|
||||
background: !isFormValid() || isSubmitting
|
||||
? `linear-gradient(135deg, #cccccc, #eeeeee)`
|
||||
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,231 +0,0 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Pagination,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Table,
|
||||
TableTbody,
|
||||
TableTd,
|
||||
TableTh,
|
||||
TableThead,
|
||||
TableTr,
|
||||
Text,
|
||||
Title
|
||||
} from '@mantine/core';
|
||||
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
|
||||
import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../_com/header';
|
||||
import stateDashboardMusik from '../_state/desa/musik';
|
||||
|
||||
|
||||
function Musik() {
|
||||
const [search, setSearch] = useState("");
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title="Musik Desa"
|
||||
placeholder="Cari judul, artis, atau genre..."
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListMusik search={search} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ListMusik({ search }: { search: string }) {
|
||||
const musikState = useProxy(stateDashboardMusik);
|
||||
const router = useRouter();
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000);
|
||||
|
||||
const { data, page, totalPages, loading, load } = musikState.musik.findMany;
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 10, debouncedSearch);
|
||||
}, [page, debouncedSearch]);
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py="md">
|
||||
<Skeleton height={600} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
const filteredData = data || [];
|
||||
|
||||
return (
|
||||
<Box py="md">
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Musik</Title>
|
||||
<Button
|
||||
leftSection={<IconCircleDashedPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/musik/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* Desktop Table */}
|
||||
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
|
||||
<Table highlightOnHover
|
||||
layout="fixed"
|
||||
withColumnBorders={false} miw={0}>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh w="30%">Judul</TableTh>
|
||||
<TableTh w="20%">Artis</TableTh>
|
||||
<TableTh w="15%">Durasi</TableTh>
|
||||
<TableTh w="15%">Genre</TableTh>
|
||||
<TableTh w="20%">Aksi</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Text fz="md" fw={600} lh={1.45} truncate="end">
|
||||
{item.judul}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text fz="sm" c="dimmed" lh={1.45}>
|
||||
{item.artis}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text fz="sm" c="dimmed" lh={1.45}>
|
||||
{item.durasi}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text fz="sm" c="dimmed" lh={1.45}>
|
||||
{item.genre || '-'}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="blue"
|
||||
onClick={() =>
|
||||
router.push(`/admin/musik/${item.id}`)
|
||||
}
|
||||
fz="sm"
|
||||
px="sm"
|
||||
h={36}
|
||||
>
|
||||
<IconDeviceImacCog size={18} />
|
||||
<Text ml="xs">Detail</Text>
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={5}>
|
||||
<Center py="xl">
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data musik yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
|
||||
{/* Mobile Cards */}
|
||||
<Stack hiddenFrom="md" gap="sm" mt="sm">
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item) => (
|
||||
<Paper key={item.id} withBorder p="md" radius="md">
|
||||
<Stack gap={"xs"}>
|
||||
<Text fz="sm" fw={600} lh={1.4} c="dimmed">
|
||||
Judul
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} lh={1.45}>
|
||||
{item.judul}
|
||||
</Text>
|
||||
|
||||
<Text fz="sm" fw={600} lh={1.4} c="dimmed" mt="xs">
|
||||
Artis
|
||||
</Text>
|
||||
<Text fz="sm" lh={1.45} fw={500}>
|
||||
{item.artis}
|
||||
</Text>
|
||||
|
||||
<Text fz="sm" fw={600} lh={1.4} c="dimmed" mt="xs">
|
||||
Durasi
|
||||
</Text>
|
||||
<Text fz="sm" lh={1.45} fw={500}>
|
||||
{item.durasi}
|
||||
</Text>
|
||||
|
||||
<Text fz="sm" fw={600} lh={1.4} c="dimmed" mt="xs">
|
||||
Genre
|
||||
</Text>
|
||||
<Text fz="sm" lh={1.45} fw={500}>
|
||||
{item.genre || '-'}
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
variant="light"
|
||||
color="blue"
|
||||
fullWidth
|
||||
mt="sm"
|
||||
onClick={() =>
|
||||
router.push(`/admin/musik/${item.id}`)
|
||||
}
|
||||
fz="sm"
|
||||
h={36}
|
||||
>
|
||||
<IconDeviceImacCog size={18} />
|
||||
<Text ml="xs">Detail</Text>
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))
|
||||
) : (
|
||||
<Center py="xl">
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data musik yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10, debouncedSearch);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Musik;
|
||||
@@ -1,25 +0,0 @@
|
||||
// src/app/admin/_com/getMenuIdsByRoleId.ts
|
||||
import { navBar, role1, role2, role3 } from '@/app/admin/_com/list_PageAdmin';
|
||||
|
||||
/**
|
||||
* Mengembalikan daftar ID menu (string[]) berdasarkan roleId
|
||||
*/
|
||||
export function getMenuIdsByRoleId(roleId: string | number): string[] {
|
||||
const id = typeof roleId === 'string' ? parseInt(roleId, 10) : roleId;
|
||||
|
||||
switch (id) {
|
||||
case 0:
|
||||
// Asumsikan devBar ada dan punya struktur sama
|
||||
return []; // atau sesuaikan jika ada devBar
|
||||
case 1:
|
||||
return navBar.map(section => section.id);
|
||||
case 2:
|
||||
return role1.map(section => section.id);
|
||||
case 3:
|
||||
return role2.map(section => section.id);
|
||||
case 4:
|
||||
return role3.map(section => section.id);
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
}
|
||||
@@ -330,7 +330,7 @@ export const devBar = [
|
||||
path: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana"
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "Pendidikan",
|
||||
name: "Pendidikan",
|
||||
@@ -373,38 +373,6 @@ export const devBar = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "Kependudukan",
|
||||
name: "Kependudukan",
|
||||
path: "",
|
||||
children: [
|
||||
{
|
||||
id: "Kependudukan_1",
|
||||
name: "Distribusi Agama",
|
||||
path: "/admin/kependudukan/distribusi-agama"
|
||||
},
|
||||
{
|
||||
id: "Kependudukan_2",
|
||||
name: "Distribusi Umur",
|
||||
path: "/admin/kependudukan/distribusi-umur"
|
||||
},
|
||||
{
|
||||
id: "Kependudukan_3",
|
||||
name: "Data Banjar",
|
||||
path: "/admin/kependudukan/data-banjar"
|
||||
},
|
||||
{
|
||||
id: "Kependudukan_4",
|
||||
name: "Migrasi Penduduk",
|
||||
path: "/admin/kependudukan/migrasi-penduduk"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "Musik",
|
||||
name: "Musik",
|
||||
path: "/admin/musik"
|
||||
},
|
||||
{
|
||||
id: "User & Role",
|
||||
name: "User & Role",
|
||||
@@ -761,7 +729,7 @@ export const navBar = [
|
||||
path: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana"
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "Pendidikan",
|
||||
name: "Pendidikan",
|
||||
@@ -804,38 +772,6 @@ export const navBar = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "Kependudukan",
|
||||
name: "Kependudukan",
|
||||
path: "",
|
||||
children: [
|
||||
{
|
||||
id: "Kependudukan_1",
|
||||
name: "Distribusi Agama",
|
||||
path: "/admin/kependudukan/distribusi-agama"
|
||||
},
|
||||
{
|
||||
id: "Kependudukan_2",
|
||||
name: "Distribusi Umur",
|
||||
path: "/admin/kependudukan/distribusi-umur"
|
||||
},
|
||||
{
|
||||
id: "Kependudukan_3",
|
||||
name: "Data Banjar",
|
||||
path: "/admin/kependudukan/data-banjar"
|
||||
},
|
||||
{
|
||||
id: "Kependudukan_4",
|
||||
name: "Migrasi Penduduk",
|
||||
path: "/admin/kependudukan/migrasi-penduduk"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "Musik",
|
||||
name: "Musik",
|
||||
path: "/admin/musik"
|
||||
},
|
||||
{
|
||||
id: "User & Role",
|
||||
name: "User & Role",
|
||||
@@ -1115,7 +1051,7 @@ export const role1 = [
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "Lingkungan",
|
||||
name: "Lingkungan",
|
||||
@@ -1152,38 +1088,6 @@ export const role1 = [
|
||||
path: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "Kependudukan",
|
||||
name: "Kependudukan",
|
||||
path: "",
|
||||
children: [
|
||||
{
|
||||
id: "Kependudukan_1",
|
||||
name: "Distribusi Agama",
|
||||
path: "/admin/kependudukan/distribusi-agama"
|
||||
},
|
||||
{
|
||||
id: "Kependudukan_2",
|
||||
name: "Distribusi Umur",
|
||||
path: "/admin/kependudukan/distribusi-umur"
|
||||
},
|
||||
{
|
||||
id: "Kependudukan_3",
|
||||
name: "Data Banjar",
|
||||
path: "/admin/kependudukan/data-banjar"
|
||||
},
|
||||
{
|
||||
id: "Kependudukan_4",
|
||||
name: "Migrasi Penduduk",
|
||||
path: "/admin/kependudukan/migrasi-penduduk"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "Musik",
|
||||
name: "Musik",
|
||||
path: "/admin/musik"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1229,11 +1133,6 @@ export const role2 = [
|
||||
path: "/admin/kesehatan/info-wabah-penyakit"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "Musik",
|
||||
name: "Musik",
|
||||
path: "/admin/musik"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1279,10 +1178,5 @@ export const role3 = [
|
||||
path: "/admin/pendidikan/data-pendidikan"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "Musik",
|
||||
name: "Musik",
|
||||
path: "/admin/musik"
|
||||
}
|
||||
]
|
||||
@@ -1,9 +1,9 @@
|
||||
'use client'
|
||||
|
||||
import { DarkModeToggle } from "@/components/admin/DarkModeToggle";
|
||||
import { useDarkMode } from "@/state/darkModeStore";
|
||||
import { authStore } from "@/store/authStore";
|
||||
import { themeTokens } from "@/utils/themeTokens";
|
||||
import { useDarkMode } from "@/state/darkModeStore";
|
||||
import { themeTokens, getActiveStateStyles } from "@/utils/themeTokens";
|
||||
import { DarkModeToggle } from "@/components/admin/DarkModeToggle";
|
||||
import {
|
||||
ActionIcon,
|
||||
AppShell,
|
||||
@@ -316,13 +316,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
}}
|
||||
variant="light"
|
||||
active={isParentActive}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (v.path) handleNavClick(v.path);
|
||||
}}
|
||||
href={v.path || undefined}
|
||||
>
|
||||
{v.children?.map((child, key) => {
|
||||
{v.children.map((child, key) => {
|
||||
const isChildActive = segments.includes(_.lowerCase(child.name));
|
||||
return (
|
||||
<NavLink
|
||||
@@ -359,8 +354,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
borderLeft: `2px solid ${tokens.colors.primary}`,
|
||||
}),
|
||||
...(mounted && isChildActive && !isDark && {
|
||||
backgroundColor: 'rgba(25, 113, 194, 0.1)',
|
||||
borderLeft: `2px solid ${tokens.colors.primary}`,
|
||||
backgroundColor: tokens.colors.bg.hover,
|
||||
}),
|
||||
}
|
||||
}}
|
||||
|
||||
@@ -1,33 +1,26 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
import { Prisma } from "@prisma/client";
|
||||
import { Context } from "elysia";
|
||||
|
||||
type FormCreate = {
|
||||
judul: string;
|
||||
deskripsi: string;
|
||||
content: string;
|
||||
kategoriBeritaId: string;
|
||||
imageId: string; // Featured image
|
||||
imageIds?: string[]; // Multiple images for gallery
|
||||
linkVideo?: string; // YouTube link
|
||||
};
|
||||
|
||||
type FormCreate = Prisma.BeritaGetPayload<{
|
||||
select: {
|
||||
judul: true;
|
||||
deskripsi: true;
|
||||
content: true;
|
||||
kategoriBeritaId: true;
|
||||
imageId: true;
|
||||
};
|
||||
}>;
|
||||
async function beritaCreate(context: Context) {
|
||||
const body = context.body as FormCreate;
|
||||
|
||||
await prisma.berita.create({
|
||||
data: {
|
||||
data: {
|
||||
content: body.content,
|
||||
deskripsi: body.deskripsi,
|
||||
imageId: body.imageId,
|
||||
judul: body.judul,
|
||||
kategoriBeritaId: body.kategoriBeritaId,
|
||||
// Connect multiple images if provided
|
||||
linkVideo: body.linkVideo,
|
||||
images: body.imageIds && body.imageIds.length > 0
|
||||
? {
|
||||
connect: body.imageIds.map((id) => ({ id })),
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -28,7 +28,6 @@ export default async function handler(
|
||||
where: { id },
|
||||
include: {
|
||||
image: true,
|
||||
images: true,
|
||||
kategoriBerita: true,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -21,8 +21,6 @@ const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
|
||||
imageId: t.String(),
|
||||
content: t.String(),
|
||||
kategoriBeritaId: t.Union([t.String(), t.Null()]),
|
||||
imageIds: t.Array(t.String()),
|
||||
linkVideo: t.Optional(t.String()),
|
||||
}),
|
||||
})
|
||||
.get("/find-first", beritaFindFirst)
|
||||
@@ -41,8 +39,6 @@ const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
|
||||
imageId: t.String(),
|
||||
content: t.String(),
|
||||
kategoriBeritaId: t.Union([t.String(), t.Null()]),
|
||||
imageIds: t.Array(t.String()),
|
||||
linkVideo: t.Optional(t.String()),
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
@@ -2,49 +2,15 @@ import prisma from "@/lib/prisma";
|
||||
import { Context } from "elysia";
|
||||
|
||||
export default async function kategoriBeritaDelete(context: Context) {
|
||||
try {
|
||||
const id = context.params?.id as string;
|
||||
const id = context.params.id as string;
|
||||
|
||||
if (!id) {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "ID tidak boleh kosong",
|
||||
}, { status: 400 });
|
||||
}
|
||||
await prisma.kategoriBerita.delete({
|
||||
where: { id },
|
||||
});
|
||||
|
||||
// ✅ Cek apakah kategori masih digunakan oleh berita
|
||||
const beritaCount = await prisma.berita.count({
|
||||
where: {
|
||||
kategoriBeritaId: id,
|
||||
isActive: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (beritaCount > 0) {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: `Kategori tidak dapat dihapus karena masih digunakan oleh ${beritaCount} berita`,
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
// ✅ Soft delete (bukan hard delete)
|
||||
await prisma.kategoriBerita.update({
|
||||
where: { id },
|
||||
data: {
|
||||
deletedAt: new Date(),
|
||||
isActive: false,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Kategori berita berhasil dihapus",
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Delete kategori error:", error);
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "Gagal menghapus kategori: " + (error instanceof Error ? error.message : 'Unknown error'),
|
||||
}, { status: 500 });
|
||||
}
|
||||
return {
|
||||
status: 200,
|
||||
success: true,
|
||||
message: "Sukses Menghapus kategori berita",
|
||||
};
|
||||
}
|
||||
@@ -4,48 +4,52 @@ import { Prisma } from "@prisma/client";
|
||||
import fs from "fs/promises";
|
||||
import path from "path";
|
||||
|
||||
type FormUpdate = {
|
||||
id: string;
|
||||
judul: string;
|
||||
deskripsi: string;
|
||||
content: string;
|
||||
kategoriBeritaId: string;
|
||||
imageId: string; // Featured image
|
||||
imageIds?: string[]; // Multiple images for gallery
|
||||
linkVideo?: string; // YouTube link
|
||||
};
|
||||
type FormUpdate = Prisma.BeritaGetPayload<{
|
||||
select: {
|
||||
id: true;
|
||||
judul: true;
|
||||
deskripsi: true;
|
||||
content: true;
|
||||
kategoriBeritaId: true;
|
||||
imageId: true;
|
||||
};
|
||||
}>;
|
||||
|
||||
async function beritaUpdate(context: Context) {
|
||||
try {
|
||||
const id = context.params?.id as string;
|
||||
const id = context.params?.id as string; // ambil dari URL
|
||||
const body = (await context.body) as Omit<FormUpdate, "id">;
|
||||
|
||||
const { judul, deskripsi, content, kategoriBeritaId, imageId, imageIds, linkVideo } = body;
|
||||
|
||||
|
||||
const {
|
||||
judul,
|
||||
deskripsi,
|
||||
content,
|
||||
kategoriBeritaId,
|
||||
imageId,
|
||||
} = body;
|
||||
|
||||
if (!id) {
|
||||
return new Response(
|
||||
JSON.stringify({ success: false, message: "ID tidak boleh kosong" }),
|
||||
{ status: 400, headers: { "Content-Type": "application/json" } },
|
||||
{ status: 400, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const existing = await prisma.berita.findUnique({
|
||||
where: { id },
|
||||
include: {
|
||||
image: true,
|
||||
images: true, // Include gallery images
|
||||
kategoriBerita: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
if (!existing) {
|
||||
return new Response(
|
||||
JSON.stringify({ success: false, message: "Berita tidak ditemukan" }),
|
||||
{ status: 404, headers: { "Content-Type": "application/json" } },
|
||||
{ status: 404, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
// Delete old featured image if changed
|
||||
|
||||
if (existing.imageId && existing.imageId !== imageId) {
|
||||
const oldImage = existing.image;
|
||||
if (oldImage) {
|
||||
@@ -60,60 +64,35 @@ async function beritaUpdate(context: Context) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Build update data
|
||||
const updateData: Prisma.BeritaUpdateInput = {
|
||||
judul,
|
||||
deskripsi,
|
||||
content,
|
||||
kategoriBerita: kategoriBeritaId ? { connect: { id: kategoriBeritaId } } : { disconnect: true },
|
||||
image: imageId ? { connect: { id: imageId } } : { disconnect: true },
|
||||
linkVideo,
|
||||
};
|
||||
|
||||
// Handle multiple images update
|
||||
if (imageIds !== undefined) {
|
||||
// Disconnect all existing images first
|
||||
updateData.images = {
|
||||
set: [],
|
||||
};
|
||||
|
||||
// Connect new images if provided
|
||||
if (imageIds.length > 0) {
|
||||
updateData.images = {
|
||||
...updateData.images,
|
||||
connect: imageIds.map((id) => ({ id })),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const updated = await prisma.berita.update({
|
||||
where: { id },
|
||||
data: updateData,
|
||||
include: {
|
||||
image: true,
|
||||
images: true,
|
||||
kategoriBerita: true,
|
||||
data: {
|
||||
judul,
|
||||
deskripsi,
|
||||
content,
|
||||
kategoriBeritaId: kategoriBeritaId || null,
|
||||
imageId,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: true,
|
||||
message: "Berita berhasil diupdate",
|
||||
data: updated,
|
||||
}),
|
||||
{ status: 200, headers: { "Content-Type": "application/json" } },
|
||||
{ status: 200, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Error updating berita:", error);
|
||||
console.error("Error updating berita:", error);
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
message: "Terjadi kesalahan saat mengupdate berita",
|
||||
}),
|
||||
{ status: 500, headers: { "Content-Type": "application/json" } },
|
||||
{ status: 500, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
}
|
||||
export default beritaUpdate;
|
||||
export default beritaUpdate;
|
||||
|
||||
@@ -2,7 +2,7 @@ import Elysia from "elysia";
|
||||
import Berita from "./berita";
|
||||
import Pengumuman from "./pengumuman";
|
||||
import ProfileDesa from "./profile/profile_desa";
|
||||
import PotensiDesa from "./potensi";
|
||||
import PotensiDesa from "./potensi";
|
||||
import GalleryFoto from "./gallery/foto";
|
||||
import GalleryVideo from "./gallery/video";
|
||||
import LayananDesa from "./layanan";
|
||||
@@ -12,10 +12,9 @@ import KategoriBerita from "./berita/kategori-berita";
|
||||
import KategoriPengumuman from "./pengumuman/kategori-pengumuman";
|
||||
import MantanPerbekel from "./profile/profile-mantan-perbekel";
|
||||
import AjukanPermohonan from "./layanan/ajukan_permohonan";
|
||||
import Musik from "./musik";
|
||||
|
||||
|
||||
const Desa = new Elysia({ prefix: "/desa", tags: ["Desa"] })
|
||||
const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
|
||||
.use(Berita)
|
||||
.use(Pengumuman)
|
||||
.use(ProfileDesa)
|
||||
@@ -29,7 +28,6 @@ const Desa = new Elysia({ prefix: "/desa", tags: ["Desa"] })
|
||||
.use(KategoriBerita)
|
||||
.use(KategoriPengumuman)
|
||||
.use(AjukanPermohonan)
|
||||
.use(Musik)
|
||||
|
||||
|
||||
|
||||
export default Desa;
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
import { Context } from "elysia";
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
type FormCreate = {
|
||||
judul: string;
|
||||
artis: string;
|
||||
deskripsi?: string;
|
||||
durasi: string;
|
||||
audioFileId: string;
|
||||
coverImageId: string;
|
||||
genre?: string;
|
||||
tahunRilis?: number | null;
|
||||
};
|
||||
|
||||
async function musikCreate(context: Context) {
|
||||
const body = context.body as FormCreate;
|
||||
|
||||
await prisma.musikDesa.create({
|
||||
data: {
|
||||
judul: body.judul,
|
||||
artis: body.artis,
|
||||
deskripsi: body.deskripsi,
|
||||
durasi: body.durasi,
|
||||
audioFileId: body.audioFileId,
|
||||
coverImageId: body.coverImageId,
|
||||
genre: body.genre,
|
||||
tahunRilis: body.tahunRilis,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Sukses menambahkan musik",
|
||||
};
|
||||
}
|
||||
|
||||
export default musikCreate;
|
||||
@@ -1,54 +0,0 @@
|
||||
import { Context } from "elysia";
|
||||
import prisma from "@/lib/prisma";
|
||||
import path from "path";
|
||||
|
||||
const musikDelete = async (context: Context) => {
|
||||
const { id } = context.params as { id: string };
|
||||
|
||||
const musik = await prisma.musikDesa.findUnique({
|
||||
where: { id },
|
||||
include: { audioFile: true, coverImage: true },
|
||||
});
|
||||
|
||||
if (!musik) return { status: 404, body: "Musik tidak ditemukan" };
|
||||
|
||||
// 1. HAPUS MUSIK DULU
|
||||
await prisma.musikDesa.delete({ where: { id } });
|
||||
|
||||
// 2. HAPUS FILE AUDIO (jika ada)
|
||||
if (musik.audioFile) {
|
||||
try {
|
||||
const fs = await import("fs/promises");
|
||||
const filePath = path.join(musik.audioFile.path, musik.audioFile.name);
|
||||
await fs.unlink(filePath);
|
||||
|
||||
await prisma.fileStorage.delete({
|
||||
where: { id: musik.audioFile.id },
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error deleting audio file:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 3. HAPUS FILE COVER (jika ada)
|
||||
if (musik.coverImage) {
|
||||
try {
|
||||
const fs = await import("fs/promises");
|
||||
const filePath = path.join(musik.coverImage.path, musik.coverImage.name);
|
||||
await fs.unlink(filePath);
|
||||
|
||||
await prisma.fileStorage.delete({
|
||||
where: { id: musik.coverImage.id },
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error deleting cover image:", error);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Musik dan file terkait berhasil dihapus",
|
||||
};
|
||||
};
|
||||
|
||||
export default musikDelete;
|
||||
@@ -1,66 +0,0 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
export default async function findMusikById(request: Request) {
|
||||
try {
|
||||
const url = new URL(request.url);
|
||||
const id = url.pathname.split("/").pop();
|
||||
|
||||
if (!id) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
message: "ID tidak valid",
|
||||
}),
|
||||
{
|
||||
status: 400,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const data = await prisma.musikDesa.findUnique({
|
||||
where: { id },
|
||||
include: {
|
||||
audioFile: true,
|
||||
coverImage: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!data) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
message: "Musik tidak ditemukan",
|
||||
}),
|
||||
{
|
||||
status: 404,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: true,
|
||||
message: "Success fetch musik by ID",
|
||||
data,
|
||||
}),
|
||||
{
|
||||
status: 200,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
} catch (e) {
|
||||
console.error("Error fetching musik by ID:", e);
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
message: "Gagal mengambil musik: " + (e instanceof Error ? e.message : 'Unknown error'),
|
||||
}),
|
||||
{
|
||||
status: 500,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
// /api/desa/musik/find-many.ts
|
||||
import prisma from "@/lib/prisma";
|
||||
import { Context } from "elysia";
|
||||
|
||||
async function musikFindMany(context: Context) {
|
||||
// Ambil parameter dari query
|
||||
const page = Number(context.query.page) || 1;
|
||||
const limit = Number(context.query.limit) || 10;
|
||||
const search = (context.query.search as string) || '';
|
||||
const genre = (context.query.genre as string) || '';
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
// Buat where clause
|
||||
const where: any = { isActive: true };
|
||||
|
||||
// Filter berdasarkan genre (jika ada)
|
||||
if (genre) {
|
||||
where.genre = {
|
||||
equals: genre,
|
||||
mode: 'insensitive'
|
||||
};
|
||||
}
|
||||
|
||||
// Tambahkan pencarian (jika ada)
|
||||
if (search) {
|
||||
where.OR = [
|
||||
{ judul: { contains: search, mode: 'insensitive' } },
|
||||
{ artis: { contains: search, mode: 'insensitive' } },
|
||||
{ deskripsi: { contains: search, mode: 'insensitive' } },
|
||||
{ genre: { contains: search, mode: 'insensitive' } }
|
||||
];
|
||||
}
|
||||
|
||||
try {
|
||||
// Ambil data dan total count secara paralel
|
||||
const [data, total] = await Promise.all([
|
||||
prisma.musikDesa.findMany({
|
||||
where,
|
||||
include: {
|
||||
audioFile: true,
|
||||
coverImage: true,
|
||||
},
|
||||
skip,
|
||||
take: limit,
|
||||
orderBy: { createdAt: 'desc' },
|
||||
}),
|
||||
prisma.musikDesa.count({ where }),
|
||||
]);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Berhasil ambil data musik dengan pagination",
|
||||
data,
|
||||
page,
|
||||
limit,
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
};
|
||||
} catch (e) {
|
||||
console.error("Error di findMany paginated:", e);
|
||||
return {
|
||||
success: false,
|
||||
message: "Gagal mengambil data musik",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default musikFindMany;
|
||||
@@ -1,47 +0,0 @@
|
||||
import Elysia, { t } from "elysia";
|
||||
import musikFindMany from "./find-many";
|
||||
import musikCreate from "./create";
|
||||
import musikDelete from "./del";
|
||||
import musikUpdate from "./updt";
|
||||
import findMusikById from "./find-by-id";
|
||||
|
||||
const Musik = new Elysia({ prefix: "/musik", tags: ["Desa/Musik"] })
|
||||
.get("/find-many", musikFindMany)
|
||||
.get("/:id", async (context) => {
|
||||
const response = await findMusikById(new Request(context.request));
|
||||
return response;
|
||||
})
|
||||
.post("/create", musikCreate, {
|
||||
body: t.Object({
|
||||
judul: t.String(),
|
||||
artis: t.String(),
|
||||
deskripsi: t.Optional(t.String()),
|
||||
durasi: t.String(),
|
||||
audioFileId: t.String(),
|
||||
coverImageId: t.String(),
|
||||
genre: t.Optional(t.String()),
|
||||
tahunRilis: t.Optional(t.Number()),
|
||||
}),
|
||||
})
|
||||
.delete("/delete/:id", musikDelete)
|
||||
.put(
|
||||
"/:id",
|
||||
async (context) => {
|
||||
const response = await musikUpdate(context);
|
||||
return response;
|
||||
},
|
||||
{
|
||||
body: t.Object({
|
||||
judul: t.String(),
|
||||
artis: t.String(),
|
||||
deskripsi: t.Optional(t.String()),
|
||||
durasi: t.String(),
|
||||
audioFileId: t.String(),
|
||||
coverImageId: t.String(),
|
||||
genre: t.Optional(t.String()),
|
||||
tahunRilis: t.Optional(t.Number()),
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
export default Musik;
|
||||
@@ -1,65 +0,0 @@
|
||||
import { Context } from "elysia";
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
type FormUpdate = {
|
||||
judul: string;
|
||||
artis: string;
|
||||
deskripsi?: string;
|
||||
durasi: string;
|
||||
audioFileId: string;
|
||||
coverImageId: string;
|
||||
genre?: string;
|
||||
tahunRilis?: number | null;
|
||||
};
|
||||
|
||||
async function musikUpdate(context: Context) {
|
||||
const { id } = context.params as { id: string };
|
||||
const body = context.body as FormUpdate;
|
||||
|
||||
try {
|
||||
const existing = await prisma.musikDesa.findUnique({
|
||||
where: { id },
|
||||
});
|
||||
|
||||
if (!existing) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
success: false,
|
||||
message: "Musik tidak ditemukan",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const updated = await prisma.musikDesa.update({
|
||||
where: { id },
|
||||
data: {
|
||||
judul: body.judul,
|
||||
artis: body.artis,
|
||||
deskripsi: body.deskripsi,
|
||||
durasi: body.durasi,
|
||||
audioFileId: body.audioFileId,
|
||||
coverImageId: body.coverImageId,
|
||||
genre: body.genre,
|
||||
tahunRilis: body.tahunRilis,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Musik berhasil diupdate",
|
||||
data: updated,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error updating musik:", error);
|
||||
return {
|
||||
status: 500,
|
||||
body: {
|
||||
success: false,
|
||||
message: "Terjadi kesalahan saat mengupdate musik",
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default musikUpdate;
|
||||
@@ -21,12 +21,8 @@ export default async function findUnique(
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
// ✅ Filter by isActive and deletedAt
|
||||
const data = await prisma.potensiDesa.findFirst({
|
||||
where: {
|
||||
id,
|
||||
isActive: true,
|
||||
},
|
||||
const data = await prisma.potensiDesa.findUnique({
|
||||
where: { id },
|
||||
include: {
|
||||
image: true,
|
||||
kategori: true
|
||||
@@ -52,5 +48,5 @@ export default async function findUnique(
|
||||
message: "Gagal mengambil potensi desa: " + (error instanceof Error ? error.message : 'Unknown error'),
|
||||
}, { status: 500 });
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -2,49 +2,15 @@ import prisma from "@/lib/prisma";
|
||||
import { Context } from "elysia";
|
||||
|
||||
export default async function kategoriPotensiDelete(context: Context) {
|
||||
try {
|
||||
const id = context.params?.id as string;
|
||||
const id = context.params.id as string;
|
||||
|
||||
if (!id) {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "ID tidak boleh kosong",
|
||||
}, { status: 400 });
|
||||
}
|
||||
await prisma.kategoriPotensi.delete({
|
||||
where: { id },
|
||||
});
|
||||
|
||||
// ✅ Cek apakah kategori masih digunakan oleh potensi desa
|
||||
const existingPotensi = await prisma.potensiDesa.findFirst({
|
||||
where: {
|
||||
kategoriId: id,
|
||||
isActive: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (existingPotensi) {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "Kategori masih digunakan oleh potensi desa. Tidak dapat dihapus.",
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
// Soft delete
|
||||
await prisma.kategoriPotensi.update({
|
||||
where: { id },
|
||||
data: {
|
||||
deletedAt: new Date(),
|
||||
isActive: false,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Kategori potensi berhasil dihapus",
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Delete kategori error:", error);
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "Gagal menghapus kategori: " + (error instanceof Error ? error.message : 'Unknown error'),
|
||||
}, { status: 500 });
|
||||
}
|
||||
return {
|
||||
status: 200,
|
||||
success: true,
|
||||
message: "Sukses Menghapus kategori potensi",
|
||||
};
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
import { requireAuth } from "@/lib/api-auth";
|
||||
|
||||
export default async function sejarahDesaFindFirst() {
|
||||
// ✅ Authentication check
|
||||
const authResult = await requireAuth();
|
||||
if (!authResult.authenticated) {
|
||||
return authResult.response;
|
||||
}
|
||||
|
||||
try {
|
||||
// Get the first active record
|
||||
const data = await prisma.sejarahDesa.findFirst({
|
||||
where: {
|
||||
isActive: true,
|
||||
},
|
||||
orderBy: { createdAt: 'asc' } // Get the oldest one first
|
||||
});
|
||||
|
||||
if (!data) {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "Data tidak ditemukan",
|
||||
}, {status: 404})
|
||||
}
|
||||
|
||||
return Response.json({
|
||||
success: true,
|
||||
data,
|
||||
}, {status: 200})
|
||||
} catch (error) {
|
||||
console.error("Gagal mengambil data sejarah desa:", error)
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "Terjadi kesalahan saat mengambil data",
|
||||
}, {status: 500})
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,11 @@
|
||||
import Elysia, { t } from "elysia";
|
||||
import sejarahDesaFindById from "./find-by-id";
|
||||
import sejarahDesaUpdate from "./update";
|
||||
import sejarahDesaFindFirst from "./find-first";
|
||||
|
||||
const SejarahDesa = new Elysia({
|
||||
prefix: "/sejarah",
|
||||
tags: ["Desa/Profile"],
|
||||
})
|
||||
.get("/first", async () => {
|
||||
const response = await sejarahDesaFindFirst();
|
||||
return response;
|
||||
})
|
||||
.get("/:id", async (context) => {
|
||||
const response = await sejarahDesaFindById(new Request(context.request));
|
||||
return response;
|
||||
|
||||
@@ -1,14 +1,7 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
import { requireAuth } from "@/lib/api-auth";
|
||||
import { Context } from "elysia";
|
||||
|
||||
export default async function sejarahDesaUpdate(context: Context) {
|
||||
// ✅ Authentication check
|
||||
const authResult = await requireAuth();
|
||||
if (!authResult.authenticated) {
|
||||
return authResult.response;
|
||||
}
|
||||
|
||||
try {
|
||||
const id = context.params?.id as string;
|
||||
const body = await context.body as {
|
||||
|
||||
@@ -13,7 +13,7 @@ import PendapatanAsliDesa from "./pendapatan-asli-desa";
|
||||
import StrukturOrganisasi from "./struktur-bumdes";
|
||||
|
||||
const Ekonomi = new Elysia({
|
||||
prefix: "/ekonomi",
|
||||
prefix: "/api/ekonomi",
|
||||
tags: ["Ekonomi"],
|
||||
})
|
||||
.use(PasarDesa)
|
||||
|
||||
@@ -22,10 +22,9 @@ const fileStorageCreate = async (context: Context) => {
|
||||
if (!UPLOAD_DIR) return { status: 500, body: "UPLOAD_DIR is not defined" };
|
||||
|
||||
const isImage = file.type.startsWith("image/");
|
||||
const isAudio = file.type.startsWith("audio/");
|
||||
const category = isImage ? "image" : isAudio ? "audio" : "document";
|
||||
const category = isImage ? "image" : "document";
|
||||
|
||||
const pathName = category === "image" ? "images" : category === "audio" ? "audio" : "documents";
|
||||
const pathName = category === "image" ? "images" : "documents";
|
||||
const rootPath = path.join(UPLOAD_DIR, pathName);
|
||||
await fs.mkdir(rootPath, { recursive: true });
|
||||
|
||||
@@ -55,11 +54,6 @@ const fileStorageCreate = async (context: Context) => {
|
||||
// Simpan metadata untuk versi desktop sebagai default
|
||||
finalName = desktopName;
|
||||
finalMimeType = "image/webp";
|
||||
} else if (isAudio) {
|
||||
// Simpan file audio tanpa kompresi
|
||||
const ext = file.name.split(".").pop() || "mp3";
|
||||
finalName = `${finalName}.${ext}`;
|
||||
await fs.writeFile(path.join(rootPath, finalName), buffer);
|
||||
} else {
|
||||
// Jika file adalah PDF, simpan tanpa kompresi
|
||||
if (file.type === "application/pdf") {
|
||||
|
||||
@@ -5,7 +5,7 @@ import { fileStorageFindMany } from "./_lib/findMany";
|
||||
import fileStorageDelete from "./_lib/del";
|
||||
|
||||
const FileStorage = new Elysia({
|
||||
prefix: "/fileStorage",
|
||||
prefix: "/api/fileStorage",
|
||||
tags: ["FileStorage"],
|
||||
})
|
||||
.post("/create", fileStorageCreate, {
|
||||
|
||||
@@ -8,7 +8,7 @@ import LayananOnlineDesa from "./layanan-online-desa";
|
||||
import MitraKolaborasi from "./kolaborasi-inovasi/mitra-kolaborasi";
|
||||
|
||||
const Inovasi = new Elysia({
|
||||
prefix: "/inovasi",
|
||||
prefix: "/api/inovasi",
|
||||
tags: ["Inovasi"],
|
||||
})
|
||||
.use(DesaDigital)
|
||||
|
||||
@@ -9,7 +9,7 @@ import KontakDaruratKeamanan from "./kontak-darurat-keamanan";
|
||||
import KontakItem from "./kontak-darurat-keamanan/kontak-item";
|
||||
import LayananPolsek from "./polsek-terdekat/layanan-polsek";
|
||||
|
||||
const Keamanan = new Elysia({ prefix: "/keamanan", tags: ["Keamanan"] })
|
||||
const Keamanan = new Elysia({ prefix: "/api/keamanan", tags: ["Keamanan"] })
|
||||
.use(KeamananLingkungan)
|
||||
.use(PolsekTerdekat)
|
||||
.use(PencegahanKriminalitas)
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
import Elysia from "elysia";
|
||||
import dashboardSummary from "./summary";
|
||||
|
||||
const DashboardKependudukan = new Elysia({
|
||||
prefix: "/dashboard",
|
||||
tags: ["Kependudukan/Dashboard"],
|
||||
})
|
||||
.get("/summary", dashboardSummary)
|
||||
|
||||
export default DashboardKependudukan;
|
||||
@@ -1,147 +0,0 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
export default async function dashboardSummary() {
|
||||
try {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
// Get dashboard summary
|
||||
const [
|
||||
totalPenduduk,
|
||||
totalKK,
|
||||
totalKelahiran,
|
||||
totalKemiskinan,
|
||||
kelahiranData,
|
||||
kematianData,
|
||||
pindahMasukData,
|
||||
pindahKeluarData,
|
||||
agamaData,
|
||||
umurData,
|
||||
banjarData
|
||||
] = await Promise.all([
|
||||
// Total penduduk - hitung dari data banjar
|
||||
prisma.dataBanjar.aggregate({
|
||||
where: { isActive: true, tahun: currentYear },
|
||||
_sum: { penduduk: true }
|
||||
}),
|
||||
|
||||
// Total KK
|
||||
prisma.dataBanjar.aggregate({
|
||||
where: { isActive: true, tahun: currentYear },
|
||||
_sum: { kk: true }
|
||||
}),
|
||||
|
||||
// Total kelahiran tahun ini
|
||||
prisma.kelahiran.count({
|
||||
where: {
|
||||
isActive: true,
|
||||
tanggal: {
|
||||
gte: new Date(`${currentYear}-01-01`),
|
||||
lte: new Date(`${currentYear}-12-31`),
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
||||
// Total penduduk miskin
|
||||
prisma.dataBanjar.aggregate({
|
||||
where: { isActive: true, tahun: currentYear },
|
||||
_sum: { miskin: true }
|
||||
}),
|
||||
|
||||
// Kelahiran data
|
||||
prisma.kelahiran.findMany({
|
||||
where: {
|
||||
isActive: true,
|
||||
tanggal: {
|
||||
gte: new Date(`${currentYear}-01-01`),
|
||||
lte: new Date(`${currentYear}-12-31`),
|
||||
}
|
||||
},
|
||||
orderBy: { tanggal: 'asc' }
|
||||
}),
|
||||
|
||||
// Kematian data
|
||||
prisma.kematian.findMany({
|
||||
where: {
|
||||
isActive: true,
|
||||
tanggal: {
|
||||
gte: new Date(`${currentYear}-01-01`),
|
||||
lte: new Date(`${currentYear}-12-31`),
|
||||
}
|
||||
},
|
||||
orderBy: { tanggal: 'asc' }
|
||||
}),
|
||||
|
||||
// Pindah masuk
|
||||
prisma.migrasiPenduduk.count({
|
||||
where: {
|
||||
isActive: true,
|
||||
jenis: 'MASUK',
|
||||
tanggal: {
|
||||
gte: new Date(`${currentYear}-01-01`),
|
||||
lte: new Date(`${currentYear}-12-31`),
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
||||
// Pindah keluar
|
||||
prisma.migrasiPenduduk.count({
|
||||
where: {
|
||||
isActive: true,
|
||||
jenis: 'KELUAR',
|
||||
tanggal: {
|
||||
gte: new Date(`${currentYear}-01-01`),
|
||||
lte: new Date(`${currentYear}-12-31`),
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
||||
// Data agama
|
||||
prisma.distribusiAgama.findMany({
|
||||
where: { isActive: true, tahun: currentYear },
|
||||
orderBy: { jumlah: 'desc' }
|
||||
}),
|
||||
|
||||
// Data umur
|
||||
prisma.distribusiUmur.findMany({
|
||||
where: { isActive: true, tahun: currentYear },
|
||||
orderBy: { createdAt: 'asc' }
|
||||
}),
|
||||
|
||||
// Data banjar
|
||||
prisma.dataBanjar.findMany({
|
||||
where: { isActive: true, tahun: currentYear },
|
||||
orderBy: { nama: 'asc' }
|
||||
})
|
||||
]);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Dashboard summary berhasil diambil",
|
||||
data: {
|
||||
tahun: currentYear,
|
||||
summary: {
|
||||
totalPenduduk: totalPenduduk._sum.penduduk || 0,
|
||||
totalKK: totalKK._sum.kk || 0,
|
||||
totalKelahiran: totalKelahiran,
|
||||
totalKemiskinan: totalKemiskinan._sum.miskin || 0,
|
||||
},
|
||||
dinamika: {
|
||||
kelahiran: totalKelahiran,
|
||||
kematian: kematianData.length,
|
||||
pindahMasuk: pindahMasukData,
|
||||
pindahKeluar: pindahKeluarData,
|
||||
},
|
||||
agama: agamaData,
|
||||
umur: umurData,
|
||||
banjar: banjarData,
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching dashboard summary:", error);
|
||||
return {
|
||||
success: false,
|
||||
message: "Terjadi kesalahan saat mengambil data dashboard",
|
||||
data: null,
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
import { Prisma } from "@prisma/client";
|
||||
import { Context } from "elysia";
|
||||
|
||||
type FormCreate = Prisma.DataBanjarGetPayload<{
|
||||
select: {
|
||||
nama: true;
|
||||
penduduk: true;
|
||||
kk: true;
|
||||
miskin: true;
|
||||
tahun: true;
|
||||
}
|
||||
}>
|
||||
|
||||
export default async function dataBanjarCreate(context: Context) {
|
||||
const body = context.body as FormCreate;
|
||||
|
||||
const created = await prisma.dataBanjar.create({
|
||||
data: {
|
||||
nama: body.nama,
|
||||
penduduk: body.penduduk,
|
||||
kk: body.kk,
|
||||
miskin: body.miskin,
|
||||
tahun: body.tahun,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
nama: true,
|
||||
penduduk: true,
|
||||
kk: true,
|
||||
miskin: true,
|
||||
tahun: true,
|
||||
}
|
||||
});
|
||||
return {
|
||||
success: true,
|
||||
message: "Sukses menambahkan data banjar",
|
||||
data: created,
|
||||
};
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
import { Context } from "elysia";
|
||||
|
||||
export default async function dataBanjarDelete(context: Context) {
|
||||
const id = context.params?.id;
|
||||
|
||||
if (!id) {
|
||||
return {
|
||||
success: false,
|
||||
message: "ID tidak ditemukan",
|
||||
}
|
||||
}
|
||||
|
||||
const existing = await prisma.dataBanjar.findUnique({
|
||||
where: {
|
||||
id: id,
|
||||
},
|
||||
})
|
||||
|
||||
if (!existing) {
|
||||
return {
|
||||
success: false,
|
||||
message: "Data tidak ditemukan",
|
||||
}
|
||||
}
|
||||
|
||||
const deleted = await prisma.dataBanjar.delete({
|
||||
where: { id },
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Data berhasil dihapus",
|
||||
data: deleted,
|
||||
}
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import prisma from "@/lib/prisma";
|
||||
import { Context } from "elysia";
|
||||
|
||||
export default async function dataBanjarFindMany(context: Context) {
|
||||
const page = Number(context.query.page) || 1;
|
||||
const limit = Number(context.query.limit) || 100;
|
||||
const search = (context.query.search as string) || '';
|
||||
const tahun = Number(context.query.tahun) || new Date().getFullYear();
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
const where: any = { isActive: true, tahun };
|
||||
|
||||
if (search) {
|
||||
where.OR = [
|
||||
{ nama: { contains: search, mode: "insensitive" } },
|
||||
];
|
||||
}
|
||||
|
||||
try {
|
||||
const [data, total] = await Promise.all([
|
||||
prisma.dataBanjar.findMany({
|
||||
where,
|
||||
skip,
|
||||
take: limit,
|
||||
orderBy: { nama: "asc" },
|
||||
}),
|
||||
prisma.dataBanjar.count({
|
||||
where,
|
||||
}),
|
||||
]);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Success fetch data banjar with pagination",
|
||||
data,
|
||||
page,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
total,
|
||||
};
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return {
|
||||
success: false,
|
||||
message: "Failed to fetch data banjar with pagination",
|
||||
data: null,
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
export default async function dataBanjarFindUnique(request: Request) {
|
||||
const url = new URL(request.url);
|
||||
const pathSegments = url.pathname.split('/');
|
||||
const id = pathSegments[pathSegments.length - 1];
|
||||
|
||||
if (!id) {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "ID tidak boleh kosong",
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
if (typeof id !== 'string') {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "ID tidak valid",
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
const data = await prisma.dataBanjar.findUnique({
|
||||
where: { id },
|
||||
});
|
||||
|
||||
if (!data) {
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "Data tidak ditemukan",
|
||||
}, { status: 404 });
|
||||
}
|
||||
|
||||
return Response.json({
|
||||
success: true,
|
||||
message: "Data ditemukan",
|
||||
data: data,
|
||||
}, { status: 200 });
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
return Response.json({
|
||||
success: false,
|
||||
message: "Terjadi kesalahan saat mengambil data",
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import Elysia, { t } from "elysia";
|
||||
import dataBanjarFindUnique from "./findUnique";
|
||||
import dataBanjarUpdate from "./updt";
|
||||
import dataBanjarFindMany from "./findMany";
|
||||
import dataBanjarCreate from "./create";
|
||||
import dataBanjarDelete from "./del";
|
||||
|
||||
const DataBanjar = new Elysia({
|
||||
prefix: "/databanjar",
|
||||
tags: ["Kependudukan/Data Banjar"],
|
||||
})
|
||||
.get("/:id", async (context) => {
|
||||
const response = await dataBanjarFindUnique(new Request(context.request))
|
||||
return response
|
||||
})
|
||||
.get("/find-many", dataBanjarFindMany)
|
||||
.post("/create", dataBanjarCreate, {
|
||||
body: t.Object({
|
||||
nama: t.String(),
|
||||
penduduk: t.Number(),
|
||||
kk: t.Number(),
|
||||
miskin: t.Number(),
|
||||
tahun: t.Number(),
|
||||
}),
|
||||
})
|
||||
.put("/:id", dataBanjarUpdate, {
|
||||
params: t.Object({
|
||||
id: t.String(),
|
||||
}),
|
||||
body: t.Object({
|
||||
nama: t.String(),
|
||||
penduduk: t.Number(),
|
||||
kk: t.Number(),
|
||||
miskin: t.Number(),
|
||||
tahun: t.Number(),
|
||||
}),
|
||||
})
|
||||
.delete("/del/:id", dataBanjarDelete, {
|
||||
params: t.Object({
|
||||
id: t.String(),
|
||||
}),
|
||||
})
|
||||
export default DataBanjar;
|
||||
@@ -1,51 +0,0 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
import { Context } from "elysia";
|
||||
|
||||
export default async function dataBanjarUpdate(context: Context) {
|
||||
const id = context.params?.id;
|
||||
|
||||
if (!id) {
|
||||
return {
|
||||
success: false,
|
||||
message: "ID tidak ditemukan",
|
||||
}
|
||||
}
|
||||
|
||||
const {nama, penduduk, kk, miskin, tahun} = context.body as {
|
||||
nama: string;
|
||||
penduduk: number;
|
||||
kk: number;
|
||||
miskin: number;
|
||||
tahun: number;
|
||||
}
|
||||
|
||||
const existing = await prisma.dataBanjar.findUnique({
|
||||
where: {
|
||||
id: id,
|
||||
},
|
||||
})
|
||||
|
||||
if (!existing) {
|
||||
return {
|
||||
success: false,
|
||||
message: "Data tidak ditemukan",
|
||||
}
|
||||
}
|
||||
|
||||
const updated = await prisma.dataBanjar.update({
|
||||
where: { id },
|
||||
data: {
|
||||
nama,
|
||||
penduduk,
|
||||
kk,
|
||||
miskin,
|
||||
tahun,
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Data berhasil diupdate",
|
||||
data: updated,
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user