From 5acd31dbfcdabdbe755bcc05bd33b2a96fa1a152 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Thu, 11 Dec 2025 11:45:26 +0700
Subject: [PATCH] fix: change url jenkins in gitlab.ci

---
 .gitlab-ci.yml                                |   2 +-
 .../(admin)/admin/schedule/create/page.tsx    | 306 +++++++++
 .../(admin)/admin/schedule/edit/[id]/page.tsx |   2 +-
 app/[locale]/(admin)/admin/schedule/page.tsx  |   2 +-
 .../content/text/comment/[id]/page.tsx        |   4 +-
 components/landing-page/navbar.tsx            |  51 +-
 components/landing-page/schedule.tsx          | 172 ++---
 components/main/comment-detail-text.tsx       | 409 ++++++++++++
 components/main/comment-detail-video.tsx      | 628 ++++++++++++++----
 components/main/content/document-detail.tsx   |   2 +-
 lib/menus.ts                                  |   2 +-
 .../http-config/http-interceptor-service.ts   |   1 -
 service/landing/landing.ts                    |   4 -
 13 files changed, 1384 insertions(+), 201 deletions(-)
 create mode 100644 components/main/comment-detail-text.tsx

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 37b130a..909582e 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -26,4 +26,4 @@ auto-deploy:
   services:
     - docker:dind
   script:
-    - curl --user admin:$JENKINS_PWD http://38.47.180.165:8080/job/auto-deploy-new-netidhub-public/build?token=autodeploynetidhub
+    - curl --user admin:$JENKINS_PWD http://103.31.38.120:8080/job/auto-deploy-new-netidhub-public/build?token=autodeploynetidhub
diff --git a/app/[locale]/(admin)/admin/schedule/create/page.tsx b/app/[locale]/(admin)/admin/schedule/create/page.tsx
index 9461226..afe6f55 100644
--- a/app/[locale]/(admin)/admin/schedule/create/page.tsx
+++ b/app/[locale]/(admin)/admin/schedule/create/page.tsx
@@ -1,3 +1,309 @@
+// "use client";
+
+// import { useEffect, useState } from "react";
+// import { Input } from "@/components/ui/input";
+// import { Textarea } from "@/components/ui/textarea";
+// import { Button } from "@/components/ui/button";
+// import { Label } from "@/components/ui/label";
+// import { Switch } from "@/components/ui/switch";
+// import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+// import { useRouter } from "next/navigation";
+// import Swal from "sweetalert2";
+// import withReactContent from "sweetalert2-react-content";
+// import { createSchedule } from "@/service/landing/landing";
+// import Cookies from "js-cookie";
+
+// const MySwal = withReactContent(Swal);
+
+// export default function CreateSchedulePage() {
+//   const router = useRouter();
+
+//   const [formData, setFormData] = useState({
+//     createdById: 0,
+//     typeId: 1,
+//     clientName: "",
+//     clientSlug: "",
+//     description: "",
+//     endDate: "",
+//     endTime: "",
+//     isLiveStreaming: false,
+//     location: "",
+//     speakers: "",
+//     startDate: "",
+//     startTime: "",
+//     title: "",
+//     liveStreamingUrl: "",
+//     posterImagePath: "",
+//   });
+
+//   const [loading, setLoading] = useState(false);
+
+//   // 🔹 Ambil data user dari cookie login
+//   useEffect(() => {
+//     try {
+//       const userInfo = Cookies.get("uinfo");
+//       if (userInfo) {
+//         const parsed = JSON.parse(userInfo);
+
+//         const workflowName =
+//           parsed?.approvalWorkflowInfo?.defaultWorkflowName || "";
+//         const cleanName = workflowName.replace(/WORKFLOW/gi, "").trim();
+
+//         const slug =
+//           cleanName?.toLowerCase()?.replace(/\s+/g, "-") || "general";
+
+//         setFormData((prev) => ({
+//           ...prev,
+//           createdById: parsed?.id || 0,
+//           typeId: parsed?.userLevelId || 1,
+//           clientName: cleanName,
+//           clientSlug: slug,
+//         }));
+
+//         console.log("✅ Auto-filled user info:", {
+//           createdById: parsed?.id,
+//           typeId: parsed?.userLevelId,
+//           clientName: cleanName,
+//           clientSlug: slug,
+//         });
+//       }
+//     } catch (err) {
+//       console.warn("⚠️ Gagal parse cookie user info:", err);
+//     }
+//   }, []);
+
+//   const handleChange = (
+//     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+//   ) => {
+//     const { name, value } = e.target;
+//     setFormData((prev) => ({ ...prev, [name]: value }));
+//   };
+
+//   const handleToggle = (checked: boolean) => {
+//     setFormData((prev) => ({ ...prev, isLiveStreaming: checked }));
+//   };
+
+//   const handleSubmit = async (e: React.FormEvent) => {
+//     e.preventDefault();
+//     setLoading(true);
+
+//     try {
+//       // 🔸 Format tanggal + kirim semua field
+//       const payload = {
+//         createdById: Number(formData.createdById) || 1,
+//         typeId: Number(formData.typeId) || 1,
+//         title: formData.title,
+//         description: formData.description,
+//         location: formData.location,
+//         speakers: formData.speakers,
+//         startDate: `${formData.startDate}T${formData.startTime}:00Z`,
+//         endDate: `${formData.endDate}T${formData.endTime}:00Z`,
+//         startTime: formData.startTime,
+//         endTime: formData.endTime,
+//         isLiveStreaming: formData.isLiveStreaming,
+//         liveStreamingUrl: formData.liveStreamingUrl,
+//         posterImagePath: formData.posterImagePath,
+//         clientName: formData.clientName,
+//         clientSlug: formData.clientSlug,
+//       };
+
+//       console.log("📦 Payload dikirim ke backend:", payload);
+
+//       const res = await createSchedule(payload);
+
+//       if (!res?.error) {
+//         MySwal.fire({
+//           icon: "success",
+//           title: "Berhasil!",
+//           text: "Schedule berhasil dibuat.",
+//           timer: 2000,
+//           showConfirmButton: false,
+//         });
+//         setTimeout(() => router.push("/admin/schedule"), 2000);
+//       } else {
+//         MySwal.fire({
+//           icon: "error",
+//           title: "Gagal!",
+//           text: res?.message || "Gagal membuat schedule.",
+//         });
+//       }
+//     } catch (error) {
+//       console.error("❌ Error:", error);
+//       MySwal.fire({
+//         icon: "error",
+//         title: "Error",
+//         text: "Terjadi kesalahan pada sistem.",
+//       });
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   return (
+//     <div className="max-w-4xl mx-auto mt-10">
+//       <Card className="shadow-lg border border-gray-200 dark:border-gray-800">
+//         <CardHeader>
+//           <CardTitle className="text-xl font-semibold">
+//             Buat Jadwal Baru
+//           </CardTitle>
+//         </CardHeader>
+
+//         <CardContent>
+//           <form onSubmit={handleSubmit} className="space-y-6">
+//             {/* 🔹 Info otomatis dari cookie */}
+//             <div className="text-sm text-gray-600 bg-gray-50 p-3 rounded-md">
+//               <p>
+//                 <b>Client:</b> {formData.clientName || "-"} (
+//                 {formData.clientSlug || "-"})
+//               </p>
+//               <p>
+//                 <b>createdById:</b> {formData.createdById} | <b>typeId:</b>{" "}
+//                 {formData.typeId}
+//               </p>
+//             </div>
+
+//             <div>
+//               <Label htmlFor="title">Judul Acara</Label>
+//               <Input
+//                 id="title"
+//                 name="title"
+//                 value={formData.title}
+//                 onChange={handleChange}
+//                 placeholder="Masukkan judul acara"
+//                 required
+//               />
+//             </div>
+
+//             <div>
+//               <Label htmlFor="description">Deskripsi</Label>
+//               <Textarea
+//                 id="description"
+//                 name="description"
+//                 value={formData.description}
+//                 onChange={handleChange}
+//                 placeholder="Masukkan deskripsi acara"
+//                 required
+//               />
+//             </div>
+
+//             <div className="grid grid-cols-2 gap-4">
+//               <div>
+//                 <Label htmlFor="startDate">Tanggal Mulai</Label>
+//                 <Input
+//                   type="date"
+//                   id="startDate"
+//                   name="startDate"
+//                   value={formData.startDate}
+//                   onChange={handleChange}
+//                   required
+//                 />
+//               </div>
+//               <div>
+//                 <Label htmlFor="endDate">Tanggal Selesai</Label>
+//                 <Input
+//                   type="date"
+//                   id="endDate"
+//                   name="endDate"
+//                   value={formData.endDate}
+//                   onChange={handleChange}
+//                   required
+//                 />
+//               </div>
+//               <div>
+//                 <Label htmlFor="startTime">Jam Mulai</Label>
+//                 <Input
+//                   type="time"
+//                   id="startTime"
+//                   name="startTime"
+//                   value={formData.startTime}
+//                   onChange={handleChange}
+//                   required
+//                 />
+//               </div>
+//               <div>
+//                 <Label htmlFor="endTime">Jam Selesai</Label>
+//                 <Input
+//                   type="time"
+//                   id="endTime"
+//                   name="endTime"
+//                   value={formData.endTime}
+//                   onChange={handleChange}
+//                   required
+//                 />
+//               </div>
+//             </div>
+
+//             <div>
+//               <Label htmlFor="location">Lokasi</Label>
+//               <Input
+//                 id="location"
+//                 name="location"
+//                 value={formData.location}
+//                 onChange={handleChange}
+//                 placeholder="Masukkan lokasi acara"
+//                 required
+//               />
+//             </div>
+
+//             <div>
+//               <Label htmlFor="speakers">Pembicara</Label>
+//               <Input
+//                 id="speakers"
+//                 name="speakers"
+//                 value={formData.speakers}
+//                 onChange={handleChange}
+//                 placeholder="Nama pembicara"
+//                 required
+//               />
+//             </div>
+
+//             <div className="flex items-center justify-between">
+//               <Label htmlFor="isLiveStreaming">Live Streaming?</Label>
+//               <Switch
+//                 id="isLiveStreaming"
+//                 checked={formData.isLiveStreaming}
+//                 onCheckedChange={handleToggle}
+//               />
+//             </div>
+
+//             {formData.isLiveStreaming && (
+//               <div>
+//                 <Label htmlFor="liveStreamingUrl">Link Live Streaming</Label>
+//                 <Input
+//                   id="liveStreamingUrl"
+//                   name="liveStreamingUrl"
+//                   value={formData.liveStreamingUrl}
+//                   onChange={handleChange}
+//                   placeholder="https://youtube.com/..."
+//                 />
+//               </div>
+//             )}
+
+//             <div>
+//               <Label htmlFor="posterImagePath">Poster (opsional)</Label>
+//               <Input
+//                 id="posterImagePath"
+//                 name="posterImagePath"
+//                 value={formData.posterImagePath}
+//                 onChange={handleChange}
+//                 placeholder="/uploads/poster/namafile.png"
+//               />
+//             </div>
+
+//             <Button
+//               type="submit"
+//               className="w-full h-11 font-semibold"
+//               disabled={loading}
+//             >
+//               {loading ? "Menyimpan..." : "Simpan Jadwal"}
+//             </Button>
+//           </form>
+//         </CardContent>
+//       </Card>
+//     </div>
+//   );
+// }
+
 "use client";
 
 import { useState } from "react";
diff --git a/app/[locale]/(admin)/admin/schedule/edit/[id]/page.tsx b/app/[locale]/(admin)/admin/schedule/edit/[id]/page.tsx
index 3cd47ba..509da06 100644
--- a/app/[locale]/(admin)/admin/schedule/edit/[id]/page.tsx
+++ b/app/[locale]/(admin)/admin/schedule/edit/[id]/page.tsx
@@ -121,7 +121,7 @@ export default function EditSchedulePage() {
           timer: 2000,
           showConfirmButton: false,
         });
-        setTimeout(() => router.push("/admin/schedules"), 2000);
+        setTimeout(() => router.push("/admin/schedule"), 2000);
       } else {
         MySwal.fire({
           icon: "error",
diff --git a/app/[locale]/(admin)/admin/schedule/page.tsx b/app/[locale]/(admin)/admin/schedule/page.tsx
index 2c6aa84..59a7792 100644
--- a/app/[locale]/(admin)/admin/schedule/page.tsx
+++ b/app/[locale]/(admin)/admin/schedule/page.tsx
@@ -138,7 +138,7 @@ export default function ScheduleListPage() {
           <CalendarDays className="w-6 h-6 text-blue-600" />
           Daftar Jadwal
         </h1>
-        <Button onClick={() => router.push("/admin/schedules/create")}>
+        <Button onClick={() => router.push("/admin/schedule/create")}>
           <Plus className="mr-2 h-4 w-4" /> Tambah Jadwal
         </Button>
       </div>
diff --git a/app/[locale]/(public)/content/text/comment/[id]/page.tsx b/app/[locale]/(public)/content/text/comment/[id]/page.tsx
index cdec591..3938191 100644
--- a/app/[locale]/(public)/content/text/comment/[id]/page.tsx
+++ b/app/[locale]/(public)/content/text/comment/[id]/page.tsx
@@ -1,5 +1,5 @@
-import DetailCommentVideo from "@/components/main/comment-detail-video";
+import DetailCommentText from "@/components/main/comment-detail-text";
 
 export default async function DetailCommentInfo() {
-  return <DetailCommentVideo />;
+  return <DetailCommentText />;
 }
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 5442f16..57d9e20 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -205,12 +205,53 @@ export default function Navbar() {
             </button>
 
             {showProfileMenu && (
-              <div className="absolute right-0 mt-2 w-40 bg-white border rounded shadow z-50">
+              <div className="absolute right-0 mt-2 w-40 bg-white border rounded shadow z-50 ">
+                <Link
+                  href="/admin/dashboard"
+                  className="flex flex-row items-center  text-left px-4 py-2 hover:bg-gray-100 text-gray-700"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      fill="currentColor"
+                      d="M14 21a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zM4 13a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm5-2V5H5v6zM4 21a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1zm1-2h4v-2H5zm10 0h4v-6h-4zM13 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1zm2 1v2h4V5z"
+                    />
+                  </svg>
+                  &nbsp;Dashboard
+                </Link>
+
                 <button
                   onClick={handleLogout}
-                  className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-gray-700"
+                  className="w-full flex flex-row text-left px-4 py-2 hover:bg-gray-100 text-gray-700 cursor-pointer"
                 >
-                  {t("logout")}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                  >
+                    <g
+                      fill="none"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeWidth="1.5"
+                    >
+                      <path
+                        strokeLinejoin="round"
+                        d="M13.477 21.245H8.34a4.92 4.92 0 0 1-5.136-4.623V7.378A4.92 4.92 0 0 1 8.34 2.755h5.136"
+                      />
+                      <path strokeMiterlimit="10" d="M20.795 12H7.442" />
+                      <path
+                        strokeLinejoin="round"
+                        d="m16.083 17.136l4.404-4.404a1.04 1.04 0 0 0 0-1.464l-4.404-4.404"
+                      />
+                    </g>
+                  </svg>
+                  &nbsp;{t("logout")}
                 </button>
               </div>
             )}
@@ -329,7 +370,9 @@ export default function Navbar() {
                 {t("subscribeTitle")}
               </h2>
               <Input type="email" placeholder={t("subscribePlaceholder")} />
-              <Button className="bg-[#C6A455] mt-2">{t("subscribeButton")}</Button>
+              <Button className="bg-[#C6A455] mt-2">
+                {t("subscribeButton")}
+              </Button>
             </Card>
           </div>
 
diff --git a/components/landing-page/schedule.tsx b/components/landing-page/schedule.tsx
index 81bf7b0..182c9e5 100644
--- a/components/landing-page/schedule.tsx
+++ b/components/landing-page/schedule.tsx
@@ -21,37 +21,47 @@ import {
 } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
 import { getAllSchedules } from "@/service/landing/landing";
+import { getPublicClients } from "@/service/client/public-clients";
 
 export default function Schedule() {
   const [search, setSearch] = useState("");
   const [startDate, setStartDate] = useState<Date | undefined>(new Date());
   const [endDate, setEndDate] = useState<Date | undefined>(new Date());
   const [selectedCategory, setSelectedCategory] = useState("SEMUA");
+  const [selectedSlug, setSelectedSlug] = useState<string | undefined>(
+    undefined
+  );
   const [scheduleData, setScheduleData] = useState<any[]>([]);
+  const [clients, setClients] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
 
-  const categories = [
-    "SEMUA",
-    "POLRI",
-    "MAHKAMAH AGUNG",
-    "DPR",
-    "MPR",
-    "KEJAKSAAN AGUNG",
-    "KPK",
-    "PUPR",
-    "BSKDN",
-    "BUMN",
-    "KPU",
-  ];
+  // 🔹 Fetch daftar client
+  useEffect(() => {
+    async function fetchClients() {
+      try {
+        const res = await getPublicClients();
+        if (res?.data?.success && res.data.data) {
+          setClients(res.data.data);
+        } else {
+          setClients([]);
+        }
+      } catch (error) {
+        console.error("Error fetching clients:", error);
+        setClients([]);
+      }
+    }
+    fetchClients();
+  }, []);
 
+  // 🔹 Fetch jadwal dari API (termasuk clientSlug)
   const fetchSchedules = async () => {
     try {
       setLoading(true);
-
       const params = {
         title: search || undefined,
         startDate: startDate ? format(startDate, "yyyy-MM-dd") : undefined,
         endDate: endDate ? format(endDate, "yyyy-MM-dd") : undefined,
+        clientSlug: selectedSlug, // 🔥 Tambahkan clientSlug untuk filter
         page: 1,
         limit: 50,
         sortBy: "startDate",
@@ -68,7 +78,6 @@ export default function Schedule() {
           : Array.isArray(res.data?.records)
           ? res.data.records
           : [];
-
         setScheduleData(apiData);
       } else {
         console.error("Gagal memuat jadwal:", res.message);
@@ -82,21 +91,10 @@ export default function Schedule() {
     }
   };
 
+  // 🔹 Re-fetch setiap kali filter berubah
   useEffect(() => {
     fetchSchedules();
-  }, [startDate, endDate, search]);
-
-  const filteredData = Array.isArray(scheduleData)
-    ? scheduleData.filter((item) => {
-        const matchesCategory =
-          selectedCategory === "SEMUA" ||
-          item.type?.toUpperCase() === selectedCategory;
-        const matchesSearch = item.title
-          ?.toLowerCase()
-          .includes(search.toLowerCase());
-        return matchesCategory && matchesSearch;
-      })
-    : [];
+  }, [startDate, endDate, search, selectedSlug]);
 
   return (
     <div className="p-6 max-w-[1350px] mx-auto">
@@ -156,38 +154,54 @@ export default function Schedule() {
             </PopoverContent>
           </Popover>
         </div>
-
-        {/* Publikasi */}
-        <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium">Publikasi</label>
-          <Select>
-            <SelectTrigger className="w-[150px]">
-              <SelectValue placeholder="Semua" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="semua">K/L</SelectItem>
-              <SelectItem value="dipublikasikan">BUMN</SelectItem>
-              <SelectItem value="belum">PEMERINTAH DAERAH</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
       </div>
 
-      {/* Filter Chips */}
+      {/* 🔹 Dynamic Category dari API */}
       <div className="flex w-full gap-5 overflow-x-auto pb-2 border-b border-[#C6A455] mb-6">
-        {categories.map((cat) => (
+        <Button
+          key="SEMUA"
+          variant={selectedCategory === "SEMUA" ? "default" : "outline"}
+          className={cn(
+            "rounded-sm whitespace-nowrap",
+            selectedCategory === "SEMUA" && "bg-[#C6A455] text-white"
+          )}
+          onClick={() => {
+            setSelectedCategory("SEMUA");
+            setSelectedSlug(undefined); // reset filter
+          }}
+        >
+          SEMUA
+        </Button>
+
+        {clients.map((client) => (
           <Button
-            key={cat}
-            variant={selectedCategory === cat ? "default" : "outline"}
+            key={client.slug || client.name}
+            variant={
+              selectedCategory === client.name.toUpperCase()
+                ? "default"
+                : "outline"
+            }
             className={cn(
-              "rounded-sm whitespace-nowrap",
-              selectedCategory === cat && "bg-[#C6A455] text-white"
+              "rounded-sm whitespace-nowrap flex items-center gap-2",
+              selectedCategory === client.name.toUpperCase() &&
+                "bg-[#C6A455] text-white"
             )}
-            onClick={() => setSelectedCategory(cat)}
+            onClick={() => {
+              setSelectedCategory(client.name.toUpperCase());
+              setSelectedSlug(client.slug); // 🔥 Set slug untuk filter API
+            }}
           >
-            {cat}
+            {client.logoUrl && (
+              <img
+                src={client.logoUrl}
+                alt={client.name}
+                className="w-5 h-5 rounded"
+              />
+            )}
+            {client.name}
           </Button>
         ))}
+
         <Button variant="ghost">
           <ChevronRight className="w-5 h-5" />
         </Button>
@@ -202,41 +216,51 @@ export default function Schedule() {
         <div className="text-center text-muted-foreground py-10">
           Memuat data jadwal...
         </div>
-      ) : filteredData.length === 0 ? (
+      ) : scheduleData.length === 0 ? (
         <div className="text-center text-muted-foreground py-10">
           Tidak ada jadwal ditemukan.
         </div>
       ) : (
-        <div className="flex flex-col gap-3">
-          {filteredData.map((item, index) => (
+        <div className="flex flex-col gap-3 justify-between">
+          {scheduleData.map((item, index) => (
             <div
               key={index}
               className="flex justify-between items-start border-b pb-2"
             >
-              <div className="w-1/6 text-sm text-muted-foreground">
-                {item.startDate
-                  ? format(new Date(item.startDate), "dd MMM yyyy")
-                  : "-"}
+              <div className="w-2/5">
+                {item.startDate ? (
+                  <>
+                    {format(new Date(item.startDate), "dd MMM yyyy")}
+                    {item.endDate &&
+                      item.endDate !== item.startDate &&
+                      ` — ${format(new Date(item.endDate), "dd MMM yyyy")}`}
+                  </>
+                ) : (
+                  "-"
+                )}
               </div>
+              <div className="w-2/5 text-xs text-gray-400 mt-0.5">
+                {item.startTime && item.endTime ? (
+                  <>
+                    {item.startTime.slice(0, 5)} – {item.endTime.slice(0, 5)}
+                  </>
+                ) : item.startTime ? (
+                  item.startTime.slice(0, 5)
+                ) : (
+                  ""
+                )}
+              </div>
+             
+              {/* Client */}
               <div className="w-1/5">
-                <Badge
-                  className={cn("text-white", {
-                    "bg-red-600": item.type === "POLRI",
-                    "bg-yellow-500": item.type === "DPR",
-                    "bg-green-600": item.type === "KEJAKSAAN AGUNG",
-                    "bg-blue-700": item.type === "BUMN",
-                    "bg-amber-500": item.type === "MPR",
-                    "bg-pink-500": item.type === "KPU",
-                    "bg-red-700": item.type === "KPK",
-                  })}
-                >
-                  {item.type || "-"}
+                <Badge className="bg-[#C6A455] text-white">
+                  {item.clientName || "-"}
                 </Badge>
               </div>
-              <div className="w-2/5 text-sm">{item.title}</div>
-              <div className="w-1/3 text-sm text-muted-foreground">
-                {item.location}
-              </div>
+
+              {/* Judul & Lokasi */}
+              <div className="w-2/5">{item.title}</div>
+              <div className="w-1/3 text-muted-foreground">{item.location}</div>
             </div>
           ))}
         </div>
diff --git a/components/main/comment-detail-text.tsx b/components/main/comment-detail-text.tsx
new file mode 100644
index 0000000..741bbab
--- /dev/null
+++ b/components/main/comment-detail-text.tsx
@@ -0,0 +1,409 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { MessageCircle, Share2, Trash2 } from "lucide-react";
+import { useRouter, useParams } from "next/navigation";
+import {
+  getArticleDetail,
+  createArticleComment,
+  getArticleComments,
+  deleteArticleComment,
+} from "@/service/content/content";
+import { getCookiesDecrypt } from "@/lib/utils";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+// 🎨 Avatar color helper
+function getAvatarColor(name: string) {
+  const colors = [
+    "#F87171",
+    "#FB923C",
+    "#FACC15",
+    "#4ADE80",
+    "#60A5FA",
+    "#A78BFA",
+    "#F472B6",
+  ];
+  const index = name.charCodeAt(0) % colors.length;
+  return colors[index];
+}
+
+export default function DetailCommentText() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [currentUserId, setCurrentUserId] = useState<number | null>(null);
+  const [textArticle, setTextArticle] = useState<any>(null);
+  const [comments, setComments] = useState<any[]>([]);
+  const [newComment, setNewComment] = useState("");
+  const [replyParentId, setReplyParentId] = useState<number | null>(null);
+  const [replyMessage, setReplyMessage] = useState("");
+  const router = useRouter();
+  const params = useParams();
+  const MySwal = withReactContent(Swal);
+  const id = Number(params?.id);
+
+  // 🚀 Initial load
+  useEffect(() => {
+    checkLoginStatus();
+    if (id) {
+      fetchTextDetail(id);
+      fetchComments(id);
+    }
+  }, [id]);
+
+  // 🔐 Cek login user dari cookies
+  const checkLoginStatus = () => {
+    const userId = getCookiesDecrypt("urie");
+    if (userId) {
+      setIsLoggedIn(true);
+      setCurrentUserId(Number(userId));
+    } else {
+      setIsLoggedIn(false);
+      setCurrentUserId(null);
+    }
+  };
+
+  // 📄 Ambil detail artikel text
+  const fetchTextDetail = async (textId: number) => {
+    try {
+      const res = await getArticleDetail(textId);
+      if (res?.data?.data) setTextArticle(res.data.data);
+    } catch (error) {
+      console.error("Gagal memuat detail artikel:", error);
+    }
+  };
+
+  // 💬 Ambil komentar dari API
+  const fetchComments = async (textId: number) => {
+    try {
+      const res = await getArticleComments(textId);
+      if (res?.data?.data) {
+        const all = res.data.data.map((c: any) => ({
+          ...c,
+          parentId: c.parentId ?? 0,
+        }));
+        const structured = buildCommentTree(all);
+        setComments(structured);
+      }
+    } catch (error) {
+      console.error("Gagal memuat komentar:", error);
+    }
+  };
+
+  // 🪄 Susun komentar menjadi struktur nested (tree)
+  const buildCommentTree: any = (comments: any[], parentId = 0) =>
+    comments
+      .filter((c) => c.parentId === parentId)
+      .map((c) => ({
+        ...c,
+        replies: buildCommentTree(comments, c.id),
+      }));
+
+  // ✏️ Kirim komentar baru
+  const handlePostComment = async () => {
+    if (!newComment.trim()) {
+      MySwal.fire("Oops!", "Komentar tidak boleh kosong.", "warning");
+      return;
+    }
+    await sendComment({
+      articleId: id,
+      message: newComment,
+      isPublic: true,
+      parentId: 0,
+    });
+    setNewComment("");
+  };
+
+  // 💬 Kirim balasan komentar
+  const handleReplySubmit = async (parentId: number) => {
+    if (!replyMessage.trim()) {
+      MySwal.fire("Oops!", "Balasan tidak boleh kosong.", "warning");
+      return;
+    }
+    await sendComment({
+      articleId: id,
+      message: replyMessage,
+      isPublic: true,
+      parentId,
+    });
+    setReplyMessage("");
+    setReplyParentId(null);
+  };
+
+  // 🚀 Fungsi umum untuk kirim komentar / balasan
+  const sendComment = async (payload: any) => {
+    MySwal.fire({
+      title: "Mengirim komentar...",
+      didOpen: () => MySwal.showLoading(),
+      allowOutsideClick: false,
+      showConfirmButton: false,
+    });
+
+    try {
+      const res = await createArticleComment(payload);
+      if (res?.data?.success || !res?.error) {
+        MySwal.fire({
+          icon: "success",
+          title: "Komentar terkirim!",
+          timer: 1000,
+          showConfirmButton: false,
+        });
+        fetchComments(id);
+      } else {
+        MySwal.fire(
+          "Gagal",
+          res.message || "Tidak dapat mengirim komentar.",
+          "error"
+        );
+      }
+    } catch (error) {
+      console.error(error);
+      MySwal.fire("Error", "Terjadi kesalahan saat mengirim komentar.", "error");
+    }
+  };
+
+  // 🗑️ Hapus komentar
+  const handleDeleteComment = async (commentId: number) => {
+    const confirm = await MySwal.fire({
+      title: "Hapus komentar ini?",
+      text: "Tindakan ini tidak dapat dibatalkan!",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#d33",
+      cancelButtonColor: "#6b7280",
+      confirmButtonText: "Ya, hapus",
+      cancelButtonText: "Batal",
+    });
+
+    if (!confirm.isConfirmed) return;
+
+    MySwal.fire({
+      title: "Menghapus komentar...",
+      didOpen: () => MySwal.showLoading(),
+      allowOutsideClick: false,
+      showConfirmButton: false,
+    });
+
+    try {
+      const res = await deleteArticleComment(commentId);
+      if (res?.data?.success || !res?.error) {
+        MySwal.fire({
+          icon: "success",
+          title: "Komentar dihapus!",
+          timer: 1000,
+          showConfirmButton: false,
+        });
+        fetchComments(id);
+      } else {
+        MySwal.fire(
+          "Gagal",
+          res.message || "Tidak dapat menghapus komentar.",
+          "error"
+        );
+      }
+    } catch (error) {
+      console.error("Gagal menghapus komentar:", error);
+      MySwal.fire("Error", "Terjadi kesalahan saat menghapus komentar.", "error");
+    }
+  };
+
+  return (
+    <div className="max-w-5xl mx-auto p-4 space-y-6">
+      <button
+        onClick={() => router.back()}
+        className="text-sm text-gray-500 hover:underline cursor-pointer"
+      >
+        ← Kembali ke Artikel Teks
+      </button>
+
+      <div>
+        <p className="font-semibold text-sm uppercase text-gray-600 mb-1">
+          Comments on:
+        </p>
+        <h1 className="text-lg font-bold">
+          {textArticle?.title || "Memuat judul artikel..."}
+        </h1>
+      </div>
+
+      {/* ✏️ Form komentar */}
+      <div className="rounded-md p-3 space-y-3 bg-gray-50 border border-gray-200 shadow-sm">
+        {isLoggedIn ? (
+          <>
+            <Textarea
+              placeholder="Tulis komentar kamu di sini..."
+              className="min-h-[80px] border border-[#C6A455]"
+              value={newComment}
+              onChange={(e) => setNewComment(e.target.value)}
+            />
+            <div className="flex justify-end">
+              <Button size="sm" onClick={handlePostComment}>
+                Kirim Komentar
+              </Button>
+            </div>
+          </>
+        ) : (
+          <>
+            <Textarea
+              disabled
+              placeholder="Tulis komentar kamu di sini..."
+              className="min-h-[80px] opacity-70"
+            />
+            <Button
+              onClick={() => router.push("/auth")}
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white"
+            >
+              Sign in and Join the Conversation
+            </Button>
+          </>
+        )}
+      </div>
+
+      {/* 💬 Daftar komentar */}
+      <div className="space-y-6">
+        {comments.length > 0 ? (
+          comments.map((comment) => (
+            <CommentTree
+              key={comment.id}
+              comment={comment}
+              level={0}
+              replyParentId={replyParentId}
+              setReplyParentId={setReplyParentId}
+              replyMessage={replyMessage}
+              setReplyMessage={setReplyMessage}
+              onReplySubmit={handleReplySubmit}
+              onDelete={handleDeleteComment}
+              currentUserId={currentUserId}
+            />
+          ))
+        ) : (
+          <p className="text-sm text-gray-500 text-center py-4">
+            Belum ada komentar.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// 🧱 Komponen rekursif untuk komentar & balasan
+function CommentTree({
+  comment,
+  level,
+  replyParentId,
+  setReplyParentId,
+  replyMessage,
+  setReplyMessage,
+  onReplySubmit,
+  onDelete,
+  currentUserId,
+}: any) {
+  const color = getAvatarColor(comment.commentFromName || "Anonim");
+
+  const canDelete =
+    currentUserId &&
+    (comment.commentFromId == currentUserId ||
+      comment.userId == currentUserId ||
+      comment.createdBy == currentUserId);
+
+  return (
+    <div
+      className={`space-y-3 ${
+        level > 0 ? "ml-6 border-l-2 border-gray-200 pl-4" : ""
+      }`}
+    >
+      <div className="p-2 rounded-lg transition hover:bg-gray-50 bg-white">
+        <div className="flex items-start gap-2">
+          <div
+            className="w-8 h-8 rounded-full flex items-center justify-center text-white font-bold"
+            style={{ backgroundColor: color }}
+          >
+            {comment.commentFromName?.[0]?.toUpperCase() || "U"}
+          </div>
+          <div className="flex-1">
+            <p className="font-semibold text-sm">
+              {comment.commentFromName}{" "}
+              <span className="text-gray-500 text-xs font-normal">
+                {new Date(comment.createdAt).toLocaleString("id-ID")}
+              </span>
+            </p>
+            <p className="text-gray-800 text-sm leading-snug mt-1">
+              {comment.message}
+            </p>
+
+            <div className="flex items-center gap-3 mt-1 text-xs text-gray-600">
+              <button
+                onClick={() =>
+                  setReplyParentId(
+                    replyParentId === comment.id ? null : comment.id
+                  )
+                }
+                className="hover:underline flex items-center gap-1"
+              >
+                <MessageCircle className="w-3 h-3" /> Reply
+              </button>
+              <button className="hover:underline flex items-center gap-1">
+                <Share2 className="w-3 h-3" /> Share
+              </button>
+
+              {canDelete && (
+                <button
+                  onClick={() => onDelete(comment.id)}
+                  className="flex items-center gap-1 px-2 py-1 text-xs bg-red-100 text-red-600 rounded-md hover:bg-red-200"
+                >
+                  <Trash2 className="w-3 h-3" /> Delete
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {replyParentId === comment.id && (
+          <div className="mt-3 ml-10 space-y-2">
+            <Textarea
+              placeholder={`Balas komentar ${comment.commentFromName}`}
+              className="min-h-[60px] border border-[#C6A455]"
+              value={replyMessage}
+              onChange={(e) => setReplyMessage(e.target.value)}
+            />
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setReplyParentId(null)}
+              >
+                Batal
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onReplySubmit(comment.id)}
+              >
+                Kirim Balasan
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {comment.replies && comment.replies.length > 0 && (
+        <div className="space-y-3">
+          {comment.replies.map((reply: any) => (
+            <CommentTree
+              key={reply.id}
+              comment={reply}
+              level={level + 1}
+              replyParentId={replyParentId}
+              setReplyParentId={setReplyParentId}
+              replyMessage={replyMessage}
+              setReplyMessage={setReplyMessage}
+              onReplySubmit={onReplySubmit}
+              onDelete={onDelete}
+              currentUserId={currentUserId}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/main/comment-detail-video.tsx b/components/main/comment-detail-video.tsx
index 45fc9cd..a1e4916 100644
--- a/components/main/comment-detail-video.tsx
+++ b/components/main/comment-detail-video.tsx
@@ -1,29 +1,218 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { MessageCircle, Share2, Trash2 } from "lucide-react";
+import { useRouter, useParams } from "next/navigation";
 import {
-  ChevronDown,
-  Flag,
-  MessageCircle,
-  Share2,
-  ThumbsUp,
-} from "lucide-react";
-import { useRouter } from "next/navigation";
+  getArticleDetail,
+  createArticleComment,
+  getArticleComments,
+  deleteArticleComment,
+} from "@/service/content/content";
+import { getCookiesDecrypt } from "@/lib/utils";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+function getAvatarColor(name: string) {
+  const colors = [
+    "#F87171",
+    "#FB923C",
+    "#FACC15",
+    "#4ADE80",
+    "#60A5FA",
+    "#A78BFA",
+    "#F472B6",
+  ];
+  const index = name.charCodeAt(0) % colors.length;
+  return colors[index];
+}
 
 export default function DetailCommentVideo() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [currentUserId, setCurrentUserId] = useState<number | null>(null);
+  const [video, setVideo] = useState<any>(null);
+  const [comments, setComments] = useState<any[]>([]);
+  const [newComment, setNewComment] = useState("");
+  const [replyParentId, setReplyParentId] = useState<number | null>(null);
+  const [replyMessage, setReplyMessage] = useState("");
   const router = useRouter();
+  const params = useParams();
+  const MySwal = withReactContent(Swal);
+  const id = Number(params?.id);
+
+  useEffect(() => {
+    checkLoginStatus();
+    if (id) {
+      fetchVideoDetail(id);
+      fetchComments(id);
+    }
+  }, [id]);
+
+  const checkLoginStatus = () => {
+    const userId = getCookiesDecrypt("urie");
+    if (userId) {
+      setIsLoggedIn(true);
+      setCurrentUserId(Number(userId));
+    } else {
+      setIsLoggedIn(false);
+      setCurrentUserId(null);
+    }
+  };
+
+  const fetchVideoDetail = async (videoId: number) => {
+    try {
+      const res = await getArticleDetail(videoId);
+      if (res?.data?.data) setVideo(res.data.data);
+    } catch (error) {
+      console.error("Gagal memuat video:", error);
+    }
+  };
+
+  const fetchComments = async (videoId: number) => {
+    try {
+      const res = await getArticleComments(videoId);
+      if (res?.data?.data) {
+        const all = res.data.data.map((c: any) => ({
+          ...c,
+          parentId: c.parentId ?? 0,
+        }));
+        const structured = buildCommentTree(all);
+        setComments(structured);
+      }
+    } catch (error) {
+      console.error("Gagal memuat komentar:", error);
+    }
+  };
+
+  const buildCommentTree: any = (comments: any[], parentId = 0) =>
+    comments
+      .filter((c) => c.parentId === parentId)
+      .map((c) => ({
+        ...c,
+        replies: buildCommentTree(comments, c.id),
+      }));
+
+  const handlePostComment = async () => {
+    if (!newComment.trim()) {
+      MySwal.fire("Oops!", "Komentar tidak boleh kosong.", "warning");
+      return;
+    }
+    await sendComment({
+      articleId: id,
+      message: newComment,
+      isPublic: true,
+      parentId: 0,
+    });
+    setNewComment("");
+  };
+
+  const handleReplySubmit = async (parentId: number) => {
+    if (!replyMessage.trim()) {
+      MySwal.fire("Oops!", "Balasan tidak boleh kosong.", "warning");
+      return;
+    }
+    await sendComment({
+      articleId: id,
+      message: replyMessage,
+      isPublic: true,
+      parentId,
+    });
+    setReplyMessage("");
+    setReplyParentId(null);
+  };
+
+  const sendComment = async (payload: any) => {
+    MySwal.fire({
+      title: "Mengirim komentar...",
+      didOpen: () => MySwal.showLoading(),
+      allowOutsideClick: false,
+      showConfirmButton: false,
+    });
+
+    try {
+      const res = await createArticleComment(payload);
+      if (res?.data?.success || !res?.error) {
+        MySwal.fire({
+          icon: "success",
+          title: "Komentar terkirim!",
+          timer: 1000,
+          showConfirmButton: false,
+        });
+        fetchComments(id);
+      } else {
+        MySwal.fire(
+          "Gagal",
+          res.message || "Tidak dapat mengirim komentar.",
+          "error"
+        );
+      }
+    } catch (error) {
+      console.error(error);
+      MySwal.fire(
+        "Error",
+        "Terjadi kesalahan saat mengirim komentar.",
+        "error"
+      );
+    }
+  };
+
+  const handleDeleteComment = async (commentId: number) => {
+    const confirm = await MySwal.fire({
+      title: "Hapus komentar ini?",
+      text: "Tindakan ini tidak dapat dibatalkan!",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#d33",
+      cancelButtonColor: "#6b7280",
+      confirmButtonText: "Ya, hapus",
+      cancelButtonText: "Batal",
+    });
+
+    if (!confirm.isConfirmed) return;
+
+    MySwal.fire({
+      title: "Menghapus komentar...",
+      didOpen: () => MySwal.showLoading(),
+      allowOutsideClick: false,
+      showConfirmButton: false,
+    });
+
+    try {
+      const res = await deleteArticleComment(commentId);
+      if (res?.data?.success || !res?.error) {
+        MySwal.fire({
+          icon: "success",
+          title: "Komentar dihapus!",
+          timer: 1000,
+          showConfirmButton: false,
+        });
+        fetchComments(id);
+      } else {
+        MySwal.fire(
+          "Gagal",
+          res.message || "Tidak dapat menghapus komentar.",
+          "error"
+        );
+      }
+    } catch (error) {
+      console.error("Gagal menghapus komentar:", error);
+      MySwal.fire(
+        "Error",
+        "Terjadi kesalahan saat menghapus komentar.",
+        "error"
+      );
+    }
+  };
 
   return (
     <div className="max-w-5xl mx-auto p-4 space-y-6">
       <button
         onClick={() => router.back()}
-        className="text-sm text-gray-500 hover:underline"
+        className="text-sm text-gray-500 hover:underline cursor-pointer"
       >
-        ← Kembali ke Article
+        ← Kembali ke Video
       </button>
 
       <div>
@@ -31,143 +220,360 @@ export default function DetailCommentVideo() {
           Comments on:
         </p>
         <h1 className="text-lg font-bold">
-          Kolaborasi dengan Ponpes Darunnajah, Pererat Sinergi Keamanan Hingga
-          Pembinaan Generasi Muda
+          {video?.title || "Memuat judul video..."}
         </h1>
       </div>
 
-      {/* Comment Form */}
-      <div className=" rounded-md p-3 space-y-3">
+      <div className="rounded-md p-3 space-y-3 bg-gray-50 border border-gray-200 shadow-sm">
         {isLoggedIn ? (
           <>
             <Textarea
-              placeholder="Post a comment"
+              placeholder="Tulis komentar kamu di sini..."
               className="min-h-[80px] border border-[#C6A455]"
+              value={newComment}
+              onChange={(e) => setNewComment(e.target.value)}
             />
             <div className="flex justify-end">
-              <Button size="sm">Post</Button>
+              <Button size="sm" onClick={handlePostComment}>
+                Kirim Komentar
+              </Button>
             </div>
           </>
         ) : (
           <>
             <Textarea
               disabled
-              placeholder="Post a comment"
+              placeholder="Tulis komentar kamu di sini..."
               className="min-h-[80px] opacity-70"
             />
-            <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
+            <Button
+              onClick={() => router.push("/auth")}
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white"
+            >
               Sign in and Join the Conversation
             </Button>
           </>
         )}
       </div>
 
-      {/* Sort & Comment Count */}
-      <div className="flex items-center justify-between border-b pb-2">
-        <p className="font-semibold">
-          All Comments{" "}
-          <span className="text-sm font-medium text-gray-500">4</span>
-        </p>
-        <div className="flex items-center gap-1 text-sm text-gray-600">
-          Sort by
-          <button className="flex items-center gap-1 border border-[#C6A455] px-2 py-1 rounded text-gray-700 hover:bg-gray-100">
-            Newest <ChevronDown className="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-
-      {/* Comments List */}
+      {/* Daftar komentar */}
       <div className="space-y-6">
-        <CommentItem
-          name="Mabes Ferr"
-          content="Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend."
-          time="2 hours ago"
-        />
-
-        <CommentItem
-          name="Mabes Jerr"
-          content="Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend."
-          time="2 hours ago"
-          replies={[
-            {
-              name: "Mabes Herr",
-              time: "2 hours ago",
-              inReplyTo: "Mabes Jerr",
-              content:
-                "Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend.",
-            },
-          ]}
-        />
+        {comments.length > 0 ? (
+          comments.map((comment) => (
+            <CommentTree
+              key={comment.id}
+              comment={comment}
+              level={0}
+              replyParentId={replyParentId}
+              setReplyParentId={setReplyParentId}
+              replyMessage={replyMessage}
+              setReplyMessage={setReplyMessage}
+              onReplySubmit={handleReplySubmit}
+              onDelete={handleDeleteComment}
+              currentUserId={currentUserId}
+            />
+          ))
+        ) : (
+          <p className="text-sm text-gray-500 text-center py-4">
+            Belum ada komentar.
+          </p>
+        )}
       </div>
     </div>
   );
 }
 
-type Comment = {
-  name: string;
-  time: string;
-  content: string;
-  inReplyTo?: string;
-};
+function CommentTree({
+  comment,
+  level,
+  replyParentId,
+  setReplyParentId,
+  replyMessage,
+  setReplyMessage,
+  onReplySubmit,
+  onDelete,
+  currentUserId,
+}: any) {
+  const color = getAvatarColor(comment.commentFromName || "Anonim");
+
+  const canDelete =
+    currentUserId &&
+    (comment.commentFromId == currentUserId ||
+      comment.userId == currentUserId ||
+      comment.createdBy == currentUserId);
 
-function CommentItem({
-  name,
-  time,
-  content,
-  replies,
-}: Comment & { replies?: Comment[] }) {
   return (
-    <div className="space-y-3">
-      <div>
-        <p className="font-semibold">
-          {name}{" "}
-          <span className="text-gray-500 text-sm font-normal">{time}</span>
-        </p>
-        <p className="text-gray-800 text-sm">{content}</p>
-        <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
-          <ThumbsUp className="w-4 h-4 cursor-pointer" />
-          <button className="hover:underline flex items-center gap-1">
-            <MessageCircle className="w-4 h-4" /> Reply
-          </button>
-          <button className="hover:underline flex items-center gap-1">
-            <Share2 className="w-4 h-4" /> Share
-          </button>
-          <button className="ml-auto hover:underline text-gray-400 text-xs flex items-center gap-1">
-            <Flag className="w-3 h-3" /> Report
-          </button>
+    <div
+      className={`space-y-3 ${
+        level > 0 ? "ml-6 border-l-2 border-gray-200 pl-4" : ""
+      }`}
+    >
+      <div className="p-2 rounded-lg transition hover:bg-gray-50 bg-white">
+        <div className="flex items-start gap-2">
+          <div
+            className="w-8 h-8 rounded-full flex items-center justify-center text-white font-bold"
+            style={{ backgroundColor: color }}
+          >
+            {comment.commentFromName?.[0]?.toUpperCase() || "U"}
+          </div>
+          <div className="flex-1">
+            <p className="font-semibold text-sm">
+              {comment.commentFromName}{" "}
+              <span className="text-gray-500 text-xs font-normal">
+                {new Date(comment.createdAt).toLocaleString("id-ID")}
+              </span>
+            </p>
+            <p className="text-gray-800 text-sm leading-snug mt-1">
+              {comment.message}
+            </p>
+
+            <div className="flex items-center gap-3 mt-1 text-xs text-gray-600">
+              <button
+                onClick={() =>
+                  setReplyParentId(
+                    replyParentId === comment.id ? null : comment.id
+                  )
+                }
+                className="hover:underline flex items-center gap-1"
+              >
+                <MessageCircle className="w-3 h-3" /> Reply
+              </button>
+              <button className="hover:underline flex items-center gap-1">
+                <Share2 className="w-3 h-3" /> Share
+              </button>
+
+              {canDelete && (
+                <button
+                  onClick={() => onDelete(comment.id)}
+                  className="flex items-center gap-1 px-2 py-1 text-xs bg-red-100 text-red-600 rounded-md hover:bg-red-200"
+                >
+                  <Trash2 className="w-3 h-3" /> Delete
+                </button>
+              )}
+            </div>
+          </div>
         </div>
+
+        {replyParentId === comment.id && (
+          <div className="mt-3 ml-10 space-y-2">
+            <Textarea
+              placeholder={`Balas komentar ${comment.commentFromName}`}
+              className="min-h-[60px] border border-[#C6A455]"
+              value={replyMessage}
+              onChange={(e) => setReplyMessage(e.target.value)}
+            />
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setReplyParentId(null)}
+              >
+                Batal
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onReplySubmit(comment.id)}
+              >
+                Kirim Balasan
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
 
-      {replies && replies.length > 0 && (
-        <div className="ml-6 border-l pl-4 space-y-3">
-          {replies.map((reply, idx) => (
-            <div key={idx}>
-              <p className="font-semibold">
-                {reply.name}{" "}
-                <span className="text-gray-500 text-sm font-normal">
-                  {reply.time}
-                </span>
-              </p>
-              <p className="text-xs text-gray-500">
-                In Reply To {reply.inReplyTo}
-              </p>
-              <p className="text-gray-800 text-sm">{reply.content}</p>
-              <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
-                <ThumbsUp className="w-4 h-4 cursor-pointer" />
-                <button className="hover:underline flex items-center gap-1">
-                  <MessageCircle className="w-4 h-4" /> Reply
-                </button>
-                <button className="hover:underline flex items-center gap-1">
-                  <Share2 className="w-4 h-4" /> Share
-                </button>
-                <button className="ml-auto hover:underline text-gray-400 text-xs flex items-center gap-1">
-                  <Flag className="w-3 h-3" /> Report
-                </button>
-              </div>
-            </div>
+      {comment.replies && comment.replies.length > 0 && (
+        <div className="space-y-3">
+          {comment.replies.map((reply: any) => (
+            <CommentTree
+              key={reply.id}
+              comment={reply}
+              level={level + 1}
+              replyParentId={replyParentId}
+              setReplyParentId={setReplyParentId}
+              replyMessage={replyMessage}
+              setReplyMessage={setReplyMessage}
+              onReplySubmit={onReplySubmit}
+              onDelete={onDelete}
+              currentUserId={currentUserId}
+            />
           ))}
         </div>
       )}
     </div>
   );
 }
+
+// "use client";
+
+// import { useState } from "react";
+// import { Button } from "@/components/ui/button";
+// import { Input } from "@/components/ui/input";
+// import { Textarea } from "@/components/ui/textarea";
+// import {
+//   ChevronDown,
+//   Flag,
+//   MessageCircle,
+//   Share2,
+//   ThumbsUp,
+// } from "lucide-react";
+// import { useRouter } from "next/navigation";
+
+// export default function DetailCommentVideo() {
+//   const [isLoggedIn, setIsLoggedIn] = useState(false);
+//   const router = useRouter();
+
+//   return (
+//     <div className="max-w-5xl mx-auto p-4 space-y-6">
+//       <button
+//         onClick={() => router.back()}
+//         className="text-sm text-gray-500 hover:underline"
+//       >
+//         ← Kembali ke Article
+//       </button>
+
+//       <div>
+//         <p className="font-semibold text-sm uppercase text-gray-600 mb-1">
+//           Comments on:
+//         </p>
+//         <h1 className="text-lg font-bold">
+//           Kolaborasi dengan Ponpes Darunnajah, Pererat Sinergi Keamanan Hingga
+//           Pembinaan Generasi Muda
+//         </h1>
+//       </div>
+
+//       {/* Comment Form */}
+//       <div className=" rounded-md p-3 space-y-3">
+//         {isLoggedIn ? (
+//           <>
+//             <Textarea
+//               placeholder="Post a comment"
+//               className="min-h-[80px] border border-[#C6A455]"
+//             />
+//             <div className="flex justify-end">
+//               <Button size="sm">Post</Button>
+//             </div>
+//           </>
+//         ) : (
+//           <>
+//             <Textarea
+//               disabled
+//               placeholder="Post a comment"
+//               className="min-h-[80px] opacity-70"
+//             />
+//             <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
+//               Sign in and Join the Conversation
+//             </Button>
+//           </>
+//         )}
+//       </div>
+
+//       {/* Sort & Comment Count */}
+//       <div className="flex items-center justify-between border-b pb-2">
+//         <p className="font-semibold">
+//           All Comments{" "}
+//           <span className="text-sm font-medium text-gray-500">4</span>
+//         </p>
+//         <div className="flex items-center gap-1 text-sm text-gray-600">
+//           Sort by
+//           <button className="flex items-center gap-1 border border-[#C6A455] px-2 py-1 rounded text-gray-700 hover:bg-gray-100">
+//             Newest <ChevronDown className="w-4 h-4" />
+//           </button>
+//         </div>
+//       </div>
+
+//       {/* Comments List */}
+//       <div className="space-y-6">
+//         <CommentItem
+//           name="Mabes Ferr"
+//           content="Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend."
+//           time="2 hours ago"
+//         />
+
+//         <CommentItem
+//           name="Mabes Jerr"
+//           content="Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend."
+//           time="2 hours ago"
+//           replies={[
+//             {
+//               name: "Mabes Herr",
+//               time: "2 hours ago",
+//               inReplyTo: "Mabes Jerr",
+//               content:
+//                 "Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend.",
+//             },
+//           ]}
+//         />
+//       </div>
+//     </div>
+//   );
+// }
+
+// type Comment = {
+//   name: string;
+//   time: string;
+//   content: string;
+//   inReplyTo?: string;
+// };
+
+// function CommentItem({
+//   name,
+//   time,
+//   content,
+//   replies,
+// }: Comment & { replies?: Comment[] }) {
+//   return (
+//     <div className="space-y-3">
+//       <div>
+//         <p className="font-semibold">
+//           {name}{" "}
+//           <span className="text-gray-500 text-sm font-normal">{time}</span>
+//         </p>
+//         <p className="text-gray-800 text-sm">{content}</p>
+//         <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
+//           <ThumbsUp className="w-4 h-4 cursor-pointer" />
+//           <button className="hover:underline flex items-center gap-1">
+//             <MessageCircle className="w-4 h-4" /> Reply
+//           </button>
+//           <button className="hover:underline flex items-center gap-1">
+//             <Share2 className="w-4 h-4" /> Share
+//           </button>
+//           <button className="ml-auto hover:underline text-gray-400 text-xs flex items-center gap-1">
+//             <Flag className="w-3 h-3" /> Report
+//           </button>
+//         </div>
+//       </div>
+
+//       {replies && replies.length > 0 && (
+//         <div className="ml-6 border-l pl-4 space-y-3">
+//           {replies.map((reply, idx) => (
+//             <div key={idx}>
+//               <p className="font-semibold">
+//                 {reply.name}{" "}
+//                 <span className="text-gray-500 text-sm font-normal">
+//                   {reply.time}
+//                 </span>
+//               </p>
+//               <p className="text-xs text-gray-500">
+//                 In Reply To {reply.inReplyTo}
+//               </p>
+//               <p className="text-gray-800 text-sm">{reply.content}</p>
+//               <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
+//                 <ThumbsUp className="w-4 h-4 cursor-pointer" />
+//                 <button className="hover:underline flex items-center gap-1">
+//                   <MessageCircle className="w-4 h-4" /> Reply
+//                 </button>
+//                 <button className="hover:underline flex items-center gap-1">
+//                   <Share2 className="w-4 h-4" /> Share
+//                 </button>
+//                 <button className="ml-auto hover:underline text-gray-400 text-xs flex items-center gap-1">
+//                   <Flag className="w-3 h-3" /> Report
+//                 </button>
+//               </div>
+//             </div>
+//           ))}
+//         </div>
+//       )}
+//     </div>
+//   );
+// }
diff --git a/components/main/content/document-detail.tsx b/components/main/content/document-detail.tsx
index 0164a6d..45770f9 100644
--- a/components/main/content/document-detail.tsx
+++ b/components/main/content/document-detail.tsx
@@ -274,7 +274,7 @@ export default function DocumentDetail({ id }: { id: number }) {
               )}
             </div>
             <div className="flex gap-2 items-center">
-              <Link href={`/content/video/comment/${id}`}>
+              <Link href={`/content/text/comment/${id}`}>
                 <Button
                   variant="default"
                   size="lg"
diff --git a/lib/menus.ts b/lib/menus.ts
index 59c3da4..df24a95 100644
--- a/lib/menus.ts
+++ b/lib/menus.ts
@@ -113,7 +113,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
                   icon: "uil:schedule",
                   submenus: [
                     {
-                      href: "/contributor/schedule",
+                      href: "/admin/schedule",
                       label: t("schedule"),
                       active: pathname.includes("/schedule"),
                       icon: "heroicons:arrow-trending-up",
diff --git a/service/http-config/http-interceptor-service.ts b/service/http-config/http-interceptor-service.ts
index af5d7e8..b113be9 100644
--- a/service/http-config/http-interceptor-service.ts
+++ b/service/http-config/http-interceptor-service.ts
@@ -86,7 +86,6 @@ export async function httpGetInterceptor(pathUrl: any) {
     }
   }
 
-  // 🔹 Tambahkan return default biar tidak undefined
   return {
     error: true,
     message: response?.data?.message || response?.data || "Unknown error",
diff --git a/service/landing/landing.ts b/service/landing/landing.ts
index 7e1067e..33f36bf 100644
--- a/service/landing/landing.ts
+++ b/service/landing/landing.ts
@@ -281,20 +281,16 @@ export async function getAllSchedules(params?: {
   sortBy?: string;
   totalPage?: number;
 }) {
-  // base endpoint dari swagger
   let url = "schedules?";
 
-  // tambahkan semua query parameter yang memiliki nilai
   Object.entries(params || {}).forEach(([key, value]) => {
     if (value !== undefined && value !== null && value !== "") {
       url += `${key}=${encodeURIComponent(String(value))}&`;
     }
   });
 
-  // hapus '&' terakhir jika ada
   url = url.endsWith("&") ? url.slice(0, -1) : url;
 
-  // gunakan interceptor kamu untuk GET
   return httpGetInterceptor(url);
 }