Merge branch 'main' of https://gitlab.com/hanifsalafi/new-netidhub-public into dev-1

components/main/category-tabs.tsx

@@ -1,39 +1,69 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { getPublicClients, PublicClient } from "@/service/client/public-clients";
+
 type CategoryTabsProps = {
   selectedCategory: string;
   onCategoryChange: (category: string) => void;
 };
 
-const categories = [
-  "SEMUA",
-  "POLRI",
-  "MAHKAMAH AGUNG",
-  "DPR",
-  "MPR",
-  "KEJAKSAAN AGUNG",
-  "KPK",
-  "PUPR",
-  "BSKDN",
-  "BUMN",
-  "KPU",
-];
-
 export default function CategoryTabs({
   selectedCategory,
   onCategoryChange,
 }: CategoryTabsProps) {
+  const [clients, setClients] = useState<PublicClient[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // Fetch public clients
+  useEffect(() => {
+    async function fetchClients() {
+      try {
+        const response = await getPublicClients();
+        if (response?.data?.success && response.data.data) {
+          setClients(response.data.data);
+        }
+      } catch (error) {
+        console.error("Error fetching public clients:", error);
+        // Fallback to empty array if API fails
+        setClients([]);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchClients();
+  }, []);
+
+  // Create categories array with "SEMUA" first, then client names
+  const categories = ["SEMUA", ...clients.map(client => client.name)];
+
+  if (loading) {
+    return (
+      <div className="flex flex-wrap gap-2 overflow-x-auto">
+        {Array.from({ length: 6 }).map((_, idx) => (
+          <div
+            key={idx}
+            className="px-4 py-1 text-sm rounded font-medium border bg-gray-200 animate-pulse h-8 w-20"
+          ></div>
+        ))}
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-wrap gap-2 overflow-x-auto">
       {categories.map((cat, idx) => (
         <button
           key={idx}
           onClick={() => onCategoryChange(cat)}
-          className={`px-4 py-1 text-sm rounded font-medium border ${
+          className={`px-4 py-1 text-sm rounded font-medium border transition-colors ${
             selectedCategory === cat
               ? "bg-[#C6A455] text-white"
-              : "bg-white text-gray-800"
+              : "bg-white text-gray-800 hover:bg-gray-50"
           }`}
         >
-          {cat}
+          {cat.toUpperCase()}
         </button>
       ))}
     </div>

components/main/filter-publication-for-you.tsx

@@ -12,15 +12,16 @@ export default function PublicationKlLayout() {
   const [selectedCategory, setSelectedCategory] = useState("SEMUA");
   const router = useRouter();
 
-  useEffect(() => {
+  // useEffect(() => {
-    const roleId = getCookiesDecrypt("urie") ?? "";
+  //   const roleId = getCookiesDecrypt("urie") ?? "";
 
-    const allowedRoles = ["6", "7", "2", "3"];
+  //   const allowedRoles = ["6", "7", "2", "3"];
+
+  //   if (!allowedRoles.includes(roleId)) {
+  //     router.push("/auth");
+  //   }
+  // }, [router]);
 
-    if (!allowedRoles.includes(roleId)) {
-      router.push("/auth");
-    }
-  }, [router]);
   return (
     <div className="max-w-7xl mx-auto px-4 py-6 space-y-6">
       <CategoryTabs

components/main/for-you-card.tsx

@@ -1,12 +1,64 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import PublicationKlFilter from "./publication-filter";
+import Image from "next/image";
 import { Button } from "@/components/ui/button";
+import { ThumbsUp, ThumbsDown, Trash2 } from "lucide-react";
+import Link from "next/link";
+import { getBookmarks, toggleBookmarkById, BookmarkItem } from "@/service/content";
 import { getCookiesDecrypt } from "@/lib/utils";
-import { getBookmarksByUserId, getBookmarksForUser } from "@/service/landing/landing";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 
-const itemsPerPage = 9;
+// Format tanggal
+function formatTanggal(dateString: string) {
+  if (!dateString) return "";
+  return (
+    new Date(dateString)
+      .toLocaleString("id-ID", {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+        timeZone: "Asia/Jakarta",
+      })
+      .replace(/\./g, ":") + " WIB"
+  );
+}
+
+// Function to get link based on typeId
+function getLink(item: BookmarkItem) {
+  switch (item.article?.typeId) {
+    case 1:
+      return `/content/image/detail/${item.article?.id}`;
+    case 2:
+      return `/content/video/detail/${item.article?.id}`;
+    case 3:
+      return `/content/text/detail/${item.article?.id}`;
+    case 4:
+      return `/content/audio/detail/${item.article?.id}`;
+    default:
+      return "#";
+  }
+}
+
+// Function to get content type label
+function getContentTypeLabel(typeId: number) {
+  switch (typeId) {
+    case 1:
+      return "📸 Image";
+    case 2:
+      return "🎬 Video";
+    case 3:
+      return "📝 Text";
+    case 4:
+      return "🎵 Audio";
+    default:
+      return "📄 Content";
+  }
+}
 
 type PublicationCardGridProps = {
   selectedCategory: string;
@@ -26,80 +78,187 @@ export default function ForYouCardGrid({
   isInstitute = false,
   instituteId = "",
 }: PublicationCardGridProps) {
+  const [bookmarks, setBookmarks] = useState<BookmarkItem[]>([]);
+  const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
-  const [contentImage, setContentImage] = useState<any[]>([]);
   const [totalPages, setTotalPages] = useState(1);
-  const [categoryFilter] = useState<string[]>([]);
+  const [totalCount, setTotalCount] = useState(0);
-  const [formatFilter] = useState<string[]>([]);
+  const [limit] = useState(12);
-  const [sortBy] = useState<string>("createdAt");
+  const MySwal = withReactContent(Swal);
 
   useEffect(() => {
-    getDataBookmark();
+    fetchBookmarks();
   }, [currentPage, selectedCategory, title, refresh]);
 
-  async function getDataBookmark() {
+  const fetchBookmarks = async () => {
-    console.log("📡 Fetching bookmark list...");
-
     try {
-      const response = await getBookmarksForUser(1, 12, "desc", "createdAt");
+      setLoading(true);
-      console.log("✅ Bookmark response:", response);
+      const response = await getBookmarks(currentPage, limit);
-
+      
-      const bookmarks =
+      if (!response?.error) {
-        response?.data?.data?.content || response?.data?.data || [];
+        setBookmarks(response.data?.data || []);
-      const totalPage = response?.data?.data?.totalPages || 1;
+        setTotalPages(response.data?.meta?.totalPage || 1);
-
+        setTotalCount(response.data?.meta?.count || 0);
-      setContentImage(bookmarks);
+      } else {
-      setTotalPages(totalPage);
+        console.error("Failed to fetch bookmarks:", response?.error);
-    } catch (error) {
+        MySwal.fire({
-      console.error("❌ Gagal memuat bookmark:", error);
+          icon: "error",
-      setContentImage([]);
+          title: "Error",
+          text: "Gagal memuat bookmark.",
+          confirmButtonColor: "#d33",
+        });
+      }
+    } catch (err) {
+      console.error("Error fetching bookmarks:", err);
+      MySwal.fire({
+        icon: "error",
+        title: "Error",
+        text: "Terjadi kesalahan saat memuat bookmark.",
+        confirmButtonColor: "#d33",
+      });
+    } finally {
+      setLoading(false);
     }
-  }
+  };
+
+  const handleDeleteBookmark = async (bookmarkId: number, articleId: number, articleTitle: string) => {
+    const result = await MySwal.fire({
+      title: "Hapus Bookmark",
+      text: `Apakah Anda yakin ingin menghapus "${articleTitle}" dari bookmark?`,
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#d33",
+      cancelButtonColor: "#3085d6",
+      confirmButtonText: "Ya, Hapus!",
+      cancelButtonText: "Batal",
+    });
+
+    if (result.isConfirmed) {
+      try {
+        const response = await toggleBookmarkById(articleId);
+        
+        if (response?.data?.success || !response?.error) {
+          // Remove from local state
+          setBookmarks(prev => prev.filter(bookmark => bookmark.id !== bookmarkId));
+          setTotalCount(prev => prev - 1);
+          
+          MySwal.fire({
+            icon: "success",
+            title: "Berhasil",
+            text: "Bookmark berhasil dihapus.",
+            timer: 1500,
+            showConfirmButton: false,
+          });
+        } else {
+          MySwal.fire({
+            icon: "error",
+            title: "Gagal",
+            text: "Gagal menghapus bookmark.",
+            confirmButtonColor: "#d33",
+          });
+        }
+      } catch (err) {
+        console.error("Error deleting bookmark:", err);
+        MySwal.fire({
+          icon: "error",
+          title: "Error",
+          text: "Terjadi kesalahan saat menghapus bookmark.",
+          confirmButtonColor: "#d33",
+        });
+      }
+    }
+  };
 
   const goToPage = (page: number) => {
     setCurrentPage(page);
   };
 
+  if (loading) {
+    return (
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        {Array.from({ length: 6 }).map((_, index) => (
+          <div key={index} className="rounded-xl shadow-md overflow-hidden bg-white animate-pulse">
+            <div className="w-full h-[204px] bg-gray-200"></div>
+            <div className="p-3 space-y-2">
+              <div className="h-4 bg-gray-200 rounded"></div>
+              <div className="h-3 bg-gray-200 rounded w-2/3"></div>
+              <div className="h-4 bg-gray-200 rounded"></div>
+              <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (bookmarks.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <div className="text-gray-400 text-6xl mb-4">📚</div>
+        <h3 className="text-xl font-semibold text-gray-600 mb-2">Tidak Ada Bookmark</h3>
+        <p className="text-gray-500">Anda belum menyimpan artikel apapun ke bookmark.</p>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-6">
+      {/* Header */}
+      <div className="mb-6">
+        <h2 className="text-2xl font-semibold text-gray-800 mb-2">Bookmark Saya</h2>
+        <p className="text-gray-600">Total {totalCount} artikel tersimpan</p>
+      </div>
+
       {/* Grid Card */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-        {contentImage.length === 0 ? (
+        {bookmarks.map((bookmark) => (
-          <div className="col-span-3 text-center text-muted-foreground">
+          <div key={bookmark.id} className="rounded-xl shadow-md overflow-hidden bg-white hover:shadow-lg transition-shadow">
-            Tidak ada artikel tersimpan.
+            <div className="w-full h-[204px] relative">
+              <Link href={getLink(bookmark)}>
+                <Image
+                  src={bookmark.article?.thumbnailUrl || "/placeholder.png"}
+                  alt={bookmark.article?.title || "No Title"}
+                  fill
+                  className="object-cover cursor-pointer hover:opacity-90 transition-opacity"
+                />
+              </Link>
+            </div>
+            <div className="p-3">
+              <div className="flex gap-2 mb-1">
+                <span className="text-xs text-white px-2 py-0.5 rounded bg-blue-600">
+                  {getContentTypeLabel(bookmark.article?.typeId || 0)}
+                </span>
+                {/* <span className="text-xs font-medium text-[#b3882e]">
+                  Bookmark
+                </span> */}
+              </div>
+              <p className="text-xs text-gray-500 mb-1">
+                Disimpan: {formatTanggal(bookmark.createdAt)}
+              </p>
+              <Link href={getLink(bookmark)}>
+                <p className="text-sm font-semibold mb-3 line-clamp-2 cursor-pointer hover:text-blue-600 transition-colors">
+                  {bookmark.article?.title}
+                </p>
+              </Link>
+
+              <div className="flex items-center justify-between">
+                <div className="flex gap-2 text-gray-600">
+                  <ThumbsUp className="w-4 h-4 cursor-pointer hover:text-green-600" />
+                  <ThumbsDown className="w-4 h-4 cursor-pointer hover:text-red-600" />
+                </div>
+                <Button
+                  onClick={() => handleDeleteBookmark(bookmark.id, bookmark.article?.id || 0, bookmark.article?.title || "")}
+                  variant="outline"
+                  size="sm"
+                  className="rounded px-3 text-red-600 border-red-200 hover:bg-red-50 hover:border-red-300"
+                >
+                  <Trash2 className="w-4 h-4 mr-1" />
+                  Hapus
+                </Button>
+              </div>
+            </div>
           </div>
-        ) : (
+        ))}
-          contentImage.map((item: any, idx: number) => {
-            const article = item.article || item; // jaga-jaga kalau API return nested
-            return (
-              <PublicationKlFilter
-                key={idx}
-                id={article.id || item.articleId}
-                image={
-                  article.thumbnailUrl ||
-                  article.mediaUpload?.smallThumbnailLink ||
-                  "/contributor.png"
-                }
-                label={article.typeName || article.mediaType?.name || "Artikel"}
-                category={
-                  article.categories?.map((c: any) => c.title).join(", ") ||
-                  article.tags ||
-                  "-"
-                }
-                date={new Date(article.createdAt).toLocaleString("id-ID", {
-                  day: "2-digit",
-                  month: "short",
-                  year: "numeric",
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  timeZoneName: "short",
-                })}
-                title={article.title}
-                description={article.description || ""}
-              />
-            );
-          })
-        )}
       </div>
 
       {/* Pagination */}

hooks/use-auth.ts

@@ -177,7 +177,11 @@ export const useAuth = (): AuthContextType => {
         // Reset rate limiter on successful login
         loginRateLimiter.resetAttempts(credentials.username);
         
-        router.push("/admin/dashboard");
+        if (profile?.userRoleId === 4 || profile?.userRoleId === 5) {
+          router.push("/");
+        } else {
+          router.push("/admin/dashboard");
+        }
       } catch (error: any) {
         const errorMessage = error?.message || "Login failed";
         setState((prev) => ({

service/content.ts

@@ -417,4 +417,64 @@ export async function getBookmarkSummaryForUser() {
 export async function deleteBookmark(id: string | number) {
   const url = `/bookmarks/${id}`;
   return await httpDeleteInterceptor(url);
+}
+
+export async function toggleBookmarkById(articleId: string | number) {
+  const url = `/bookmarks/toggle/${articleId}`;
+  return await httpPostInterceptor(url);
+}
+
+// Bookmarks API
+export interface BookmarkItem {
+  id: number;
+  userId: number;
+  articleId: number;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+  article: {
+    id: number;
+    title: string;
+    slug: string;
+    description: string;
+    htmlDescription: string;
+    categoryId: number;
+    typeId: number;
+    tags: string;
+    thumbnailUrl: string;
+    pageUrl: string | null;
+    createdById: number;
+    shareCount: number;
+    viewCount: number;
+    commentCount: number;
+    statusId: number;
+    isBanner: boolean;
+    isPublish: boolean;
+    publishedAt: string | null;
+    isActive: boolean;
+    createdAt: string;
+    updatedAt: string;
+  };
+}
+
+export interface BookmarksResponse {
+  success: boolean;
+  code: number;
+  messages: string[];
+  data: BookmarkItem[];
+  meta: {
+    limit: number;
+    page: number;
+    nextPage: number;
+    previousPage: number;
+    count: number;
+    totalPage: number;
+    sort: string;
+    sortBy: string;
+  };
+}
+
+export async function getBookmarks(page = 1, limit = 10) {
+  const url = `bookmarks?page=${page}&limit=${limit}`;
+  return httpGetInterceptor(url);
 }