diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/page.tsx
index 578b19b3..6330d0c9 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/page.tsx
@@ -1,19 +1,52 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Popover,
+  PopoverArrow,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 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 { detailSchedule, listSchedule, listScheduleNextPublic, listSchedulePrevPublic, listScheduleTodayPublic } from "@/service/schedule/schedule";
-import { useRouter } from "@/i18n/routing";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import {
+  detailSchedule,
+  listSchedule,
+  listScheduleNextPublic,
+  listSchedulePrevPublic,
+  listScheduleTodayPublic,
+  searchSchedules,
+} from "@/service/schedule/schedule";
+import { usePathname, useRouter } from "@/i18n/routing";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { close, loading } from "@/config/swal";
+import { useTranslations } from "next-intl";
+import { Input } from "@/components/ui/input";
+import { getUserLevelForAssignments } from "@/service/task";
+import { useParams } from "next/navigation";
 
 const timeList = [
   {
@@ -116,18 +149,44 @@ const timeList = [
 
 const Schedule = (props: any) => {
   const router = useRouter();
+  const asPath = usePathname();
   const [startDate, setStartDate] = useState<Date | undefined>(new Date());
   const [dateAWeek, setDateAWeek] = useState<string[]>([]);
-  const [scheduleSearch, setScheduleSearch] = useState();
   const [todayList, setTodayList] = useState([]);
   const [prevdayList, setPrevdayList] = useState([]);
   const [nextdayList, setNextdayList] = useState([]);
-  const [isOpen, setIsOpen] = React.useState(false);
   const [schedules, setSchedules] = useState([]);
   const [openDialog, setOpenDialog] = useState(false);
   const [detail, setDetail] = useState<any>();
   const [content, setContent] = useState();
   const { id } = props;
+  const t = useTranslations("LandingPage");
+  const [search, setSearch] = useState<any>();
+  const [scheduleSearch, setScheduleSearch] = useState<any>();
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+  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) {
+      const resSchedule = await searchSchedules(search);
+      setScheduleSearch(resSchedule.data?.data);
+    } else {
+      setScheduleSearch([]);
+    }
+  }
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
 
   useEffect(() => {
     async function getDataSchedule() {
@@ -141,26 +200,32 @@ const Schedule = (props: any) => {
 
   useEffect(() => {
     async function initState() {
-      getDataByDate();
-      // const group = isPolda ? asPath.split("/")[2] : regionFilter?.join(",");
-      const resSchedule = await listSchedule();
+      const group = isPolda ? asPath.split("/")[2] : regionFilter?.join(",");
+      const resSchedule = await listSchedule(group);
       setSchedules(resSchedule.data?.data);
       console.log(resSchedule);
       setDateAWeek(dateList);
+      getDataByDate(); // let today = new Date();
+      // if (!dateList.includes(today.getDate())){
+      //   changeNextWeek();
+      // }
+      console.log("GROUP", group);
     }
 
     initState();
   }, []);
 
   async function getDataByDate() {
-    const resToday = await listScheduleTodayPublic();
+    const group = isPolda ? asPath.split("/")[2] : regionFilter?.join(",");
+    const resToday = await listScheduleTodayPublic(group as string);
     const today = resToday.data?.data;
+    
     setTodayList(today);
-    const resNext = await listScheduleNextPublic();
+    const resNext = await listScheduleNextPublic(group as string);
     const next = resNext.data?.data;
 
     setNextdayList(next);
-    const resPrev = await listSchedulePrevPublic();
+    const resPrev = await listSchedulePrevPublic(group as string);
     const prev = resPrev.data?.data;
 
     setPrevdayList(prev);
@@ -200,13 +265,21 @@ const Schedule = (props: any) => {
 
   function getLastWeek(today: Date | undefined) {
     if (today) {
-      return new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
+      return new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() - 7
+      );
     }
   }
 
   function getNextWeek(today: Date | undefined) {
     if (today) {
-      return new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+      return new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() + 7
+      );
     }
   }
 
@@ -279,14 +352,49 @@ const Schedule = (props: any) => {
     setOpenDialog(true);
   };
 
+  const handleRegionFilter = (e: any) => {
+    let regions = [...regionFilter];
+
+    if (e.target.checked) {
+      regions = [...regionFilter, e.target.value];
+    } else {
+      regions.splice(regionFilter.indexOf(e.target.value), 1);
+    }
+
+    console.log(regions);
+    setRegionFilter(regions);
+  };
+
+  const goLogin = () => {
+    router.push("/auth");
+  };
+
+  const deleteFilterhandler = (filterId: any) => {
+    console.log("hapus", filterId);
+    const deletedReg = regionName.filter((list: any) => list.id !== filterId);
+    const filtered = regionFilter.filter((list: any) => list !== filterId);
+
+    setRegionName(deletedReg);
+    setRegionFilter(filtered);
+  };
+
   function setItemSchedule(id: string, date: string) {
-    const itemFound: any = schedules?.filter((s: any) => s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id));
+    const itemFound: any = schedules?.filter(
+      (s: any) =>
+        s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id)
+    );
 
     if (itemFound?.length > 0) {
       if (itemFound?.length == 1) {
         return (
           <a
-            className={`cursor-pointer text-center ${Number(itemFound[0]?.uploaderLevelNumber) == 1 ? "bg-yellow-300" : Number(itemFound[0]?.uploaderLevelNumber) == 2 ? "bg-blue-400" : "bg-gray-500"}`}
+            className={`cursor-pointer text-center ${
+              Number(itemFound[0]?.uploaderLevelNumber) == 1
+                ? "bg-yellow-300"
+                : Number(itemFound[0]?.uploaderLevelNumber) == 2
+                ? "bg-blue-400"
+                : "bg-gray-500"
+            }`}
             onClick={() => {
               getItem(itemFound[0]);
             }}
@@ -294,7 +402,14 @@ 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>
         );
@@ -306,10 +421,12 @@ const Schedule = (props: any) => {
       return (
         <div className="text-left">
           <p>
-            <b>{`${itemFound?.length} Jadwal Bersamaan`}</b>
+            <b>{t(`${itemFound?.length}simultaneousSchedule`)}</b>
           </p>
           <DropdownMenu>
-            <DropdownMenuTrigger className="font-bold text-blue-300">Lihat Jadwal</DropdownMenuTrigger>
+            <DropdownMenuTrigger className="font-bold text-blue-300">
+              {t("viewSchedule")}
+            </DropdownMenuTrigger>
             <DropdownMenuContent>
               {itemFound?.map((list: any) => (
                 <DropdownMenuItem
@@ -322,13 +439,23 @@ 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>
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
-          <div className="border-0 dropdown-menu schedule-list" aria-labelledby="view-schedule"></div>
+          <div
+            className="border-0 dropdown-menu schedule-list"
+            aria-labelledby="view-schedule"
+          ></div>
         </div>
       );
     }
@@ -337,140 +464,165 @@ const Schedule = (props: any) => {
   return (
     <>
       {/* Awal Komponen Kiri */}
-      <div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-[#f7f7f7] dark:bg-slate-800">
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant={"outline"} className={cn("w-[240px] py-4 justify-start text-left font-normal", !startDate && "text-muted-foreground")}>
-              <CalendarIcon />
-              {startDate ? format(startDate, "MMM yyyy") : <span>Pick a date</span>}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-auto p-0" align="start">
-            <Calendar
-              mode="single"
-              selected={startDate}
-              onSelect={(e) => {
-                handleChangeDate(e);
-              }}
-              initialFocus
-            />
-          </PopoverContent>
-        </Popover>
-
-        <div className="container relative py-4">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <a className="text-black 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" />
-                </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">
-                  <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
-                </svg>
-              </a>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="flex p-0 rounded-md">
-              <DropdownMenuItem className="flex flex-col items-center justify-between gap-1.5 p-2 border-b text-default-600 rounded-none">
-                <div className="gap-6 flex flex-row justify-end">
-                  <div> Filter</div>
-                  <button className="text-blue-400">Simpan</button>
-                </div>
-                <div className="border w-full border-t  border-slate-500"></div>
-                <div className="overflow-y-auto flex flex-col gap-2 h-[200px] ">
-                  <p>Region Filter</p>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                </div>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+      <div className="relative pl-4 lg:px-8 lg:py-10 py-4 bg-[#f7f7f7] dark:bg-slate-800 min-h-[80vh]">
+        <div className="flex flex-row items-center">
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant={"outline"}
+                className={cn(
+                  "w-[240px] py-3 justify-start text-left font-normal",
+                  !startDate && "text-muted-foreground"
+                )}
+              >
+                <CalendarIcon />
+                {startDate ? (
+                  format(startDate, "MMM yyyy")
+                ) : (
+                  <span>Pick a date</span>
+                )}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={startDate}
+                onSelect={(e) => {
+                  handleChangeDate(e);
+                }}
+                initialFocus
+              />
+            </PopoverContent>
+          </Popover>
         </div>
-        <div className="flex flex-col lg:flex-row gap-6">
-          <div className="h-[500px] overflow-y-auto w-3/4 ">
+        <div className="flex flex-col lg:flex-row gap-1">
+          <div className="h-[500px] overflow-y-auto md:overflow-y-auto w-full lg:w-3/4 ">
             <div className="container-fluid relative">
               <div className="grid grid-cols-1 mt-8">
-                <div className="relative block bg-white dark:bg-slate-900">
-                  <table className="w-full text-sm text-start">
+                <div className="relative block bg-white w-full dark:bg-slate-900 mx-auto">
+                  <table className="w-full text-sm text-start table-fixed">
                     <thead className="text-md">
                       <tr className="h-full">
-                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[210px]">
+                          {t("timeTable", { defaultValue: "Time Table" })}
+                        </th>
                         <th className="text-center border border-r-0 border-gray-100 dark:border-gray-700 py-6 w-[20px]">
-                          <a onClick={() => changePrevWeek()} className="cursor-pointer h-fit self-center bottom-0">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
-                              <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
+                          <a
+                            onClick={() => changePrevWeek()}
+                            className="cursor-pointer h-fit self-center bottom-0"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="40px"
+                              height="40px"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                fill="currentColor"
+                                d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7"
+                              />
                             </svg>
                           </a>
                         </th>
-                        <th className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[0] ? "bg-red-600 text-white" : ""}`}>
+                        <th
+                          className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[0]
+                              ? "bg-red-600 text-white"
+                              : ""
+                          }`}
+                        >
                           {/* <a className="cursor-pointer h-fit self-center bottom-0" >
                             <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                               <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
                             </svg>
                           </a>{" "} */}
                           <div className="flex flex-col ">
-                            <p className="text-2xl">{dateAWeek[0]?.split("-")[2]}</p>
-                            <p>Monday</p>
+                            <p className="text-2xl">
+                              {dateAWeek[0]?.split("-")[2]}
+                            </p>
+                            <p>{t("monday", { defaultValue: "Monday" })}</p>
                           </div>
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[1] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
-                          <div className="text-2xl">{dateAWeek[1]?.split("-")[2]}</div>Tuesday
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[1]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
+                          }`}
+                        >
+                          <div className="text-2xl">
+                            {dateAWeek[1]?.split("-")[2]}
+                          </div>
+                          {t("tuesday", { defaultValue: "Tuesday" })}
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[2] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
-                          <div className="text-2xl">{dateAWeek[2]?.split("-")[2]}</div>Wednesday
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[2]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
+                          }`}
+                        >
+                          <div className="text-2xl">
+                            {dateAWeek[2]?.split("-")[2]}
+                          </div>
+                          {t("wednesday", { defaultValue: "Wednesday" })}
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[3] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
-                          <div className="text-2xl">{dateAWeek[3]?.split("-")[2]}</div>Thursday
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[3]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
+                          }`}
+                        >
+                          <div className="text-2xl">
+                            {dateAWeek[3]?.split("-")[2]}
+                          </div>
+                          {t("thursday", { defaultValue: "Thursday" })}
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[4] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
-                          <div className="text-2xl">{dateAWeek[4]?.split("-")[2]}</div>Friday
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[4]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
+                          }`}
+                        >
+                          <div className="text-2xl">
+                            {dateAWeek[4]?.split("-")[2]}
+                          </div>
+                          {t("friday", { defaultValue: "Friday" })}
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[5] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
-                          <div className="text-2xl">{dateAWeek[5]?.split("-")[2]}</div>Saturday
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[5]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
+                          }`}
+                        >
+                          <div className="text-2xl">
+                            {dateAWeek[5]?.split("-")[2]}
+                          </div>
+                          {t("saturday", { defaultValue: "Saturday" })}
                         </th>
                         <th
                           onClick={() => changeNextWeek()}
                           className={`text-center border cursor-pointer border-r-0 border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
-                            new Date().toISOString().slice(0, 10) == dateAWeek[6] ? "bg-[#BE0106] text-white rounded-lg" : ""
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[6]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
                           }`}
                         >
                           <div className="flex flex-col ">
-                            <p className="text-2xl">{dateAWeek[6]?.split("-")[2]}</p>
-                            <p>Sunday</p>
+                            <p className="text-2xl">
+                              {dateAWeek[6]?.split("-")[2]}
+                            </p>
+                            <p>{t("sunday", { defaultValue: "Sunday" })}</p>
                           </div>
                           {/* <a  className="cursor-pointer h-fit p-0 m-0 self-center">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
@@ -478,10 +630,21 @@ const Schedule = (props: any) => {
                             </svg>
                           </a> */}
                         </th>
-                        <th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 py-6 w-[20px]">
-                          <a onClick={() => changeNextWeek()} className="cursor-pointer">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
-                              <path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
+                        <th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 pr-12 w-[20px]">
+                          <a
+                            onClick={() => changeNextWeek()}
+                            className="cursor-pointer"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="40px"
+                              height="40px"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                fill="currentColor"
+                                d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71"
+                              />
                             </svg>
                           </a>
                         </th>
@@ -490,16 +653,34 @@ const Schedule = (props: any) => {
                     <tbody>
                       {timeList.map((times) => (
                         <tr key={times.id}>
-                          <th className="text-center border border-gray-100 dark:border-gray-700 py-5">{times.time}</th>
-                          <td colSpan={2} className="p-3 border border-gray-100 dark:border-gray-700 ">
+                          <th className="text-center border border-gray-100 dark:border-gray-700 py-5">
+                            {times.time}
+                          </th>
+                          <td
+                            colSpan={2}
+                            className="p-3 border border-gray-100 dark:border-gray-700 "
+                          >
                             {setItemSchedule(times.id, dateList[0])}
                           </td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[1])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[2])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[3])}</td>
-                          <td className="p-3 border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[4])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[5])}</td>
-                          <td colSpan={2} className="border border-gray-100 dark:border-gray-700">
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[1])}
+                          </td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[2])}
+                          </td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[3])}
+                          </td>
+                          <td className="p-3 border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[4])}
+                          </td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[5])}
+                          </td>
+                          <td
+                            colSpan={2}
+                            className="border border-gray-100 dark:border-gray-700"
+                          >
                             {setItemSchedule(times.id, dateList[6])}
                           </td>
                         </tr>
@@ -511,15 +692,32 @@ const Schedule = (props: any) => {
             </div>
           </div>
 
-          {/* Component Kanan */}
-          <div className="w-1/4 flex flex-col gap-6">
+          {/* komponen Kanan */}
+          <div className="w-full lg:w-1/4 flex flex-col gap-6 ml-4">
             <div className="relative text-gray-600 dark:text-white">
-              <input type="text" placeholder="Masukkan Judul Jadwal" className="pl-8 pr-4 py-1 w-full border rounded-full text-sm  focus:outline-none" />
+              <input
+                onChange={(e) => setSearch(e.target.value)}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                type="text"
+                placeholder={t("titleSchedule", {
+                  defaultValue: "Title Schedule",
+                })}
+                className="pl-8 pr-4 py-1 w-full border rounded-full text-sm  focus:outline-none"
+              />
               <span className="absolute left-2 top-1/2 transform -translate-y-1/2">
-                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                >
                   <g fill="none" fill-rule="evenodd">
                     <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
-                    <path fill="currentColor" d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0" />
+                    <path
+                      fill="currentColor"
+                      d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0"
+                    />
                   </g>
                 </svg>
               </span>
@@ -557,12 +755,20 @@ const Schedule = (props: any) => {
                 </CollapsibleContent>
               ))}
             </Collapsible> */}
+
             <Accordion type="single" collapsible className="w-full">
               <AccordionItem value="item-1">
-                <AccordionTrigger>Jadwal Hari ini</AccordionTrigger>
+                <AccordionTrigger>
+                  {t("todaySchedule", { defaultValue: "Today Schedule" })}
+                </AccordionTrigger>
                 {todayList?.map((list: any) => (
-                  <AccordionContent key={list?.id} className="flex flex-row gap-3">
-                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                  <AccordionContent
+                    key={list?.id}
+                    className="flex flex-row gap-3"
+                  >
+                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
+                      {new Date(list.startDate).getDate()}
+                    </div>
                     <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
@@ -570,10 +776,10 @@ const Schedule = (props: any) => {
                         {list?.startTime} - {list?.endTime} WIB
                       </p>
                       <p className="flex flex-row items-start gap-2 ">
-                        <Icon icon="bxs:map" width={40} />
+                        <Icon icon="bxs:map" />
                         {list?.address}
                       </p>
-                      <p>Pembicara :</p>
+                      <p>{t("speaker", { defaultValue: "Speaker" })}</p>
                       <p className="flex flex-row items-center gap-2">
                         <Icon icon="ic:round-person" />
                         {list?.speakerTitle}&nbsp;{list?.speakerName}
@@ -584,10 +790,17 @@ const Schedule = (props: any) => {
               </AccordionItem>
 
               <AccordionItem value="item-2">
-                <AccordionTrigger>Jadwal Sebelumnya</AccordionTrigger>
+                <AccordionTrigger>
+                  {t("previousSchedule", { defaultValue: "Previous Schedule" })}
+                </AccordionTrigger>
                 {prevdayList?.map((list: any) => (
-                  <AccordionContent key={list?.id} className="flex flex-row gap-3">
-                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                  <AccordionContent
+                    key={list?.id}
+                    className="flex flex-row gap-3"
+                  >
+                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
+                      {new Date(list.startDate).getDate()}
+                    </div>
                     <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
@@ -595,10 +808,10 @@ const Schedule = (props: any) => {
                         {list?.startTime} - {list?.endTime} WIB
                       </p>
                       <p className="flex flex-row items-start gap-2 ">
-                        <Icon icon="bxs:map" width={40} />
+                        <Icon icon="bxs:map" />
                         {list?.address}
                       </p>
-                      <p>Pembicara :</p>
+                      <p>{t("speaker", { defaultValue: "Speaker" })}</p>
                       <p className="flex flex-row items-center gap-2">
                         <Icon icon="ic:round-person" />
                         {list?.speakerTitle}&nbsp;{list?.speakerName}
@@ -609,10 +822,17 @@ const Schedule = (props: any) => {
               </AccordionItem>
 
               <AccordionItem value="item-3">
-                <AccordionTrigger>Jadwal Selanjutnya</AccordionTrigger>
+                <AccordionTrigger>
+                  {t("nextSchedule", { defaultValue: "Next Schedule" })}
+                </AccordionTrigger>
                 {nextdayList?.map((list: any) => (
-                  <AccordionContent key={list?.id} className="flex flex-row gap-3">
-                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                  <AccordionContent
+                    key={list?.id}
+                    className="flex flex-row gap-3"
+                  >
+                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
+                      {new Date(list.startDate).getDate()}
+                    </div>
                     <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
@@ -620,10 +840,10 @@ const Schedule = (props: any) => {
                         {list?.startTime} - {list?.endTime} WIB
                       </p>
                       <p className="flex flex-row items-start gap-2 ">
-                        <Icon icon="bxs:map" width={40} />
+                        <Icon icon="bxs:map" />
                         {list?.address}
                       </p>
-                      <p>Pembicara :</p>
+                      <p>{t("speaker", { defaultValue: "Speaker" })}</p>
                       <p className="flex flex-row items-center gap-2">
                         <Icon icon="ic:round-person" />
                         {list?.speakerTitle}&nbsp;{list?.speakerName}
@@ -703,37 +923,71 @@ const Schedule = (props: any) => {
         </div>
       </div>
 
-      <AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              <h1 className="my-4 font-light">JADWAL / {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}</h1>
+      <Dialog open={openDialog} onOpenChange={setOpenDialog}>
+        <DialogContent size="md">
+          <DialogHeader>
+            <DialogTitle>
+              <h1 className="my-4 font-light">
+                {t("timeTable1")}
+                {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?.timezone ? detail.timezone : "WIB"}
+                {detail?.startDate} {detail?.startTime} - {detail?.endTime}{" "}
+                {detail?.timezone ? detail.timezone : "WIB"}
               </p>
-            </AlertDialogDescription>
-            <AlertDialogDescription>
-              <p className="flex flex-row items-start gap-2 ">
-                <Icon icon="bxs:map" width={30} />
+            </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}?autoplay=1&mute=1&enablejsapi=1&origin=${window.location.origin}`}
+                      frameBorder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowFullScreen
+                      title={detail?.title}
+                    />
+                  </div>
+                )
+              ) : (
+                ""
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button onClick={() => setOpenDialog(false)}>Close</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 };
diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/page.tsx
index 578b19b3..1155800b 100644
--- a/app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/page.tsx
+++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/page.tsx
@@ -1,19 +1,52 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Popover,
+  PopoverArrow,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 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 { detailSchedule, listSchedule, listScheduleNextPublic, listSchedulePrevPublic, listScheduleTodayPublic } from "@/service/schedule/schedule";
-import { useRouter } from "@/i18n/routing";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import {
+  detailSchedule,
+  listSchedule,
+  listScheduleNextPublic,
+  listSchedulePrevPublic,
+  listScheduleTodayPublic,
+  searchSchedules,
+} from "@/service/schedule/schedule";
+import { usePathname, useRouter } from "@/i18n/routing";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { close, loading } from "@/config/swal";
+import { useTranslations } from "next-intl";
+import { Input } from "@/components/ui/input";
+import { getUserLevelForAssignments } from "@/service/task";
+import { useParams } from "next/navigation";
 
 const timeList = [
   {
@@ -116,18 +149,44 @@ const timeList = [
 
 const Schedule = (props: any) => {
   const router = useRouter();
+  const asPath = usePathname();
   const [startDate, setStartDate] = useState<Date | undefined>(new Date());
   const [dateAWeek, setDateAWeek] = useState<string[]>([]);
-  const [scheduleSearch, setScheduleSearch] = useState();
   const [todayList, setTodayList] = useState([]);
   const [prevdayList, setPrevdayList] = useState([]);
   const [nextdayList, setNextdayList] = useState([]);
-  const [isOpen, setIsOpen] = React.useState(false);
   const [schedules, setSchedules] = useState([]);
   const [openDialog, setOpenDialog] = useState(false);
   const [detail, setDetail] = useState<any>();
   const [content, setContent] = useState();
   const { id } = props;
+  const t = useTranslations("LandingPage");
+  const [search, setSearch] = useState<any>();
+  const [scheduleSearch, setScheduleSearch] = useState<any>();
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+  const [regionFilter, setRegionFilter] = useState<any>([]);
+  const [regionName, setRegionName] = useState<any>([]);
+  const isSatker = asPath.includes("/satker");
+  const userId = getCookiesDecrypt("uie");
+
+  async function doneTyping() {
+    if (search?.length > 2) {
+      const resSchedule = await searchSchedules(search);
+      setScheduleSearch(resSchedule.data?.data);
+    } else {
+      setScheduleSearch([]);
+    }
+  }
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
 
   useEffect(() => {
     async function getDataSchedule() {
@@ -141,26 +200,32 @@ const Schedule = (props: any) => {
 
   useEffect(() => {
     async function initState() {
-      getDataByDate();
-      // const group = isPolda ? asPath.split("/")[2] : regionFilter?.join(",");
-      const resSchedule = await listSchedule();
+      const group = isSatker ? asPath.split("/")[2] : regionFilter?.join(",");
+      const resSchedule = await listSchedule(group);
       setSchedules(resSchedule.data?.data);
       console.log(resSchedule);
       setDateAWeek(dateList);
+      getDataByDate(); // let today = new Date();
+      // if (!dateList.includes(today.getDate())){
+      //   changeNextWeek();
+      // }
+      console.log("GROUP", group);
     }
 
     initState();
   }, []);
 
   async function getDataByDate() {
-    const resToday = await listScheduleTodayPublic();
+    const group = isSatker ? asPath.split("/")[2] : regionFilter?.join(",");
+    const resToday = await listScheduleTodayPublic(group as string);
     const today = resToday.data?.data;
+
     setTodayList(today);
-    const resNext = await listScheduleNextPublic();
+    const resNext = await listScheduleNextPublic(group as string);
     const next = resNext.data?.data;
 
     setNextdayList(next);
-    const resPrev = await listSchedulePrevPublic();
+    const resPrev = await listSchedulePrevPublic(group as string);
     const prev = resPrev.data?.data;
 
     setPrevdayList(prev);
@@ -200,13 +265,21 @@ const Schedule = (props: any) => {
 
   function getLastWeek(today: Date | undefined) {
     if (today) {
-      return new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
+      return new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() - 7
+      );
     }
   }
 
   function getNextWeek(today: Date | undefined) {
     if (today) {
-      return new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+      return new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() + 7
+      );
     }
   }
 
@@ -279,14 +352,49 @@ const Schedule = (props: any) => {
     setOpenDialog(true);
   };
 
+  const handleRegionFilter = (e: any) => {
+    let regions = [...regionFilter];
+
+    if (e.target.checked) {
+      regions = [...regionFilter, e.target.value];
+    } else {
+      regions.splice(regionFilter.indexOf(e.target.value), 1);
+    }
+
+    console.log(regions);
+    setRegionFilter(regions);
+  };
+
+  const goLogin = () => {
+    router.push("/auth");
+  };
+
+  const deleteFilterhandler = (filterId: any) => {
+    console.log("hapus", filterId);
+    const deletedReg = regionName.filter((list: any) => list.id !== filterId);
+    const filtered = regionFilter.filter((list: any) => list !== filterId);
+
+    setRegionName(deletedReg);
+    setRegionFilter(filtered);
+  };
+
   function setItemSchedule(id: string, date: string) {
-    const itemFound: any = schedules?.filter((s: any) => s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id));
+    const itemFound: any = schedules?.filter(
+      (s: any) =>
+        s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id)
+    );
 
     if (itemFound?.length > 0) {
       if (itemFound?.length == 1) {
         return (
           <a
-            className={`cursor-pointer text-center ${Number(itemFound[0]?.uploaderLevelNumber) == 1 ? "bg-yellow-300" : Number(itemFound[0]?.uploaderLevelNumber) == 2 ? "bg-blue-400" : "bg-gray-500"}`}
+            className={`cursor-pointer text-center ${
+              Number(itemFound[0]?.uploaderLevelNumber) == 1
+                ? "bg-yellow-300"
+                : Number(itemFound[0]?.uploaderLevelNumber) == 2
+                ? "bg-blue-400"
+                : "bg-gray-500"
+            }`}
             onClick={() => {
               getItem(itemFound[0]);
             }}
@@ -294,7 +402,14 @@ 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>
         );
@@ -306,10 +421,12 @@ const Schedule = (props: any) => {
       return (
         <div className="text-left">
           <p>
-            <b>{`${itemFound?.length} Jadwal Bersamaan`}</b>
+            <b>{t(`${itemFound?.length}simultaneousSchedule`)}</b>
           </p>
           <DropdownMenu>
-            <DropdownMenuTrigger className="font-bold text-blue-300">Lihat Jadwal</DropdownMenuTrigger>
+            <DropdownMenuTrigger className="font-bold text-blue-300">
+              {t("viewSchedule")}
+            </DropdownMenuTrigger>
             <DropdownMenuContent>
               {itemFound?.map((list: any) => (
                 <DropdownMenuItem
@@ -322,13 +439,23 @@ 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>
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
-          <div className="border-0 dropdown-menu schedule-list" aria-labelledby="view-schedule"></div>
+          <div
+            className="border-0 dropdown-menu schedule-list"
+            aria-labelledby="view-schedule"
+          ></div>
         </div>
       );
     }
@@ -337,140 +464,165 @@ const Schedule = (props: any) => {
   return (
     <>
       {/* Awal Komponen Kiri */}
-      <div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-[#f7f7f7] dark:bg-slate-800">
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant={"outline"} className={cn("w-[240px] py-4 justify-start text-left font-normal", !startDate && "text-muted-foreground")}>
-              <CalendarIcon />
-              {startDate ? format(startDate, "MMM yyyy") : <span>Pick a date</span>}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-auto p-0" align="start">
-            <Calendar
-              mode="single"
-              selected={startDate}
-              onSelect={(e) => {
-                handleChangeDate(e);
-              }}
-              initialFocus
-            />
-          </PopoverContent>
-        </Popover>
-
-        <div className="container relative py-4">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <a className="text-black 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" />
-                </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">
-                  <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
-                </svg>
-              </a>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="flex p-0 rounded-md">
-              <DropdownMenuItem className="flex flex-col items-center justify-between gap-1.5 p-2 border-b text-default-600 rounded-none">
-                <div className="gap-6 flex flex-row justify-end">
-                  <div> Filter</div>
-                  <button className="text-blue-400">Simpan</button>
-                </div>
-                <div className="border w-full border-t  border-slate-500"></div>
-                <div className="overflow-y-auto flex flex-col gap-2 h-[200px] ">
-                  <p>Region Filter</p>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                  <div className="mt-2 gap-2 flex flex-row">
-                    <Checkbox id="terms" />
-                    <p>POLDA METRO JAYA</p>
-                  </div>
-                </div>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+      <div className="relative pl-4 lg:px-8 lg:py-10 py-4 bg-[#f7f7f7] dark:bg-slate-800 min-h-[80vh]">
+        <div className="flex flex-row items-center">
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant={"outline"}
+                className={cn(
+                  "w-[240px] py-3 justify-start text-left font-normal",
+                  !startDate && "text-muted-foreground"
+                )}
+              >
+                <CalendarIcon />
+                {startDate ? (
+                  format(startDate, "MMM yyyy")
+                ) : (
+                  <span>Pick a date</span>
+                )}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={startDate}
+                onSelect={(e) => {
+                  handleChangeDate(e);
+                }}
+                initialFocus
+              />
+            </PopoverContent>
+          </Popover>
         </div>
-        <div className="flex flex-col lg:flex-row gap-6">
-          <div className="h-[500px] overflow-y-auto w-3/4 ">
+        <div className="flex flex-col lg:flex-row gap-1">
+          <div className="h-[500px] overflow-y-auto md:overflow-y-auto w-full lg:w-3/4 ">
             <div className="container-fluid relative">
               <div className="grid grid-cols-1 mt-8">
-                <div className="relative block bg-white dark:bg-slate-900">
-                  <table className="w-full text-sm text-start">
+                <div className="relative block bg-white w-full dark:bg-slate-900 mx-auto">
+                  <table className="w-full text-sm text-start table-fixed">
                     <thead className="text-md">
                       <tr className="h-full">
-                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[210px]">
+                          {t("timeTable", { defaultValue: "Time Table" })}
+                        </th>
                         <th className="text-center border border-r-0 border-gray-100 dark:border-gray-700 py-6 w-[20px]">
-                          <a onClick={() => changePrevWeek()} className="cursor-pointer h-fit self-center bottom-0">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
-                              <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
+                          <a
+                            onClick={() => changePrevWeek()}
+                            className="cursor-pointer h-fit self-center bottom-0"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="40px"
+                              height="40px"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                fill="currentColor"
+                                d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7"
+                              />
                             </svg>
                           </a>
                         </th>
-                        <th className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[0] ? "bg-red-600 text-white" : ""}`}>
+                        <th
+                          className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[0]
+                              ? "bg-red-600 text-white"
+                              : ""
+                          }`}
+                        >
                           {/* <a className="cursor-pointer h-fit self-center bottom-0" >
                             <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                               <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
                             </svg>
                           </a>{" "} */}
                           <div className="flex flex-col ">
-                            <p className="text-2xl">{dateAWeek[0]?.split("-")[2]}</p>
-                            <p>Monday</p>
+                            <p className="text-2xl">
+                              {dateAWeek[0]?.split("-")[2]}
+                            </p>
+                            <p>{t("monday", { defaultValue: "Monday" })}</p>
                           </div>
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[1] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
-                          <div className="text-2xl">{dateAWeek[1]?.split("-")[2]}</div>Tuesday
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[1]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
+                          }`}
+                        >
+                          <div className="text-2xl">
+                            {dateAWeek[1]?.split("-")[2]}
+                          </div>
+                          {t("tuesday", { defaultValue: "Tuesday" })}
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[2] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
-                          <div className="text-2xl">{dateAWeek[2]?.split("-")[2]}</div>Wednesday
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[2]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
+                          }`}
+                        >
+                          <div className="text-2xl">
+                            {dateAWeek[2]?.split("-")[2]}
+                          </div>
+                          {t("wednesday", { defaultValue: "Wednesday" })}
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[3] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
-                          <div className="text-2xl">{dateAWeek[3]?.split("-")[2]}</div>Thursday
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[3]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
+                          }`}
+                        >
+                          <div className="text-2xl">
+                            {dateAWeek[3]?.split("-")[2]}
+                          </div>
+                          {t("thursday", { defaultValue: "Thursday" })}
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[4] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
-                          <div className="text-2xl">{dateAWeek[4]?.split("-")[2]}</div>Friday
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[4]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
+                          }`}
+                        >
+                          <div className="text-2xl">
+                            {dateAWeek[4]?.split("-")[2]}
+                          </div>
+                          {t("friday", { defaultValue: "Friday" })}
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[5] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
-                          <div className="text-2xl">{dateAWeek[5]?.split("-")[2]}</div>Saturday
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[5]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
+                          }`}
+                        >
+                          <div className="text-2xl">
+                            {dateAWeek[5]?.split("-")[2]}
+                          </div>
+                          {t("saturday", { defaultValue: "Saturday" })}
                         </th>
                         <th
                           onClick={() => changeNextWeek()}
                           className={`text-center border cursor-pointer border-r-0 border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
-                            new Date().toISOString().slice(0, 10) == dateAWeek[6] ? "bg-[#BE0106] text-white rounded-lg" : ""
+                            new Date().toISOString().slice(0, 10) ==
+                            dateAWeek[6]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
                           }`}
                         >
                           <div className="flex flex-col ">
-                            <p className="text-2xl">{dateAWeek[6]?.split("-")[2]}</p>
-                            <p>Sunday</p>
+                            <p className="text-2xl">
+                              {dateAWeek[6]?.split("-")[2]}
+                            </p>
+                            <p>{t("sunday", { defaultValue: "Sunday" })}</p>
                           </div>
                           {/* <a  className="cursor-pointer h-fit p-0 m-0 self-center">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
@@ -478,10 +630,21 @@ const Schedule = (props: any) => {
                             </svg>
                           </a> */}
                         </th>
-                        <th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 py-6 w-[20px]">
-                          <a onClick={() => changeNextWeek()} className="cursor-pointer">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
-                              <path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
+                        <th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 pr-12 w-[20px]">
+                          <a
+                            onClick={() => changeNextWeek()}
+                            className="cursor-pointer"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="40px"
+                              height="40px"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                fill="currentColor"
+                                d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71"
+                              />
                             </svg>
                           </a>
                         </th>
@@ -490,16 +653,34 @@ const Schedule = (props: any) => {
                     <tbody>
                       {timeList.map((times) => (
                         <tr key={times.id}>
-                          <th className="text-center border border-gray-100 dark:border-gray-700 py-5">{times.time}</th>
-                          <td colSpan={2} className="p-3 border border-gray-100 dark:border-gray-700 ">
+                          <th className="text-center border border-gray-100 dark:border-gray-700 py-5">
+                            {times.time}
+                          </th>
+                          <td
+                            colSpan={2}
+                            className="p-3 border border-gray-100 dark:border-gray-700 "
+                          >
                             {setItemSchedule(times.id, dateList[0])}
                           </td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[1])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[2])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[3])}</td>
-                          <td className="p-3 border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[4])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[5])}</td>
-                          <td colSpan={2} className="border border-gray-100 dark:border-gray-700">
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[1])}
+                          </td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[2])}
+                          </td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[3])}
+                          </td>
+                          <td className="p-3 border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[4])}
+                          </td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[5])}
+                          </td>
+                          <td
+                            colSpan={2}
+                            className="border border-gray-100 dark:border-gray-700"
+                          >
                             {setItemSchedule(times.id, dateList[6])}
                           </td>
                         </tr>
@@ -511,15 +692,32 @@ const Schedule = (props: any) => {
             </div>
           </div>
 
-          {/* Component Kanan */}
-          <div className="w-1/4 flex flex-col gap-6">
+          {/* komponen Kanan */}
+          <div className="w-full lg:w-1/4 flex flex-col gap-6 ml-4">
             <div className="relative text-gray-600 dark:text-white">
-              <input type="text" placeholder="Masukkan Judul Jadwal" className="pl-8 pr-4 py-1 w-full border rounded-full text-sm  focus:outline-none" />
+              <input
+                onChange={(e) => setSearch(e.target.value)}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                type="text"
+                placeholder={t("titleSchedule", {
+                  defaultValue: "Title Schedule",
+                })}
+                className="pl-8 pr-4 py-1 w-full border rounded-full text-sm  focus:outline-none"
+              />
               <span className="absolute left-2 top-1/2 transform -translate-y-1/2">
-                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                >
                   <g fill="none" fill-rule="evenodd">
                     <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
-                    <path fill="currentColor" d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0" />
+                    <path
+                      fill="currentColor"
+                      d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0"
+                    />
                   </g>
                 </svg>
               </span>
@@ -557,12 +755,20 @@ const Schedule = (props: any) => {
                 </CollapsibleContent>
               ))}
             </Collapsible> */}
+
             <Accordion type="single" collapsible className="w-full">
               <AccordionItem value="item-1">
-                <AccordionTrigger>Jadwal Hari ini</AccordionTrigger>
+                <AccordionTrigger>
+                  {t("todaySchedule", { defaultValue: "Today Schedule" })}
+                </AccordionTrigger>
                 {todayList?.map((list: any) => (
-                  <AccordionContent key={list?.id} className="flex flex-row gap-3">
-                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                  <AccordionContent
+                    key={list?.id}
+                    className="flex flex-row gap-3"
+                  >
+                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
+                      {new Date(list.startDate).getDate()}
+                    </div>
                     <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
@@ -570,10 +776,10 @@ const Schedule = (props: any) => {
                         {list?.startTime} - {list?.endTime} WIB
                       </p>
                       <p className="flex flex-row items-start gap-2 ">
-                        <Icon icon="bxs:map" width={40} />
+                        <Icon icon="bxs:map" />
                         {list?.address}
                       </p>
-                      <p>Pembicara :</p>
+                      <p>{t("speaker", { defaultValue: "Speaker" })}</p>
                       <p className="flex flex-row items-center gap-2">
                         <Icon icon="ic:round-person" />
                         {list?.speakerTitle}&nbsp;{list?.speakerName}
@@ -584,10 +790,17 @@ const Schedule = (props: any) => {
               </AccordionItem>
 
               <AccordionItem value="item-2">
-                <AccordionTrigger>Jadwal Sebelumnya</AccordionTrigger>
+                <AccordionTrigger>
+                  {t("previousSchedule", { defaultValue: "Previous Schedule" })}
+                </AccordionTrigger>
                 {prevdayList?.map((list: any) => (
-                  <AccordionContent key={list?.id} className="flex flex-row gap-3">
-                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                  <AccordionContent
+                    key={list?.id}
+                    className="flex flex-row gap-3"
+                  >
+                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
+                      {new Date(list.startDate).getDate()}
+                    </div>
                     <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
@@ -595,10 +808,10 @@ const Schedule = (props: any) => {
                         {list?.startTime} - {list?.endTime} WIB
                       </p>
                       <p className="flex flex-row items-start gap-2 ">
-                        <Icon icon="bxs:map" width={40} />
+                        <Icon icon="bxs:map" />
                         {list?.address}
                       </p>
-                      <p>Pembicara :</p>
+                      <p>{t("speaker", { defaultValue: "Speaker" })}</p>
                       <p className="flex flex-row items-center gap-2">
                         <Icon icon="ic:round-person" />
                         {list?.speakerTitle}&nbsp;{list?.speakerName}
@@ -609,10 +822,17 @@ const Schedule = (props: any) => {
               </AccordionItem>
 
               <AccordionItem value="item-3">
-                <AccordionTrigger>Jadwal Selanjutnya</AccordionTrigger>
+                <AccordionTrigger>
+                  {t("nextSchedule", { defaultValue: "Next Schedule" })}
+                </AccordionTrigger>
                 {nextdayList?.map((list: any) => (
-                  <AccordionContent key={list?.id} className="flex flex-row gap-3">
-                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                  <AccordionContent
+                    key={list?.id}
+                    className="flex flex-row gap-3"
+                  >
+                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
+                      {new Date(list.startDate).getDate()}
+                    </div>
                     <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
@@ -620,10 +840,10 @@ const Schedule = (props: any) => {
                         {list?.startTime} - {list?.endTime} WIB
                       </p>
                       <p className="flex flex-row items-start gap-2 ">
-                        <Icon icon="bxs:map" width={40} />
+                        <Icon icon="bxs:map" />
                         {list?.address}
                       </p>
-                      <p>Pembicara :</p>
+                      <p>{t("speaker", { defaultValue: "Speaker" })}</p>
                       <p className="flex flex-row items-center gap-2">
                         <Icon icon="ic:round-person" />
                         {list?.speakerTitle}&nbsp;{list?.speakerName}
@@ -703,37 +923,71 @@ const Schedule = (props: any) => {
         </div>
       </div>
 
-      <AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              <h1 className="my-4 font-light">JADWAL / {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}</h1>
+      <Dialog open={openDialog} onOpenChange={setOpenDialog}>
+        <DialogContent size="md">
+          <DialogHeader>
+            <DialogTitle>
+              <h1 className="my-4 font-light">
+                {t("timeTable1")}
+                {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?.timezone ? detail.timezone : "WIB"}
+                {detail?.startDate} {detail?.startTime} - {detail?.endTime}{" "}
+                {detail?.timezone ? detail.timezone : "WIB"}
               </p>
-            </AlertDialogDescription>
-            <AlertDialogDescription>
-              <p className="flex flex-row items-start gap-2 ">
-                <Icon icon="bxs:map" width={30} />
+            </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}?autoplay=1&mute=1&enablejsapi=1&origin=${window.location.origin}`}
+                      frameBorder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowFullScreen
+                      title={detail?.title}
+                    />
+                  </div>
+                )
+              ) : (
+                ""
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button onClick={() => setOpenDialog(false)}>Close</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 };
diff --git a/app/[locale]/(public)/schedule/page.tsx b/app/[locale]/(public)/schedule/page.tsx
index 60bf9cc3..3ffbc938 100644
--- a/app/[locale]/(public)/schedule/page.tsx
+++ b/app/[locale]/(public)/schedule/page.tsx
@@ -45,6 +45,7 @@ import {
 import { close, loading } from "@/config/swal";
 import { useTranslations } from "next-intl";
 import { Input } from "@/components/ui/input";
+import { getUserLevelForAssignments } from "@/service/task";
 
 const timeList = [
   {
@@ -145,53 +146,53 @@ const timeList = [
   },
 ];
 
-const city = [
-  {
-    key: 1,
-    id: "metro-jaya",
-    name: "Polda Metro Jaya",
-  },
-  {
-    key: 2,
-    id: "jawa-barat",
-    name: "Polda Jawa Barat",
-  },
-  {
-    key: 3,
-    id: "banten",
-    name: "Polda Banten",
-  },
-  {
-    key: 4,
-    id: "jawa-tengah",
-    name: "Polda Jawa Tengah",
-  },
-  {
-    key: 5,
-    id: "daerah-istimewa-yogyakarta",
-    name: "Polda D.I Yogyakarta",
-  },
-  {
-    key: 6,
-    id: "jawa-timur",
-    name: "Polda Jawa Timur",
-  },
-  {
-    key: 7,
-    id: "aceh",
-    name: "Polda Aceh",
-  },
-  {
-    key: 8,
-    id: "sumatera-utara",
-    name: "Polda Sumatera Utara",
-  },
-  {
-    key: 9,
-    id: "sumatera-barat",
-    name: "Polda Sumatera Barat",
-  },
-];
+// const city = [
+//   {
+//     key: 1,
+//     id: "metro-jaya",
+//     name: "Polda Metro Jaya",
+//   },
+//   {
+//     key: 2,
+//     id: "jawa-barat",
+//     name: "Polda Jawa Barat",
+//   },
+//   {
+//     key: 3,
+//     id: "banten",
+//     name: "Polda Banten",
+//   },
+//   {
+//     key: 4,
+//     id: "jawa-tengah",
+//     name: "Polda Jawa Tengah",
+//   },
+//   {
+//     key: 5,
+//     id: "daerah-istimewa-yogyakarta",
+//     name: "Polda D.I Yogyakarta",
+//   },
+//   {
+//     key: 6,
+//     id: "jawa-timur",
+//     name: "Polda Jawa Timur",
+//   },
+//   {
+//     key: 7,
+//     id: "aceh",
+//     name: "Polda Aceh",
+//   },
+//   {
+//     key: 8,
+//     id: "sumatera-utara",
+//     name: "Polda Sumatera Utara",
+//   },
+//   {
+//     key: 9,
+//     id: "sumatera-barat",
+//     name: "Polda Sumatera Barat",
+//   },
+// ];
 
 const Schedule = (props: any) => {
   const router = useRouter();
@@ -215,6 +216,9 @@ const Schedule = (props: any) => {
   const [regionName, setRegionName] = useState<any>([]);
   const isPolda = asPath.includes("/polda");
   const userId = getCookiesDecrypt("uie");
+  const [city, setCity] = useState<{ key: number; id: string; name: string }[]>(
+    []
+  );
 
   async function doneTyping() {
     if (search?.length > 2) {
@@ -274,6 +278,29 @@ const Schedule = (props: any) => {
     initState();
   }, []);
 
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      const response = await getUserLevelForAssignments();
+      // setListDest(response?.data?.data.list);
+      console.log("polda", response?.data?.data?.list);
+      const data = response?.data?.data.list;
+      const temp = [];
+      for (const element of data) {
+        if (element.name.includes("SATKER")) continue;
+        const splitedPoldaName = element.name.toLowerCase().split(" ").slice(1);
+        const now = {
+          key: element.id,
+          id: splitedPoldaName.join("-"),
+          name: element.name,
+        };
+        temp.push(now);
+      }
+      console.log("QQQQQ", temp);
+      setCity(temp);
+    }
+    fetchPoldaPolres();
+  }, []);
+
   async function getDataByDate() {
     const resToday = await listScheduleTodayPublic();
     const today = resToday.data?.data;
@@ -452,7 +479,7 @@ const Schedule = (props: any) => {
   };
 
   const goLogin = () => {
-    router.push("/auth/login");
+    router.push("/auth");
   };
 
   const deleteFilterhandler = (filterId: any) => {
@@ -493,7 +520,9 @@ const Schedule = (props: any) => {
                 <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>
         );
@@ -528,7 +557,9 @@ const Schedule = (props: any) => {
                       <div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
                       <span>LIVE</span>
                     </div>
-                  ) : ""}
+                  ) : (
+                    ""
+                  )}
                   {/* <p className="address">{list.address}</p> */}
                 </DropdownMenuItem>
               ))}
@@ -865,7 +896,9 @@ const Schedule = (props: any) => {
                 onKeyUp={handleKeyUp}
                 onKeyDown={handleKeyDown}
                 type="text"
-                placeholder={t("titleSchedule", { defaultValue: "Title Schedule" })}
+                placeholder={t("titleSchedule", {
+                  defaultValue: "Title Schedule",
+                })}
                 className="pl-8 pr-4 py-1 w-full border rounded-full text-sm  focus:outline-none"
               />
               <span className="absolute left-2 top-1/2 transform -translate-y-1/2">
@@ -921,7 +954,9 @@ const Schedule = (props: any) => {
 
             <Accordion type="single" collapsible className="w-full">
               <AccordionItem value="item-1">
-                <AccordionTrigger>{t("todaySchedule", { defaultValue: "Today Schedule" })}</AccordionTrigger>
+                <AccordionTrigger>
+                  {t("todaySchedule", { defaultValue: "Today Schedule" })}
+                </AccordionTrigger>
                 {todayList?.map((list: any) => (
                   <AccordionContent
                     key={list?.id}
@@ -951,7 +986,9 @@ const Schedule = (props: any) => {
               </AccordionItem>
 
               <AccordionItem value="item-2">
-                <AccordionTrigger>{t("previousSchedule", { defaultValue: "Previous Schedule" })}</AccordionTrigger>
+                <AccordionTrigger>
+                  {t("previousSchedule", { defaultValue: "Previous Schedule" })}
+                </AccordionTrigger>
                 {prevdayList?.map((list: any) => (
                   <AccordionContent
                     key={list?.id}
@@ -981,7 +1018,9 @@ const Schedule = (props: any) => {
               </AccordionItem>
 
               <AccordionItem value="item-3">
-                <AccordionTrigger>{t("nextSchedule", { defaultValue: "Next Schedule" })}</AccordionTrigger>
+                <AccordionTrigger>
+                  {t("nextSchedule", { defaultValue: "Next Schedule" })}
+                </AccordionTrigger>
                 {nextdayList?.map((list: any) => (
                   <AccordionContent
                     key={list?.id}
@@ -997,7 +1036,7 @@ const Schedule = (props: any) => {
                         {list?.startTime} - {list?.endTime} WIB
                       </p>
                       <p className="flex flex-row items-start gap-2 ">
-                        <Icon icon="bxs:map"  />
+                        <Icon icon="bxs:map" />
                         {list?.address}
                       </p>
                       <p>{t("speaker", { defaultValue: "Speaker" })}</p>
@@ -1108,7 +1147,7 @@ const Schedule = (props: any) => {
                 <Icon icon="ic:round-person" />
                 {detail?.speakerTitle || ""} {detail?.speakerName || ""}{" "}
               </p>
-            </DialogDescription>         
+            </DialogDescription>
             <DialogDescription>
               {detail?.isYoutube == true ? (
                 userId == null ? (
diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx
index b595ad88..23630d9e 100644
--- a/components/landing-page/content-category.tsx
+++ b/components/landing-page/content-category.tsx
@@ -101,7 +101,7 @@ const ContentCategory = (props: { group?: string; type: string }) => {
           {/* Tombol See More / See Less */}
           {categories?.length > 4 && (
             <div className="flex items-center flex-row justify-center mt-6">
-              <Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
+              <Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white dark:bg-black hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
                 {seeAllValue ? t("seeLess", { defaultValue: "See Less" }) : t("seeMore", { defaultValue: "See More" })}
               </Button>
             </div>
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index 776b0c9f..3f87a37b 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -165,7 +165,7 @@ const NewContent = (props: { group: string; type: string }) => {
                     value={tab.value}
                     className={`
           rounded-md px-6 py-2 text-sm transition-all
-          bg-[#f5f5f5] text-[#666] hover:bg-[#e0e0e0]
+          bg-[#f5f5f5] text-[#666] dark:border dark:border-gray-500 hover:bg-[#e0e0e0] dark:bg-black
           data-[state=active]:bg-[#bb0000]
           data-[state=active]:text-white
           data-[state=active]:font-bold
@@ -201,7 +201,7 @@ const NewContent = (props: { group: string; type: string }) => {
                                 prefixPath + `/image/detail/${image?.slug}`
                               )
                             }
-                            className="cursor-pointer relative group overflow-hidden bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
+                            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"
                           >
                             {/* Image with motion effect */}
                             <motion.div
@@ -252,7 +252,7 @@ const NewContent = (props: { group: string; type: string }) => {
                                 </p>
                                 <p
                                   className="
-        text-sm lg:text-base font-semibold text-black
+        text-sm lg:text-base font-semibold text-black dark:text-white
         line-clamp-4         /* LIMIT to 2 lines if plugin available */
         /* or use min-h-[3rem] as fallback */
       "
@@ -316,7 +316,7 @@ const NewContent = (props: { group: string; type: string }) => {
                                 prefixPath + `/audio/detail/${audio?.slug}`
                               )
                             }
-                            className="cursor-pointer bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden"
+                            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"
                           >
                             {/* Icon Background */}
                             <div className="flex items-center justify-center bg-[#bb3523] w-full h-[170px] text-white">
@@ -340,7 +340,7 @@ const NewContent = (props: { group: string; type: string }) => {
                                   "GIAT PIMPINAN"}
                               </p>
 
-                              <p className="text-xl font-semibold text-black line-clamp-4">
+                              <p className="text-xl font-semibold text-black dark:text-white line-clamp-4">
                                 {audio?.title}
                               </p>
 
@@ -397,7 +397,7 @@ const NewContent = (props: { group: string; type: string }) => {
                                 prefixPath + `/video/detail/${video?.slug}`
                               )
                             }
-                            className="cursor-pointer relative group overflow-hidden bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
+                            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"
                           >
                             {/* Image with motion effect */}
                             <motion.div
@@ -447,7 +447,7 @@ const NewContent = (props: { group: string; type: string }) => {
                                     "Giat Pimpinan"}
                                 </p>
                                 <p
-                                  className="text-sm lg:text-base font-semibold text-black line-clamp-5">
+                                  className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-5">
                                   {video?.title}
                                 </p>
                               </div>
@@ -507,7 +507,7 @@ const NewContent = (props: { group: string; type: string }) => {
                               prefixPath + `/document/detail/${text?.slug}`
                             )
                           }
-                          className="cursor-pointer rounded-lg shadow-md overflow-hidden bg-white"
+                          className="cursor-pointer 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">
@@ -532,7 +532,7 @@ const NewContent = (props: { group: string; type: string }) => {
                             </div>
 
                             {/* Judul */}
-                            <div className="font-semibold text-gray-900 text-xl leading-snug line-clamp-4">
+                            <div className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
                               {text?.title}
                             </div>
 
diff --git a/components/landing-page/search-section-new.tsx b/components/landing-page/search-section-new.tsx
index aa17f0bc..28ee2d5d 100644
--- a/components/landing-page/search-section-new.tsx
+++ b/components/landing-page/search-section-new.tsx
@@ -100,7 +100,7 @@ const ScrollableContent = () => {
           <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
             <Select value={contentType} onValueChange={setContentType}>
               <SelectTrigger className="w-[180px] h-[55px]">
-                <span className="text-black">
+                <span className="text-black dark:text-white">
                   <svg
                     className="mx-2 dark:"
                     width="25"
@@ -119,7 +119,7 @@ const ScrollableContent = () => {
               </SelectTrigger>
               <SelectContent>
                 <SelectGroup>
-                  <SelectItem value="all">
+                  <SelectItem value="all" className="dark:text-white">
                     {t("allContent", { defaultValue: "All Content" })}
                   </SelectItem>
                   <SelectItem value="image">
@@ -188,7 +188,7 @@ const ScrollableContent = () => {
               )?.map((item: any, index: number) => (
                 <div
                   key={index}
-                  className={`bg-white rounded-lg shadow-md overflow-hidden ${
+                  className={`bg-white dark:bg-black dark:border dark:border-gray-500 rounded-lg shadow-md overflow-hidden ${
                     index === 0 ? "" : "flex"
                   }`}
                 >
@@ -250,10 +250,10 @@ const ScrollableContent = () => {
                     <p className="text-sm text-[#bb3523] font-bold mb-1 px-2">
                       {item.categoryName}
                     </p>
-                    <h3 className="text-sm font-semibold text-gray-800 px-2">
+                    <h3 className="text-sm font-semibold text-gray-800 dark:text-white px-2">
                       {item.title}
                     </h3>
-                    <p className="text-xs text-gray-500 mt-1 truncate px-2">
+                    <p className="text-xs text-gray-500 dark:text-white mt-1 truncate px-2">
                       {htmlToString(item.description)}
                     </p>
                   </Link>
@@ -307,7 +307,7 @@ const ScrollableContent = () => {
               )?.map((item: any, index: number) => (
                 <div
                   key={index}
-                  className={`bg-white rounded-lg shadow-md overflow-hidden ${
+                  className={`bg-white dark:bg-black dark:border dark:border-gray-500 rounded-lg shadow-md overflow-hidden ${
                     index === 0 ? "" : "flex"
                   }`}
                 >
@@ -367,10 +367,10 @@ const ScrollableContent = () => {
                     <p className="text-sm text-[#bb3523] font-bold mb-1 px-2">
                       {item.categoryName}
                     </p>
-                    <h3 className="text-sm font-semibold text-gray-800 px-2">
+                    <h3 className="text-sm font-semibold text-gray-800 dark:text-white px-2">
                       {item.title}
                     </h3>
-                    <p className="text-xs text-gray-500 mt-1 truncate px-2">
+                    <p className="text-xs text-gray-500 dark:text-white mt-1 truncate px-2">
                       {htmlToString(item.description)}
                     </p>
                   </Link>
diff --git a/components/landing-page/search-section-polda.tsx b/components/landing-page/search-section-polda.tsx
index a52b9c0a..d9f1f8d0 100644
--- a/components/landing-page/search-section-polda.tsx
+++ b/components/landing-page/search-section-polda.tsx
@@ -24,7 +24,7 @@ const SearchSectionPolda = () => {
         <AdvertisementPlacements placement="left"/>
       </div>
 
-      <div className="w-full xl:w-[70%] px-4 py-8 bg-white">
+      <div className="w-full xl:w-[70%] px-4 py-8 bg-white dark:bg-black">
         <ScrollableContentPolda />
         <NewContent group="polda" type="latest" />
         <NewContent group="polda" type="popular" />
diff --git a/components/landing-page/search-section-satker.tsx b/components/landing-page/search-section-satker.tsx
index 8b673b54..eb1f8bf2 100644
--- a/components/landing-page/search-section-satker.tsx
+++ b/components/landing-page/search-section-satker.tsx
@@ -25,7 +25,7 @@ const SearchSectionSatker = () => {
         <AdvertisementPlacements placement="left"/>
       </div>
 
-      <div className="w-full xl:w-[70%] px-4 py-8 bg-white">
+      <div className="w-full xl:w-[70%] px-4 py-8 bg-white dark:bg-black">
         <ScrollableContentSatker />
         <NewContent group="satker" type="latest" />
         <NewContent group="satker" type="popular" />
diff --git a/components/landing-page/search-section.tsx b/components/landing-page/search-section.tsx
index acca5827..a1a58d8d 100644
--- a/components/landing-page/search-section.tsx
+++ b/components/landing-page/search-section.tsx
@@ -33,7 +33,7 @@ const SearchSection = () => {
         <AdvertisementPlacements placement="left"/>
       </div>
 
-      <div className="w-full xl:w-[70%] px-4 py-8 bg-white">
+      <div className="w-full xl:w-[70%] px-4 py-8 bg-white dark:bg-black">
         <ScrollableContent />
         <NewContent group="mabes" type="latest" />
         <NewContent group="mabes" type="popular" />
diff --git a/service/schedule/schedule.ts b/service/schedule/schedule.ts
index cf3b2cfe..17e19e1c 100644
--- a/service/schedule/schedule.ts
+++ b/service/schedule/schedule.ts
@@ -48,22 +48,22 @@ export async function detailSchedule(id: any) {
   return httpGetInterceptor(url);
 }
 
-export async function listScheduleTodayPublic(group = null) {
+export async function listScheduleTodayPublic(group: string | null = null) {
   const url = `public/schedule/today?group=${group}`;
   return httpGet(url, null);
 }
 
-export async function listScheduleNextPublic(group = null) {
+export async function listScheduleNextPublic(group: string | null = null) {
   const url = `public/schedule/next-activity?group=${group}`;
   return httpGet(url, null);
 }
 
-export async function listSchedulePrevPublic(group = null) {
+export async function listSchedulePrevPublic(group: string | null = null) {
   const url = `public/schedule/prev-activity?group=${group}`;
   return httpGet(url, null);
 }
 
-export async function listSchedule(group = null) {
+export async function listSchedule(group: string | null = null) {
   const url = `public/schedule/list?group=${group}`;
   return httpGet(url, null);
 }