chore(release): 1.7.2

### No issue;

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 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.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)

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 bun.lockb* ./
-COPY package.json package-lock.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 bun install --frozen-lockfile
-RUN npm install --legacy-peer-deps --ignore-scripts
-
-# Copy full source
 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 bun run build
-RUN npm 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/node_modules ./node_modules
-COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next ./.next
-COPY --from=builder /app/.next/static ./.next/static
 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"]

next.config.js

@@ -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;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hipmi",
-  "version": "1.6.9",
+  "version": "1.7.2",
   "private": true,
   "prisma": {
     "seed": "bun prisma/seed.ts"

src/app/(event-confirmation)/event/[id]/confirmation/route.ts

@@ -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",
+      },
+    },
+  );
+}

src/app/api/auth/mobile-validasi/route.ts

@@ -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,

src/app/zCoba/home/page.tsx

@@ -1,10 +0,0 @@
-import ClientLayout from "./v2_coba_tamplate";
-import ViewV2 from "./v2_view";
-
-export default async function Page() {
-  return (
-    <>
-      <ViewV2 />
-    </>
-  );
-}

src/app/zCoba/home/test_children.tsx

@@ -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>
-    </>
-  );
-}

src/app/zCoba/home/test_footer.tsx

@@ -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>
-  );
-}

src/app/zCoba/home/test_header.tsx

@@ -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>
-    </>
-  );
-}

src/app/zCoba/home/test_tamplate.tsx

@@ -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>
-      ) : (
-        ""
-      )}
-    </>
-  );
-}

src/app/zCoba/home/v2_children.tsx

@@ -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>
-    </>
-  );
-}

src/app/zCoba/home/v2_coba_tamplate.tsx

@@ -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>
-  );
-}

src/app/zCoba/home/v2_header.tsx

@@ -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>
-    </>
-  );
-}

src/app/zCoba/home/v2_home_view.tsx

@@ -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>
-    </>
-  );
-}

src/app/zCoba/home/v2_view.tsx

@@ -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>
-  );
-}

src/app/zCoba/page.tsx

@@ -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>
-    </>
-  );
-}

src/app/zCoba/pdf/_view.tsx

@@ -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>
-  );
-}

src/app/zCoba/pdf/page.tsx

@@ -1,13 +0,0 @@
-import Coba from "./_view";
-
-
-
-async function Page() {
-  return (
-    <>
-      <Coba />
-    </>
-  );
-}
-
-export default Page;

src/app/zCoba/scroll/_comp/ui_scroll.tsx

@@ -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;

src/app/zCoba/scroll/page.tsx

@@ -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;

src/app/zCoba/skeleton/page.tsx

@@ -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>
-    </>
-  );
-}

src/app/zCoba/test2/page.tsx

@@ -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>
-  );
-}

src/app/zCoba/text_editor/page.tsx

@@ -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>
-  );
-}

src/app/zCoba/text_editor2/page.tsx

@@ -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>
-  );
-}

src/app/zCoba/upload/page.tsx

@@ -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>
-    </>
-  );
-}

src/app/zz-makuro/LoadDataContoh.tsx

@@ -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>
-  );
-}

src/app/zz-makuro/get-data-example.ts

@@ -1,9 +0,0 @@
-async function getDataExample() {
-  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
-    next: {
-      revalidate: 60,
-    },
-  });
-
-  return res.json();
-}

src/app/zz-makuro/page.tsx

@@ -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>
-  );
-}

src/middleware.tsx

@@ -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",