Merge pull request #307 from bipproduction/join

fix API

.env.build

@@ -1,9 +0,0 @@
-DATABASE_URL="postgresql://bip:Production_123@localhost:5433/hipmi_build?schema=public"
-WIBU_PWD="QWERTYUIOPLKJHGFDSAZXCVBNMQAZWSXEDCRFVTGBYHNUJMIKOLPPOIUYTREWQLKJHGFDSAMNBVCXZlghvftyguhijknhbgvcfytguu8okjnhbgvfty7u8oilkjnhgvtygu7u8ojilnkhbgvhujnkhghvjhukjnhb"
-Client_KEY="SB-Mid-client-9NDTxltqdZrEB9m-"
-Server_KEY="SB-Mid-server-NyltU-U7fLVQd1nv1LWBKylr"
-MAPBOX_TOKEN="pk.eyJ1IjoibWFsaWtrdXJvc2FraSIsImEiOiJjbHppZHh2enYwZnQ3MmlyMWc2Y2RlMzZoIn0.XssvJvq_iniclf8UhvXaIg"
-WS_APIKEY="eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjp7ImlkIjoiY20wdXIxeXh3MDAwMDU2bnNqbHI2MTg3cCIsIm5hbWUiOiJiYWdhcyIsImVtYWlsIjoiYmFnYXNAZ21haWwuY29tIiwiQXBpS2V5IjpbeyJpZCI6ImNtMHVyMXl5MzAwMDI1Nm5zazNia2xyc28iLCJuYW1lIjoiZGVmYXVsdCJ9XX0sImlhdCI6MTcyNTk1NjMyMSwiZXhwIjo0ODgxNzE2MzIxfQ.9D3YszZA_ljrkTKMcgo03u7PL5mo9OaoM41rbUrOsz8"
-NEXT_PUBLIC_WIBU_REALTIME_TOKEN="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inp5aml4c2J1c2diYnR2am9namhvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjY3Mzk1NDUsImV4cCI6MjA0MjMxNTU0NX0.jHNW5Pwhj-KXUQOMqzILaAz62k3xlKEL5XKE4xoR7Xc"
-NEXT_PUBLIC_BASE_TOKEN_KEY="QWERTYUIOPLKJHGFDSAZXCVBNMQAZWSXEDCRFVTGBYHNUJMIKOLPPOIUYTREWQLKJHGFDSAMNBVCXZlghvftyguhijknhbgvcfytguu8okjnhbgvfty7u8oilkjnhgvtygu7u8ojilnkhbgvhujnkhghvjhukjnhb"
-NEXT_PUBLIC_BASE_SESSION_KEY="hipmi-key"

.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-  "WillLuke.nextjs.addTypesOnSave": true,
-  "WillLuke.nextjs.hasPrompted": true,
-  "prismaERDPreviewer.preferredTheme": "dark"
-}

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.2.55](https://github.com/bipproduction/hipmi/compare/v1.2.54...v1.2.55) (2025-02-12)
+
 ## [1.2.54](https://github.com/bipproduction/hipmi/compare/v1.2.53...v1.2.54) (2025-02-12)
 
 ## [1.2.53](https://github.com/bipproduction/hipmi/compare/v1.2.52...v1.2.53) (2025-02-11)

package.json

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

run.build.dev

@@ -0,0 +1 @@
+nice -n 19 bun --env-file=.env.build run build

src/app/(admin)/logs/logs.module.css

@@ -1,138 +0,0 @@
-/* app/admin/logs/logs.module.css */
-.container {
-    padding: 24px;
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-  
-  .title {
-    font-size: 24px;
-    font-weight: bold;
-    margin-bottom: 16px;
-  }
-  
-  .filterContainer {
-    margin-bottom: 16px;
-  }
-  
-  .select {
-    padding: 8px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    min-width: 200px;
-  }
-  
-  .logsContainer {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  
-  .logItem {
-    padding: 16px;
-    border-radius: 4px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-  
-  .errorLog {
-    background-color: #fef2f2;
-  }
-  
-  .warnLog {
-    background-color: #fefce8;
-  }
-  
-  .infoLog {
-    background-color: #ffffff;
-  }
-  
-  .logHeader {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  
-  .timestamp {
-    font-size: 14px;
-    color: #666;
-  }
-  
-  .level {
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 500;
-  }
-  
-  .errorLevel {
-    background-color: #fee2e2;
-    color: #991b1b;
-  }
-  
-  .warnLevel {
-    background-color: #fef3c7;
-    color: #92400e;
-  }
-  
-  .infoLevel {
-    background-color: #dbeafe;
-    color: #1e40af;
-  }
-  
-  .message {
-    margin-top: 8px;
-  }
-  
-  .metadata {
-    margin-top: 8px;
-    padding: 8px;
-    background-color: #f9fafb;
-    border-radius: 4px;
-    font-size: 14px;
-    overflow-x: auto;
-    white-space: pre-wrap;
-  }
-  
-  .loading {
-    text-align: center;
-    padding: 24px;
-    color: #666;
-  }
-  
-  .error {
-    color: #dc2626;
-    text-align: center;
-    padding: 24px;
-  }
-  
-  /* Hover effects */
-  .logItem:hover {
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  }
-  
-  .select:hover {
-    border-color: #999;
-  }
-  
-  /* Focus states */
-  .select:focus {
-    outline: none;
-    border-color: #2563eb;
-    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
-  }
-  
-  /* Responsive adjustments */
-  @media (max-width: 768px) {
-    .container {
-      padding: 16px;
-    }
-  
-    .logHeader {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  
-    .metadata {
-      font-size: 12px;
-    }
-  }

src/app/(admin)/logs/page.tsx

@@ -1,106 +0,0 @@
-// app/admin/logs/page.tsx
-"use client";
-
-import { useEffect, useState } from "react";
-import { format } from "date-fns";
-import styles from "./logs.module.css";
-
-interface LogEntry {
-  timestamp: string;
-  level: string;
-  message: string;
-  metadata?: any;
-}
-
-export default function LogsPage() {
-  const [logs, setLogs] = useState<LogEntry[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [filter, setFilter] = useState<"all" | "error" | "info" | "warn">(
-    "all"
-  );
-
-  useEffect(() => {
-    fetchLogs();
-  }, []);
-
-  async function fetchLogs() {
-    try {
-      const response = await fetch("/api/logs/view");
-      if (!response.ok) throw new Error("Failed to fetch logs");
-
-      const data = await response.json();
-      setLogs(data.logs);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Error fetching logs");
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  const filteredLogs = logs.filter((log) =>
-    filter === "all" ? true : log.level === filter
-  );
-
-  if (loading) return <div className={styles.loading}>Loading logs...</div>;
-  if (error) return <div className={styles.error}>Error: {error}</div>;
-
-  return (
-    <div className={styles.container}>
-      <h1 className={styles.title}>System Logs</h1>
-
-      <div className={styles.filterContainer}>
-        <select
-          value={filter}
-          onChange={(e) => setFilter(e.target.value as any)}
-          className={styles.select}
-        >
-          <option value="all">All Logs</option>
-          <option value="error">Errors</option>
-          <option value="warn">Warnings</option>
-          <option value="info">Info</option>
-        </select>
-      </div>
-
-      <div className={styles.logsContainer}>
-        {filteredLogs.map((log, index) => (
-          <div
-            key={index}
-            className={`${styles.logItem} ${
-              log.level === "error"
-                ? styles.errorLog
-                : log.level === "warn"
-                  ? styles.warnLog
-                  : styles.infoLog
-            }`}
-          >
-            <div className={styles.logHeader}>
-              <span className={styles.timestamp}>
-                {format(new Date(log.timestamp), "yyyy-MM-dd HH:mm:ss")}
-              </span>
-              <span
-                className={`${styles.level} ${
-                  log.level === "error"
-                    ? styles.errorLevel
-                    : log.level === "warn"
-                      ? styles.warnLevel
-                      : styles.infoLevel
-                }`}
-              >
-                {log.level.toUpperCase()}
-              </span>
-            </div>
-
-            <div className={styles.message}>{log.message}</div>
-
-            {log.metadata && (
-              <pre className={styles.metadata}>
-                {JSON.stringify(log.metadata, null, 2)}
-              </pre>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

src/app/api/admin/event/[id]/route.ts

@@ -0,0 +1,50 @@
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export async function GET(req: Request,
+    { params }: { params: { id: string } }) {
+
+    try {
+        const { id } = params;
+        const data = await prisma.event.findUnique({
+            where: {
+                id: id
+            },
+            include: {
+                Author: {
+                    select: {
+                        username: true,
+                        nomor: true,
+                        Profile: {
+                            select: {
+                                name: true,
+                                alamat: true
+                            }
+                        }
+                    }
+                },
+                EventMaster_TipeAcara: {
+                    select: {
+                        name: true
+                    }
+                }
+            }
+        })
+        return NextResponse.json({
+            success: true,
+            message: "Success get data event detail",
+            data: data,
+        },
+            { status: 200 }
+        )
+    } catch (error) {
+        backendLogger.error("Error get data event detail >>", error);
+        return NextResponse.json({
+            success: false,
+            message: "Error get data event detail",
+            reason: (error as Error).message
+        },
+            { status: 500 }
+        )
+    }
+}

src/app/api/admin/event/detail/[id]/route.ts

@@ -1,19 +0,0 @@
-import backendLogger from "@/util/backendLogger";
-import { NextResponse } from "next/server";
-
-export async function GET(req: Request,
-    { params }: { params: { id: string } }) {
-
-    try {
-        
-    } catch (error) {
-        backendLogger.error("Error get data event detail >>", error);
-        return NextResponse.json({
-            success: false,
-            message: "Error get data event detail",
-            reason: (error as Error).message
-        },
-            { status: 500 }
-        )
-    }
-}

src/app/api/admin/event/status/[name]/route.ts

@@ -6,11 +6,11 @@ import { NextResponse } from "next/server";
 
 export async function GET(
   request: Request,
-  { params }: { params: { status: string } }
+  { params }: { params: { name: string } }
 ) {
 
 
-  const { status } = params;
+  const { name } = params;
   const { searchParams } = new URL(request.url);
   const search = searchParams.get("search");
   const page = searchParams.get("page");
@@ -19,7 +19,7 @@ export async function GET(
 
   try {
     let fixData;
-    const fixStatus = _.startCase(status);
+    const fixStatus = _.startCase(name);
 
     if (!page && !search) {
       fixData = await prisma.event.findMany({
@@ -230,9 +230,11 @@ export async function GET(
 
     return NextResponse.json({
       success: true,
-      message: `Success get data table event ${status}`,
+      message: `Success get data table event ${name}`,
       data: fixData,
-    });
+    },
+      { status: 200 }
+    );
   } catch (error) {
     backendLogger.error("Error get data table event dashboard >>", error);
     return NextResponse.json(

src/app/api/admin/forum/[id]/report-posting/route.ts

@@ -0,0 +1,115 @@
+import { prisma } from "@/lib";
+import backendLogger from "@/util/backendLogger";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request,
+    { params }: { params: { id: string } }) {
+    
+    const { searchParams } = new URL(request.url);
+    const search = searchParams.get('search');
+    const page = searchParams.get('page');
+    const takeData = 10;
+    const skipData = Number(page) * takeData - takeData;
+
+    try {
+        let fixData;
+        const { id } = params;
+        const postingId = id
+
+        if (!page) {
+            fixData = await prisma.forum_ReportPosting.findMany({
+                
+                orderBy: {
+                    createdAt: "desc",
+                },
+                where: {
+                    forum_PostingId: postingId,
+                },
+                select: {
+                    id: true,
+                    deskripsi: true,
+                    createdAt: true,
+                    User: {
+                      select: {
+                        id: true,
+                        username: true,
+                        Profile: {
+                          select: {
+                            name: true,
+                          },
+                        },
+                      },
+                    },
+                    ForumMaster_KategoriReport: {
+                      select: {
+                        id: true,
+                        title: true,
+                        deskripsi: true,
+                      },
+                    },
+                  },
+            });
+        } else {
+            const data = await prisma.forum_ReportPosting.findMany({
+                take: takeData,
+                skip: skipData,
+                orderBy: {
+                  createdAt: "desc",
+                },
+                where: {
+                  forum_PostingId: postingId,
+                },
+                select: {
+                  id: true,
+                  deskripsi: true,
+                  createdAt: true,
+                  User: {
+                    select: {
+                      id: true,
+                      username: true,
+                      Profile: {
+                        select: {
+                          name: true,
+                        },
+                      },
+                    },
+                  },
+                  ForumMaster_KategoriReport: {
+                    select: {
+                      id: true,
+                      title: true,
+                      deskripsi: true,
+                    },
+                  },
+                },
+              });
+            const nCount = await prisma.forum_ReportPosting.count({
+                where: {
+                    isActive: true,
+                }
+            })
+
+
+            fixData = {
+                data: data,
+                nCount: _.ceil(nCount / takeData)
+            }
+        }
+        return NextResponse.json({
+            success: true,
+            message: "Success get data forum posting",
+            data: fixData
+        },
+            { status: 200 }
+        )
+    } catch (error) {
+        backendLogger.error("Error get data forum posting >>", error);
+        return NextResponse.json({
+            success: false,
+            message: "Error get data forum posting",
+        },
+            { status: 500 }
+        )
+    } 
+}

src/app/api/admin/forum/posting/route.ts

@@ -3,8 +3,7 @@ import backendLogger from "@/util/backendLogger";
 import _ from "lodash";
 import { NextResponse } from "next/server";
 
-export async function GET(request: Request,
+export async function GET(request: Request) {
-    { postingId }: { postingId: string }) {
     
     const { searchParams } = new URL(request.url);
     const search = searchParams.get('search');
@@ -22,7 +21,13 @@ export async function GET(request: Request,
                     createdAt: "desc",
                 },
                 where: {
-                    forum_PostingId: postingId,
+                    Forum_Posting: {
+                        isActive: true,
+                        diskusi: {
+                            contains: search ? search : '',
+                            mode: "insensitive"
+                        }
+                    },
                 },
                 select: {
                     id: true,

src/app/api/logs/view/route.ts

@@ -1,71 +0,0 @@
-// app/api/logs/view/route.ts
-import { NextRequest, NextResponse } from "next/server";
-import fs from "fs/promises";
-import path from "path";
-
-interface LogEntry {
-  timestamp: string;
-  level: string;
-  message: string;
-  metadata?: any;
-}
-
-async function readLogFiles(directory: string): Promise<LogEntry[]> {
-  try {
-    const logPath = path.join(process.cwd(), directory);
-    const files = await fs.readdir(logPath);
-    const logFiles = files.filter((file) => file.endsWith(".log"));
-
-    const allLogs: LogEntry[] = [];
-
-    for (const file of logFiles) {
-      const filePath = path.join(logPath, file);
-      const content = await fs.readFile(filePath, "utf-8");
-
-      // Parse setiap baris log
-      const logs = content
-        .split("\n")
-        .filter(Boolean)
-        .map((line) => {
-          try {
-            return JSON.parse(line);
-          } catch (e) {
-            return null;
-          }
-        })
-        .filter(Boolean);
-
-      allLogs.push(...logs);
-    }
-
-    // Sort berdasarkan timestamp, terbaru di atas
-    return allLogs.sort(
-      (a, b) =>
-        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
-    );
-  } catch (error) {
-    console.error("Error reading log files:", error);
-    return [];
-  }
-}
-
-export async function GET(request: NextRequest) {
-  try {
-    // Baca logs dari frontend dan backend
-    const frontendLogs = await readLogFiles("logs/frontend");
-    const backendLogs = await readLogFiles("logs/backend");
-
-    // Gabungkan dan sort semua logs
-    const allLogs = [...frontendLogs, ...backendLogs].sort(
-      (a, b) =>
-        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
-    );
-
-    return NextResponse.json({ logs: allLogs });
-  } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch logs" },
-      { status: 500 }
-    );
-  }
-}

src/app/api/portofolio/[id]/route.ts

@@ -1,7 +1,131 @@
 import { prisma } from "@/lib";
+import backendLogger from "@/util/backendLogger";
 import { NextResponse } from "next/server";
 
-export { POST };
+export { GET, POST, PUT };
+
+async function GET(request: Request, { params }: { params: { id: string } }) {
+  try {
+    const { id } = params;
+
+    const data = await prisma.portofolio.findUnique({
+      where: {
+        id: id,
+      },
+      include: {
+        MasterBidangBisnis: {
+          select: {
+            id: true,
+            name: true,
+            active: true,
+          },
+        },
+        Portofolio_MediaSosial: true,
+        Profile: {
+          select: {
+            userId: true,
+            User: {
+              select: {
+                id: true,
+              },
+            },
+          },
+        },
+        BusinessMaps: {
+          include: {
+            Author: true,
+          },
+        },
+      },
+    });
+
+    if (!data)
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Data tidak ditemukan",
+        },
+        { status: 404 }
+      );
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Berhasil mendapatkan data",
+        data: data,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("API Error Get Data Portofolio", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "API Error Get Data Potofolio",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
+
+async function PUT(request: Request, { params }: { params: { id: string } }) {
+  if (request.method !== "PUT") {
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Method not allowed",
+      },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const { id } = params;
+    const { data } = await request.json();
+
+    const udpateData = await prisma.portofolio.update({
+      where: {
+        id: id,
+      },
+      data: {
+        namaBisnis: data.namaBisnis,
+        alamatKantor: data.alamatKantor,
+        tlpn: data.tlpn,
+        deskripsi: data.deskripsi,
+        masterBidangBisnisId: data.masterBidangBisnisId,
+      },
+    });
+
+    if (!udpateData)
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Gagal update data",
+        },
+        { status: 400 }
+      );
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Berhasil mendapatkan data",
+        data: udpateData,
+      },
+
+      { status: 200 }
+    );
+  } catch (error) {
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error update data",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
 
 async function POST(request: Request, { params }: { params: { id: string } }) {
   if (request.method !== "POST") {

src/app/dev/portofolio/edit/data/[id]/page.tsx

@@ -1,24 +1,9 @@
 import { Portofolio_EditDataBisnis } from "@/app_modules/katalog/portofolio";
-import { portofolio_getOneById } from "@/app_modules/katalog/portofolio/fun/get/get_one_portofolio";
-import { Portofolio_getMasterBidangBisnis } from "@/app_modules/katalog/portofolio/fun/master/get_bidang_bisnis";
-import _ from "lodash";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let portoId = params.id;
-  const data = await portofolio_getOneById(portoId);
-  const dataPorto = _.omit(data, [
-    "Logo",
-    "Portofolio_MediaSosial",
-    "Portofolio_MediaSosial",
-    "logoId",
-    "profileId",
-  ]);
-
-  const listBidang = await Portofolio_getMasterBidangBisnis()
 
+export default async function Page() {
   return (
     <>
-      <Portofolio_EditDataBisnis dataPorto={dataPorto as any} listBidang={listBidang as any} />
+      <Portofolio_EditDataBisnis />
     </>
   );
 }

src/app/dev/portofolio/edit/logo/[id]/page.tsx

@@ -2,26 +2,11 @@ import { Portofolio_EditLogoBisnis } from "@/app_modules/katalog/portofolio";
 import { portofolio_getOneById } from "@/app_modules/katalog/portofolio/fun/get/get_one_portofolio";
 import _ from "lodash";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  let portoId = params.id;
-  const dataPorto = await portofolio_getOneById(portoId).then((res) =>
-    _.omit(res, [
-      "Logo",
-      "MasterBidangBisnis",
-      "Portofolio_MediaSosial",
-      "active",
-      "alamatKantor",
-      "deskripsi",
-      "masterBidangBisnisId",
-      "profileId",
-      "tlpn",
-      "namaBisnis"
-    ])
-  );
 
   return (
     <>
-      <Portofolio_EditLogoBisnis  dataPorto={dataPorto as any} />
+      <Portofolio_EditLogoBisnis   />
     </>
   );
 }

src/app/zCoba/skeleton/page.tsx

@@ -5,6 +5,7 @@ import {
   UIGlobal_LayoutHeaderTamplate,
   UIGlobal_LayoutTamplate,
 } from "@/app_modules/_global/ui";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { Button, Grid, Skeleton, Stack } from "@mantine/core";
 import Link from "next/link";
 
@@ -14,100 +15,12 @@ export default function Voting_ComponentSkeletonViewPuh() {
       <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Skeleton Maker" />}
       >
-        <Button
+        <Stack spacing={"xl"} p={"sm"}>
-         
+          {Array.from({ length: 4 }).map((_, i) => (
-        >
+            <CustomSkeleton key={i} height={50} width={"100%"} />
-          <Link
+          ))}
-            color="white"
+          <CustomSkeleton height={100} width={"100%"} />
-            style={{
+          <CustomSkeleton radius="xl" height={50} width={"100%"} />
-              color: "white",
-              textDecoration: "none",
-            }}
-            target="_blank"
-            href={
-              "https://wa.me/+6281339158911?text=Hallo , Apa boleh saya minta informasi tentang DariBaliMice?"
-            }
-          >
-            {" "}
-            Kirim
-          </Link>
-        </Button>
-
-        <Stack>
-          <ComponentGlobal_CardStyles marginBottom={"0"}>
-            <Stack>
-              <Skeleton h={20} w={100} />
-
-              {Array.from(new Array(2)).map((e, i) => (
-                <Grid align="center" gutter={"md"} key={i}>
-                  <Grid.Col span={"content"}>
-                    <Skeleton circle height={40} />
-                  </Grid.Col>
-                  <Grid.Col span={3}>
-                    <Skeleton height={20} w={150} />
-                  </Grid.Col>
-                </Grid>
-              ))}
-            </Stack>
-          </ComponentGlobal_CardStyles>
-
-          {/* <ComponentGlobal_CardStyles marginBottom={"0"}>
-            <Stack spacing={"xl"}>
-              <Grid align="center" gutter={"md"}>
-                <Grid.Col span={"content"}>
-                  <Skeleton circle height={40} />
-                </Grid.Col>
-                <Grid.Col span={3}>
-                  <Skeleton height={20} w={150} />
-                </Grid.Col>
-              </Grid>
-              <Center>
-                <Skeleton height={15} w={200} />
-              </Center>
-
-              <Grid align="center" gutter={"md"}>
-                <Grid.Col span={"content"}>
-                  <Skeleton h={15} w={70} />
-                </Grid.Col>
-                <Grid.Col span={3}>
-                  <Skeleton height={15} w={200} />
-                </Grid.Col>
-              </Grid>
-
-              <Grid align="center" gutter={"md"}>
-                <Grid.Col span={"content"}>
-                  <Skeleton h={15} w={70} />
-                </Grid.Col>
-                <Grid.Col span={3}>
-                  <Skeleton height={15} w={200} />
-                </Grid.Col>
-              </Grid>
-
-              <Skeleton height={15} w={100} />
-              <Skeleton height={15} w={"100%"} />
-              <Skeleton height={15} w={100} />
-              <Skeleton height={15} w={"100%"} />
-            </Stack>
-          </ComponentGlobal_CardStyles> */}
-
-          {/* <ComponentGlobal_CardStyles>
-            <Stack>
-              <Center>
-                <Skeleton h={20} w={"30%"} />
-              </Center>
-
-              <Group position="center" spacing={50}>
-                <Stack align="center">
-                  <Skeleton circle height={70} />
-                  <Skeleton height={20} w={50} />
-                </Stack>
-                <Stack align="center">
-                  <Skeleton circle height={70} />
-                  <Skeleton height={20} w={50} />
-                </Stack>
-              </Group>
-            </Stack>
-          </ComponentGlobal_CardStyles> */}
         </Stack>
       </UIGlobal_LayoutTamplate>
     </>

src/app_modules/admin/event/_component/detail_data_author.tsx

@@ -1,10 +1,17 @@
 import { AdminColor } from '@/app_modules/_global/color/color_pallet';
+import CustomSkeleton from '@/app_modules/components/CustomSkeleton';
+import { MODEL_EVENT } from '@/app_modules/event/_lib/interface';
 import { Grid, Paper, Stack, Text, Title } from '@mantine/core';
 import React from 'react';
 
-function ComponentEvent_DetailDataAuthor() {
+function ComponentEvent_DetailDataAuthor({ data }: { data: MODEL_EVENT | null }) {
   return (
     <>
+      {/* {!data ? (
+        <CustomSkeleton height={"40vh"} width={"100%"} />
+      ) : (
+       
+      )} */}
       <Paper bg={AdminColor.softBlue} p={"lg"}>
         <Stack c={AdminColor.white}>
           <Title order={3}>Data User</Title>
@@ -14,7 +21,11 @@ function ComponentEvent_DetailDataAuthor() {
                 <Text fw={"bold"}>Nama:</Text>
               </Grid.Col>
               <Grid.Col span={6}>
-                <Text>Nico Arya</Text>
+                {data ?
+                  <Text>{data?.Author?.Profile?.name}</Text>
+                  :
+                  <CustomSkeleton height={30} width={"100%"} />
+                }
               </Grid.Col>
             </Grid>
             <Grid>
@@ -22,7 +33,11 @@ function ComponentEvent_DetailDataAuthor() {
                 <Text fw={"bold"}>Username:</Text>
               </Grid.Col>
               <Grid.Col span={6}>
-                <Text>@NicoArya</Text>
+                {data ?
+                  <Text>{data?.Author?.username}</Text>
+                  :
+                  <CustomSkeleton height={30} width={"100%"} />
+                }
               </Grid.Col>
             </Grid>
             <Grid>
@@ -30,7 +45,11 @@ function ComponentEvent_DetailDataAuthor() {
                 <Text fw={"bold"}>Nomor:</Text>
               </Grid.Col>
               <Grid.Col span={6}>
-                <Text>+628123456789</Text>
+                {data ?
+                  <Text>{data?.Author?.nomor}</Text>
+                  :
+                  <CustomSkeleton height={30} width={"100%"} />
+                }
               </Grid.Col>
             </Grid>
             <Grid>
@@ -38,12 +57,16 @@ function ComponentEvent_DetailDataAuthor() {
                 <Text fw={"bold"}>Alamat:</Text>
               </Grid.Col>
               <Grid.Col span={6}>
-                <Text>Jl Raya Sesetan</Text>
+                {data ?
+                  <Text>{data?.Author?.Profile?.alamat}</Text>
+                  :
+                  <CustomSkeleton height={30} width={"100%"} />
+                }
               </Grid.Col>
             </Grid>
           </Stack>
         </Stack>
-      </Paper>
+      </Paper >
     </>
   );
 }

src/app_modules/admin/event/_component/detail_data_event.tsx

@@ -1,20 +1,31 @@
 import { AdminColor } from '@/app_modules/_global/color/color_pallet';
+import { MODEL_EVENT } from '@/app_modules/event/_lib/interface';
 import { Box, Grid, Paper, Stack, Text, Title } from '@mantine/core';
+import moment from 'moment';
 import React from 'react';
+import "moment/locale/id";
+import CustomSkeleton from '@/app_modules/components/CustomSkeleton';
+
+function ComponentEvent_DetailDataEvent({ data }: { data: MODEL_EVENT | null }) {
 
-function ComponentEvent_DetailDataEvent() {
   return (
     <>
+      {/* {!data ? (
+        <CustomSkeleton height={"40vh"} width={"100%"} />
+      ) : (
+        
+      )
+      } */}
       <Paper bg={AdminColor.softBlue} p={"lg"}>
         <Stack c={AdminColor.white}>
-          <Title order={3}>Coba</Title>
+          {data ? <Title order={3}>{data?.title}</Title> : <CustomSkeleton height={30} width={"100%"} />}
           <Stack spacing={"xs"}>
             <Grid>
               <Grid.Col span={6}>
                 <Text fw={"bold"}>Lokasi:</Text>
               </Grid.Col>
               <Grid.Col span={6}>
-                <Text>Tuban</Text>
+                {data ? <Text>{data?.lokasi}</Text> : <CustomSkeleton height={30} width={"100%"} />}
               </Grid.Col>
             </Grid>
             <Grid>
@@ -22,7 +33,7 @@ function ComponentEvent_DetailDataEvent() {
                 <Text fw={"bold"}>Tipe Acara:</Text>
               </Grid.Col>
               <Grid.Col span={6}>
-                <Text>Seminar</Text>
+                {data ? <Text>{data?.EventMaster_TipeAcara?.name}</Text> : <CustomSkeleton height={30} width={"100%"} />}
               </Grid.Col>
             </Grid>
             <Grid>
@@ -30,28 +41,26 @@ function ComponentEvent_DetailDataEvent() {
                 <Text fw={"bold"}>Tanggal & Waktu Mulai:</Text>
               </Grid.Col>
               <Grid.Col span={6}>
-                <Text>Minggu, 17 Januari 2025</Text>
+                {data ? <Text>{moment(data?.tanggal).format("LLLL")}</Text> : <CustomSkeleton height={30} width={"100%"} />}
-                <Text>09:00</Text>
               </Grid.Col>
             </Grid>
             <Grid>
-            <Grid.Col span={6}>
+              <Grid.Col span={6}>
                 <Text fw={"bold"}>Tanggal & Waktu Selesai:</Text>
               </Grid.Col>
               <Grid.Col span={6}>
-                <Text >Minggu, 17 Januari 2025</Text>
+                {data ? <Text>{moment(data?.tanggalSelesai).format("LLLL")}</Text> : <CustomSkeleton height={30} width={"100%"} />}
-                <Text >15:00</Text>
               </Grid.Col>
             </Grid>
             <Grid>
               <Grid.Col span={6}>
                 <Text fw={"bold"}>Deskripsi:</Text>
-                <Text >Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, natus.</Text>
+                {data ? <Text>{data?.deskripsi}</Text> : <CustomSkeleton height={30} width={"100%"} />}
               </Grid.Col>
             </Grid>
           </Stack>
         </Stack>
-      </Paper>
+      </Paper >
     </>
   );
 }

src/app_modules/admin/event/_lib/api_fecth_admin_event.ts

@@ -5,6 +5,7 @@ export {
   apiGetAdminEventByStatus as apiGetDataEventByStatus,
   apiGetAdminEventRiwayat,
   apiGetAdminEventTipeAcara,
+  apiGetAdminDetailEventById
 };
 
 const apiGetAdminEventStatusCountDashboard = async ({
@@ -63,11 +64,11 @@ const apiGetAdminEventCountTipeAcara = async () => {
 };
 
 const apiGetAdminEventByStatus = async ({
-  status,
+  name,
   page,
   search,
 }: {
-  status: "Publish" | "Review" | "Reject";
+  name: "Publish" | "Review" | "Reject";
   page: string;
   search: string;
 }) => {
@@ -77,7 +78,7 @@ const apiGetAdminEventByStatus = async ({
   const isPage = page ? `?page=${page}` : "";
   const isSearch = search ? `&search=${search}` : "";
   const respone = await fetch(
-    `/api/admin/event/${status}${isPage}${isSearch}`,
+    `/api/admin/event/status/${name}${isPage}${isSearch}`,
     {
       headers: {
         "Content-Type": "application/json",
@@ -132,3 +133,20 @@ const apiGetAdminEventTipeAcara = async () => {
 
   return await response.json().catch(() => null);
 };
+
+const apiGetAdminDetailEventById = async ({ id }: { id: string }) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const response = await fetch(`/api/admin/event/${id}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  })
+
+  return await response.json().catch(() => null);
+}

src/app_modules/admin/event/_view/view_table_review.tsx

@@ -1,4 +1,4 @@
-import { apiGetDataEventByStatus } from "@/app/dev/admin/event/_lib/api_fecth_admin_event";
+import { apiGetDataEventByStatus } from "@/app_modules/admin/event/_lib/api_fecth_admin_event";
 import {
   gs_adminEvent_triggerReview,
   IRealtimeData,
@@ -75,7 +75,7 @@ export default function AdminEvent_ComponentTableReview() {
   const loadInitialData = async () => {
     try {
       const response = await apiGetDataEventByStatus({
-        status: "Review",
+        name: "Review",
         page: `${activePage}`,
         search: isSearch,
       });
@@ -156,7 +156,7 @@ export default function AdminEvent_ComponentTableReview() {
 
         try {
           const response = await apiGetDataEventByStatus({
-            status: "Review",
+            name: "Review",
             page: `${activePage}`,
             search: isSearch,
           });
@@ -221,7 +221,7 @@ export default function AdminEvent_ComponentTableReview() {
 
       try {
         const response = await apiGetDataEventByStatus({
-          status: "Review",
+          name: "Review",
           page: `${activePage}`,
           search: isSearch,
         });

src/app_modules/admin/event/child/riwayat.tsx

@@ -22,7 +22,7 @@ import { IconCircleCheck, IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import { apiGetAdminEventRiwayat } from "@/app/dev/admin/event/_lib/api_fecth_admin_event";
+import { apiGetAdminEventRiwayat } from "@/app_modules/admin/event/_lib/api_fecth_admin_event";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 

src/app_modules/admin/event/child/tipe_acara.tsx

@@ -25,7 +25,7 @@ import { AdminEvent_funCreateTipeAcara } from "../fun/create/fun_create_tipe_aca
 import { AdminEvent_funEditActivationTipeAcaraById } from "../fun/edit/fun_edit_activation_tipe_acara";
 import { AdminEvent_funEditTipeAcara } from "../fun/edit/fun_edit_tipe_acara";
 import { AdminEvent_getListTipeAcara } from "../fun/get/get_list_tipe_acara";
-import { apiGetAdminEventTipeAcara } from "@/app/dev/admin/event/_lib/api_fecth_admin_event";
+import { apiGetAdminEventTipeAcara } from "@/app_modules/admin/event/_lib/api_fecth_admin_event";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { clientLogger } from "@/util/clientLogger";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
@@ -168,9 +168,10 @@ function DetailTipeAcara() {
 
           {openCreate ? (
             <div>
-              <Paper p={"sm"} shadow="lg" withBorder>
+              <Paper p={"sm"} bg={AdminColor.softBlue} shadow="lg" >
                 <Stack>
-                  <TextInput
+                    <TextInput
+                    styles={{ label: { color: AdminColor.white } }}
                     value={name ? name : ""}
                     label="Masukan Tipe"
                     placeholder="Contoh: Seminar, Workshop, dll."

src/app_modules/admin/event/detail/view_detail_data.tsx

@@ -1,9 +1,41 @@
 import { SimpleGrid } from '@mantine/core';
-import React from 'react';
+import React, { useState } from 'react';
 import ComponentEvent_DetailDataAuthor from '../_component/detail_data_author';
 import ComponentEvent_DetailDataEvent from '../_component/detail_data_event';
+import { useParams } from 'next/navigation';
+import { apiGetAdminDetailEventById } from '../_lib/api_fecth_admin_event';
+import { MODEL_EVENT } from '@/app_modules/event/_lib/interface';
+import { clientLogger } from '@/util/clientLogger';
+import { useShallowEffect } from '@mantine/hooks';
 
 function AdminEvent_ViewDetailData({ }) {
+  const params = useParams<{ id: string }>();
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState<MODEL_EVENT | null>(null);
+
+  useShallowEffect(() => {
+    getDetailData();
+  }, [])
+  async function getDetailData() {
+    try {
+      setLoading(true);
+      const response = await apiGetAdminDetailEventById({
+        id: params.id,
+      })
+
+      if (response?.success && response?.data) {
+        setTimeout(() => {
+          setData(response.data);
+        }, 1000)
+      } else {
+        console.error("Invalid data format received:", response);
+        setData(null);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data table detail publish", error);
+      setData(null);
+    }
+  }
   return (
     <>
       <SimpleGrid
@@ -14,10 +46,10 @@ function AdminEvent_ViewDetailData({ }) {
         ]}
       >
         {/* //Data Author */}
-        <ComponentEvent_DetailDataAuthor />
+        <ComponentEvent_DetailDataAuthor data={data}/>
 
         {/* Data Event */}
-        <ComponentEvent_DetailDataEvent/>
+        <ComponentEvent_DetailDataEvent data={data} />
 
       </SimpleGrid>
     </>

src/app_modules/admin/event/main/index.tsx

@@ -6,7 +6,7 @@ import {
   apiGetEventRiwayatCount,
   apiGetEventStatusCountDashboard,
   apiGetEventTipeAcara,
-} from "@/app/dev/admin/event/_lib/api_fecth_admin_event";
+} from "@/app_modules/admin/event/_lib/api_fecth_admin_event";
 import global_limit from "@/lib/limit";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
@@ -229,7 +229,7 @@ export default function AdminEvent_Main() {
               shadow="md"
               radius="md"
               p="md"
-              // sx={{ borderColor: e.color, borderStyle: "solid" }}
+            // sx={{ borderColor: e.color, borderStyle: "solid" }}
             >
               <Stack spacing={0}>
                 <Text fw={"bold"} color={AccentColor.white}>
@@ -265,7 +265,7 @@ export default function AdminEvent_Main() {
               shadow="md"
               radius="md"
               p="md"
-              // sx={{ borderColor: e.color, borderStyle: "solid" }}
+            // sx={{ borderColor: e.color, borderStyle: "solid" }}
             >
               <Stack spacing={0}>
                 <Text fw={"bold"} color={AccentColor.white}>

src/app_modules/admin/event/table_status/table_publish.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { apiGetDataEventByStatus } from "@/app/dev/admin/event/_lib/api_fecth_admin_event";
+import { apiGetDataEventByStatus } from "@/app_modules/admin/event/_lib/api_fecth_admin_event";
 import { RouterAdminEvent } from "@/lib/router_admin/router_admin_event";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_EVENT } from "@/app_modules/event/_lib/interface";
@@ -55,7 +55,7 @@ function TableStatus() {
     const loadInitialData = async () => {
       try {
         const response = await apiGetDataEventByStatus({
-          status: "Publish",
+          name: "Publish",
           page: `${activePage}`,
           search: isSearch,
         });

src/app_modules/admin/event/table_status/table_reject.tsx

@@ -29,7 +29,7 @@ import { AdminEvent_funEditCatatanById } from "../fun/edit/fun_edit_status_rejec
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { MainColor } from "@/app_modules/_global/color";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { apiGetDataEventByStatus } from "@/app/dev/admin/event/_lib/api_fecth_admin_event";
+import { apiGetDataEventByStatus } from "@/app_modules/admin/event/_lib/api_fecth_admin_event";
 import { clientLogger } from "@/util/clientLogger";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
@@ -59,7 +59,7 @@ function TableStatus() {
     const loadInitialData = async () => {
       try {
         const response = await apiGetDataEventByStatus({
-          status: "Reject",
+          name: "Reject",
           page: `${activePage}`,
           search: isSearch,
         });
@@ -98,7 +98,7 @@ function TableStatus() {
     if (res.status === 200) {
       try {
         const response = await apiGetDataEventByStatus({
-          status: "Reject",
+          name: "Reject",
           page: `${activePage}`,
           search: isSearch,
         });

src/app_modules/admin/forum/component/detail_one_posting.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { MODEL_FORUM_POSTING } from "@/app_modules/forum/model/interface";
 import {
   Badge,
@@ -21,17 +22,17 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
   return (
     <>
       <Stack spacing={"xs"} h={"100%"} w={"50%"}>
-        <Paper bg={"gray"} p={"xs"} style={{ borderRadius: "6px" }}>
+        <Paper bg={AdminColor.softBlue} p={"xs"} style={{ borderRadius: "6px" }}>
           <Title order={4} c={"white"}>
             Detail Posting
           </Title>
         </Paper>
 
-        <Paper withBorder p={"md"} radius={"md"} shadow="sm">
+        <Paper  p={"md"} radius={"md"} bg={AdminColor.softBlue} shadow="sm">
           <Stack>
             <Stack spacing={5}>
               <Group position="apart">
-                <Text fw={"bold"}>
+                <Text c={AdminColor.white} fw={"bold"}>
                   Username:{" "}
                   <Text span inherit>
                     {dataPosting?.Author?.username}
@@ -53,6 +54,7 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
 
             <Box>
               <Spoiler
+                c={AdminColor.white}
                 w={500}
                 hideLabel="sembunyikan"
                 maxHeight={100}

src/app_modules/admin/forum/lib/api_fetch_admin_forum.ts

@@ -110,3 +110,11 @@ const  apiGetAdminForumPublish = async ({ page }: { page?: string }) => {
 
     return await response.json().catch(() => null);
 }
+
+const apiGetAdminHasilReportPosting = async ({id} : {id: string}) => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    
+
+}

src/app_modules/admin/forum/sub_detail/hasil_report_komentar.tsx

@@ -152,7 +152,7 @@ function ButtonDeleteKomentar({
         </Stack>
       </Modal>
 
-      {data.isActive ? (
+      {data?.isActive ? (
         <Button
           loaderPosition="center"
           radius={"xl"}
@@ -184,7 +184,7 @@ function HasilReportPosting({
   );
   const [nPage, setNPage] = useState(listReport.nPage);
   const [activePage, setActivePage] = useState(1);
-  const [isSearch, setSearch] = useState("");
+
 
   async function onPageClick(p: any) {
     setActivePage(p);
@@ -234,6 +234,7 @@ function HasilReportPosting({
       </td>
     </tr>
   ));
+  console.log("Ini data", data);
 
   return (
     <>

src/app_modules/admin/forum/sub_detail/hasil_report_posting.tsx

@@ -33,6 +33,7 @@ import { adminForum_getListReportPostingById } from "../fun/get/get_list_report_
 import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting";
 import mqtt_client from "@/util/mqtt_client";
 import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminForum_HasilReportPosting({
   dataPosting,
@@ -177,12 +178,12 @@ function HasilReportPosting({
   const TableRows = data?.map((e, i) => (
     <tr key={i}>
       <td>
-        <Center w={200}>
+        <Center c={AdminColor.white} w={200}>
           <Text>{e?.User?.username}</Text>
         </Center>
       </td>
       <td>
-        <Center w={200}>
+        <Center c={AdminColor.white} w={200}>
           <Text>
             {e?.ForumMaster_KategoriReport?.title
               ? e?.ForumMaster_KategoriReport?.title
@@ -192,7 +193,7 @@ function HasilReportPosting({
       </td>
 
       <td>
-        <Center w={500}>
+        <Center c={AdminColor.white} w={500}>
           <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
             {e?.ForumMaster_KategoriReport?.deskripsi ? (
               <Text>{e?.ForumMaster_KategoriReport?.deskripsi}</Text>
@@ -204,7 +205,7 @@ function HasilReportPosting({
       </td>
 
       <td>
-        <Center w={500}>
+        <Center c={AdminColor.white} w={500}>
           <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
             {e?.deskripsi ? <Text>{e?.deskripsi}</Text> : <Text>-</Text>}
           </Spoiler>
@@ -218,12 +219,12 @@ function HasilReportPosting({
       <Stack spacing={"xs"} h={"100%"}>
         <Group
           position="apart"
-          bg={"red.4"}
+          bg={AdminColor.softBlue}
           p={"xs"}
           style={{ borderRadius: "6px" }}
         >
           <Title order={4} c={"white"}>
-            Report Postingan
+            Hasil Report Postingan
           </Title>
           {/* <TextInput
             icon={<IconSearch size={20} />}
@@ -238,7 +239,7 @@ function HasilReportPosting({
         {_.isEmpty(data) ? (
           <ComponentAdminGlobal_IsEmptyData />
         ) : (
-          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <Paper p={"md"}  bg={AdminColor.softBlue} h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
               <Table
                 verticalSpacing={"md"}
@@ -246,22 +247,21 @@ function HasilReportPosting({
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-                striped
+                
-                highlightOnHover
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center>Username</Center>
+                      <Center c={AdminColor.white}>Username</Center>
                     </th>
                     <th>
-                      <Center>Kategori</Center>
+                      <Center c={AdminColor.white}>Kategori</Center>
                     </th>
                     <th>
-                      <Center>Deskripsi</Center>
+                      <Center c={AdminColor.white}>Deskripsi</Center>
                     </th>
                     <th>
-                      <Center>Deskripsi Lainnya</Center>
+                      <Center c={AdminColor.white}>Deskripsi Lainnya</Center>
                     </th>
                   </tr>
                 </thead>

src/app_modules/admin/forum/sub_menu/table_report_posting.tsx

@@ -58,11 +58,11 @@ function TableView() {
     const loadInitialData = async () => {
       try {
         const response = await apiGetAdminForumReportPosting({
-          page: `${activePage}`
+          page: `${activePage}`,
         })
 
-        if (response?.success && response?.data) {
+        if (response?.success && response?.data.data) {
-          setData(response.data);
+          setData(response.data.data);
           setNPage(response.data.nCount || 1)
         } else {
           console.error("Invalid data format recieved", response),

src/app_modules/katalog/portofolio/component/api_fetch_portofolio.ts

@@ -1,8 +1,12 @@
-export {
+export { apiCreatePortofolio, apiGetPortofolioById, apiUpdatePortofolioById };
-    apiCreatePortofolio,
-};
 
-const apiCreatePortofolio = async ({ profileId, data }: { profileId: string, data: any }) => {
+const apiCreatePortofolio = async ({
+  profileId,
+  data,
+}: {
+  profileId: string;
+  data: any;
+}) => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
   if (!token) return await token.json().catch(() => null);
 
@@ -19,3 +23,49 @@ const apiCreatePortofolio = async ({ profileId, data }: { profileId: string, dat
 
   return await res.json().catch(() => null);
 };
+
+const apiGetPortofolioById = async ({ id }: { id: string }) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const res = await fetch(`/api/portofolio/${id}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return await res.json().catch(() => null);
+};
+
+const apiUpdatePortofolioById = async ({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const respone = await fetch(`/api/portofolio/${id}`, {
+    method: "PUT",
+    body: JSON.stringify({ data }),
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  if (!respone.ok) {
+    console.error("Failed to send logs:", respone.statusText);
+    return null;
+  }
+
+  return await respone.json();
+};

src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx

@@ -76,8 +76,6 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
   return (
     <>
       <Box
-        p={"xs"}
-        bg={"red"}
         style={{
           display: "flex",
           justifyContent: "center",
@@ -93,7 +91,7 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
           color="yellow"
           c={"black"}
           style={{
-            width: "100%",
+            width: "90%",
             transition: "0.5s",
             position: "absolute",
             bottom: 20,

src/app_modules/katalog/portofolio/component/skeleton_view.tsx

@@ -1,8 +1,28 @@
-export {
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Stack } from "@mantine/core";
 
+export { Portofolio_SkeletonEditDataBisnis, Portofolio_SkeletonEditLogoBisnis };
+
+function Portofolio_SkeletonEditDataBisnis() {
+  return (
+    <>
+      <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>
+    </>
+  );
 }
 
-function  Portofolio_SkeletonListPorto() {
+function Portofolio_SkeletonEditLogoBisnis() {
-    
+  return (
-    
+    <>
+      <Stack spacing={"xl"} px={"sm"}>
+        <CustomSkeleton height={250} width={"100%"} />
+      </Stack>
+    </>
+  );
 }

src/app_modules/katalog/portofolio/create/view.tsx

@@ -184,12 +184,13 @@ export default function CreatePortofolio() {
                   backgroundColor: MainColor.login,
                 },
               }}
-              inputStyle={{ width: "100%", backgroundColor: MainColor.login }}
+              inputStyle={{ width: "100%", backgroundColor: MainColor.white }}
               defaultCountry="id"
               onChange={(val) => {
                 const valPhone = val.substring(1);
                 setDataPortofolio({
                   ...dataPortofolio,
+                  
                   tlpn: valPhone,
                 });
               }}

src/app_modules/katalog/portofolio/edit/data/ui_edit_data.tsx

@@ -1,66 +1,179 @@
 "use client";
 
-import {
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
-  MainColor
-} from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import { apiGetMasterBidangBisnis } from "@/app_modules/_global/lib/api_master";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
+import { clientLogger } from "@/util/clientLogger";
+import {
+  Button,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useParams, useRouter } from "next/navigation";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { Portofolio_funEditDataBisnis } from "../../fun/edit/fun_edit_data_bisnis_by_id";
+import { PhoneInput } from "react-international-phone";
+import {
+  apiGetPortofolioById,
+  apiUpdatePortofolioById,
+} from "../../component/api_fetch_portofolio";
+import { Portofolio_SkeletonEditDataBisnis } from "../../component/skeleton_view";
 import {
   MODEL_PORTOFOLIO,
   MODEL_PORTOFOLIO_BIDANG_BISNIS,
 } from "../../model/interface";
 
-export default function Portofolio_EditDataBisnis({
+interface IUpdatePortofoli {
-  dataPorto,
+  namaBisnis: string;
-  listBidang,
+  alamatKantor: string;
-}: {
+  tlpn: string;
-  dataPorto: MODEL_PORTOFOLIO;
+  deskripsi: string;
-  listBidang: MODEL_PORTOFOLIO_BIDANG_BISNIS[];
+  masterBidangBisnisId: string;
-}) {
+}
+
+export default function Portofolio_EditDataBisnis() {
   const router = useRouter();
-  const [value, setValue] = useState(dataPorto);
   const [loading, setLoading] = useState(false);
 
+  const params = useParams<{ id: string }>();
+  const portofolioId = params.id;
+  const [data, setData] = useState<MODEL_PORTOFOLIO | null>(null);
+  const [listBidang, setListBidang] = useState<
+    MODEL_PORTOFOLIO_BIDANG_BISNIS[]
+  >([]);
+
+  useShallowEffect(() => {
+    onLoadBidang();
+    onLoadData();
+  }, []);
+
+  const onLoadData = async () => {
+    try {
+      const respone = await apiGetPortofolioById({
+        id: portofolioId,
+      });
+
+      if (respone.success) {
+        setData(respone.data);
+      } else {
+        setData(null);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data portofolio", error);
+    }
+  };
+
+  const onLoadBidang = async () => {
+    try {
+      const respone = await apiGetMasterBidangBisnis();
+      if (respone.success) {
+        setListBidang(respone.data);
+      } else {
+        setListBidang([]);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data master bidang bisnis", error);
+    }
+  };
+
+  const validateData = async (data: any) => {
+    if (_.values(data).includes("")) {
+      // VALIDASI NOMOR TELEPON
+      return "Lengkapi data";
+    }
+
+    if (data?.tlpn.length < 8) {
+      return "Nomor telepon minimal 8 digit";
+    }
+  };
+
+  const hanldeUpadteData = async (data: any) => {
+    try {
+      const newData: IUpdatePortofoli = {
+        namaBisnis: data?.namaBisnis,
+        alamatKantor: data?.alamatKantor,
+        tlpn: data?.tlpn,
+        deskripsi: data?.deskripsi,
+        masterBidangBisnisId: data?.MasterBidangBisnis.id,
+      };
+
+      const respone = await apiUpdatePortofolioById({
+        data: newData,
+        id: portofolioId,
+      });
+
+      return respone;
+    } catch (error) {
+      console.error("Error update data portofolio", error);
+      return null;
+    }
+  };
+
+  const submitUpdate = async () => {
+    const validate = await validateData(data);
+    if (validate) {
+      ComponentGlobal_NotifikasiPeringatan(validate);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const updateData = await hanldeUpadteData(data);
+
+      if (updateData.success) {
+        ComponentGlobal_NotifikasiBerhasil(updateData.message);
+        router.back();
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(updateData.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error update data portofolio", error);
+    }
+  };
+
+  if (!data) return <Portofolio_SkeletonEditDataBisnis />;
+
   return (
     <>
-      {/* <pre>{JSON.stringify(porto, null, 2)}</pre> */}
       <Stack spacing={50} p={"sm"}>
         <Stack>
           <TextInput
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
+                color: MainColor.red,
-              }
+              },
             }}
             withAsterisk
-            value={value.namaBisnis}
+            value={data?.namaBisnis}
             label="Nama Bisnis"
             placeholder="Nama bisnis"
             maxLength={100}
             error={
-              value.namaBisnis === "" ? (
+              data?.namaBisnis === "" ? (
                 <ComponentGlobal_ErrorInput text="Masukan nama bisnis" />
               ) : (
                 ""
               )
             }
             onChange={(val) => {
-              setValue({
+              setData({
-                ...value,
+                ...data,
                 namaBisnis: val.target.value,
               });
             }}
@@ -68,17 +181,17 @@ export default function Portofolio_EditDataBisnis({
           <Select
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
+                color: MainColor.red,
-              }
+              },
             }}
             withAsterisk
-            value={value.MasterBidangBisnis.id}
+            value={data?.MasterBidangBisnis.id}
             label="Bidang Bisnis"
             placeholder="Pilih salah satu bidang bisnis"
             data={listBidang.map((e) => ({
@@ -86,8 +199,8 @@ export default function Portofolio_EditDataBisnis({
               label: e.name,
             }))}
             onChange={(val) => {
-              setValue({
+              setData({
-                ...(value as any),
+                ...(data as any),
                 MasterBidangBisnis: {
                   id: val,
                 },
@@ -97,114 +210,145 @@ export default function Portofolio_EditDataBisnis({
           <TextInput
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
+                color: MainColor.red,
-              }
+              },
             }}
             withAsterisk
-            value={value.alamatKantor}
+            value={data?.alamatKantor}
             label="Alamat Kantor"
             placeholder="Alamat kantor"
             maxLength={100}
             error={
-              value.alamatKantor === "" ? (
+              data?.alamatKantor === "" ? (
                 <ComponentGlobal_ErrorInput text="Masukan alamat kantor" />
               ) : (
                 ""
               )
             }
             onChange={(val) => {
-              setValue({
+              setData({
-                ...value,
+                ...data,
                 alamatKantor: val.target.value,
               });
             }}
           />
-          <TextInput
+
+          {/* <TextInput
             styles={{
               label: {
-                color: MainColor.white
+                color: MainColor.white,
               },
               input: {
-                backgroundColor: MainColor.white
+                backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
+                color: MainColor.red,
-              }
+              },
             }}
             withAsterisk
-            value={value.tlpn}
+            value={data?.tlpn}
             label="Nomor Telepon Kantor"
             placeholder="Nomor telepon kantor"
             type="number"
             maxLength={15}
             error={
-              value.tlpn === "" ? (
+              data?.tlpn === "" ? (
                 <ComponentGlobal_ErrorInput text="Masukan nomor telepon kantor" />
               ) : (
                 ""
               )
             }
             onChange={(val) => {
-              setValue({
+              setData({
-                ...value,
+                ...data,
                 tlpn: val.target.value,
               });
             }}
-          />
+          /> */}
+
+          <Stack spacing={5}>
+            <Text c={MainColor.white} fz={"sm"}>
+              Nomor Telepon{" "}
+              <Text c={"red"} span inherit>
+                *
+              </Text>
+            </Text>
+
+            <PhoneInput
+              value={data?.tlpn}
+              placeholder="Nomor telepon"
+              countrySelectorStyleProps={{
+                buttonStyle: {
+                  backgroundColor: MainColor.login,
+                },
+              }}
+              inputStyle={{ width: "100%", backgroundColor: MainColor.white }}
+              defaultCountry="id"
+              onChange={(val) => {
+                const valPhone = val.substring(1);
+                setData({
+                  ...data,
+                  tlpn: valPhone,
+                });
+              }}
+            />
+          </Stack>
+
           <Stack spacing={5}>
             <Textarea
               styles={{
                 label: {
-                  color: MainColor.white
+                  color: MainColor.white,
                 },
                 input: {
-                  backgroundColor: MainColor.white
+                  backgroundColor: MainColor.white,
                 },
                 required: {
-                  color: MainColor.red
+                  color: MainColor.red,
-                }
+                },
               }}
               autosize
               minRows={2}
               maxRows={5}
               withAsterisk
-              value={value.deskripsi}
+              value={data?.deskripsi}
               label="Deskripsi"
               placeholder="Deskripsi singkat mengenai usaha"
               maxLength={300}
               error={
-                value.deskripsi === "" ? (
+                data.deskripsi === "" ? (
                   <ComponentGlobal_ErrorInput text="Masukan deskripsi" />
                 ) : (
                   ""
                 )
               }
               onChange={(val) => {
-                setValue({
+                setData({
-                  ...value,
+                  ...data,
                   deskripsi: val.target.value,
                 });
               }}
             />
             <ComponentGlobal_InputCountDown
               maxInput={300}
-              lengthInput={value.deskripsi.length}
+              lengthInput={data?.deskripsi.length as any}
             />
           </Stack>
         </Stack>
+
         <Button
-          disabled={_.values(value).includes("") ? true : false}
+          disabled={_.values(data).includes("")}
           radius={"xl"}
           loading={loading ? true : false}
           loaderPosition="center"
           onClick={() => {
-            onUpdate(router, value as any, setLoading);
+            submitUpdate();
           }}
           bg={MainColor.yellow}
           color={"yellow"}
@@ -219,27 +363,3 @@ export default function Portofolio_EditDataBisnis({
     </>
   );
 }
-
-async function onUpdate(
-  router: AppRouterInstance,
-  data: MODEL_PORTOFOLIO,
-  setLoading: any
-) {
-  if (_.values(data).includes("")) {
-    return null;
-  }
-
-  // if (data.namaBisnis.length > 100) return null;
-  // if (data.alamatKantor.length > 100) return null;
-  // if (data.deskripsi.length > 150) return null;
-
-  await Portofolio_funEditDataBisnis(data).then((res) => {
-    if (res.status === 200) {
-      setLoading(true);
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      router.back();
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
-}

src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx

@@ -1,24 +1,49 @@
 "use client";
 
-import {
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-  AccentColor
-} from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_ButtonUploadFileImage,
   ComponentGlobal_LoadImage,
 } from "@/app_modules/_global/component";
-import { Center, Image, Paper, Stack } from "@mantine/core";
+import { clientLogger } from "@/util/clientLogger";
+import { Box, Center, Image, Paper, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
 import { useState } from "react";
 import { ComponentPortofolio_ButtonEditLogoBisnis } from "../../component";
+import { apiGetPortofolioById } from "../../component/api_fetch_portofolio";
 import { MODEL_PORTOFOLIO } from "../../model/interface";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Portofolio_SkeletonEditLogoBisnis } from "../../component/skeleton_view";
 
-export default function Portofolio_EditLogoBisnis({
+export default function Portofolio_EditLogoBisnis() {
-  dataPorto,
+  const params = useParams<{ id: string }>();
-}: {
+  const portofolioId = params.id;
-  dataPorto: MODEL_PORTOFOLIO;
-}) {
   const [file, setFile] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>(null);
+  const [data, setData] = useState<MODEL_PORTOFOLIO | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  const onLoadData = async () => {
+    try {
+      const respone = await apiGetPortofolioById({
+        id: portofolioId,
+      });
+
+      if (respone.success) {
+        setData(respone.data);
+      } else {
+        setData(null);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data portofolio", error);
+    }
+  };
+
+  if (!data) return <Portofolio_SkeletonEditLogoBisnis />;
 
   return (
     <>
@@ -37,7 +62,7 @@ export default function Portofolio_EditLogoBisnis({
             {img ? (
               <Image maw={250} alt="Image" src={img} />
             ) : (
-              <ComponentGlobal_LoadImage fileId={dataPorto.logoId} />
+              <ComponentGlobal_LoadImage fileId={data.logoId} />
             )}
           </Paper>
           <Center>
@@ -49,8 +74,8 @@ export default function Portofolio_EditLogoBisnis({
         </Stack>
         <ComponentPortofolio_ButtonEditLogoBisnis
           file={file as any}
-          portofolioId={dataPorto.id}
+          portofolioId={data.id}
-          fileRemoveId={dataPorto.logoId}
+          fileRemoveId={data.logoId}
         />
       </Stack>
     </>

src/middleware.ts

@@ -34,8 +34,10 @@ const middlewareConfig: MiddlewareConfig = {
 
     // ADMIN API
     // >> buat dibawah sini <<
-    "/api/admin/collaboration/*",
+    // "/api/admin/collaboration/*",
-    "/api/admin/investasi/*",
+    // "/api/admin/investasi/*",
+    // "/api/admin/event/*",
+    // "/api/admin/forum/*",
 
     // Akses awal
     "/api/get-cookie",