Fix Url API Route

This ensures the API uses the same protocol and domain as the frontend,
preventing mixed content blocking in staging/production environments.

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

.env

@@ -0,0 +1,19 @@
+DATABASE_URL="postgresql://bip:Production_123@localhost:5433/desa-darmasaba-v0.0.1?schema=public"
+# Seafile
+SEAFILE_TOKEN=20a19f4a04032215d50ce53292e6abdd38b9f806
+SEAFILE_REPO_ID=f0e9ee4a-fd13-49a2-81c0-f253951d063a
+SEAFILE_URL=https://cld-dkr-makuro-seafile.wibudev.com
+SEAFILE_PUBLIC_SHARE_TOKEN=3a9a9ecb5e244f4da8ae
+
+# Upload
+WIBU_UPLOAD_DIR=uploads
+WIBU_DOWNLOAD_DIR="./download"
+NEXT_PUBLIC_BASE_URL="http://localhost:3000"
+EMAIL_USER=nicoarya20@gmail.com
+EMAIL_PASS=hymmfpcaqzqkfgbh
+BASE_SESSION_KEY=kp9sGx91as0Kj2Ls81nAsl2Kdj13KsxP
+BASE_TOKEN_KEY=Qm82JsA92lMnKw0291mxKaaP02KjslaA
+
+# BOT-TELE
+BOT_TOKEN=8498428675:AAEQwAUjTqpvgyyC5C123nP1mAxhOg12Ph0
+CHAT_ID=5251328671

.env.example

@@ -0,0 +1,41 @@
+# 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
+
+# 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

.gitignore

@@ -29,7 +29,12 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env 
-.env*
+# env local files (keep .env.example)
+.env.local
+.env*.local
+.env.production
+.env.development
+!.env.example
 
 # QC
 QC
@@ -52,7 +57,5 @@ next-env.d.ts
 
 .github/
 
-.env.*
-
 *.tar.gz
 

Dockerfile

@@ -0,0 +1,60 @@
+# Stage 1: Build
+FROM oven/bun:1.3 AS build
+
+# Install build dependencies for native modules
+RUN apt-get update && apt-get install -y \
+    python3 \
+    make \
+    g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package files
+COPY package.json bun.lock* ./
+
+# Install dependencies
+RUN bun install --frozen-lockfile
+
+# Copy the rest of the application code
+COPY . .
+
+# Use .env.example as default env for build
+RUN cp .env.example .env
+
+# Generate Prisma client
+RUN bun x prisma generate
+
+# Build the application frontend
+ENV NODE_ENV=production
+RUN bun run build
+
+# Stage 2: Runtime
+FROM oven/bun:1.3-slim AS runtime
+
+# Set environment variables
+ENV NODE_ENV=production
+
+# Install runtime dependencies
+RUN apt-get update && apt-get install -y \
+    postgresql-client \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set the working directory
+WORKDIR /app
+
+# Copy necessary files from build stage
+COPY --from=build /app/package.json ./
+COPY --from=build /app/tsconfig.json ./
+COPY --from=build /app/.next ./.next
+COPY --from=build /app/public ./public
+COPY --from=build /app/src ./src
+COPY --from=build /app/node_modules ./node_modules
+COPY --from=build /app/prisma ./prisma
+
+# Expose the port
+EXPOSE 3000
+
+# Start the application
+CMD ["bun", "start"]

MUSIK_CREATE_ANALYSIS.md

@@ -0,0 +1,173 @@
+# 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

next.config.ts

@@ -1,6 +1,7 @@
 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

src/app/admin/(dashboard)/landing-page/prestasi-desa/kategori-prestasi-desa/page.tsx

@@ -211,6 +211,9 @@ function ListKategoriPrestasi({ search }: { search: string }) {
           </Stack>
         </Box>
 
+
+        
+
         {/* Modal Konfirmasi Hapus */}
         <ModalKonfirmasiHapus
           opened={modalHapus}

src/app/admin/(dashboard)/musik/create/page.tsx

@@ -123,37 +123,51 @@ export default function CreateMusik() {
       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) {
-        return toast.error('Gagal mengunggah cover, silakan coba lagi');
+        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) {
-        return toast.error('Gagal mengunggah audio, silakan coba lagi');
+        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);
+      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);

src/app/api/[[...slugs]]/route.ts

@@ -47,15 +47,16 @@ fs.mkdir(UPLOAD_DIR_IMAGE, {
 
 const corsConfig = {
   origin: [
+    "*", // Allow all origins - must be first when using credentials: true
     "http://localhost:3000",
     "http://localhost:3001",
     "https://cld-dkr-desa-darmasaba-stg.wibudev.com",
     "https://cld-dkr-staging-desa-darmasaba.wibudev.com",
-    "*", // Allow all origins in development
+    "https://desa-darmasaba-stg.wibudev.com",
   ],
   methods: ["GET", "POST", "PATCH", "DELETE", "PUT", "OPTIONS"] as HTTPMethod[],
-  allowedHeaders: ["Content-Type", "Authorization", "*"],
-  exposedHeaders: "*",
+  allowedHeaders: ["Content-Type", "Authorization", "Accept", "*"],
+  exposedHeaders: ["Content-Range", "X-Content-Range", "*"],
   maxAge: 86400, // 24 hours
   credentials: true,
 };

src/app/layout.tsx

@@ -99,13 +99,13 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <ViewTransitions>
-      <html lang="id" {...mantineHtmlProps}>
-        <head>
-          <meta charSet="utf-8" />
-          <ColorSchemeScript defaultColorScheme="light" />
-        </head>
-        <body>
+    <html lang="id" {...mantineHtmlProps}>
+      <head>
+        <meta charSet="utf-8" />
+        <ColorSchemeScript defaultColorScheme="light" />
+      </head>
+      <body>
+        <ViewTransitions>
           <MusicProvider>
             <MantineProvider theme={theme} defaultColorScheme="light">
               {children}
@@ -117,8 +117,8 @@ export default function RootLayout({
               />
             </MantineProvider>
           </MusicProvider>
-        </body>
-      </html>
-    </ViewTransitions>
+        </ViewTransitions>
+      </body>
+    </html>
   );
 }

src/lib/api-fetch.ts

@@ -1,8 +1,9 @@
 import { AppServer } from '@/app/api/[[...slugs]]/route'
 import { treaty } from '@elysiajs/eden'
 
-// const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || 'localhost:3000'
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'
+// Use relative URL '/' for better deployment flexibility
+// This allows the API to work correctly in both development and staging/production
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || '/'
 
 const ApiFetch = treaty<AppServer>(BASE_URL)