From e365aa800794bc73c0adb5581ad7a7aa386f9d30 Mon Sep 17 00:00:00 2001
From: hanif salafi <hanifsalafi456@gmail.com>
Date: Thu, 3 Jul 2025 02:13:31 +0700
Subject: [PATCH] feat: update schedule on landing

---
 app/[locale]/(public)/schedule/page.tsx | 104 +++++++++++++++++-------
 1 file changed, 73 insertions(+), 31 deletions(-)

diff --git a/app/[locale]/(public)/schedule/page.tsx b/app/[locale]/(public)/schedule/page.tsx
index 09f4280d..a95a054d 100644
--- a/app/[locale]/(public)/schedule/page.tsx
+++ b/app/[locale]/(public)/schedule/page.tsx
@@ -16,7 +16,7 @@ import {
 import { CalendarIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { format } from "date-fns";
-import { cn } from "@/lib/utils";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import {
@@ -29,16 +29,13 @@ import {
 } from "@/service/schedule/schedule";
 import { usePathname, useRouter } from "@/i18n/routing";
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   Accordion,
   AccordionContent,
@@ -217,6 +214,7 @@ const Schedule = (props: any) => {
   const [regionFilter, setRegionFilter] = useState<any>([]);
   const [regionName, setRegionName] = useState<any>([]);
   const isPolda = asPath.includes("/polda");
+  const userId = getCookiesDecrypt("uie");
 
   async function doneTyping() {
     if (search?.length > 2) {
@@ -453,6 +451,10 @@ const Schedule = (props: any) => {
     getListDataCity();
   };
 
+  const goLogin = () => {
+    router.push("/auth/login");
+  };
+
   const deleteFilterhandler = (filterId: any) => {
     console.log("hapus", filterId);
     const deletedReg = regionName.filter((list: any) => list.id !== filterId);
@@ -486,7 +488,12 @@ const Schedule = (props: any) => {
             <p>
               <b>{itemFound[0]?.title}</b>
             </p>
-            {itemFound[0].isYoutube == true ? <p className="live">LIVE</p> : ""}
+            {itemFound[0].isYoutube == true ? (
+              <div className="flex items-center w-fit gap-1 bg-red-600 text-white px-2 py-1 rounded text-xs font-semibold mx-auto mt-2">
+                <div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
+                <span>LIVE</span>
+              </div>
+            ) : ""}
             {/* <p className="address">{itemFound[0].address}</p> */}
           </a>
         );
@@ -516,7 +523,12 @@ const Schedule = (props: any) => {
                   <p>
                     <b>{list.title}</b>
                   </p>
-                  {list.isYoutube == true ? <p className="live">LIVE</p> : ""}
+                  {list.isYoutube == true ? (
+                    <div className="flex items-center w-fit gap-1 bg-red-600 text-white px-2 py-1 rounded text-xs font-semibold mx-auto pt-4">
+                      <div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
+                      <span>LIVE</span>
+                    </div>
+                  ) : ""}
                   {/* <p className="address">{list.address}</p> */}
                 </DropdownMenuItem>
               ))}
@@ -1068,41 +1080,71 @@ const Schedule = (props: any) => {
         </div>
       </div>
 
-      <AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
+      <Dialog open={openDialog} onOpenChange={setOpenDialog}>
+        <DialogContent size="md">
+          <DialogHeader>
+            <DialogTitle>
               <h1 className="my-4 font-light">
                 JADWAL /{" "}
                 {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}
               </h1>
               <p className="font-bold">{detail?.title}</p>
-            </AlertDialogTitle>
-            <AlertDialogDescription>
+            </DialogTitle>
+            <DialogDescription>
               <p className="flex flex-row items-center gap-2">
                 <Icon icon="iconamoon:clock-thin" />
-                {detail?.date} {detail?.startTime} - {detail?.endTime}{" "}
+                {detail?.startDate} {detail?.startTime} - {detail?.endTime}{" "}
                 {detail?.timezone ? detail.timezone : "WIB"}
               </p>
-            </AlertDialogDescription>
-            <AlertDialogDescription>
+            </DialogDescription>
+            <DialogDescription>
               <p className="flex flex-row items-center gap-2 ">
                 <Icon icon="bxs:map" fontSize={20} />
                 {detail?.address}
               </p>
-            </AlertDialogDescription>
-            <AlertDialogDescription>
+            </DialogDescription>
+            <DialogDescription>
               <p className="flex flex-row items-center gap-2">
                 <Icon icon="ic:round-person" />
                 {detail?.speakerTitle || ""} {detail?.speakerName || ""}{" "}
               </p>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogAction>Close</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+            </DialogDescription>         
+            <DialogDescription>
+              {detail?.isYoutube == true ? (
+                userId == null ? (
+                  <div className="login-live-streaming mt-5 text-dark">
+                    <p className="mb-0">
+                      Untuk menonton Live Streaming silahkan
+                      <a className="login" onClick={() => goLogin()}>
+                        {" "}
+                        Login{" "}
+                      </a>
+                      terlebih dahulu
+                    </p>
+                  </div>
+                ) : (
+                  <div className="video-player mt-4">
+                    <iframe
+                      width="100%"
+                      height="480"
+                      src={`${detail?.youtubeEmbedUrl}`}
+                      frameBorder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      allowFullScreen
+                      title={detail?.title}
+                    />
+                  </div>
+                )
+              ) : (
+                ""
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button onClick={() => setOpenDialog(false)}>Close</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 };