fix: all content

app/[locale]/(public)/document/detail/[slug]/page.tsx

@@ -140,11 +140,19 @@ const DetailDocument = () => {
     }
   };
 
-  const sizes = [
+  const size = [{ label: "DOC" }, { label: "PPT" }, { label: "PDF" }];
-    { label: "DOC", value: "...KB" },
+
-    { label: "PPT", value: "...KB" },
+  function formatBytes(kb: any, decimals = 2) {
-    { label: "PDF", value: "...KB" },
+    if (kb == 0 || kb == null) return "0 KB";
-  ];
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+    const i = Math.floor(Math.log(kb) / Math.log(k));
+
+    return `${parseFloat((kb / k ** i).toFixed(dm))} ${sizes[i]}`;
+  }
 
   async function sendActivityLog(activityTypeId: number) {
     const data = {
@@ -499,14 +507,14 @@ const DetailDocument = () => {
             <h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("docSize")}</h4>
             <div className="border-t border-black my-4"></div>
             <div className="space-y-2">
-              {sizes.map((size: any) => (
+              {size.map((size: any) => (
                 <div className="flex flex-row justify-between">
                   <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
                     <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
-                    <div className="text-sm">{size.value}</div>
+                    <div className="text-sm">{formatBytes(size?.size)}</div>
                   </div>
                 </div>
               ))}

app/[locale]/(public)/image/detail/[slug]/page.tsx

@@ -22,6 +22,11 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 
+interface Size {
+  label: string;
+  value: string;
+}
+
 const DetailInfo = () => {
   const MySwal = withReactContent(Swal);
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -56,6 +61,7 @@ const DetailInfo = () => {
   let typeString = "image";
   const t = useTranslations("LandingPage");
 
+
   useEffect(() => {
     const timer = setTimeout(() => {
       setIsLoading(false);
@@ -149,13 +155,34 @@ const DetailInfo = () => {
     }
   };
 
-  const sizes = [
+  // const sizes = [
-    { label: "XL", value: "3198 x 1798 px" },
+  //   { label: "XL", value: "3198 x 1798 px" },
-    { label: "L", value: "2399 x 1349 px" },
+  //   { label: "L", value: "2399 x 1349 px" },
-    { label: "M", value: "1599 x 899 px" },
+  //   { label: "M", value: "1599 x 899 px" },
-    { label: "S", value: "1066 x 599 px" },
+  //   { label: "S", value: "1066 x 599 px" },
-    { label: "XS", value: "800 x 450 px" },
+  //   { label: "XS", value: "800 x 450 px" },
-  ];
+  // ];
+
+  const scaleFactors = {
+    XL: 2,
+    L: 1.5,
+    M: 1.25,
+    S: 1,
+    XS: 0.75,
+  };
+  const sizes: Size[] = Object.entries(scaleFactors).map(([label, factor]) => {
+    const width = Number(main?.widthPixel);
+    const height = Number(main?.heightPixel);
+  
+    if (isNaN(width) || isNaN(height) || width === 0) {
+      return { label, value: "Invalid size" };
+    }
+  
+    const newWidth = Math.round(width * factor);
+    const newHeight = Math.round((width * factor) / (width / height));
+  
+    return { label, value: `${newWidth} x ${newHeight} px` };
+  });
 
   async function sendActivityLog(activityTypeId: number) {
     const data = {
@@ -540,13 +567,11 @@ const DetailInfo = () => {
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
+                  <div key={size?.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={(e) => setImageSizeSelected(e.target.value)} className="text-red-600 focus:ring-red-600" />
+                    <input type="radio" name="size" value={size?.label} checked={selectedSize === size?.label} onChange={(e) => setImageSizeSelected(e.target.value)} className="text-red-600 focus:ring-red-600" />
-                    <div className="text-sm">{size.label}</div>
+                    <div className="text-sm">{size?.label}</div>
-                  </div>
-                  <div className="">
-                    <div className="text-sm">{size.value}</div>
                   </div>
+                  <div className="text-sm">{size?.value}</div>
                 </div>
               ))}
             </div>

app/[locale]/(public)/schedule/page.tsx

@@ -505,7 +505,7 @@ const Schedule = (props: any) => {
             <PopoverTrigger asChild>
               <a className="text-black dark:text-white flex flex-row w-fit gap-2 py-4 items-center cursor-pointer">
                 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                  <path fill="#000" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" />
+                  <path fill="currentColor" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" />
                 </svg>
                 Filter
                 <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
@@ -856,8 +856,8 @@ const Schedule = (props: any) => {
               </p>
             </AlertDialogDescription>
             <AlertDialogDescription>
-              <p className="flex flex-row items-start gap-2 ">
+              <p className="flex flex-row items-center gap-2 ">
-                <Icon icon="bxs:map" width={30} />
+                <Icon icon="bxs:map" fontSize={20} />
                 {detail?.address}
               </p>
             </AlertDialogDescription>

app/[locale]/(public)/video/detail/[slug]/page.tsx

@@ -22,6 +22,11 @@ import parse from "html-react-parser";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 
+interface Size {
+  label: string;
+  value: string;
+}
+
 const DetailVideo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
   const [selectedTab, setSelectedTab] = useState("video");
@@ -140,11 +145,10 @@ const DetailVideo = () => {
   };
 
   const sizes = [
-    { label: "XL", value: "3198 x 1798 px" },
+    { label: "FULL HD", value: "1920 x 1080 px" },
-    { label: "L", value: "2399 x 1349 px" },
+    { label: "HD", value: "1280 x 720 px" },
-    { label: "M", value: "1599 x 899 px" },
+    { label: "SD", value: "720 x 480 px" },
-    { label: "S", value: "1066 x 599 px" },
+    { label: "WEB", value: "640 x 360 px" },
-    { label: "XS", value: "800 x 450 px" },
   ];
 
   async function sendActivityLog(activityTypeId: number) {

app/[locale]/auth/forgot-password/page.tsx

@@ -21,9 +21,9 @@ const ForgotPassPage = () => {
           <div className=" h-full flex flex-col ">
             <div className="max-w-[524px] mx-auto  w-full  md:px-[42px] md:py-[44px] p-7 text-2xl text-default-900  mb-3 flex flex-col justify-center h-full">
               <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-                <Link href="/">
+                {/* <Link href="/">
                   <Logo />
-                </Link>
+                </Link> */}
               </div>
               <div className="text-center 2xl:mb-10 mb-5">
                 <h4 className="font-medium mb-4">Forgot Your Password?</h4>

components/landing-page/hero.tsx

@@ -68,7 +68,7 @@ const Hero: React.FC = () => {
             {heroData?.map((list: any) => (
               <CarouselItem key={list?.id}>
                 <div className="relative h-[310px] lg:h-[420px]">
-                  <Image src={list?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" />
+                  <Image src={list?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[850px] h-[310px] lg:h-[420px] rounded-lg object-cover" />
                   <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
                     <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span>
                     <Link href={`${locale}/image/detail/${list?.slug}`}>
@@ -89,8 +89,8 @@ const Hero: React.FC = () => {
               </CarouselItem>
             ))}
           </CarouselContent>
-          <CarouselPrevious />
+          <CarouselPrevious className="hover:bg-black ml-1 lg:ml-0" />
-          <CarouselNext />
+          <CarouselNext className="hover:bg-black mr-1 lg:mr-0" />
         </Carousel>
       )}
 

components/landing-page/navbar.tsx

@@ -708,7 +708,7 @@ const Navbar = () => {
 
       {/* Mobile Menu */}
       {menuOpen && (
-        <div className="lg:hidden absolute bg-[#f7f7f7] px-4 py-3 w-full space-y-3 z-50">
+        <div className="lg:hidden absolute bg-[#f7f7f7] dark:bg-slate-600 px-4 py-3 w-full space-y-3 z-50">
           <NavigationMenu>
             <NavigationMenuList>
               <NavigationMenuItem>

components/landing-page/new-content.tsx

@@ -129,8 +129,8 @@ const NewContent = (props: { group: string; type: string }) => {
                         </CarouselItem>
                       ))}
                     </CarouselContent>
-                    <CarouselPrevious />
+                    <CarouselPrevious className="hover:bg-black" />
-                    <CarouselNext />
+                    <CarouselNext className="hover:bg-black -mr-6" />
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">

components/ui/carousel.tsx

@@ -1,9 +1,7 @@
 "use client";
 
 import * as React from "react";
-import useEmblaCarousel, {
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-  type UseEmblaCarouselType,
-} from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 
 import { cn } from "@/lib/utils";
@@ -42,162 +40,109 @@ function useCarousel() {
   return context;
 }
 
-const Carousel = React.forwardRef<
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
-  HTMLDivElement,
+  const [carouselRef, api] = useEmblaCarousel(
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
     {
-      orientation = "horizontal",
+      ...opts,
-      opts,
+      axis: orientation === "horizontal" ? "x" : "y",
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
     },
-    ref
+    plugins
-  ) => {
+  );
-    const [carouselRef, api] = useEmblaCarousel(
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-      {
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins
-    );
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
 
-    const onSelect = React.useCallback((api: CarouselApi) => {
+  const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
+    if (!api) {
-        return;
+      return;
+    }
+
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
       }
+    },
+    [scrollPrev, scrollNext]
+  );
 
-      setCanScrollPrev(api.canScrollPrev());
+  React.useEffect(() => {
-      setCanScrollNext(api.canScrollNext());
+    if (!api || !setApi) {
-    }, []);
+      return;
+    }
 
-    const scrollPrev = React.useCallback(() => {
+    setApi(api);
-      api?.scrollPrev();
+  }, [api, setApi]);
-    }, [api]);
 
-    const scrollNext = React.useCallback(() => {
+  React.useEffect(() => {
-      api?.scrollNext();
+    if (!api) {
-    }, [api]);
+      return;
+    }
 
-    const handleKeyDown = React.useCallback(
+    onSelect(api);
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
+    api.on("reInit", onSelect);
-        if (event.key === "ArrowLeft") {
+    api.on("select", onSelect);
-          event.preventDefault();
-          scrollPrev();
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault();
-          scrollNext();
-        }
-      },
-      [scrollPrev, scrollNext]
-    );
 
-    React.useEffect(() => {
+    return () => {
-      if (!api || !setApi) {
+      api?.off("select", onSelect);
-        return;
+    };
-      }
+  }, [api, onSelect]);
 
-      setApi(api);
+  return (
-    }, [api, setApi]);
+    <CarouselContext.Provider
-
+      value={{
-    React.useEffect(() => {
+        carouselRef,
-      if (!api) {
+        api: api,
-        return;
+        opts,
-      }
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-
+        scrollPrev,
-      onSelect(api);
+        scrollNext,
-      api.on("reInit", onSelect);
+        canScrollPrev,
-      api.on("select", onSelect);
+        canScrollNext,
-
+      }}
-      return () => {
+    >
-        api?.off("select", onSelect);
+      <div ref={ref} onKeyDownCapture={handleKeyDown} className={cn("relative", className)} role="region" aria-roledescription="carousel" {...props}>
-      };
+        {children}
-    }, [api, onSelect]);
+      </div>
-
+    </CarouselContext.Provider>
-    return (
+  );
-      <CarouselContext.Provider
+});
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    );
-  }
-);
 Carousel.displayName = "Carousel";
 
-const CarouselContent = React.forwardRef<
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel();
 
   return (
     <div ref={carouselRef} className="overflow-hidden">
-      <div
+      <div ref={ref} className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)} {...props} />
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
     </div>
   );
 });
 CarouselContent.displayName = "CarouselContent";
 
-const CarouselItem = React.forwardRef<
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
   const { orientation } = useCarousel();
 
-  return (
+  return <div ref={ref} role="group" aria-roledescription="slide" className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)} {...props} />;
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  );
 });
 CarouselItem.displayName = "CarouselItem";
 
-const CarouselPrevious = React.forwardRef<
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
   return (
@@ -205,13 +150,7 @@ const CarouselPrevious = React.forwardRef<
       ref={ref}
       variant={variant}
       size={size}
-      className={cn(
+      className={cn("absolute h-6 w-6 rounded-full text-white bg-black -ml-6", orientation === "horizontal" ? "-left-0 top-1/2 -translate-y-1/2" : "-top-0 left-1/2 -translate-x-1/2 rotate-90", className)}
-        "absolute h-6 w-6 rounded-full text-white bg-black -ml-6",
-        orientation === "horizontal"
-          ? "-left-0 top-1/2 -translate-y-1/2"
-          : "-top-0 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
       {...props}
@@ -223,10 +162,7 @@ const CarouselPrevious = React.forwardRef<
 });
 CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselNext = React.forwardRef<
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
 
   return (
@@ -234,13 +170,7 @@ const CarouselNext = React.forwardRef<
       ref={ref}
       variant={variant}
       size={size}
-      className={cn(
+      className={cn("absolute h-6 w-6 rounded-full bg-black text-white -mr-6", orientation === "horizontal" ? "-right-0 top-1/2 -translate-y-1/2" : "-bottom-0 left-1/2 -translate-x-1/2 rotate-90", className)}
-        "absolute h-6 w-6 rounded-full bg-black text-white -mr-4",
-        orientation === "horizontal"
-          ? "-right-0 top-1/2 -translate-y-1/2"
-          : "-bottom-0 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
       disabled={!canScrollNext}
       onClick={scrollNext}
       {...props}
@@ -252,11 +182,4 @@ const CarouselNext = React.forwardRef<
 });
 CarouselNext.displayName = "CarouselNext";
 
-export {
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-};