Merge pull request 'server/14-apr-26' (#69) from server/14-apr-26 into staging
Reviewed-on: #69
This commit is contained in:
24
CHANGELOG.md
24
CHANGELOG.md
@@ -2,6 +2,30 @@
|
||||
|
||||
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
||||
|
||||
## [1.7.5](https://wibugit.wibudev.com/wibu/hipmi/compare/v1.7.4...v1.7.5) (2026-04-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* override MIME type for PDF uploads & fix build errors ([38239c5](https://wibugit.wibudev.com/wibu/hipmi/commit/38239c52d6d083d0c6ee6fde94f09e16fa7201dd))
|
||||
|
||||
## [1.7.4](https://wibugit.wibudev.com/wibu/hipmi/compare/v1.7.3...v1.7.4) (2026-03-30)
|
||||
|
||||
## [1.7.3](https://wibugit.wibudev.com/wibu/hipmi/compare/v1.7.2...v1.7.3) (2026-03-27)
|
||||
|
||||
## [1.7.2](https://wibugit.wibudev.com/wibu/hipmi/compare/v1.7.1...v1.7.2) (2026-03-13)
|
||||
|
||||
## [1.7.1](https://wibugit.wibudev.com/wibu/hipmi/compare/v1.7.0...v1.7.1) (2026-03-11)
|
||||
|
||||
## [1.7.0](https://wibugit.wibudev.com/wibu/hipmi/compare/v1.6.9...v1.7.0) (2026-03-10)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Tambahkan deep link handler untuk event confirmation ([73cbf36](https://wibugit.wibudev.com/wibu/hipmi/commit/73cbf3640ac795995e15448b24408b179d2a46d2))
|
||||
|
||||
## [1.6.9](https://wibugit.wibudev.com/wibu/hipmi/compare/v1.6.8...v1.6.9) (2026-03-06)
|
||||
|
||||
## [1.6.8](https://wibugit.wibudev.com/wibu/hipmi/compare/v1.6.7...v1.6.8) (2026-03-05)
|
||||
|
||||
## [1.6.7](https://wibugit.wibudev.com/wibu/hipmi/compare/v1.6.6...v1.6.7) (2026-03-04)
|
||||
|
||||
170
DEBUG_UPLOAD_FILE.md
Normal file
170
DEBUG_UPLOAD_FILE.md
Normal file
@@ -0,0 +1,170 @@
|
||||
# Debug Guide: Upload File Android vs iOS
|
||||
|
||||
## 📱 Problem
|
||||
- ✅ Upload **IMAGE** berhasil di iOS dan Android
|
||||
- ❌ Upload **PDF** gagal di Android dengan error: `Status: 400 Bad Request`
|
||||
|
||||
## 🔍 Root Cause (DITEMUKAN!)
|
||||
|
||||
### **Masalah MIME Type PDF**
|
||||
Dari log upload:
|
||||
```
|
||||
File details:
|
||||
- Name: 154ce3b0-6fc0-4a39-9e09-3f9aa2b19300.pdf
|
||||
- Type: image/pdf ← ❌ SALAH!
|
||||
- Size: 26534 bytes
|
||||
```
|
||||
|
||||
**Yang benar:**
|
||||
- ❌ `image/pdf` (salah - tidak ada MIME type ini)
|
||||
- ✅ `application/pdf` (benar - standard MIME type untuk PDF)
|
||||
|
||||
### **Kenapa Terjadi?**
|
||||
Mobile app (Android) salah set MIME type saat mengirim file PDF. Kemungkinan:
|
||||
1. File picker/set MIME type salah di mobile code
|
||||
2. Android WebView auto-detect MIME type incorrectly
|
||||
3. Mobile app hardcoded MIME type yang salah
|
||||
|
||||
## 🛠️ Solusi yang Sudah Diterapkan
|
||||
|
||||
### File: `src/app/api/mobile/file/route.ts`
|
||||
|
||||
**Fix #1: Safe JSON Parsing**
|
||||
- ✅ Cek response sebagai text dulu, lalu parse JSON
|
||||
- ✅ Handle Content-Type yang salah dari external storage
|
||||
|
||||
**Fix #2: MIME Type Override (LATEST)**
|
||||
- ✅ Deteksi file PDF dari extension (.pdf)
|
||||
- ✅ Override MIME type ke `application/pdf` jika salah
|
||||
- ✅ Rebuild FormData dengan file yang sudah difix
|
||||
|
||||
**Code:**
|
||||
```typescript
|
||||
// Jika file PDF tapi type bukan application/pdf, fix it
|
||||
if (fileName.endsWith(".pdf") && originalType !== "application/pdf") {
|
||||
console.log("⚠️ WARNING: PDF file has wrong MIME type:", originalType);
|
||||
console.log("🔧 Overriding to: application/pdf");
|
||||
|
||||
// Create new File with correct MIME type
|
||||
const buffer = await file.arrayBuffer();
|
||||
fixedFile = new File([buffer], file.name, {
|
||||
type: "application/pdf",
|
||||
lastModified: file.lastModified,
|
||||
});
|
||||
|
||||
// Rebuild formData with fixed file
|
||||
formData.set("file", fixedFile);
|
||||
}
|
||||
```
|
||||
|
||||
## 🧪 Cara Testing
|
||||
|
||||
### 1. **Test Upload dari Android**
|
||||
Coba upload file PDF dari Android dan perhatikan log di terminal:
|
||||
|
||||
```bash
|
||||
# Log yang akan muncul:
|
||||
=== UPLOAD REQUEST START ===
|
||||
dirId: xxx
|
||||
File details:
|
||||
- Name: dokumen.pdf
|
||||
- Type: application/pdf
|
||||
- Size: 1234567 bytes
|
||||
- Size (KB): 1205.63
|
||||
===========================
|
||||
Directory key: xxx
|
||||
=== EXTERNAL STORAGE RESPONSE ===
|
||||
Status: 400
|
||||
Status Text: Bad Request
|
||||
Content-Type: text/html; charset=utf-8
|
||||
=================================
|
||||
=== ERROR: Non-JSON Response ===
|
||||
Response text: Unsupported file format...
|
||||
=================================
|
||||
```
|
||||
|
||||
### 2. **Informasi yang Perlu Dicari:**
|
||||
Dari log di atas, perhatikan:
|
||||
- **File size** → Berapa MB? (mungkin terlalu besar?)
|
||||
- **File type** → `application/pdf` atau yang lain?
|
||||
- **External storage response** → Status code & message?
|
||||
- **Error text** → Apa yang dikembalikan server external?
|
||||
|
||||
### 3. **Compare iOS vs Android**
|
||||
Upload file yang sama dari iOS dan Android, bandingkan log-nya.
|
||||
|
||||
## 📊 Expected Log Output
|
||||
|
||||
### ✅ Success Case:
|
||||
```
|
||||
=== UPLOAD REQUEST START ===
|
||||
dirId: investment
|
||||
File details:
|
||||
- Name: proposal.pdf
|
||||
- Type: application/pdf
|
||||
- Size: 524288 bytes
|
||||
- Size (KB): 512.00
|
||||
===========================
|
||||
Directory key: investment
|
||||
=== EXTERNAL STORAGE RESPONSE ===
|
||||
Status: 200
|
||||
Status Text: OK
|
||||
Content-Type: application/json
|
||||
=================================
|
||||
✅ Upload SUCCESS
|
||||
```
|
||||
|
||||
### ❌ Failed Case (Non-JSON Response):
|
||||
```
|
||||
=== UPLOAD REQUEST START ===
|
||||
dirId: investment
|
||||
File details:
|
||||
- Name: proposal.pdf
|
||||
- Type: application/pdf
|
||||
- Size: 5242880 bytes ← Mungkin terlalu besar?
|
||||
- Size (KB): 5120.00
|
||||
===========================
|
||||
=== EXTERNAL STORAGE RESPONSE ===
|
||||
Status: 413 ← Payload Too Large?
|
||||
Content-Type: text/html
|
||||
=================================
|
||||
=== ERROR: Non-JSON Response ===
|
||||
Response text: <html><body>413 Request Entity Too Large</body></html>
|
||||
=================================
|
||||
```
|
||||
|
||||
## 🔧 Next Steps (Setelah Testing)
|
||||
|
||||
Berdasarkan log, kita bisa identify masalahnya:
|
||||
|
||||
### **Jika masalah FILE SIZE:**
|
||||
- Tambahkan limit validation di frontend
|
||||
- Compress PDF sebelum upload
|
||||
- Increase external storage limit
|
||||
|
||||
### **Jika masalah FILE FORMAT:**
|
||||
- Validate file type sebelum upload
|
||||
- Convert format jika perlu
|
||||
- Update external storage allowed formats
|
||||
|
||||
### **Jika masalah NETWORK/HEADERS:**
|
||||
- Check user-agent differences
|
||||
- Validate Authorization header
|
||||
- Check CORS settings
|
||||
|
||||
## 📝 Checklist Testing
|
||||
- [ ] Test upload PDF kecil (< 1MB) dari Android
|
||||
- [ ] Test upload PDF besar (> 5MB) dari Android
|
||||
- [ ] Test upload PDF dari iOS (baseline)
|
||||
- [ ] Compare log output iOS vs Android
|
||||
- [ ] Check file type yang dikirim
|
||||
- [ ] Check file size yang dikirim
|
||||
- [ ] Check response dari external storage
|
||||
|
||||
## 🎯 Goal
|
||||
Dari log yang detail, kita bisa tahu **exact reason** kenapa Android fail, lalu fix dengan tepat.
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** 2026-04-14
|
||||
**Status:** ✅ Logging added, ready for testing
|
||||
34
Dockerfile
34
Dockerfile
@@ -1,11 +1,10 @@
|
||||
# ==============================
|
||||
# Stage 1: Builder
|
||||
# ==============================
|
||||
FROM node:20-bookworm-slim AS builder
|
||||
FROM oven/bun:1-debian AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Install system deps
|
||||
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
libc6 \
|
||||
git \
|
||||
@@ -13,39 +12,32 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
ca-certificates \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
# Copy dependency files first (for better caching)
|
||||
COPY package.json package-lock.json* bun.lockb* ./
|
||||
COPY package.json bun.lockb* ./
|
||||
|
||||
ENV SHARP_IGNORE_GLOBAL_LIBVIPS=1
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
ENV NODE_OPTIONS="--max-old-space-size=4096"
|
||||
|
||||
# 🔥 Skip postinstall scripts (fix onnxruntime error)
|
||||
RUN npm install --legacy-peer-deps --ignore-scripts
|
||||
|
||||
# Copy full source
|
||||
RUN bun install --frozen-lockfile
|
||||
COPY . .
|
||||
|
||||
# Use .env.example as build env
|
||||
# (Pastikan file ini ada di project)
|
||||
RUN cp .env.example .env || true
|
||||
|
||||
# Generate Prisma Client
|
||||
ENV PRISMA_CLI_BINARY_TARGETS=debian-openssl-3.0.x
|
||||
RUN npx prisma generate
|
||||
RUN bunx prisma generate
|
||||
|
||||
# Build Next.js
|
||||
RUN npm run build
|
||||
RUN bun run build
|
||||
|
||||
# ==============================
|
||||
# Stage 2: Runner (Production)
|
||||
# ==============================
|
||||
FROM node:20-bookworm-slim AS runner
|
||||
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
|
||||
|
||||
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
openssl \
|
||||
@@ -55,10 +47,14 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
RUN groupadd --system --gid 1001 nodejs \
|
||||
&& useradd --system --uid 1001 --gid nodejs nextjs
|
||||
|
||||
# Copy standalone output
|
||||
COPY --from=builder /app/.next/standalone ./
|
||||
COPY --from=builder /app/.next/static ./.next/static
|
||||
COPY --from=builder /app/node_modules ./node_modules
|
||||
COPY --from=builder /app/.next ./.next
|
||||
COPY --from=builder /app/public ./public
|
||||
COPY --from=builder /app/package.json ./package.json
|
||||
COPY --from=builder /app/prisma ./prisma
|
||||
COPY --from=builder /app/src ./src
|
||||
COPY --from=builder /app/next.config.js ./next.config.js
|
||||
COPY --from=builder /app/tsconfig.json ./tsconfig.json
|
||||
|
||||
RUN chown -R nextjs:nodejs /app
|
||||
|
||||
@@ -69,4 +65,4 @@ EXPOSE 3000
|
||||
ENV PORT=3000
|
||||
ENV HOSTNAME="0.0.0.0"
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
CMD ["bun", "start"]
|
||||
@@ -16,6 +16,21 @@ const nextConfig = {
|
||||
}
|
||||
return config;
|
||||
},
|
||||
|
||||
async headers() {
|
||||
return [
|
||||
{
|
||||
source: "/.well-known/:path*",
|
||||
headers: [
|
||||
{ key: "Content-Type", value: "application/json" },
|
||||
{
|
||||
key: "Cache-Control",
|
||||
value: "no-cache, no-store, must-revalidate",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
module.exports = nextConfig;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hipmi",
|
||||
"version": "1.6.8",
|
||||
"version": "1.7.5",
|
||||
"private": true,
|
||||
"prisma": {
|
||||
"seed": "bun prisma/seed.ts"
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
[{
|
||||
"relation": ["delegate_permission/common.handle_all_urls"],
|
||||
"target": {
|
||||
"namespace": "android_app",
|
||||
"package_name": "com.bip.hipmimobileapp",
|
||||
"sha256_cert_fingerprints": ["CFF8431520BFAE665025B68138774A4E64AA6338D2DF6C7D900A71F0551FFD2D"]
|
||||
[
|
||||
{
|
||||
"relation": ["delegate_permission/common.handle_all_urls"],
|
||||
"target": {
|
||||
"namespace": "android_app",
|
||||
"package_name": "com.bip.hipmimobileapp",
|
||||
"sha256_cert_fingerprints": ["CFF8431520BFAE665025B68138774A4E64AA6338D2DF6C7D900A71F0551FFD2D"]
|
||||
}
|
||||
}
|
||||
}]
|
||||
]
|
||||
186
src/app/(event-confirmation)/event/[id]/confirmation/route.ts
Normal file
186
src/app/(event-confirmation)/event/[id]/confirmation/route.ts
Normal file
@@ -0,0 +1,186 @@
|
||||
/**
|
||||
* Route Handler untuk Deep Link Event Confirmation
|
||||
* File: app/event/[id]/confirmation/route.ts
|
||||
* Deskripsi: Handle GET request untuk deep link event confirmation dengan redirect ke mobile app
|
||||
* Pembuat: Assistant
|
||||
* Tanggal: 9 Maret 2026
|
||||
*/
|
||||
|
||||
import { url } from "inspector";
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
/**
|
||||
* Detect platform dari User Agent string
|
||||
* @param userAgent - User Agent string dari request
|
||||
* @returns Platform type: 'ios', 'android', atau 'web'
|
||||
*/
|
||||
function detectPlatform(userAgent: string | null): "ios" | "android" | "web" {
|
||||
if (!userAgent) {
|
||||
return "web";
|
||||
}
|
||||
|
||||
const lowerUA = userAgent.toLowerCase();
|
||||
|
||||
// Detect iOS devices
|
||||
if (
|
||||
/iphone|ipad|ipod/.test(lowerUA) ||
|
||||
(lowerUA.includes("mac") && (("ontouchend" in {}) as any))
|
||||
) {
|
||||
return "ios";
|
||||
}
|
||||
|
||||
// Detect Android devices
|
||||
if (/android/.test(lowerUA)) {
|
||||
return "android";
|
||||
}
|
||||
|
||||
// Default to web
|
||||
return "web";
|
||||
}
|
||||
|
||||
/**
|
||||
* Build custom scheme URL untuk mobile app
|
||||
* @param eventId - Event ID dari URL
|
||||
* @param userId - User ID dari query parameter
|
||||
* @param platform - Platform yang terdetect
|
||||
* @returns Custom scheme URL
|
||||
*/
|
||||
function buildCustomSchemeUrl(
|
||||
eventId: string,
|
||||
userId: string | null,
|
||||
platform: "ios" | "android" | "web",
|
||||
): string {
|
||||
const baseUrl = "hipmimobile://event";
|
||||
const url = `${baseUrl}/${eventId}/confirmation${userId ? `?userId=${userId}` : ""}`;
|
||||
return url;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get base URL dari environment
|
||||
*/
|
||||
function getBaseUrl(): string {
|
||||
const env = process.env.NEXT_PUBLIC_ENV || "development";
|
||||
|
||||
if (env === "production") {
|
||||
return "https://hipmi.muku.id";
|
||||
}
|
||||
|
||||
if (env === "staging") {
|
||||
return "https://cld-dkr-hipmi-stg.wibudev.com";
|
||||
}
|
||||
|
||||
return "http://localhost:3000";
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle GET request untuk deep link
|
||||
* @param request - Next.js request object
|
||||
* @returns Redirect ke mobile app atau JSON response untuk debugging
|
||||
*/
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: { id: string } },
|
||||
) {
|
||||
try {
|
||||
// Parse query parameters
|
||||
const searchParams = request.nextUrl.searchParams;
|
||||
const eventId = params.id;
|
||||
const userId = searchParams.get("userId") || null;
|
||||
const userAgent = request.headers.get("user-agent") || "";
|
||||
|
||||
// Detect platform
|
||||
const platform = detectPlatform(userAgent);
|
||||
|
||||
// Log untuk tracking
|
||||
console.log("[Deep Link] Event Confirmation Received:", {
|
||||
eventId,
|
||||
userId,
|
||||
platform,
|
||||
userAgent:
|
||||
userAgent.substring(0, 100) + (userAgent.length > 100 ? "..." : ""),
|
||||
timestamp: new Date().toISOString(),
|
||||
url: request.url,
|
||||
});
|
||||
|
||||
// Build custom scheme URL untuk redirect
|
||||
const customSchemeUrl = buildCustomSchemeUrl(eventId, userId, platform);
|
||||
|
||||
// Redirect ke mobile app untuk iOS dan Android
|
||||
if (platform === "ios" || platform === "android") {
|
||||
console.log("[Deep Link] Redirecting to mobile app:", customSchemeUrl);
|
||||
|
||||
// Redirect ke custom scheme URL
|
||||
return NextResponse.redirect(customSchemeUrl);
|
||||
}
|
||||
|
||||
console.log("[Deep Link] Environment:", process.env.NEXT_PUBLIC_ENV);
|
||||
console.log("[Deep Link] Base URL:", getBaseUrl());
|
||||
console.log("[Deep Link] Request:", {
|
||||
eventId,
|
||||
userId,
|
||||
platform,
|
||||
url: request.url,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
// Untuk web/desktop, tampilkan JSON response untuk debugging
|
||||
const responseData = {
|
||||
success: true,
|
||||
message: "Deep link received - Web fallback",
|
||||
data: {
|
||||
eventId,
|
||||
userId,
|
||||
platform,
|
||||
userAgent,
|
||||
timestamp: new Date().toISOString(),
|
||||
url: request.url,
|
||||
customSchemeUrl,
|
||||
note: "This is a web fallback. Mobile users will be redirected to the app.",
|
||||
},
|
||||
};
|
||||
|
||||
return NextResponse.json(responseData, {
|
||||
status: 200,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Access-Control-Allow-Methods": "GET, OPTIONS",
|
||||
"Access-Control-Allow-Headers": "Content-Type",
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("[Deep Link] Error processing request:", error);
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
success: false,
|
||||
message: "Error processing deep link",
|
||||
error: error instanceof Error ? error.message : "Unknown error",
|
||||
},
|
||||
{
|
||||
status: 500,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle OPTIONS request untuk CORS preflight
|
||||
*/
|
||||
export async function OPTIONS() {
|
||||
return NextResponse.json(
|
||||
{},
|
||||
{
|
||||
status: 200,
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Access-Control-Allow-Methods": "GET, OPTIONS",
|
||||
"Access-Control-Allow-Headers": "Content-Type",
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -98,7 +98,7 @@ export default function SupportCenter() {
|
||||
<Title>Support Center</Title>
|
||||
</Group>
|
||||
<Text align="center">
|
||||
Send us a message and we'll get back to you as soon as possible.
|
||||
Send us a message and we'll get back to you as soon as possible.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
import { sessionCreate } from "@/app/(auth)/_lib/session_create";
|
||||
import prisma from "@/lib/prisma";
|
||||
import backendLogger from "@/util/backendLogger";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
/**
|
||||
* Validasi OTP untuk login mobile
|
||||
* @param req - Request dengan body { nomor: string, code: string }
|
||||
* @returns Response dengan token jika OTP valid
|
||||
*/
|
||||
export async function POST(req: Request) {
|
||||
if (req.method !== "POST") {
|
||||
return NextResponse.json(
|
||||
@@ -12,8 +16,21 @@ export async function POST(req: Request) {
|
||||
}
|
||||
|
||||
try {
|
||||
const { nomor } = await req.json();
|
||||
const { nomor, code } = await req.json();
|
||||
|
||||
// Validasi input: nomor dan code wajib ada
|
||||
if (!nomor || !code) {
|
||||
return NextResponse.json(
|
||||
{ success: false, message: "Nomor dan kode OTP wajib diisi" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Special case untuk Apple Review: nomor 6282340374412 dengan code "1234" selalu valid
|
||||
const isAppleReviewNumber = nomor === "6282340374412";
|
||||
const isAppleReviewCode = code === "1234";
|
||||
|
||||
// Cek user berdasarkan nomor
|
||||
const dataUser = await prisma.user.findUnique({
|
||||
where: {
|
||||
nomor: nomor,
|
||||
@@ -28,11 +45,92 @@ export async function POST(req: Request) {
|
||||
},
|
||||
});
|
||||
|
||||
if (dataUser == null)
|
||||
if (dataUser == null) {
|
||||
return NextResponse.json(
|
||||
{ success: false, message: "Nomor Belum Terdaftar" },
|
||||
{ status: 200 }
|
||||
);
|
||||
}
|
||||
|
||||
// Validasi OTP (skip untuk Apple Review number di production)
|
||||
let otpValid = false;
|
||||
|
||||
if (isAppleReviewNumber && isAppleReviewCode) {
|
||||
// Special case: Apple Review number dengan code "1234" selalu valid
|
||||
otpValid = true;
|
||||
console.log("Apple Review login bypass untuk nomor: " + nomor);
|
||||
} else {
|
||||
// Normal flow: validasi OTP dari database
|
||||
const otpRecord = await prisma.kodeOtp.findFirst({
|
||||
where: {
|
||||
nomor: nomor,
|
||||
isActive: true,
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: "desc",
|
||||
},
|
||||
});
|
||||
|
||||
if (!otpRecord) {
|
||||
return NextResponse.json(
|
||||
{ success: false, message: "Kode OTP tidak ditemukan" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Cek expired OTP (5 menit dari createdAt)
|
||||
const now = new Date();
|
||||
const otpCreatedAt = new Date(otpRecord.createdAt);
|
||||
const expiredTime = new Date(otpCreatedAt.getTime() + 5 * 60 * 1000); // 5 menit
|
||||
|
||||
if (now > expiredTime) {
|
||||
// OTP sudah expired, update isActive menjadi false
|
||||
await prisma.kodeOtp.updateMany({
|
||||
where: {
|
||||
nomor: nomor,
|
||||
isActive: true,
|
||||
},
|
||||
data: {
|
||||
isActive: false,
|
||||
},
|
||||
});
|
||||
|
||||
return NextResponse.json(
|
||||
{ success: false, message: "Kode OTP sudah kadaluarsa" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Validasi code OTP
|
||||
const inputCode = parseInt(code);
|
||||
if (isNaN(inputCode) || inputCode !== otpRecord.otp) {
|
||||
return NextResponse.json(
|
||||
{ success: false, message: "Kode OTP tidak valid" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
otpValid = true;
|
||||
|
||||
// Nonaktifkan OTP yang sudah digunakan
|
||||
await prisma.kodeOtp.updateMany({
|
||||
where: {
|
||||
nomor: nomor,
|
||||
isActive: true,
|
||||
},
|
||||
data: {
|
||||
isActive: false,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Generate token jika OTP valid
|
||||
if (!otpValid) {
|
||||
return NextResponse.json(
|
||||
{ success: false, message: "Validasi OTP gagal" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const token = await sessionCreate({
|
||||
sessionKey: process.env.NEXT_PUBLIC_BASE_SESSION_KEY!,
|
||||
@@ -46,6 +144,7 @@ export async function POST(req: Request) {
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
|
||||
// Buat response dengan token dalam cookie
|
||||
const response = NextResponse.json(
|
||||
{
|
||||
@@ -69,7 +168,7 @@ export async function POST(req: Request) {
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
backendLogger.log("API Error or Server Error", error);
|
||||
console.log("API Error or Server Error", error);
|
||||
return NextResponse.json(
|
||||
{
|
||||
success: false,
|
||||
|
||||
@@ -2,14 +2,50 @@ import { funGetDirectoryNameByValue } from "@/app_modules/_global/fun/get";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const formData = await request.formData();
|
||||
const dirId = formData.get("dirId");
|
||||
|
||||
const keyOfDirectory = await funGetDirectoryNameByValue({
|
||||
value: dirId as string,
|
||||
});
|
||||
|
||||
try {
|
||||
const formData = await request.formData();
|
||||
const dirId = formData.get("dirId");
|
||||
const file = formData.get("file") as File | null;
|
||||
|
||||
// === LOGGING: Request Details ===
|
||||
console.log("=== UPLOAD REQUEST START ===");
|
||||
console.log("dirId:", dirId);
|
||||
console.log("File details:");
|
||||
console.log(" - Name:", file?.name);
|
||||
console.log(" - Type:", file?.type);
|
||||
console.log(" - Size:", file?.size, "bytes");
|
||||
console.log(" - Size (KB):", file ? (file.size / 1024).toFixed(2) : "N/A");
|
||||
console.log("===========================");
|
||||
|
||||
// FIX: Override MIME type jika salah (mobile app kadang kirim image/pdf)
|
||||
let fixedFile = file;
|
||||
if (file) {
|
||||
const fileName = file.name.toLowerCase();
|
||||
const originalType = file.type.toLowerCase();
|
||||
|
||||
// Jika file PDF tapi type bukan application/pdf, fix it
|
||||
if (fileName.endsWith(".pdf") && originalType !== "application/pdf") {
|
||||
console.log("⚠️ WARNING: PDF file has wrong MIME type:", originalType);
|
||||
console.log("🔧 Overriding to: application/pdf");
|
||||
|
||||
// Create new File with correct MIME type
|
||||
const buffer = await file.arrayBuffer();
|
||||
fixedFile = new File([buffer], file.name, {
|
||||
type: "application/pdf",
|
||||
lastModified: file.lastModified,
|
||||
});
|
||||
|
||||
// Rebuild formData with fixed file
|
||||
formData.set("file", fixedFile);
|
||||
}
|
||||
}
|
||||
|
||||
const keyOfDirectory = await funGetDirectoryNameByValue({
|
||||
value: dirId as string,
|
||||
});
|
||||
|
||||
console.log("Directory key:", keyOfDirectory);
|
||||
|
||||
const res = await fetch("https://wibu-storage.wibudev.com/api/upload", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
@@ -18,9 +54,70 @@ export async function POST(request: Request) {
|
||||
},
|
||||
});
|
||||
|
||||
const dataRes = await res.json();
|
||||
// === LOGGING: Response Details ===
|
||||
console.log("=== EXTERNAL STORAGE RESPONSE ===");
|
||||
console.log("Status:", res.status);
|
||||
console.log("Status Text:", res.statusText);
|
||||
console.log("Content-Type:", res.headers.get("content-type"));
|
||||
console.log("=================================");
|
||||
|
||||
// Cek content-type sebelum parse JSON
|
||||
const contentType = res.headers.get("content-type") || "";
|
||||
let dataRes;
|
||||
|
||||
// Try parse JSON untuk semua response (beberapa server salah set content-type)
|
||||
try {
|
||||
const rawResponse = await res.text();
|
||||
|
||||
// Coba parse sebagai JSON
|
||||
try {
|
||||
dataRes = JSON.parse(rawResponse);
|
||||
console.log("✅ Successfully parsed response as JSON");
|
||||
} catch {
|
||||
// Bukan JSON - gunakan raw text
|
||||
console.log("⚠️ Response is not JSON, using raw text");
|
||||
|
||||
if (res.ok) {
|
||||
// Success tapi bukan JSON - return success response
|
||||
return NextResponse.json(
|
||||
{
|
||||
success: true,
|
||||
message: "Success upload file " + keyOfDirectory,
|
||||
},
|
||||
{ status: 200 }
|
||||
);
|
||||
} else {
|
||||
return NextResponse.json(
|
||||
{
|
||||
success: false,
|
||||
message: "Upload failed",
|
||||
error: rawResponse.substring(0, 500),
|
||||
fileDetails: {
|
||||
name: file?.name,
|
||||
type: file?.type,
|
||||
size: file?.size,
|
||||
}
|
||||
},
|
||||
{ status: res.status || 400 }
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (readError) {
|
||||
console.log("❌ Failed to read response body");
|
||||
console.log("Read error:", (readError as Error).message);
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
success: false,
|
||||
message: "Failed to read response",
|
||||
reason: (readError as Error).message,
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
|
||||
if (res.ok) {
|
||||
console.log("✅ Upload SUCCESS");
|
||||
return NextResponse.json(
|
||||
{
|
||||
success: true,
|
||||
@@ -30,20 +127,34 @@ export async function POST(request: Request) {
|
||||
{ status: 200 }
|
||||
);
|
||||
} else {
|
||||
const errorText = await res.text();
|
||||
console.log(`Failed upload ${keyOfDirectory}: ${errorText}`);
|
||||
console.log("❌ Upload FAILED");
|
||||
console.log("Response:", dataRes);
|
||||
|
||||
const errorMessage = dataRes.message || dataRes.error || JSON.stringify(dataRes);
|
||||
return NextResponse.json(
|
||||
{ success: false, message: errorText },
|
||||
{ status: 400 }
|
||||
{
|
||||
success: false,
|
||||
message: errorMessage || "Upload failed",
|
||||
fileDetails: {
|
||||
name: file?.name,
|
||||
type: file?.type,
|
||||
size: file?.size,
|
||||
}
|
||||
},
|
||||
{ status: res.status || 400 }
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error upload >>", (error as Error).message || error);
|
||||
console.log("=== CATCH ERROR ===");
|
||||
console.log("Error:", (error as Error).message);
|
||||
console.log("Stack:", (error as Error).stack);
|
||||
console.log("===================");
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
success: false,
|
||||
message: "Failed upload file",
|
||||
reason: (error as Error).message || error,
|
||||
reason: (error as Error).message || "Unknown error",
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { prisma } from "@/lib";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export async function GET(
|
||||
|
||||
@@ -2,7 +2,10 @@ import _ from "lodash";
|
||||
import { NextResponse } from "next/server";
|
||||
import prisma from "@/lib/prisma";
|
||||
import { sendNotificationMobileToManyUser } from "@/lib/mobile/notification/send-notification";
|
||||
import { NotificationMobileBodyType, NotificationMobileTitleType } from "../../../../../types/type-mobile-notification";
|
||||
import {
|
||||
NotificationMobileBodyType,
|
||||
NotificationMobileTitleType,
|
||||
} from "../../../../../types/type-mobile-notification";
|
||||
import { routeUserMobile } from "@/lib/mobile/route-page-mobile";
|
||||
|
||||
export { POST, GET };
|
||||
@@ -72,15 +75,9 @@ async function GET(request: Request) {
|
||||
const search = searchParams.get("search");
|
||||
const category = searchParams.get("category");
|
||||
const page = searchParams.get("page");
|
||||
const takeData = 5;
|
||||
const takeData = 10;
|
||||
const skipData = (Number(page) - 1) * takeData;
|
||||
|
||||
// console.log("authorId", authorId);
|
||||
// console.log("userLoginId", userLoginId);
|
||||
// console.log("search", search);
|
||||
// console.log("category", category);
|
||||
console.log("page", page);
|
||||
|
||||
try {
|
||||
if (category === "beranda") {
|
||||
const blockUserId = await prisma.blockedUser
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
import ClientLayout from "./v2_coba_tamplate";
|
||||
import ViewV2 from "./v2_view";
|
||||
|
||||
export default async function Page() {
|
||||
return (
|
||||
<>
|
||||
<ViewV2 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
import {
|
||||
listMenuHomeBody,
|
||||
menuHomeJob,
|
||||
} from "@/app_modules/home/component/list_menu_home";
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text
|
||||
} from "@mantine/core";
|
||||
import { IconUserSearch } from "@tabler/icons-react";
|
||||
|
||||
export function Test_Children() {
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
<Image
|
||||
height={140}
|
||||
fit={"cover"}
|
||||
alt="logo"
|
||||
src={"/aset/home/home-hipmi-new.png"}
|
||||
styles={{
|
||||
imageWrapper: {
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px 10px 10px 10px",
|
||||
},
|
||||
image: {
|
||||
borderRadius: "8px 8px 8px 8px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{Array.from(new Array(2)).map((e, i) => (
|
||||
<Stack my={"sm"} key={i}>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
{listMenuHomeBody.map((e, i) => (
|
||||
<Paper
|
||||
key={e.id}
|
||||
h={150}
|
||||
bg={MainColor.darkblue}
|
||||
style={{
|
||||
borderRadius: "10px 10px 10px 10px",
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
}}
|
||||
onClick={() => {}}
|
||||
>
|
||||
<Stack align="center" justify="center" h={"100%"}>
|
||||
<ActionIcon
|
||||
size={50}
|
||||
variant="transparent"
|
||||
c={e.link == "" ? "gray.3" : MainColor.white}
|
||||
>
|
||||
{e.icon}
|
||||
</ActionIcon>
|
||||
<Text
|
||||
c={e.link == "" ? "gray.3" : MainColor.white}
|
||||
fz={"xs"}
|
||||
>
|
||||
{e.name}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
|
||||
{/* Job View */}
|
||||
<Paper
|
||||
p={"md"}
|
||||
w={"100%"}
|
||||
bg={MainColor.darkblue}
|
||||
style={{
|
||||
borderRadius: "10px 10px 10px 10px",
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
}}
|
||||
>
|
||||
<Stack onClick={() => {}}>
|
||||
<Group>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
size={40}
|
||||
c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}
|
||||
>
|
||||
{menuHomeJob.icon}
|
||||
</ActionIcon>
|
||||
<Text c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}>
|
||||
{menuHomeJob.name}
|
||||
</Text>
|
||||
</Group>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
{Array.from({ length: 2 }).map((e, i) => (
|
||||
<Stack key={i}>
|
||||
<Group spacing={"xs"}>
|
||||
<Stack h={"100%"} align="center" justify="flex-start">
|
||||
<IconUserSearch size={20} color={MainColor.white} />
|
||||
</Stack>
|
||||
<Stack spacing={0} w={"60%"}>
|
||||
<Text
|
||||
lineClamp={1}
|
||||
fz={"sm"}
|
||||
c={MainColor.yellow}
|
||||
fw={"bold"}
|
||||
>
|
||||
nama {i}
|
||||
</Text>
|
||||
<Text fz={"sm"} c={MainColor.white} lineClamp={2}>
|
||||
judulnya {i}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Stack>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
))}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { MainColor } from "@/app_modules/_global/color";
|
||||
import { listMenuHomeFooter } from "@/app_modules/home";
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Center,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { IconUserCircle } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function Test_FooterHome() {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
zIndex: 99,
|
||||
borderRadius: "20px 20px 0px 0px",
|
||||
}}
|
||||
w={"100%"}
|
||||
bottom={0}
|
||||
h={"9vh"}
|
||||
>
|
||||
<SimpleGrid cols={listMenuHomeFooter.length + 1}>
|
||||
{listMenuHomeFooter.map((e) => (
|
||||
<Center h={"9vh"} key={e.id}>
|
||||
<Stack
|
||||
align="center"
|
||||
spacing={0}
|
||||
onClick={() => {
|
||||
console.log("test")
|
||||
}}
|
||||
>
|
||||
<ActionIcon
|
||||
radius={"xl"}
|
||||
c={e.link === "" ? "gray" : MainColor.white}
|
||||
variant="transparent"
|
||||
>
|
||||
{e.icon}
|
||||
</ActionIcon>
|
||||
<Text
|
||||
lineClamp={1}
|
||||
c={e.link === "" ? "gray" : MainColor.white}
|
||||
fz={12}
|
||||
>
|
||||
{e.name}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
))}
|
||||
|
||||
<Center h={"9vh"}>
|
||||
<Stack align="center" spacing={2}>
|
||||
<ActionIcon
|
||||
variant={"transparent"}
|
||||
onClick={() =>
|
||||
console.log("test")
|
||||
}
|
||||
>
|
||||
<IconUserCircle color="white" />
|
||||
</ActionIcon>
|
||||
<Text fz={10} c={MainColor.white}>
|
||||
Profile
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,130 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
import {
|
||||
Header,
|
||||
Group,
|
||||
ActionIcon,
|
||||
Text,
|
||||
Title,
|
||||
Box,
|
||||
Loader,
|
||||
} from "@mantine/core";
|
||||
import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { useState } from "react";
|
||||
|
||||
|
||||
export default function Test_LayoutHeaderTamplate({
|
||||
title,
|
||||
posotion,
|
||||
// left button
|
||||
hideButtonLeft,
|
||||
iconLeft,
|
||||
routerLeft,
|
||||
customButtonLeft,
|
||||
// right button
|
||||
iconRight,
|
||||
routerRight,
|
||||
customButtonRight,
|
||||
backgroundColor,
|
||||
}: {
|
||||
title: string;
|
||||
posotion?: any;
|
||||
// left button
|
||||
hideButtonLeft?: boolean;
|
||||
iconLeft?: any;
|
||||
routerLeft?: any;
|
||||
customButtonLeft?: React.ReactNode;
|
||||
// right button
|
||||
iconRight?: any;
|
||||
routerRight?: any;
|
||||
customButtonRight?: React.ReactNode;
|
||||
backgroundColor?: string;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isRightLoading, setRightLoading] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
h={"8vh"}
|
||||
// w={"100%"}
|
||||
// pos={"sticky"}
|
||||
// top={0}
|
||||
// style={{
|
||||
// zIndex: 10,
|
||||
// }}
|
||||
sx={{
|
||||
borderStyle: "none",
|
||||
}}
|
||||
bg={backgroundColor ? backgroundColor : MainColor.darkblue}
|
||||
>
|
||||
<Group h={"100%"} position={posotion ? posotion : "apart"} px={"md"}>
|
||||
{hideButtonLeft ? (
|
||||
<ActionIcon disabled variant="transparent"></ActionIcon>
|
||||
) : customButtonLeft ? (
|
||||
customButtonLeft
|
||||
) : (
|
||||
<ActionIcon
|
||||
c={MainColor.white}
|
||||
variant="transparent"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setIsLoading(true);
|
||||
routerLeft === undefined
|
||||
? router.back()
|
||||
: router.push(routerLeft, { scroll: false });
|
||||
}}
|
||||
>
|
||||
{/* PAKE LOADING SAAT KLIK BACK */}
|
||||
{/* {isLoading ? (
|
||||
<Loader color={AccentColor.yellow} size={20} />
|
||||
) : iconLeft ? (
|
||||
iconLeft
|
||||
) : (
|
||||
<IconChevronLeft />
|
||||
)} */}
|
||||
|
||||
|
||||
{/* GA PAKE LOADING SAAT KLIK BACK */}
|
||||
{iconLeft ? (
|
||||
iconLeft
|
||||
) : (
|
||||
<IconChevronLeft />
|
||||
)}
|
||||
</ActionIcon>
|
||||
)}
|
||||
|
||||
<Title order={5} c={MainColor.yellow}>
|
||||
{title}
|
||||
</Title>
|
||||
|
||||
{customButtonRight ? (
|
||||
customButtonRight
|
||||
) : iconRight === undefined ? (
|
||||
<ActionIcon disabled variant="transparent"></ActionIcon>
|
||||
) : routerRight === undefined ? (
|
||||
<Box>{iconRight}</Box>
|
||||
) : (
|
||||
<ActionIcon
|
||||
c={"white"}
|
||||
variant="transparent"
|
||||
onClick={() => {
|
||||
setRightLoading(true);
|
||||
router.push(routerRight);
|
||||
}}
|
||||
>
|
||||
{isRightLoading ? (
|
||||
<Loader color={AccentColor.yellow} size={20} />
|
||||
) : (
|
||||
iconRight
|
||||
)}
|
||||
</ActionIcon>
|
||||
)}
|
||||
</Group>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
import {
|
||||
BackgroundImage,
|
||||
Box,
|
||||
Container,
|
||||
rem,
|
||||
ScrollArea,
|
||||
} from "@mantine/core";
|
||||
|
||||
export function Test_Tamplate({
|
||||
children,
|
||||
header,
|
||||
footer,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
header: React.ReactNode;
|
||||
footer?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
w={"100%"}
|
||||
h={"100%"}
|
||||
style={{
|
||||
backgroundColor: MainColor.black,
|
||||
}}
|
||||
>
|
||||
<Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.green}>
|
||||
{/* <BackgroundImage
|
||||
src={"/aset/global/main_background.png"}
|
||||
h={"100vh"}
|
||||
// style={{ position: "relative" }}
|
||||
> */}
|
||||
<TestHeader header={header} />
|
||||
|
||||
<TestChildren footer={footer}>{children}</TestChildren>
|
||||
|
||||
<TestFooter footer={footer} />
|
||||
{/* </BackgroundImage> */}
|
||||
</Container>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function TestHeader({ header }: { header: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
h={"8vh"}
|
||||
style={{
|
||||
zIndex: 10,
|
||||
alignContent: "center",
|
||||
}}
|
||||
w={"100%"}
|
||||
pos={"sticky"}
|
||||
top={0}
|
||||
>
|
||||
{header}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function TestChildren({
|
||||
children,
|
||||
footer,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
footer: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
style={{ zIndex: 0 }}
|
||||
px={"md"}
|
||||
h={footer ? "82vh" : "92vh"}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TestFooter({ footer }: { footer: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
{footer ? (
|
||||
<Box
|
||||
// w dihilangkan kalau relative
|
||||
w={"100%"}
|
||||
style={{
|
||||
// position: "relative",
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
height: "10vh",
|
||||
zIndex: 10,
|
||||
borderRadius: "20px 20px 0px 0px",
|
||||
borderTop: `2px solid ${AccentColor.blue}`,
|
||||
borderRight: `1px solid ${AccentColor.blue}`,
|
||||
borderLeft: `1px solid ${AccentColor.blue}`,
|
||||
// maxWidth dihilangkan kalau relative
|
||||
maxWidth: rem(500),
|
||||
}}
|
||||
bg={AccentColor.darkblue}
|
||||
>
|
||||
<Box
|
||||
h={"100%"}
|
||||
// maw dihilangkan kalau relative
|
||||
maw={rem(500)}
|
||||
style={{
|
||||
borderRadius: "20px 20px 0px 0px",
|
||||
width: "100%",
|
||||
}}
|
||||
// pos={"absolute"}
|
||||
>
|
||||
{footer}
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Box, ScrollArea } from "@mantine/core";
|
||||
|
||||
export function V2_Children({
|
||||
children,
|
||||
height,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
height?: number;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
style={{ zIndex: 0 }}
|
||||
px={"md"}
|
||||
h={height ? "82vh" : "92vh"}
|
||||
pos={"static"}
|
||||
>
|
||||
{children}
|
||||
{/* <ScrollArea h={"100%"} px={"md"} bg={"cyan"}>
|
||||
</ScrollArea> */}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,159 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
import {
|
||||
ActionIcon,
|
||||
BackgroundImage, // Import BackgroundImage dari Mantine
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Group,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
|
||||
import { createStyles } from "@mantine/styles";
|
||||
import { IconBell, IconSearch } from "@tabler/icons-react";
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
|
||||
// Styling langsung didefinisikan di dalam komponen
|
||||
const useStyles = createStyles((theme) => ({
|
||||
pageContainer: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
minHeight: "100dvh", // dynamic viewport height untuk mobile
|
||||
width: "100%",
|
||||
maxWidth: "500px", // Batasi lebar maksimum
|
||||
margin: "0 auto", // Pusatkan layout
|
||||
boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)", // Tambahkan shadow untuk efek mobile-like
|
||||
backgroundColor: MainColor.darkblue, // Warna latar belakang fallback
|
||||
|
||||
[`@media (max-width: 768px)`]: {
|
||||
maxWidth: "100%", // Pada layar mobile, gunakan lebar penuh
|
||||
boxShadow: "none", // Hilangkan shadow pada mobile
|
||||
},
|
||||
},
|
||||
|
||||
header: {
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
width: "100%",
|
||||
maxWidth: "500px", // Batasi lebar header sesuai container
|
||||
margin: "0 auto", // Pusatkan header
|
||||
backgroundColor: MainColor.darkblue,
|
||||
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
|
||||
zIndex: 1000, // Pastikan z-index tinggi
|
||||
transition: "all 0.3s ease",
|
||||
color: MainColor.yellow,
|
||||
},
|
||||
|
||||
scrolled: {
|
||||
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
|
||||
},
|
||||
|
||||
headerContainer: {
|
||||
height: "8vh",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "0 16px", // Padding untuk mobile view
|
||||
|
||||
[`@media (max-width: 768px)`]: {
|
||||
height: "8vh",
|
||||
},
|
||||
borderBottom: `1px solid ${AccentColor.blue}`,
|
||||
borderBottomLeftRadius: "10px",
|
||||
borderBottomRightRadius: "10px",
|
||||
},
|
||||
|
||||
content: {
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
overflowY: "auto", // Izinkan scrolling pada konten
|
||||
paddingBottom: "15vh", // Sesuaikan dengan tinggi footer
|
||||
},
|
||||
|
||||
footer: {
|
||||
width: "100%",
|
||||
backgroundColor: MainColor.darkblue,
|
||||
borderTop: `1px solid ${AccentColor.blue}`,
|
||||
height: "10vh", // Tinggi footer
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
left: "50%", // Pusatkan footer
|
||||
transform: "translateX(-50%)", // Pusatkan footer
|
||||
maxWidth: "500px", // Batasi lebar footer
|
||||
color: MainColor.white,
|
||||
borderTopLeftRadius: "10px",
|
||||
borderTopRightRadius: "10px",
|
||||
},
|
||||
}));
|
||||
|
||||
interface ClientLayoutProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export default function ClientLayout({ children }: ClientLayoutProps) {
|
||||
const [scrolled, setScrolled] = useState<boolean>(false);
|
||||
const { classes, cx } = useStyles();
|
||||
|
||||
// Effect untuk mendeteksi scroll
|
||||
useEffect(() => {
|
||||
function handleScroll() {
|
||||
if (window.scrollY > 10) {
|
||||
setScrolled(true);
|
||||
} else {
|
||||
setScrolled(false);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box className={classes.pageContainer}>
|
||||
{/* Header - tetap di atas */}
|
||||
<Box
|
||||
className={cx(classes.header, { [classes.scrolled]: scrolled })}
|
||||
component="header"
|
||||
>
|
||||
<Container size="xl" className={classes.headerContainer}>
|
||||
<Group position="apart" w={"100%"}>
|
||||
<ActionIcon>
|
||||
<IconSearch />
|
||||
</ActionIcon>
|
||||
<Title order={4}>Home Test</Title>
|
||||
<ActionIcon>
|
||||
<IconBell />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* Konten utama - bisa di-scroll */}
|
||||
<Box className={classes.content}>
|
||||
<Container>{children}</Container>
|
||||
</Box>
|
||||
|
||||
{/* Footer - tetap di bawah */}
|
||||
<Box className={classes.footer} component="footer">
|
||||
<Container size="xl">
|
||||
<Group position="apart" py="md">
|
||||
<Text size="sm">© 2025 Nama Perusahaan</Text>
|
||||
<Group spacing="xs">
|
||||
<Button variant="subtle" size="xs">
|
||||
Privasi
|
||||
</Button>
|
||||
<Button variant="subtle" size="xs">
|
||||
Syarat
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { MainColor } from "@/app_modules/_global/color";
|
||||
import { ActionIcon, Box, Group, Title } from "@mantine/core";
|
||||
import { IconBell, IconChevronLeft } from "@tabler/icons-react";
|
||||
|
||||
export function V2_Header() {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
h={"8vh"}
|
||||
style={{
|
||||
zIndex: 10,
|
||||
alignContent: "center",
|
||||
}}
|
||||
w={"100%"}
|
||||
pos={"sticky"}
|
||||
top={0}
|
||||
bg={MainColor.darkblue}
|
||||
>
|
||||
<Group h={"100%"} position={"apart"} px={"md"}>
|
||||
<ActionIcon
|
||||
c={MainColor.white}
|
||||
variant="transparent"
|
||||
radius={"xl"}
|
||||
onClick={() => {}}
|
||||
>
|
||||
<IconChevronLeft />
|
||||
</ActionIcon>
|
||||
|
||||
<Title order={5} c={MainColor.yellow}>
|
||||
Test Tamplate
|
||||
</Title>
|
||||
|
||||
<ActionIcon c={"white"} variant="transparent" onClick={() => {}}>
|
||||
<IconBell />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
import {
|
||||
listMenuHomeBody,
|
||||
menuHomeJob,
|
||||
} from "@/app_modules/home/component/list_menu_home";
|
||||
import {
|
||||
Box,
|
||||
Stack,
|
||||
SimpleGrid,
|
||||
Paper,
|
||||
ActionIcon,
|
||||
Group,
|
||||
Image,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { IconUserSearch } from "@tabler/icons-react";
|
||||
|
||||
export function V2_HomeView() {
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
<Image
|
||||
height={140}
|
||||
fit={"cover"}
|
||||
alt="logo"
|
||||
src={"/aset/home/home-hipmi-new.png"}
|
||||
styles={{
|
||||
imageWrapper: {
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px 10px 10px 10px",
|
||||
},
|
||||
image: {
|
||||
borderRadius: "8px 8px 8px 8px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{Array.from(new Array(2)).map((e, i) => (
|
||||
<Stack my={"sm"} key={i}>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
{listMenuHomeBody.map((e, i) => (
|
||||
<Paper
|
||||
key={e.id}
|
||||
h={150}
|
||||
bg={MainColor.darkblue}
|
||||
style={{
|
||||
borderRadius: "10px 10px 10px 10px",
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
}}
|
||||
onClick={() => {}}
|
||||
>
|
||||
<Stack align="center" justify="center" h={"100%"}>
|
||||
<ActionIcon
|
||||
size={50}
|
||||
variant="transparent"
|
||||
c={e.link == "" ? "gray.3" : MainColor.white}
|
||||
>
|
||||
{e.icon}
|
||||
</ActionIcon>
|
||||
<Text
|
||||
c={e.link == "" ? "gray.3" : MainColor.white}
|
||||
fz={"xs"}
|
||||
>
|
||||
{e.name}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
|
||||
{/* Job View */}
|
||||
<Paper
|
||||
p={"md"}
|
||||
w={"100%"}
|
||||
bg={MainColor.darkblue}
|
||||
style={{
|
||||
borderRadius: "10px 10px 10px 10px",
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
}}
|
||||
>
|
||||
<Stack onClick={() => {}}>
|
||||
<Group>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
size={40}
|
||||
c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}
|
||||
>
|
||||
{menuHomeJob.icon}
|
||||
</ActionIcon>
|
||||
<Text c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}>
|
||||
{menuHomeJob.name}
|
||||
</Text>
|
||||
</Group>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
{Array.from({ length: 2 }).map((e, i) => (
|
||||
<Stack key={i}>
|
||||
<Group spacing={"xs"}>
|
||||
<Stack h={"100%"} align="center" justify="flex-start">
|
||||
<IconUserSearch size={20} color={MainColor.white} />
|
||||
</Stack>
|
||||
<Stack spacing={0} w={"60%"}>
|
||||
<Text
|
||||
lineClamp={1}
|
||||
fz={"sm"}
|
||||
c={MainColor.yellow}
|
||||
fw={"bold"}
|
||||
>
|
||||
nama {i}
|
||||
</Text>
|
||||
<Text fz={"sm"} c={MainColor.white} lineClamp={2}>
|
||||
judulnya {i}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Stack>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
))}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
// app/page.tsx
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import ClientLayout from "./v2_coba_tamplate";
|
||||
|
||||
export default function ViewV2() {
|
||||
return (
|
||||
<ClientLayout>
|
||||
<Stack spacing="xl" c={"white"}>
|
||||
<Title order={1} ta="center" my="lg" size="h2">
|
||||
Selamat Datang
|
||||
</Title>
|
||||
|
||||
<Text size="md" ta="center" mb="lg">
|
||||
Aplikasi dengan layout yang dioptimalkan untuk tampilan mobile
|
||||
</Text>
|
||||
|
||||
<Stack spacing="md">
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<Card
|
||||
opacity={0.3}
|
||||
key={index}
|
||||
shadow="sm"
|
||||
padding="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
>
|
||||
<Card.Section>
|
||||
<Image
|
||||
src={`/api/placeholder/400/200`}
|
||||
height={160}
|
||||
alt={`Produk ${index + 1}`}
|
||||
/>
|
||||
</Card.Section>
|
||||
|
||||
<Group position="apart" mt="md" mb="xs">
|
||||
<Text fw={500}>Produk {index + 1}</Text>
|
||||
<Badge color="blue" variant="light">
|
||||
Baru
|
||||
</Badge>
|
||||
</Group>
|
||||
|
||||
<Text size="sm" color="dimmed" lineClamp={2}>
|
||||
Deskripsi produk yang singkat dan padat untuk tampilan mobile.
|
||||
Fokus pada informasi penting saja.
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
variant="light"
|
||||
color="blue"
|
||||
fullWidth
|
||||
mt="md"
|
||||
radius="md"
|
||||
>
|
||||
Lihat Detail
|
||||
</Button>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<Stack spacing="md">
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<Box key={index} mb="xl" h="100px" bg={"gray"}>
|
||||
Test
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
backgroundColor: "gray",
|
||||
marginBottom: "15px",
|
||||
height: "100px",
|
||||
}}
|
||||
>
|
||||
Test
|
||||
</div>
|
||||
))}
|
||||
|
||||
<Paper
|
||||
shadow="md"
|
||||
p="md"
|
||||
withBorder
|
||||
radius="md"
|
||||
style={{
|
||||
backgroundImage: "linear-gradient(45deg, #228be6, #4c6ef5)",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Text fw={700} size="lg" ta="center">
|
||||
Promo Spesial
|
||||
</Text>
|
||||
<Text ta="center" my="sm">
|
||||
Dapatkan diskon 20% untuk pembelian pertama
|
||||
</Text>
|
||||
<Button variant="white" color="blue" fullWidth>
|
||||
Klaim Sekarang
|
||||
</Button>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</ClientLayout>
|
||||
);
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { MainColor } from "@/app_modules/_global/color";
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
Center,
|
||||
FileButton,
|
||||
Paper,
|
||||
Stack,
|
||||
} from "@mantine/core";
|
||||
import { IconCamera } from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
import { DIRECTORY_ID } from "../../lib";
|
||||
|
||||
export default function Page() {
|
||||
const [data, setData] = useState({
|
||||
name: "bagas",
|
||||
hobi: [
|
||||
{
|
||||
id: "1",
|
||||
name: "mancing",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "game",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack align="center" justify="center" h={"100vh"}>
|
||||
<pre>{JSON.stringify(data, null, 2)}</pre>
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
const newData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "sepedah",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "berenang",
|
||||
},
|
||||
];
|
||||
|
||||
setData({
|
||||
...data,
|
||||
hobi: newData,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Ganti
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@mantine/core";
|
||||
|
||||
interface DownloadButtonProps {
|
||||
fileUrl: string;
|
||||
fileName: string;
|
||||
}
|
||||
|
||||
export default function Coba() {
|
||||
const fileUrl =
|
||||
"https://wibu-storage.wibudev.com/api/pdf-to-image?url=https://wibu-storage.wibudev.com/api/files/cm7liew81000t3y8ax1v6yo02";
|
||||
const fileName = "example.pdf"; // Nama file yang akan diunduh
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Download File Example</h1>
|
||||
<DownloadButton fileUrl={fileUrl} fileName={fileName} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DownloadButton({ fileUrl, fileName }: DownloadButtonProps) {
|
||||
const handleDownloadFromAPI = async () => {
|
||||
try {
|
||||
const response = await fetch("https://wibu-storage.wibudev.com/api/files/cm7liew81000t3y8ax1v6yo02")
|
||||
const blob = await response.blob(); // Konversi respons ke Blob
|
||||
const url = window.URL.createObjectURL(blob); // Buat URL untuk Blob
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "generated-file.pdf"; // Nama file yang akan diunduh
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(url); // Bersihkan URL
|
||||
} catch (error) {
|
||||
console.error("Error downloading file:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Button onClick={handleDownloadFromAPI} variant="outline" color="blue">
|
||||
Download File
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import Coba from "./_view";
|
||||
|
||||
|
||||
|
||||
async function Page() {
|
||||
return (
|
||||
<>
|
||||
<Coba />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -1,79 +0,0 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
// Tipe untuk data item (sesuaikan sesuai API kamu)
|
||||
interface Item {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
// Props komponen
|
||||
interface InfiniteScrollProps<T> {
|
||||
fetchFunction: (page: number) => Promise<T[]>;
|
||||
renderItem: (item: T) => React.ReactNode;
|
||||
itemsPerPage?: number;
|
||||
threshold?: number; // Jarak dari bawah halaman untuk memicu load
|
||||
}
|
||||
|
||||
const InfiniteScroll = <T,>({
|
||||
fetchFunction,
|
||||
renderItem,
|
||||
itemsPerPage = 10,
|
||||
threshold = 50,
|
||||
}: InfiniteScrollProps<T>) => {
|
||||
const [items, setItems] = useState<T[]>([]);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
// Load data awal
|
||||
useEffect(() => {
|
||||
const loadInitialData = async () => {
|
||||
const data = await fetchFunction(page);
|
||||
if (data.length === 0) setHasMore(false);
|
||||
setItems(data);
|
||||
};
|
||||
|
||||
loadInitialData();
|
||||
}, [fetchFunction, page]);
|
||||
|
||||
// Handle scroll event
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const isBottom =
|
||||
window.innerHeight + window.scrollY >=
|
||||
document.body.offsetHeight - threshold;
|
||||
|
||||
if (isBottom && hasMore) {
|
||||
loadMoreItems();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, [hasMore, threshold]);
|
||||
|
||||
const loadMoreItems = async () => {
|
||||
const nextPage = page + 1;
|
||||
const newItems = await fetchFunction(nextPage);
|
||||
|
||||
if (newItems.length === 0) {
|
||||
setHasMore(false);
|
||||
}
|
||||
|
||||
setItems((prev) => [...prev, ...newItems]);
|
||||
setPage(nextPage);
|
||||
};
|
||||
|
||||
return (
|
||||
<div >
|
||||
<ul>
|
||||
{items.map((item, index) => (
|
||||
<li key={index}>{renderItem(item)}</li>
|
||||
))}
|
||||
</ul>
|
||||
{!hasMore && <p>🎉 Semua data telah dimuat.</p>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InfiniteScroll;
|
||||
@@ -1,46 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import React, { useState } from "react";
|
||||
import InfiniteScroll from "./_comp/ui_scroll";
|
||||
import { apiGetMessageByRoomId } from "@/app_modules/colab/_lib/api_collaboration";
|
||||
import { ChatMessage } from "@/app/dev/(user)/colab/_comp/interface";
|
||||
|
||||
// Definisikan tipe data
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Komponen App
|
||||
function App() {
|
||||
const [data, setData] = useState<ChatMessage[]>([]);
|
||||
// Simulasi API call
|
||||
const fetchUsers = async (page: number): Promise<ChatMessage[]> => {
|
||||
const response = await apiGetMessageByRoomId({
|
||||
id: "cmb5x31dt0001tl7y7vj26pfy",
|
||||
});
|
||||
setData(response.data);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: "20px" }}>
|
||||
<h1>Infinite Scroll with TypeScript</h1>
|
||||
<InfiniteScroll<ChatMessage>
|
||||
fetchFunction={fetchUsers}
|
||||
itemsPerPage={10}
|
||||
threshold={100}
|
||||
renderItem={(item) => (
|
||||
<div style={{ marginBottom: "10px" }}>
|
||||
<strong>{item.User?.Profile?.name}</strong> - {item.message}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,56 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
|
||||
import {
|
||||
UIGlobal_LayoutHeaderTamplate,
|
||||
UIGlobal_LayoutTamplate,
|
||||
} from "@/app_modules/_global/ui";
|
||||
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
|
||||
import { Button, Center, Grid, Group, Skeleton, Stack } from "@mantine/core";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Voting_ComponentSkeletonViewPuh() {
|
||||
return (
|
||||
<>
|
||||
<UIGlobal_LayoutTamplate
|
||||
header={<UIGlobal_LayoutHeaderTamplate title="Skeleton Maker" />}
|
||||
>
|
||||
<Stack>
|
||||
<CustomSkeleton height={300} width={"100%"} />
|
||||
<Center>
|
||||
<CustomSkeleton height={40} radius={"xl"} width={"50%"} />
|
||||
</Center>
|
||||
<CustomSkeleton height={500} width={"100%"} />
|
||||
<CustomSkeleton height={40} radius={"xl"} width={"100%"} />
|
||||
</Stack>
|
||||
|
||||
{/* <Grid align="center">
|
||||
<Grid.Col span={2}>
|
||||
<CustomSkeleton height={40} width={40} circle />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<CustomSkeleton height={20} width={"100%"} />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={3} offset={3}>
|
||||
<Group position="right">
|
||||
<CustomSkeleton height={20} width={"50%"} />
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Stack>
|
||||
<CustomSkeleton height={20} width={"100%"} radius={"xl"} />
|
||||
<CustomSkeleton height={20} width={"100%"} radius={"xl"} />
|
||||
</Stack> */}
|
||||
|
||||
{/* <Stack spacing={"xl"} p={"sm"}>
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<CustomSkeleton key={i} height={50} width={"100%"} />
|
||||
))}
|
||||
<CustomSkeleton height={100} width={"100%"} />
|
||||
<CustomSkeleton radius="xl" height={50} width={"100%"} />
|
||||
</Stack> */}
|
||||
</UIGlobal_LayoutTamplate>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
"use client";
|
||||
import { gs_realtimeData, IRealtimeData } from "@/lib/global_state";
|
||||
import { Button, Stack } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { useAtom } from "jotai";
|
||||
import { WibuRealtime } from "wibu-pkg";
|
||||
import { v4 } from "uuid";
|
||||
|
||||
export default function Page() {
|
||||
const [dataRealtime, setDataRealtime] = useAtom(gs_realtimeData);
|
||||
|
||||
useShallowEffect(() => {
|
||||
console.log(
|
||||
dataRealtime?.userId == "user2"
|
||||
? console.log("")
|
||||
: console.log(dataRealtime)
|
||||
);
|
||||
}, [dataRealtime]);
|
||||
|
||||
async function onSend() {
|
||||
const newData: IRealtimeData = {
|
||||
appId: v4(),
|
||||
status: "Publish",
|
||||
userId: "user2",
|
||||
pesan: "apa kabar",
|
||||
title: "coba",
|
||||
kategoriApp: "INVESTASI",
|
||||
};
|
||||
|
||||
WibuRealtime.setData({
|
||||
type: "notification",
|
||||
pushNotificationTo: "ADMIN",
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack p={"md"} align="center" justify="center" h={"80vh"}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
onSend();
|
||||
}}
|
||||
>
|
||||
Dari test 2 cuma notif
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,140 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEditor, EditorContent } from "@tiptap/react";
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import Image from "@tiptap/extension-image";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Image as MantineImage,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import Underline from "@tiptap/extension-underline";
|
||||
import { MainColor } from "@/app_modules/_global/color";
|
||||
|
||||
const listStiker = [
|
||||
{
|
||||
id: 2,
|
||||
name: "stiker2",
|
||||
url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQN9AKmsBY4yqdn3GueJJEVPJbfmf853gDL4cN8uc9eqsCTiJ1fzhcpywzVP68NCJEA5NQ&usqp=CAU",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "stiker3",
|
||||
url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2lkV3ZiQ8m-OELSui2JGVy80vnh1cyRUV7NrgFNluPVVs2HUAyCHwCMAKGe2s5jk2sn8&usqp=CAU",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "stiker4",
|
||||
url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHy9ZdsPc6dHgVTl5yIGpRJ-KtpTIsXA2_kbfO1Oc-pv_f7CNKGxhO56RjKujE3xCyb9k&usqp=CAU",
|
||||
},
|
||||
];
|
||||
|
||||
export default function RichTextWithStickers() {
|
||||
const [chat, setChat] = useState<string[]>([]);
|
||||
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
StarterKit, // Sudah include Bold, Italic, dll
|
||||
Underline, // Tambahan untuk underline
|
||||
Image,
|
||||
],
|
||||
content: "",
|
||||
});
|
||||
|
||||
const insertSticker = (url: string) => {
|
||||
editor?.chain().focus().setImage({ src: url }).run();
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack p="md">
|
||||
<Text fw={700}>Tiptap Editor dengan Stiker Inline</Text>
|
||||
|
||||
<Box
|
||||
style={{
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: 4,
|
||||
padding: 8,
|
||||
minHeight: 150,
|
||||
backgroundColor: MainColor.white,
|
||||
}}
|
||||
>
|
||||
<Group spacing="xs" mb="sm">
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={() => editor?.chain().focus().toggleBold().run()}
|
||||
>
|
||||
B
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={() => editor?.chain().focus().toggleItalic().run()}
|
||||
>
|
||||
I
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={() => editor?.chain().focus().toggleUnderline().run()}
|
||||
>
|
||||
U
|
||||
</Button>
|
||||
</Group>
|
||||
<EditorContent
|
||||
editor={editor}
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
mt="sm"
|
||||
onClick={() => {
|
||||
if (editor) {
|
||||
setChat((prev) => [...prev, editor.getHTML()]);
|
||||
editor.commands.clearContent();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Kirim
|
||||
</Button>
|
||||
|
||||
<Group>
|
||||
{listStiker.map((item) => (
|
||||
<Box
|
||||
key={item.id}
|
||||
component="button"
|
||||
onClick={() => insertSticker(item.url)}
|
||||
style={{
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<MantineImage
|
||||
w={30}
|
||||
h={30}
|
||||
src={item.url}
|
||||
alt={item.name}
|
||||
styles={{
|
||||
image: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</Group>
|
||||
|
||||
{/* <Stack mt="lg" p="md" bg="gray.1">
|
||||
{chat.map((item, index) => (
|
||||
<Box key={index} dangerouslySetInnerHTML={{ __html: item }} />
|
||||
))}
|
||||
</Stack> */}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,210 +0,0 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
Tooltip,
|
||||
Modal,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import dynamic from "next/dynamic";
|
||||
import { MainColor } from "@/app_modules/_global/color";
|
||||
import { listStiker } from "@/app_modules/_global/lib/stiker";
|
||||
|
||||
// Dynamic import ReactQuill dengan SSR disabled
|
||||
const ReactQuill = dynamic(
|
||||
async () => {
|
||||
const { default: RQ } = await import("react-quill");
|
||||
// Tidak perlu import CSS dengan import statement
|
||||
return function comp({ forwardedRef, ...props }: any) {
|
||||
return <RQ ref={forwardedRef} {...props} />;
|
||||
};
|
||||
},
|
||||
{ ssr: false, loading: () => <p>Loading Editor...</p> }
|
||||
);
|
||||
|
||||
|
||||
type ChatItem = {
|
||||
content: string; // HTML content including text and stickers
|
||||
};
|
||||
|
||||
export default function Page() {
|
||||
const [editorContent, setEditorContent] = useState("");
|
||||
const [chat, setChat] = useState<ChatItem[]>([]);
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const quillRef = React.useRef<any>(null);
|
||||
const [quillLoaded, setQuillLoaded] = useState(false);
|
||||
|
||||
// Load CSS on client-side only
|
||||
useEffect(() => {
|
||||
// Add Quill CSS via <link> tag
|
||||
const link = document.createElement("link");
|
||||
link.href = "https://cdn.quilljs.com/1.3.6/quill.snow.css";
|
||||
link.rel = "stylesheet";
|
||||
document.head.appendChild(link);
|
||||
|
||||
// Add custom style for stickers inside Quill editor
|
||||
const style = document.createElement("style");
|
||||
style.textContent = `
|
||||
.ql-editor img {
|
||||
max-width: 100px !important;
|
||||
max-height: 100px !important;
|
||||
}
|
||||
.chat-content img {
|
||||
max-width: 70px !important;
|
||||
max-height: 70px !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
setQuillLoaded(true);
|
||||
|
||||
return () => {
|
||||
// Clean up when component unmounts
|
||||
document.head.removeChild(link);
|
||||
document.head.removeChild(style);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Custom toolbar options for ReactQuill
|
||||
const modules = {
|
||||
toolbar: [
|
||||
[{ header: [1, 2, false] }],
|
||||
["bold", "italic", "underline", "strike", "blockquote"],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
["link", "image"],
|
||||
["clean"],
|
||||
],
|
||||
};
|
||||
|
||||
const formats = [
|
||||
"header",
|
||||
"bold",
|
||||
"italic",
|
||||
"underline",
|
||||
"strike",
|
||||
"blockquote",
|
||||
"list",
|
||||
"bullet",
|
||||
"link",
|
||||
"image",
|
||||
];
|
||||
|
||||
const insertSticker = (stickerUrl: string) => {
|
||||
if (!quillRef.current) return;
|
||||
|
||||
const quill = quillRef.current.getEditor();
|
||||
const range = quill.getSelection(true);
|
||||
|
||||
// Custom image insertion with size
|
||||
// Use custom blot or HTML string with size attributes
|
||||
const stickerHtml = `<img src="${stickerUrl}" alt="sticker" style="width: 40px; height: 40px;">`;
|
||||
|
||||
// Insert HTML at cursor position
|
||||
quill.clipboard.dangerouslyPasteHTML(range.index, stickerHtml);
|
||||
|
||||
// Move cursor after inserted sticker
|
||||
quill.setSelection(range.index + 1, 0);
|
||||
|
||||
// Focus back on editor
|
||||
quill.focus();
|
||||
|
||||
// Close sticker modal
|
||||
close();
|
||||
};
|
||||
|
||||
// Function to send message
|
||||
const sendMessage = () => {
|
||||
if (editorContent.trim() !== "") {
|
||||
setChat((prev) => [...prev, { content: editorContent }]);
|
||||
setEditorContent(""); // Clear after sending
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack p={"md"} spacing="md">
|
||||
<SimpleGrid cols={2}>
|
||||
<Stack bg={"gray.1"} h={560} p="md">
|
||||
<Stack>
|
||||
<ScrollArea>
|
||||
{chat.map((item, index) => (
|
||||
<Box key={index} mb="md">
|
||||
<div
|
||||
className="chat-content"
|
||||
dangerouslySetInnerHTML={{ __html: item.content }}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Paper withBorder p="md">
|
||||
<Text size="sm" weight={500} mb="xs">
|
||||
Chat Preview Data:
|
||||
</Text>
|
||||
<ScrollArea h={520}>
|
||||
<pre style={{ whiteSpace: "pre-wrap" }}>
|
||||
{JSON.stringify(chat, null, 2)}
|
||||
</pre>
|
||||
</ScrollArea>
|
||||
</Paper>
|
||||
</SimpleGrid>
|
||||
|
||||
<Box w="100%" maw={800}>
|
||||
<Box mb="xs" bg={MainColor.white}>
|
||||
{quillLoaded && (
|
||||
<ReactQuill
|
||||
forwardedRef={quillRef}
|
||||
theme="snow"
|
||||
value={editorContent}
|
||||
onChange={setEditorContent}
|
||||
modules={modules}
|
||||
formats={formats}
|
||||
placeholder="Ketik pesan di sini atau tambahkan stiker..."
|
||||
style={{
|
||||
height: 120,
|
||||
marginBottom: 40,
|
||||
backgroundColor: MainColor.white,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Group position="apart">
|
||||
<Button variant="outline" onClick={open} color="blue">
|
||||
Tambah Stiker
|
||||
</Button>
|
||||
|
||||
<Button onClick={sendMessage}>Kirim Pesan</Button>
|
||||
</Group>
|
||||
</Box>
|
||||
|
||||
{/* Sticker Modal */}
|
||||
<Modal opened={opened} onClose={close} title="Pilih Stiker" size="md">
|
||||
<SimpleGrid cols={3} spacing="md">
|
||||
{listStiker.map((item) => (
|
||||
<Box key={item.id}>
|
||||
<Tooltip label={item.name}>
|
||||
<Image
|
||||
src={item.url}
|
||||
height={100}
|
||||
width={100}
|
||||
alt={item.name}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => insertSticker(item.url)}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Modal>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,133 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { MainColor } from "@/app_modules/_global/color";
|
||||
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
|
||||
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
|
||||
import {
|
||||
UIGlobal_LayoutHeaderTamplate,
|
||||
UIGlobal_LayoutTamplate,
|
||||
} from "@/app_modules/_global/ui";
|
||||
import { clientLogger } from "@/util/clientLogger";
|
||||
import {
|
||||
AspectRatio,
|
||||
Button,
|
||||
Center,
|
||||
FileButton,
|
||||
Image,
|
||||
Stack,
|
||||
} from "@mantine/core";
|
||||
import { IconImageInPicture, IconUpload } from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<UIGlobal_LayoutTamplate
|
||||
header={<UIGlobal_LayoutHeaderTamplate title="Upload" />}
|
||||
>
|
||||
<Upload />
|
||||
</UIGlobal_LayoutTamplate>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Upload() {
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [image, setImage] = useState<any | null>(null);
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
|
||||
async function onUpload() {
|
||||
if (!file) return alert("File Kosong");
|
||||
try {
|
||||
setLoading(true);
|
||||
const formData = new FormData();
|
||||
formData.append("file", file as File);
|
||||
|
||||
const uploadPhoto = await funGlobal_UploadToStorage({
|
||||
file: file,
|
||||
dirId: "cm5ohsepe002bq4nlxeejhg7q",
|
||||
});
|
||||
|
||||
if (uploadPhoto.success) {
|
||||
setLoading(false);
|
||||
alert("berhasil upload");
|
||||
console.log("uploadPhoto", uploadPhoto);
|
||||
} else {
|
||||
setLoading(false);
|
||||
console.log("gagal upload", uploadPhoto);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error upload img:", error);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<ComponentGlobal_BoxUploadImage>
|
||||
{image ? (
|
||||
<AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
|
||||
<Image style={{ maxHeight: 250 }} alt="Avatar" src={image} />
|
||||
</AspectRatio>
|
||||
) : (
|
||||
<Center h={"100%"}>
|
||||
<IconImageInPicture size={50} />
|
||||
</Center>
|
||||
)}
|
||||
</ComponentGlobal_BoxUploadImage>
|
||||
|
||||
<Center>
|
||||
<FileButton
|
||||
onChange={async (files: any | null) => {
|
||||
try {
|
||||
const buffer = URL.createObjectURL(
|
||||
new Blob([new Uint8Array(await files.arrayBuffer())])
|
||||
);
|
||||
|
||||
// if (files.size > MAX_SIZE) {
|
||||
// ComponentGlobal_NotifikasiPeringatan(
|
||||
// PemberitahuanMaksimalFile
|
||||
// );
|
||||
// return;
|
||||
// } else {
|
||||
|
||||
// }
|
||||
|
||||
console.log("ini buffer", buffer);
|
||||
|
||||
setFile(files);
|
||||
setImage(buffer);
|
||||
} catch (error) {
|
||||
clientLogger.error("Upload error:", error);
|
||||
}
|
||||
}}
|
||||
accept="image/png,image/jpeg"
|
||||
>
|
||||
{(props) => (
|
||||
<Button
|
||||
{...props}
|
||||
radius={"sm"}
|
||||
leftIcon={<IconUpload />}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
</Center>
|
||||
|
||||
<Button
|
||||
loaderPosition="center"
|
||||
loading={isLoading}
|
||||
onClick={() => {
|
||||
onUpload();
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
"use client";
|
||||
import { Stack } from "@mantine/core";
|
||||
import useSwr from "swr";
|
||||
|
||||
const fether = (url: string) =>
|
||||
fetch("https://jsonplaceholder.typicode.com" + url, {
|
||||
cache: "force-cache",
|
||||
next: {
|
||||
revalidate: 60,
|
||||
},
|
||||
}).then((res) => res.json());
|
||||
|
||||
export default function LoadDataContoh() {
|
||||
const { data, isLoading, error, mutate, isValidating } = useSwr(
|
||||
"/posts/1",
|
||||
fether,
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
refreshInterval: 1000,
|
||||
}
|
||||
);
|
||||
return (
|
||||
<Stack>
|
||||
{isLoading && <div>Loading...</div>}
|
||||
LoadDataContoh
|
||||
{JSON.stringify(data, null, 2)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
async function getDataExample() {
|
||||
const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
|
||||
next: {
|
||||
revalidate: 60,
|
||||
},
|
||||
});
|
||||
|
||||
return res.json();
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
import { Suspense } from "react";
|
||||
import LoadDataContoh from "./LoadDataContoh";
|
||||
|
||||
const listMenu = [
|
||||
{
|
||||
name: "Dashboard",
|
||||
url: "/dashboard",
|
||||
icon: "dashboard",
|
||||
},
|
||||
{
|
||||
name: "Event",
|
||||
url: "/event",
|
||||
icon: "event",
|
||||
},
|
||||
{
|
||||
name: "Donasi",
|
||||
url: "/donasi",
|
||||
icon: "donasi",
|
||||
},
|
||||
];
|
||||
|
||||
const fether = async (url: string) =>
|
||||
fetch("https://jsonplaceholder.typicode.com" + url, {
|
||||
next: {
|
||||
revalidate: 2,
|
||||
},
|
||||
}).then(async (res) => {
|
||||
const data = await res.json();
|
||||
// console.log(data);
|
||||
return data;
|
||||
});
|
||||
|
||||
export default async function Page() {
|
||||
const data = await fether("/posts/1");
|
||||
|
||||
return (
|
||||
<div>
|
||||
{listMenu.map((item) => {
|
||||
return (
|
||||
<div key={item.name}>
|
||||
<a href={item.url}>{item.name}</a>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* <LoadDataContoh /> */}
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
{JSON.stringify(data, null, 2)}
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -24,8 +24,6 @@ const sendCodeOtp = async ({
|
||||
}),
|
||||
});
|
||||
|
||||
console.log("RES >>", res);
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
|
||||
@@ -45,10 +45,16 @@ async function gracefulShutdown(): Promise<void> {
|
||||
console.log("[Prisma] Semua koneksi ditutup");
|
||||
}
|
||||
|
||||
// Register shutdown handlers (hanya di environment Node.js)
|
||||
if (typeof process !== "undefined") {
|
||||
process.on("SIGINT", gracefulShutdown);
|
||||
process.on("SIGTERM", gracefulShutdown);
|
||||
// Register shutdown handlers (hanya di environment Node.js server)
|
||||
// Cegah duplikasi listener dengan cek listenerCount terlebih dahulu
|
||||
// IMPORTANT: Bungkus dalam check untuk mencegah error di browser
|
||||
if (typeof process !== "undefined" && typeof process.listenerCount === "function") {
|
||||
if (process.listenerCount("SIGINT") === 0) {
|
||||
process.on("SIGINT", gracefulShutdown);
|
||||
}
|
||||
if (process.listenerCount("SIGTERM") === 0) {
|
||||
process.on("SIGTERM", gracefulShutdown);
|
||||
}
|
||||
}
|
||||
|
||||
export default prisma;
|
||||
|
||||
@@ -49,6 +49,7 @@ const CONFIG: MiddlewareConfig = {
|
||||
"/auth/api/login",
|
||||
"/waiting-room",
|
||||
"/zCoba/*",
|
||||
"/event/*/confirmation",
|
||||
"/aset/global/main_background.png",
|
||||
"/aset/logo/logo-hipmi.png",
|
||||
"/aset/logo/hiconnect.png",
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import { prisma } from "@/lib";
|
||||
import { describe, test, expect } from "bun:test";
|
||||
|
||||
describe("coba test", () => {
|
||||
test("coba", async () => {
|
||||
const user = await prisma.user.findMany();
|
||||
expect(user).not.toBeEmpty();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user