fix: all card in media update

app/[locale]/(admin)/admin/content/video/detail/[id]/page.tsx

@@ -5,7 +5,7 @@ const VideoDetailPage = async () => {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="space-y-4">
+      <div className="space-y-4 bg-slate-100">
         <FormVideoDetail />
       </div>
     </div>

app/[locale]/(admin)/admin/content/video/update/[id]/page.tsx

@@ -1,10 +1,11 @@
 import FormVideoUpdate from "@/components/form/content/audio-visual/video-update-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
 
 const VideoUpdatePage = async () => {
   return (
     <div>
-      {/* <SiteBreadcrumb /> */}
+      <SiteBreadcrumb />
-      <div className="space-y-4">
+      <div className="space-y-4 bg-slate-100">
         <FormVideoUpdate />
       </div>
     </div>

components/form/content/audio-visual/video-detail-form.tsx

@@ -173,6 +173,7 @@ export default function FormVideoDetail() {
           htmlDescription: details?.htmlDescription,
           uploadedById: details?.createdById,
           files: details?.files || [],
+          thumbnailUrl: details?.thumbnailUrl || details?.thumbnail || "",
         };
         setDetail(mappedDetail);
         setFiles(details?.files || []);

components/form/content/audio-visual/video-update-form.tsx

@@ -103,7 +103,6 @@ export default function FormVideoUpdate() {
   const MySwal = withReactContent(Swal);
   const { id } = useParams() as { id: string };
   const router = useRouter();
-
   const [detail, setDetail] = useState<any>(null);
   const [categories, setCategories] = useState<Category[]>([]);
   const [tags, setTags] = useState<string[]>([]);
@@ -114,7 +113,6 @@ export default function FormVideoUpdate() {
   const [files, setFiles] = useState<FileWithPreview[]>([]);
   const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
   const [detailFiles, setDetailFiles] = useState<DetailFile[]>([]);
-
   const { getRootProps, getInputProps } = useDropzone({
     accept: {
       "video/mp4": [".mp4"],
@@ -275,9 +273,9 @@ export default function FormVideoUpdate() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="flex flex-col lg:flex-row gap-10">
+      <div className="flex flex-col lg:flex-row gap-10 border rounded-lg">
         {/* Left Side */}
-        <Card className="w-full lg:w-8/12 p-6">
+        <Card className="w-full lg:w-8/12 p-6 m-2">
           <h2 className="text-lg font-semibold mb-4">Update Video</h2>
 
           {/* Title */}
@@ -395,7 +393,7 @@ export default function FormVideoUpdate() {
         </Card>
 
         {/* Right Side */}
-        <div className="w-full lg:w-4/12 space-y-4">
+        <div className="w-full lg:w-4/12 space-y-4 m-2">
           <Card className="p-4">
             <Label>Creator</Label>
             <Controller
@@ -523,7 +521,7 @@ export default function FormVideoUpdate() {
             </div>
 
             <div className="flex justify-end gap-3 mt-5">
-              <Button type="submit">Update</Button>
+              <Button type="submit" className="border rounded-lg">Update</Button>
               <Button
                 type="button"
                 variant="outline"

components/landing-page/header.tsx

@@ -86,14 +86,13 @@ export default function Header() {
     fetchData();
   }, [slug]);
 
-  // ✅ Ambil data bookmark dari backend (bukan localStorage)
   useEffect(() => {
     const fetchBookmarks = async () => {
       const currentUserId: any = getCookiesDecrypt("uie");
       setUserId(currentUserId);
 
       if (!currentUserId) {
-        setBookmarkedIds(new Set()); // logout: reset
+        setBookmarkedIds(new Set()); 
         return;
       }
 

components/landing-page/media-update.tsx

@@ -71,15 +71,15 @@ export default function MediaUpdate() {
   function getTypeIdByContentType(contentType: string): string {
     switch (contentType) {
       case "audiovisual":
-        return "2"; 
+        return "2";
       case "foto":
-        return "1"; 
+        return "1";
       case "audio":
-        return "4"; 
+        return "4";
       case "text":
-        return "3"; 
+        return "3";
       default:
-        return "1"; 
+        return "1";
     }
   }
 
@@ -173,15 +173,15 @@ export default function MediaUpdate() {
     const filtered = dataToRender.filter((item) => {
       switch (contentType) {
         case "audiovisual":
-          return item.typeId === 2; 
+          return item.typeId === 2;
         case "audio":
-          return item.typeId === 4; 
+          return item.typeId === 4;
         case "foto":
-          return item.typeId === 1; 
+          return item.typeId === 1;
         case "text":
-          return item.typeId === 3; 
+          return item.typeId === 3;
         default:
-          return true; 
+          return true;
       }
     });
 
@@ -434,24 +434,57 @@ export default function MediaUpdate() {
             {filteredData.map((item) => (
               <SwiperSlide key={item.id}>
                 <div className="rounded-xl shadow-md overflow-hidden bg-white">
-                  <div className="w-full h-[204px] relative">
+                  {/* ✅ Kondisi: jika typeId = 3 (text) atau 4 (audio) tampilkan ikon, lainnya tampilkan thumbnail */}
-                    <Link href={getLink(item)}>
+                  {item.typeId === 3 ? (
-                      <Image
+                    // 📝 TEXT
-                        src={item.smallThumbnailLink || "/placeholder.png"}
+                    <div className="bg-[#e0c350] flex items-center justify-center h-[204px] text-white">
-                        alt={item.title || "No Title"}
+                      <svg
-                        fill
+                        xmlns="http://www.w3.org/2000/svg"
-                        className="object-cover cursor-pointer hover:opacity-90 transition-opacity"
+                        width="90"
-                      />
+                        height="90"
-                    </Link>
+                        viewBox="0 0 16 16"
-                  </div>
+                      >
+                        <path
+                          fill="currentColor"
+                          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.207z"
+                        />
+                      </svg>
+                    </div>
+                  ) : item.typeId === 4 ? (
+                    // 🎵 AUDIO
+                    <div className="flex items-center justify-center bg-[#bb3523] w-full h-[204px] text-white">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="100"
+                        height="100"
+                        viewBox="0 0 20 20"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
+                        />
+                      </svg>
+                    </div>
+                  ) : (
+                    // 🎬 FOTO / VIDEO (default)
+                    <div className="w-full h-[204px] relative">
+                      <Link href={getLink(item)}>
+                        <Image
+                          src={item.smallThumbnailLink || "/placeholder.png"}
+                          alt={item.title || "No Title"}
+                          fill
+                          className="object-cover cursor-pointer hover:opacity-90 transition-opacity"
+                        />
+                      </Link>
+                    </div>
+                  )}
+
+                  {/* Caption / info */}
                   <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">
                         {item.clientName || "Tanpa Kategori"}
                       </span>
-                      {/* <span className="text-xs font-medium text-[#b3882e] capitalize">
-                        {tipeKonten}
-                      </span> */}
                     </div>
                     <p className="text-xs text-gray-500 mb-1">
                       {formatTanggal(item.createdAt)}