Merge branch 'main' of https://gitlab.com/hanifsalafi/mediahub_redesign into prod

app/[locale]/(protected)/admin/settings/iklan/component/column.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { ColumnDef } from "@tanstack/react-table";
 
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -78,7 +78,7 @@ const columns: ColumnDef<any>[] = [
     enableHiding: false,
     cell: ({ row }) => {
       const MySwal = withReactContent(Swal);
-
+      const levelNumber = getCookiesDecrypt("ulne");
       async function doDelete(id: any) {
         // loading();
         const data = {
@@ -132,7 +132,7 @@ const columns: ColumnDef<any>[] = [
               <MoreVertical className="h-4 w-4 text-default-800" />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="p-0" align="end">
+          {/* <DropdownMenuContent className="p-0" align="end">
             <Link href={`/admin/settings/iklan/detail/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
@@ -152,6 +152,33 @@ const columns: ColumnDef<any>[] = [
               <Trash2 className="w-4 h-4 me-1.5" />
               Delete
             </DropdownMenuItem>
+          </DropdownMenuContent> */}
+          <DropdownMenuContent className="p-0" align="end">
+            <Link href={`/admin/settings/iklan/detail/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <Eye className="w-4 h-4 me-1.5" />
+                View
+              </DropdownMenuItem>
+            </Link>
+
+            {levelNumber === "1" && (
+              <>
+                <Link href={`/admin/settings/iklan/update/${row.original.id}`}>
+                  <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                    <SquarePen className="w-4 h-4 me-1.5" />
+                    Edit
+                  </DropdownMenuItem>
+                </Link>
+
+                <DropdownMenuItem
+                  onClick={() => handleDeleteAdvertisements(row.original.id)}
+                  className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"
+                >
+                  <Trash2 className="w-4 h-4 me-1.5" />
+                  Delete
+                </DropdownMenuItem>
+              </>
+            )}
           </DropdownMenuContent>
         </DropdownMenu>
       );

app/[locale]/(protected)/admin/settings/iklan/component/table.tsx

@@ -39,7 +39,7 @@ import {
   UploadIcon,
   UserIcon,
 } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -94,6 +94,9 @@ const AdvertisementsList = () => {
   const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
   const [page, setPage] = React.useState(1);
   const [totalPage, setTotalPage] = React.useState(1);
+  const roleId = getCookiesDecrypt("urie");
+  const levelNumber = getCookiesDecrypt("ulne");
+  const userLevelId = getCookiesDecrypt("ulie");
   const table = useReactTable({
     data: dataTable,
     columns,
@@ -203,10 +206,11 @@ const AdvertisementsList = () => {
   return (
     <>
       <div>
+        {levelNumber === "1" && (
           <div className="flex-none">
+            <Link href={"/admin/settings/iklan/create"}>
               <Button
                 disabled={dataTable.length == 4}
-            onClick={() => router.push("/admin/settings/iklan/create")}
                 color="primary"
                 className="text-white"
                 size="md"
@@ -214,12 +218,15 @@ const AdvertisementsList = () => {
                 <UploadIcon size={18} className="mr-2" />
                 Tambah Iklan
               </Button>
+            </Link>
             {dataTable.length == 4 && (
               <p className="text-sm text-red-400 pt-1">
                 Jumlah Iklan Sudah Maksimal (4)
               </p>
             )}
           </div>
+        )}
+
         {/* <TambahIklanModal /> */}
       </div>
       <div className="flex justify-between ">

app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx

@@ -20,6 +20,7 @@ import { Link } from "@/components/navigation";
 import { useTranslations } from "next-intl";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
+import { useState } from "react";
 
 const useTableColumns = () => {
   const t = useTranslations("Table");
@@ -37,7 +38,6 @@ const useTableColumns = () => {
           onCheckedChange={(val) => table.toggleAllPageRowsSelected(!!val)}
           aria-label="Pilih semua pada halaman ini"
         />
-        
       ),
       cell: ({ row }) => (
         <Checkbox
@@ -140,15 +140,23 @@ const useTableColumns = () => {
       enableHiding: false,
       cell: ({ row }) => {
         const isDisabled = row.original.isPublish;
+        const [open, setOpen] = useState(false);
+
+        const handleClick = (e: React.MouseEvent) => {
+          if (e.ctrlKey) {
+            console.log("Ctrl + Click detected");
+          }
+          // Paksa buka menu meskipun ctrl ditekan
+          setOpen(true);
+        };
+
         return (
-          <DropdownMenu>
+          <DropdownMenu open={open} onOpenChange={setOpen}>
             <DropdownMenuTrigger asChild disabled={isDisabled}>
               <Button
                 size="icon"
-                className={`bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent ${
+                onClick={handleClick}
-                  isDisabled ? "cursor-not-allowed opacity-50" : ""
+                className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
-                }`}
-                disabled={isDisabled}
               >
                 <span className="sr-only">Open menu</span>
                 <MoreVertical className="h-4 w-4 text-default-800" />
@@ -159,7 +167,7 @@ const useTableColumns = () => {
                 href={`/contributor/content/spit/convert/${row.original.contentId}`}
               >
                 <DropdownMenuItem
-                  className={`p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none ${
+                  className={`cursor-pointer p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none ${
                     isDisabled ? "cursor-not-allowed opacity-50" : ""
                   }`}
                   disabled={isDisabled}

app/[locale]/(protected)/contributor/task/components/columns.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { ColumnDef } from "@tanstack/react-table";
 
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -206,6 +206,15 @@ const useTableColumns = () => {
       cell: ({ row }) => {
         const router = useRouter();
         const MySwal = withReactContent(Swal);
+        const roleId = getCookiesDecrypt("urie");
+        const levelNumber = getCookiesDecrypt("ulne");
+        const userLevelId = getCookiesDecrypt("ulie");
+        const contentLevelNumber =
+          row.original.createdBy?.userLevel?.levelNumber;
+        const isSameLevelOrLower =
+          levelNumber &&
+          contentLevelNumber &&
+          +levelNumber <= +contentLevelNumber;
 
         async function deleteProcess(id: any) {
           loading();
@@ -268,7 +277,24 @@ const useTableColumns = () => {
                 </DropdownMenuItem>
               </Link>
 
-              {!isDone && (
+              {/* {!isDone && (
+                <>
+                  <Link href={`/contributor/task/update/${row.original.id}`}>
+                    <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                      <SquarePen className="w-4 h-4 me-1.5" />
+                      Edit
+                    </DropdownMenuItem>
+                  </Link>
+                  <DropdownMenuItem
+                    onClick={() => TaskDelete(row.original.id)}
+                    className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
+                  >
+                    <Trash2 className="w-4 h-4 me-1.5" />
+                    Delete
+                  </DropdownMenuItem>
+                </>
+              )} */}
+              {!isDone && isSameLevelOrLower && (
                 <>
                   <Link href={`/contributor/task/update/${row.original.id}`}>
                     <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">

components/form/setting/form-add-iklan-detail.tsx

@@ -41,6 +41,7 @@ import FileUploader from "../shared/file-uploader";
 import { Icon } from "@/components/ui/icon";
 import { useParams } from "next/navigation";
 import Link from "next/link";
+import { useRouter } from "@/i18n/routing";
 
 const calendarSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -64,6 +65,7 @@ interface Detail {
 
 export function TambahIklanDetail() {
   const [open, setOpen] = React.useState(false);
+  const router = useRouter();
   const MySwal = withReactContent(Swal);
   const t = useTranslations("Schedule");
   const { id } = useParams() as { id: string };
@@ -376,6 +378,7 @@ export function TambahIklanDetail() {
                   ].map(({ label, value }) => (
                     <label key={value} className="flex items-center gap-2">
                       <Checkbox
+                        disabled
                         id={value}
                         checked={selectedPlacement === value}
                         onCheckedChange={() => handlePlacementSelect(value)}
@@ -506,6 +509,7 @@ export function TambahIklanDetail() {
                   name="title"
                   render={({ field }) => (
                     <Input
+                      readOnly
                       size={"md"}
                       type="text"
                       value={detail?.title}
@@ -540,6 +544,7 @@ export function TambahIklanDetail() {
                   name="description"
                   render={({ field }) => (
                     <Textarea
+                      readOnly
                       rows={3}
                       value={detail?.description}
                       onChange={field.onChange}
@@ -554,12 +559,22 @@ export function TambahIklanDetail() {
                 )}
               </div>
 
-              <div className="text-right">
+              {/* <div className="text-right">
                 <Link href={"admin/settings/iklan"}>
                   <Button type="button" variant={"outline"} color="primary">
                     Kembali
                   </Button>
                 </Link>
+              </div> */}
+              <div className="text-right">
+                <Button
+                  type="button"
+                  variant="outline"
+                  color="primary"
+                  onClick={() => router.back()}
+                >
+                  Kembali
+                </Button>
               </div>
             </div>
           </form>

components/form/setting/form-add-iklan.tsx

@@ -38,6 +38,7 @@ import FileUploader from "../shared/file-uploader";
 import { Icon } from "@/components/ui/icon";
 import { close } from "@/config/swal";
 import { listDataAdvertisements } from "@/service/broadcast/broadcast";
+import { useRouter } from "@/i18n/routing";
 
 const calendarSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -54,6 +55,7 @@ interface FileUploaded {
 }
 
 export function TambahIklanModal() {
+  const router = useRouter();
   const [open, setOpen] = React.useState(false);
   const MySwal = withReactContent(Swal);
   const t = useTranslations("Schedule");
@@ -222,7 +224,7 @@ export function TambahIklanModal() {
       text: "Iklan berhasil ditambahkan.",
       confirmButtonText: "OK",
     }).then(() => {
-      window.location.reload();
+      router.push("/admin/settings/iklan");
     });
 
     Cookies.set("scheduleId", response?.data?.data.id, {

components/landing-page/navbar.tsx

@@ -250,34 +250,38 @@ const Navbar = () => {
                 </PopoverTrigger>
 
                 <PopoverContent className="flex flex-col gap-2 w-fit px-6 py-4 rounded-md shadow-md bg-white dark:bg-black">
-                  <button
+                  <Link
-                    onClick={() => router.push(prefixPath + "/image/filter")}
+                    href={prefixPath + "/image/filter"}
+                    // onClick={() => router.push(prefixPath + "/image/filter")}
                     className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
                   >
                     <FiImage className="mr-2" />
                     {t("image", { defaultValue: "Image" })}
-                  </button>
+                  </Link>
-                  <button
+                  <Link
-                    onClick={() => router.push(prefixPath + "/video/filter")}
+                    href={prefixPath + "/video/filter"}
+                    // onClick={() => router.push(prefixPath + "/video/filter")}
                     className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
                   >
                     <FiYoutube className="mr-2" />
                     {t("video", { defaultValue: "Video" })}
-                  </button>
+                  </Link>
-                  <button
+                  <Link
-                    onClick={() => router.push(prefixPath + "/document/filter")}
+                    href={prefixPath + "/document/filter"}
+                    // onClick={() => router.push(prefixPath + "/document/filter")}
                     className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
                   >
                     <FiFile className="mr-2" />
                     {t("text", { defaultValue: "Text" })}
-                  </button>
+                  </Link>
-                  <button
+                  <Link
-                    onClick={() => router.push(prefixPath + "/audio/filter")}
+                    href={prefixPath + "/audio/filter"}
+                    // onClick={() => router.push(prefixPath + "/audio/filter")}
                     className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
                   >
                     <FiMusic className="mr-2" />
                     {t("audio", { defaultValue: "Audio" })}
-                  </button>
+                  </Link>
                 </PopoverContent>
               </Popover>
 
@@ -399,7 +403,7 @@ const Navbar = () => {
             <ThemeSwitcher />
           </div>
 
-          <div className="hidden custom-lg-button:relative text-gray-600 dark:text-white  ">
+          <div className=" custom-lg-button:relative text-gray-600 dark:text-white  ">
             {/* <input
               value={onSearch}
               onChange={(e) => setOnSearch(e.target.value)}

components/landing-page/new-content.tsx

@@ -128,7 +128,10 @@ const NewContent = (props: { group: string; type: string }) => {
           <h2 className="flex items-center text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523]  uppercase">
             {pathname?.split("/")[1] == "in" ? (
               <>
-                <span className="text-[#bb3523] ">{t("content", { defaultValue: "Content" })}</span>&nbsp;
+                <span className="text-[#bb3523] ">
+                  {t("content", { defaultValue: "Content" })}
+                </span>
+                &nbsp;
                 {props.type == "popular"
                   ? "Terpopuler"
                   : props.type == "latest"
@@ -153,10 +156,22 @@ const NewContent = (props: { group: string; type: string }) => {
             <Tabs value={selectedTab} onValueChange={setSelectedTab}>
               <TabsList className="flex gap-2 bg-transparent p-0">
                 {[
-                  { label: t("image", { defaultValue: "Image" }), value: "image" },
+                  {
-                  { label: t("video", { defaultValue: "Video" }), value: "video" },
+                    label: t("image", { defaultValue: "Image" }),
-                  { label: t("text", { defaultValue: "Text" }), value: "document" },
+                    value: "image",
-                  { label: t("audio", { defaultValue: "Audio" }), value: "audio" },
+                  },
+                  {
+                    label: t("video", { defaultValue: "Video" }),
+                    value: "video",
+                  },
+                  {
+                    label: t("text", { defaultValue: "Text" }),
+                    value: "document",
+                  },
+                  {
+                    label: t("audio", { defaultValue: "Audio" }),
+                    value: "audio",
+                  },
                 ].map((tab) => (
                   <TabsTrigger
                     key={tab.value}
@@ -194,12 +209,12 @@ const NewContent = (props: { group: string; type: string }) => {
                           className="md:basis-1/2 lg:basis-1/3"
                         >
                           <div
-                            onClick={() =>
+                            // onClick={() =>
-                              router.push(
+                            //   router.push(
-                                prefixPath + `/image/detail/${image?.slug}`
+                            //     prefixPath + `/image/detail/${image?.slug}`
-                              )
+                            //   )
-                            }
+                            // }
-                            className="cursor-pointer relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
+                            className="relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
                           >
                             {/* Image with motion effect */}
                             <motion.div
@@ -207,6 +222,12 @@ const NewContent = (props: { group: string; type: string }) => {
                               whileHover={{ scale: 0.95 }}
                               transition={{ duration: 0.3 }}
                             >
+                              <Link
+                                href={
+                                  prefixPath + `/image/detail/${image?.slug}`
+                                }
+                              >
+                                {" "}
                                 <Image
                                   priority={true}
                                   placeholder={`data:image/svg+xml;base64,${toBase64(
@@ -218,6 +239,7 @@ const NewContent = (props: { group: string; type: string }) => {
                                   src={image?.smallThumbnailLink}
                                   className="w-full h-full object-cover"
                                 />
+                              </Link>
                             </motion.div>
 
                             {/* Badge category */}
@@ -248,15 +270,15 @@ const NewContent = (props: { group: string; type: string }) => {
                                   {image?.categoryName?.toUpperCase() ??
                                     "Giat Pimpinan"}
                                 </p>
-                                <p
+                                <Link
-                                  className="
+                                  href={
-        text-sm lg:text-base font-semibold text-black dark:text-white
+                                    prefixPath + `/image/detail/${image?.slug}`
-        line-clamp-4         /* LIMIT to 2 lines if plugin available */
+                                  }
-        /* or use min-h-[3rem] as fallback */
-      "
                                 >
+                                  <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
                                     {image?.title}
                                   </p>
+                                </Link>
                               </div>
                               {/* Optional metadata area (uncomment if needed) */}
                               {/* 
@@ -271,7 +293,7 @@ const NewContent = (props: { group: string; type: string }) => {
                       ))}
                     </CarouselContent>
 
-                    <div className="flex justify-center mt-4">
+                    <div className="flex justify-center mt-2">
                       {Array.from({ length: count }).map((_, index) => (
                         <button
                           key={index}
@@ -308,13 +330,14 @@ const NewContent = (props: { group: string; type: string }) => {
                           key={audio?.id}
                           className="md:basis-1/2 lg:basis-1/3"
                         >
-                          <div
+                          <Link
-                            onClick={() =>
+                            href={prefixPath + `/audio/detail/${audio?.slug}`}
-                              router.push(
+                            // onClick={() =>
-                                prefixPath + `/audio/detail/${audio?.slug}`
+                            //   router.push(
-                              )
+                            //     prefixPath + `/audio/detail/${audio?.slug}`
-                            }
+                            //   )
-                            className="cursor-pointer bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden"
+                            // }
+                            className="bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden"
                           >
                             {/* Icon Background */}
                             <div className="flex items-center justify-center bg-[#bb3523] w-full h-[170px] text-white">
@@ -347,7 +370,7 @@ const NewContent = (props: { group: string; type: string }) => {
                                 <Icon icon="formkit:eye" width="15" height="15" /> {audio?.clickCount}
                               </p> */}
                             </div>
-                          </div>
+                          </Link>
                         </CarouselItem>
                       ))}
                     </CarouselContent>
@@ -390,18 +413,23 @@ const NewContent = (props: { group: string; type: string }) => {
                           className="md:basis-1/2 lg:basis-1/3"
                         >
                           <div
-                            onClick={() =>
+                            // onClick={() =>
-                              router.push(
+                            //   router.push(
-                                prefixPath + `/video/detail/${video?.slug}`
+                            //     prefixPath + `/video/detail/${video?.slug}`
-                              )
+                            //   )
-                            }
+                            // }
-                            className="cursor-pointer relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
+                            className="relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
                           >
                             {/* Image with motion effect */}
                             <motion.div
                               className="w-full h-48 lg:h-60"
                               whileHover={{ scale: 0.95 }}
                               transition={{ duration: 0.3 }}
+                            >
+                              <Link
+                                href={
+                                  prefixPath + `/video/detail/${video?.slug}`
+                                }
                               >
                                 <Image
                                   priority={true}
@@ -414,6 +442,7 @@ const NewContent = (props: { group: string; type: string }) => {
                                   src={video?.smallThumbnailLink}
                                   className="w-full h-full object-cover"
                                 />
+                              </Link>
                             </motion.div>
 
                             {/* Badge category */}
@@ -444,10 +473,15 @@ const NewContent = (props: { group: string; type: string }) => {
                                   {video?.categoryName?.toUpperCase() ??
                                     "Giat Pimpinan"}
                                 </p>
-                                <p
+                                <Link
-                                  className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-5">
+                                  href={
+                                    prefixPath + `/video/detail/${video?.slug}`
+                                  }
+                                >
+                                  <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-5">
                                     {video?.title}
                                   </p>
+                                </Link>
                               </div>
                               {/* Optional metadata area (uncomment if needed) */}
                               {/* 
@@ -500,15 +534,18 @@ const NewContent = (props: { group: string; type: string }) => {
                         className="md:basis-1/2 lg:basis-1/3"
                       >
                         <div
-                          onClick={() =>
+                          // onClick={() =>
-                            router.push(
+                          //   router.push(
-                              prefixPath + `/document/detail/${text?.slug}`
+                          //     prefixPath + `/document/detail/${text?.slug}`
-                            )
+                          //   )
-                          }
+                          // }
-                          className="cursor-pointer rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500"
+                          className="rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500"
                         >
                           {/* Ikon di tengah dengan latar kuning */}
-                          <div className="bg-[#e0c350] flex items-center justify-center h-[170px] text-white">
+                          <Link
+                            href={prefixPath + `/document/detail/${text?.slug}`}
+                            className="bg-[#e0c350] flex items-center justify-center h-[170px] text-white"
+                          >
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
                               width="150"
@@ -520,7 +557,7 @@ const NewContent = (props: { group: string; type: string }) => {
                                 d="M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1zM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207zM7 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M7.5 9a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM7 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1M6 9.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M5.5 12a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"
                               />
                             </svg>
-                          </div>
+                          </Link>
 
                           {/* Konten bawah */}
                           <div className="p-4 flex flex-col gap-2">
@@ -530,10 +567,15 @@ const NewContent = (props: { group: string; type: string }) => {
                             </div>
 
                             {/* Judul */}
-                            <div className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
+                            <Link
+                              href={
+                                prefixPath + `/document/detail/${text?.slug}`
+                              }
+                            >
+                              <p className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
                                 {text?.title}
-                            </div>
+                              </p>
-
+                            </Link>
                             {/* Meta info */}
                             {/* <div className="text-gray-500 flex items-center text-xs gap-2">
                               <span>
@@ -592,9 +634,17 @@ const NewContent = (props: { group: string; type: string }) => {
           )}
         </div>
         <div className="flex items-center flex-row justify-center mt-3">
-          <div onClick={() => router.push(prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`)} className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523] hover:text-white hover:bg-[#bb3523]">
+          <Link
+            href={prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`}
+            // onClick={() =>
+            //   router.push(
+            //     prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`
+            //   )
+            // }
+            className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523] hover:text-white hover:bg-[#bb3523]"
+          >
             {t("seeAll", { defaultValue: "See All" })}
-          </div>
+          </Link>
         </div>
       </Reveal>
     </div>