[QUDO-129,QUDO-122] feat:live report and media tracking

app/[locale]/(protected)/contributor/schedule/calendar-polri/component/calendar-polri-table.tsx

@@ -158,7 +158,7 @@ const CalendarPolriTable = () => {
         <CardTitle>
           <div className="flex items-center">
             <div className="flex-1 text-xl font-medium text-default-900">
-              {t("press-conference")} {t("schedule")}
+              {t("calendar-polri")} {t("schedule")}
             </div>
             <div className="flex-none">
               <Link href={"/contributor/schedule/press-conference/create"}>

app/[locale]/(protected)/contributor/schedule/live-report/component/live-report-table.tsx

@@ -57,6 +57,15 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 const LiveReportTable = () => {
   const router = useRouter();
@@ -81,6 +90,7 @@ const LiveReportTable = () => {
   const [limit, setLimit] = React.useState(10);
   const [search, setSearch] = React.useState<string>("");
   const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [selectedType, setSelectedType] = React.useState<string>("1");
   const columns = useTableColumns();
   const table = useReactTable({
     data: dataTable,
@@ -112,14 +122,14 @@ const LiveReportTable = () => {
 
   React.useEffect(() => {
     fetchData();
-  }, [page, showData, search, statusFilter]);
+  }, [page, showData, search, statusFilter, selectedType]);
 
   async function fetchData() {
     try {
       const res = await paginationSchedule(
         showData,
         page - 1,
-        1,
+        selectedType,
         search,
         statusFilter
       );
@@ -161,7 +171,7 @@ const LiveReportTable = () => {
               {t("live-report")} {t("schedule")}
             </div>
             <div className="flex-none">
-              <Link href={"/contributor/schedule/press-conference/create"}>
+              <Link href={"/contributor/schedule/live-report/create"}>
                 <Button color="primary" className="text-white">
                   <UploadIcon size={18} className="mr-2" />
                   {t("create-schedule")}
@@ -216,6 +226,24 @@ const LiveReportTable = () => {
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
+            <div className="border border-black rounded-md">
+              <Select
+                value={selectedType}
+                onValueChange={(value) => setSelectedType(value)}
+              >
+                <SelectTrigger className="w-[150px] text-black">
+                  <SelectValue placeholder="Tipe" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Tipe</SelectLabel>
+                    <SelectItem value="1">Konferensi Pers</SelectItem>
+                    <SelectItem value="2">Event</SelectItem>
+                    <SelectItem value="3">Pers Rilis</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
             <div className="">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>

app/[locale]/(protected)/contributor/schedule/live-report/create/page.tsx

@@ -2,13 +2,14 @@ import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
 import FormTask from "@/components/form/task/task-form";
 import FormPressConference from "@/components/form/schedule/press-conference-form";
+import FormLiveReport from "@/components/form/schedule/live-report-form";
 
 const LiveReportCreatePage = () => {
   return (
     <div>
       <SiteBreadcrumb />
       <div className="space-y-4">
-        <FormPressConference />
+        <FormLiveReport />
       </div>
     </div>
   );

app/[locale]/(protected)/contributor/schedule/live-report/detail/[id]/page.tsx

@@ -6,13 +6,14 @@ import FormPressConference from "@/components/form/schedule/press-conference-for
 import FormDetailPressConference from "@/components/form/schedule/press-conference-detail-form";
 import { useParams } from "next/navigation";
 import { id } from "date-fns/locale";
+import FormDetailLiveReport from "@/components/form/schedule/live-report-detail-form";
 
 const LiveReportDetailPage = () => {
   return (
     <div>
       <SiteBreadcrumb />
       <div className="space-y-4">
-        <FormDetailPressConference />
+        <FormDetailLiveReport />
       </div>
     </div>
   );

app/[locale]/(protected)/contributor/schedule/live-report/update/[id]/page.tsx

@@ -7,13 +7,14 @@ import FormDetailPressConference from "@/components/form/schedule/press-conferen
 import { useParams } from "next/navigation";
 import { id } from "date-fns/locale";
 import FormUpdatePressConference from "@/components/form/schedule/press-conference-update-form";
+import FormUpdateLiveReport from "@/components/form/schedule/live-report-update-form";
 
 const LiveReportUpdatePage = () => {
   return (
     <div>
       <SiteBreadcrumb />
       <div className="space-y-4">
-        <FormUpdatePressConference />
+        <FormUpdateLiveReport />
       </div>
     </div>
   );

components/form/schedule/live-report-detail-form.tsx

@@ -0,0 +1,407 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { useParams, useRouter } from "next/navigation";
+import { Switch } from "@/components/ui/switch";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { CalendarIcon, Clock1, Locate, MapPin, User2 } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { addDays, format, parseISO, setDate } from "date-fns";
+import { DateRange } from "react-day-picker";
+import TimePicker from "react-time-picker";
+import "react-time-picker/dist/TimePicker.css";
+import "react-clock/dist/Clock.css";
+import MapHome from "@/components/maps/MapHome";
+import { Textarea } from "@/components/ui/textarea";
+import { error, loading } from "@/lib/swal";
+import Cookies from "js-cookie";
+import {
+  detailSchedule,
+  listScheduleNext,
+  listScheduleToday,
+  postSchedule,
+} from "@/service/schedule/schedule";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { formatDateToIndonesian } from "@/utils/globals";
+import { formatDate } from "@fullcalendar/core/index.js";
+
+const taskSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  level: z.string().min(1, { message: "Judul diperlukan" }),
+  name: z.string().min(1, { message: "Judul diperlukan" }),
+  location: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+interface Detail {
+  id: number;
+  title: string;
+  address: string;
+  speakerTitle: string;
+  speakerName: string;
+  addressLat: number;
+  addressLong: number;
+}
+
+export default function FormDetailLiveReport() {
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const router = useRouter();
+  const [isLiveStreamingEnabled, setIsLiveStreamingEnabled] = useState(false);
+  type TaskSchema = z.infer<typeof taskSchema>;
+  const [startTime, setStartTime] = useState("08:00");
+  const [endTime, setEndTime] = useState("09:00");
+  const [date, setDate] = useState<DateRange | undefined>();
+  const [todayList, setTodayList] = useState([]);
+  const [nextDayList, setNextDayList] = useState([]);
+
+  const [detail, setDetail] = useState<Detail>();
+  const [refresh, setRefresh] = useState(false);
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<TaskSchema>({
+    resolver: zodResolver(taskSchema),
+    defaultValues: {
+      location: "",
+    },
+  });
+
+  async function getDataByDate() {
+    const resToday = await listScheduleToday();
+    const today = resToday?.data?.data;
+    setTodayList(today);
+    const resNext = await listScheduleNext();
+    const next = resNext?.data?.data;
+
+    setNextDayList(next);
+  }
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailSchedule(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+        if (details) {
+          setDate({
+            from: parseISO(details.startDate),
+            to: parseISO(details.endDate),
+          });
+        }
+        if (details) {
+          setStartTime(details.startTime);
+          setEndTime(details.endTime);
+        }
+        getDataByDate();
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const handleStartTime = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setStartTime(e.target.value);
+  };
+
+  const handleEndTime = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEndTime(e.target.value);
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-2">
+      <Card className="w-full lg:w-9/12">
+        <div className="px-6 py-6">
+          <p className="text-lg font-semibold mb-3">Form Konferensi Pers</p>
+          {detail !== undefined ? (
+            <div className=" gap-5 mb-5">
+              {/* Input Title */}
+              <div className="space-y-2">
+                <Label>Judul Kegiatan</Label>
+                <Controller
+                  control={control}
+                  name="title"
+                  render={({ field }) => (
+                    <Input
+                      type="text"
+                      value={detail?.title}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+                {errors.title?.message && (
+                  <p className="text-red-400 text-sm">{errors.title.message}</p>
+                )}
+              </div>
+              <div className="flex flex-row items-center">
+                <div className="mt-6">
+                  <Label>Live Streaming</Label>
+                  <div className="flex items-center gap-3">
+                    <p>Aktifkan fitur live streaming</p>
+                    <Switch
+                      defaultChecked={isLiveStreamingEnabled}
+                      color="primary"
+                      id="c2"
+                      onCheckedChange={(checked) =>
+                        setIsLiveStreamingEnabled(checked)
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {isLiveStreamingEnabled && (
+                <div className="mt-1">
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="Masukan ID youtube"
+                      />
+                    )}
+                  />
+                  {errors.title?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.title.message}
+                    </p>
+                  )}
+                </div>
+              )}
+
+              <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between mt-6">
+                <div className="flex flex-col space-y-2">
+                  <Label className="mr-3 mb-1">Tanggal</Label>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        id="date"
+                        variant={"outline"}
+                        className={cn(
+                          "w-[280px] lg:w-[250px] justify-start text-left font-normal px-0 md:px-0 lg:px-4",
+                          !date && "text-muted-foreground"
+                        )}
+                      >
+                        <CalendarIcon size={15} className="mr-3" />
+                        {date?.from ? (
+                          date.to ? (
+                            <>
+                              {format(date.from, "LLL dd, y")} -{" "}
+                              {format(date.to, "LLL dd, y")}
+                            </>
+                          ) : (
+                            format(date.from, "LLL dd, y")
+                          )
+                        ) : (
+                          <span>Pick a date</span>
+                        )}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        initialFocus
+                        mode="range"
+                        defaultMonth={date?.from}
+                        selected={date}
+                        onSelect={setDate}
+                        numberOfMonths={1}
+                      />
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="title">Rentang Waktu</Label>
+                  <div>
+                    <div className="flex flex-row items-center">
+                      <div className="col-6">
+                        <Input
+                          value={startTime}
+                          type="time"
+                          onChange={handleStartTime}
+                        />
+                      </div>
+                      <div className="col-6">
+                        <Input
+                          value={endTime}
+                          type="time"
+                          onChange={handleEndTime}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="mt-6">
+                {/* Kirim setValue ke MapHome */}
+                <MapHome
+                  draggable
+                  setLocation={(location) => setValue("location", location)}
+                />
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="location"
+                  render={({ field }) => (
+                    <Textarea
+                      rows={3}
+                      value={detail?.address}
+                      onChange={field.onChange}
+                      placeholder="Masukan lokasi"
+                    />
+                  )}
+                />
+                <div className="invalid-feedback">
+                  {errors.location?.message}
+                </div>
+              </div>
+              <p className="text-sm my-2 font-semiboldc mt-6">
+                DI SAMPAIKAN OLEH
+              </p>
+              <div className="flex flex-col ">
+                <div className="mt-1 space-y-2">
+                  <Label>Nama Pangkat</Label>
+                  <Controller
+                    control={control}
+                    name="level"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        value={detail?.speakerTitle}
+                        onChange={field.onChange}
+                        placeholder="Masukan Nama Pangkat"
+                      />
+                    )}
+                  />
+                  {errors.level?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.level.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="flex flex-col my-3">
+                <div className="mt-1 space-y-2">
+                  <Label>Nama Lengkap</Label>
+                  <Controller
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        value={detail?.speakerName}
+                        onChange={field.onChange}
+                        placeholder="Masukan Nama Lengkap"
+                      />
+                    )}
+                  />
+                  {errors.name?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.name.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          ) : (
+            ""
+          )}
+          {/* Submit Button
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                Submit
+              </Button>
+            </div> */}
+        </div>
+      </Card>
+      <Card className="w-full lg:w-3/12">
+        <Accordion type="single" collapsible>
+          {/* Jadwal Hari Ini */}
+          <AccordionItem value="today">
+            <AccordionTrigger className="font-semibold">
+              Jadwal Hari Ini
+            </AccordionTrigger>
+            <AccordionContent>
+              {todayList?.length > 0 ? (
+                <ul className="list-disc ml-4">
+                  {todayList.map((item: any, index) => (
+                    <li key={index} className="py-1">
+                      {item.name}
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="text-gray-500">Tidak ada jadwal hari ini</p>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+
+          {/* Jadwal Selanjutnya */}
+          <AccordionItem value="next">
+            <AccordionTrigger className="font-semibold">
+              Jadwal Selanjutnya
+            </AccordionTrigger>
+            <AccordionContent>
+              {nextDayList?.length > 0 ? (
+                <div className="list-disc ">
+                  {nextDayList.map((item: any, index) => (
+                    <div key={index} className="">
+                      <li className="text-base font-semibold">{item.title}</li>
+                      <p className="text-sm ml-5 flex my-2">
+                        <CalendarIcon size={20} />
+                        {formatDate(item?.startDate)}-
+                        {formatDate(item?.endDate)}
+                      </p>
+                      <p className="text-sm ml-5 flex my-2">
+                        <Clock1 size={20} />
+                        {item?.startTime}-{item?.endTime}
+                      </p>
+                      <p className="text-sm ml-5 flex items-center my-2">
+                        <MapPin size={50} />
+                        {item?.address}
+                      </p>
+                      <p className="text-sm ml-5">Disampaikan oleh:</p>
+                      <p className="text-sm ml-5 flex my-2">
+                        <User2 />
+                        {item?.speakerTitle} {item?.speakerName}
+                      </p>
+                    </div>
+                    // <p>{item.startDate}</p>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-gray-500">Tidak ada jadwal selanjutnya</p>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </Card>
+    </div>
+  );
+}

components/form/schedule/live-report-form.tsx

@@ -0,0 +1,384 @@
+"use client";
+import React, { useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { Switch } from "@/components/ui/switch";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { addDays, format, setDate } from "date-fns";
+import { DateRange } from "react-day-picker";
+import TimePicker from "react-time-picker";
+import "react-time-picker/dist/TimePicker.css";
+import "react-clock/dist/Clock.css";
+import { register } from "module";
+import MapHome from "@/components/maps/MapHome";
+import { Textarea } from "@/components/ui/textarea";
+import { error } from "@/lib/swal";
+import Cookies from "js-cookie";
+import { postSchedule } from "@/service/schedule/schedule";
+import { useRouter } from "@/i18n/routing";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const taskSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  level: z.string().min(1, { message: "Judul diperlukan" }),
+  name: z.string().min(1, { message: "Judul diperlukan" }),
+  location: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+export default function FormLiveReport() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  const [isLiveStreamingEnabled, setIsLiveStreamingEnabled] = useState(false);
+  type TaskSchema = z.infer<typeof taskSchema>;
+  const [startTime, setStartTime] = useState("08:00");
+  const [endTime, setEndTime] = useState("09:00");
+  const [scheduleTypeId, setScheduleTypeId] = React.useState<string>("1");
+
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2024, 0, 1),
+  });
+
+  const handleStartTime = (e: any) => {
+    setStartTime(e.target.value);
+  };
+
+  const handleEndTime = (e: any) => {
+    setEndTime(e.target.value);
+  };
+  // State for various form fields
+
+  const [assignmentType, setAssignmentType] = useState("mediahub");
+  const [assignmentCategory, setAssignmentCategory] = useState("publication");
+
+  const [selectedTarget, setSelectedTarget] = useState("all");
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<TaskSchema>({
+    resolver: zodResolver(taskSchema),
+    defaultValues: {
+      location: "",
+    },
+  });
+
+  const save = async (data: TaskSchema) => {
+    const requestData = {
+      title: data.title,
+      address: data.location,
+      speakerTitle: data.level,
+      speakerName: data.name,
+      startTime, // Start time from state
+      endTime, // End time from state
+      addressLat: "0.0", // Replace with actual latitude
+      addressLong: "0.0", // Replace with actual longitude
+      startDate: date?.from ? format(date.from, "yyyy-MM-dd") : null,
+      endDate: date?.to ? format(date.to, "yyyy-MM-dd") : null,
+      isYoutube: isLiveStreamingEnabled,
+      scheduleTypeId: Number(scheduleTypeId),
+    };
+
+    console.log("Form Data Submitted:", requestData);
+
+    const response = await postSchedule(requestData);
+    if (response?.error) {
+      error(response?.message);
+      return false;
+    }
+
+    Cookies.set("scheduleId", response?.data?.data.id, {
+      expires: 1,
+    });
+
+    // Optional: Use Swal for success feedback
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/contributor/schedule/live-report");
+    });
+  };
+
+  const onSubmit = (data: TaskSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-2">
+      <Card className="w-full lg:w-9/12">
+        <div className="px-6 py-6">
+          <p className="text-lg font-semibold mb-3">Form Konferensi Pers</p>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className=" gap-5 mb-5">
+              {/* Input Title */}
+              <div className="space-y-2">
+                <Label>Judul Kegiatan</Label>
+                <Controller
+                  control={control}
+                  name="title"
+                  render={({ field }) => (
+                    <Input
+                      size={"md"}
+                      type="text"
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Masukan Judul"
+                    />
+                  )}
+                />
+                {errors.title?.message && (
+                  <p className="text-red-400 text-sm">{errors.title.message}</p>
+                )}
+              </div>
+              <div className="flex flex-row items-center">
+                <div className="mt-4 mb-3">
+                  <Label>Live Streaming</Label>
+                  <div className="flex items-center gap-3">
+                    <Label>Aktifkan fitur live streaming</Label>
+                    <Switch
+                      defaultChecked={isLiveStreamingEnabled}
+                      color="primary"
+                      id="c2"
+                      onCheckedChange={(checked) =>
+                        setIsLiveStreamingEnabled(checked)
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {isLiveStreamingEnabled && (
+                <div className="mb-2 mt-1">
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="Masukan ID youtube"
+                      />
+                    )}
+                  />
+                  {errors.title?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.title.message}
+                    </p>
+                  )}
+                </div>
+              )}
+              <div className="flex flex-col space-y-2">
+                <Label className="mr-3 mb-1">Tipe</Label>
+                <Select onValueChange={(value) => setScheduleTypeId(value)}>
+                  <SelectTrigger className="w-full ">
+                    <SelectValue placeholder="Masukan Tipe" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectLabel>Tipe</SelectLabel>
+                      <SelectItem value="1">Konferensi Pers</SelectItem>
+                      <SelectItem value="2">Event</SelectItem>
+                      <SelectItem value="3">Pers Rilis</SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col lg:flex-row mb-4 mt-2 items-start lg:items-center justify-between">
+                <div className="flex flex-col space-y-2">
+                  <Label className="mr-3 mb-1">Tanggal</Label>
+                  <Popover>
+                    <PopoverTrigger asChild className="px-0">
+                      <Button
+                        size="md"
+                        id="date"
+                        variant={"outline"}
+                        className={cn(
+                          "w-[280px] lg:w-[250px] justify-start text-left font-normal border border-slate-300 px-0 md:px-0 lg:px-4",
+                          !date && "text-muted-foreground"
+                        )}
+                      >
+                        <CalendarIcon size={15} className="mr-3" />
+                        {date?.from ? (
+                          date.to ? (
+                            <>
+                              {format(date.from, "LLL dd, y")} -{" "}
+                              {format(date.to, "LLL dd, y")}
+                            </>
+                          ) : (
+                            format(date.from, "LLL dd, y")
+                          )
+                        ) : (
+                          <span>Pick a date</span>
+                        )}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        initialFocus
+                        mode="range"
+                        defaultMonth={date?.from}
+                        selected={date}
+                        onSelect={setDate}
+                        numberOfMonths={1}
+                      />
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="title">Rentang Waktu</Label>
+                  <div className="">
+                    <div className="flex flex-row items-center">
+                      <div className="col-6">
+                        <Input
+                          defaultValue="08:00"
+                          type="time"
+                          onChange={(e) => handleStartTime(e)}
+                        />
+                      </div>
+                      <div className="col-6">
+                        <Input
+                          defaultValue="09:00"
+                          type="time"
+                          onChange={(e) => handleEndTime(e)}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div>
+                {/* Kirim setValue ke MapHome */}
+                <MapHome
+                  draggable
+                  setLocation={(location) => setValue("location", location)}
+                />
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="location"
+                  render={({ field }) => (
+                    <Textarea
+                      rows={3}
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Masukan lokasi"
+                    />
+                  )}
+                />
+                <div className="invalid-feedback">
+                  {errors.location?.message}
+                </div>
+              </div>
+              <p className="text-sm mt-4 font-semibold">DI SAMPAIKAN OLEH</p>
+              <div className="flex flex-col ">
+                <div className="mt-1 space-y-2">
+                  <Label>Nama Pangkat</Label>
+                  <Controller
+                    control={control}
+                    name="level"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="Masukan Nama Pangkat"
+                      />
+                    )}
+                  />
+                  {errors.level?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.level.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="flex flex-col my-3">
+                <div className="mt-1 space-y-2">
+                  <Label>Nama Lengkap</Label>
+                  <Controller
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="Masukan Nama Lengkap"
+                      />
+                    )}
+                  />
+                  {errors.name?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.name.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                Submit
+              </Button>
+            </div>
+          </form>
+        </div>
+      </Card>
+      <Card className="w-full lg:w-3/12">
+        <div className="px-3 py-3">Jadwal Selanjutnya</div>
+      </Card>
+    </div>
+  );
+}

components/form/schedule/live-report-update-form.tsx

@@ -0,0 +1,409 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { useParams, useRouter } from "next/navigation";
+import { Switch } from "@/components/ui/switch";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { addDays, format, parseISO, setDate } from "date-fns";
+import { DateRange } from "react-day-picker";
+import TimePicker from "react-time-picker";
+import "react-time-picker/dist/TimePicker.css";
+import "react-clock/dist/Clock.css";
+import MapHome from "@/components/maps/MapHome";
+import { Textarea } from "@/components/ui/textarea";
+import { error, loading } from "@/lib/swal";
+import Cookies from "js-cookie";
+import { detailSchedule, postSchedule } from "@/service/schedule/schedule";
+
+const taskSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  level: z.string().min(1, { message: "Judul diperlukan" }),
+  name: z.string().min(1, { message: "Judul diperlukan" }),
+  location: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+interface Detail {
+  id: number;
+  title: string;
+  address: string;
+  speakerTitle: string;
+  speakerName: string;
+  addressLat: number;
+  addressLong: number;
+}
+
+export default function FormUpdateLiveReport() {
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const router = useRouter();
+  const MySwal = withReactContent(Swal);
+  const [isLiveStreamingEnabled, setIsLiveStreamingEnabled] = useState(false);
+  type TaskSchema = z.infer<typeof taskSchema>;
+  const [startTime, setStartTime] = useState("08:00");
+  const [endTime, setEndTime] = useState("09:00");
+  const [date, setDate] = useState<DateRange | undefined>();
+
+  const [detail, setDetail] = useState<Detail>();
+  const [refresh, setRefresh] = useState(false);
+  const [location, setLocation] = useState("");
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<TaskSchema>({
+    resolver: zodResolver(taskSchema),
+    defaultValues: {
+      location: "",
+    },
+  });
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailSchedule(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+        if (details) {
+          setDate({
+            from: parseISO(details.startDate),
+            to: parseISO(details.endDate),
+          });
+        }
+        if (details) {
+          setStartTime(details.startTime);
+          setEndTime(details.endTime);
+          setLocation(details.address);
+        }
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const handleStartTime = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setStartTime(e.target.value);
+  };
+
+  const handleEndTime = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEndTime(e.target.value);
+  };
+
+  const handleLocationChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setLocation(value);
+    setValue("location", value);
+  };
+
+  const save = async (data: TaskSchema) => {
+    const requestData: {
+      id?: number;
+      title: string;
+      address: string;
+      speakerTitle: string;
+      speakerName: string;
+      startTime: string;
+      endTime: string;
+      addressLat: string;
+      addressLong: string;
+      startDate: string | null;
+      endDate: string | null;
+      isYoutube: boolean;
+      scheduleTypeId: number;
+    } = {
+      title: data.title,
+      address: data.location,
+      speakerTitle: data.level,
+      speakerName: data.name,
+      startTime,
+      endTime,
+      addressLat: "0.0",
+      addressLong: "0.0",
+      startDate: date?.from ? format(date.from, "yyyy-MM-dd") : null,
+      endDate: date?.to ? format(date.to, "yyyy-MM-dd") : null,
+      isYoutube: isLiveStreamingEnabled,
+      scheduleTypeId: 1,
+    };
+
+    if (id) {
+      requestData.id = parseInt(id, 10);
+    }
+
+    console.log("Form Data Submitted:", requestData);
+
+    const response = await postSchedule(requestData);
+
+    if (response?.error) {
+      error(response?.message);
+      return false;
+    }
+
+    Cookies.set("scheduleId", response?.data?.data.id, {
+      expires: 1,
+    });
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/en/contributor/schedule/press-conference");
+    });
+  };
+
+  const onSubmit = (data: TaskSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-2">
+      <Card className="w-full lg:w-9/12">
+        <div className="px-6 py-6">
+          <p className="text-lg font-semibold mb-3">Form Konferensi Pers</p>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            {detail !== undefined ? (
+              <div className=" gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2">
+                  <Label>Judul Kegiatan</Label>
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        type="text"
+                        defaultValue={detail?.title}
+                        onChange={field.onChange}
+                      />
+                    )}
+                  />
+                  {errors.title?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.title.message}
+                    </p>
+                  )}
+                </div>
+                <div className="flex flex-row items-center">
+                  <div className="mt-5">
+                    <Label>Live Streaming</Label>
+                    <div className="flex items-center gap-3">
+                      <p>Aktifkan fitur live streaming</p>
+                      <Switch
+                        defaultChecked={isLiveStreamingEnabled}
+                        color="primary"
+                        id="c2"
+                        onCheckedChange={(checked) =>
+                          setIsLiveStreamingEnabled(checked)
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {isLiveStreamingEnabled && (
+                  <div className="mt-1">
+                    <Controller
+                      control={control}
+                      name="title"
+                      render={({ field }) => (
+                        <Input
+                          size={"md"}
+                          type="text"
+                          value={field.value}
+                          onChange={field.onChange}
+                          placeholder="Masukan ID youtube"
+                        />
+                      )}
+                    />
+                    {errors.title?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.title.message}
+                      </p>
+                    )}
+                  </div>
+                )}
+
+                <div className="flex flex-col lg:flex-row mt-3 items-start lg:items-center justify-between">
+                  <div className="flex flex-col space-y-2">
+                    <Label className="mr-3 mb-1">Tanggal</Label>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          id="date"
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] lg:w-[250px] justify-start text-left font-normal px-0 md:px-0 lg:px-4",
+                            !date && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon size={15} className="mr-3" />
+                          {date?.from ? (
+                            date.to ? (
+                              <>
+                                {format(date.from, "LLL dd, y")} -{" "}
+                                {format(date.to, "LLL dd, y")}
+                              </>
+                            ) : (
+                              format(date.from, "LLL dd, y")
+                            )
+                          ) : (
+                            <span>Pick a date</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0" align="start">
+                        <Calendar
+                          initialFocus
+                          mode="range"
+                          defaultMonth={date?.from}
+                          selected={date}
+                          onSelect={setDate}
+                          numberOfMonths={1}
+                        />
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="title">Rentang Waktu</Label>
+                    <div>
+                      <div className="flex flex-row items-center">
+                        <div className="col-6">
+                          <Input
+                            value={startTime}
+                            type="time"
+                            onChange={handleStartTime}
+                          />
+                        </div>
+                        <div className="col-6">
+                          <Input
+                            value={endTime}
+                            type="time"
+                            onChange={handleEndTime}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <MapHome
+                    draggable
+                    setLocation={(location) => {
+                      setLocation(location);
+                      setValue("location", location);
+                    }}
+                  />
+                </div>
+                <div>
+                  <Controller
+                    control={control}
+                    name="location"
+                    render={({ field }) => (
+                      <Textarea
+                        rows={3}
+                        value={location}
+                        onChange={handleLocationChange}
+                        placeholder="Masukan lokasi"
+                      />
+                    )}
+                  />
+                  <div className="invalid-feedback">
+                    {errors.location?.message}
+                  </div>
+                </div>
+                <p className="text-sm my-2 font-semibold">DI SAMPAIKAN OLEH</p>
+                <div className="flex flex-col ">
+                  <div className="mt-1 space-y-2">
+                    <Label>Nama Pangkat</Label>
+                    <Controller
+                      control={control}
+                      name="level"
+                      render={({ field }) => (
+                        <Input
+                          size={"md"}
+                          type="text"
+                          defaultValue={detail?.speakerTitle}
+                          onChange={field.onChange}
+                          placeholder="Masukan Nama Pangkat"
+                        />
+                      )}
+                    />
+                    {errors.level?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.level.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex flex-col my-3">
+                  <div className="mt-1 space-y-2">
+                    <Label>Nama Lengkap</Label>
+                    <Controller
+                      control={control}
+                      name="name"
+                      render={({ field }) => (
+                        <Input
+                          size={"md"}
+                          type="text"
+                          defaultValue={detail?.speakerName}
+                          onChange={field.onChange}
+                          placeholder="Masukan Nama Lengkap"
+                        />
+                      )}
+                    />
+                    {errors.name?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.name.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              ""
+            )}
+            {/* Submit Button */}
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                Submit
+              </Button>
+            </div>
+          </form>
+        </div>
+      </Card>
+      <Card className="w-full lg:w-3/12">
+        <div className="px-3 py-3">Jadwal Selanjutnya</div>
+      </Card>
+    </div>
+  );
+}

messages/en.json

@@ -599,7 +599,8 @@
     "press-release": "Press Release",
     "create-schedule": "Create Schedule",
     "event": "event",
-    "live-report": "Live Report"
+    "live-report": "Live Report",
+    "calendar-polri": "Calendar Polri"
   },
   "Blog": {
     "table": "Table",

messages/in.json

@@ -600,7 +600,8 @@
     "press-release": "Pers Rilis",
     "create-schedule": "Buat Jadwal",
     "event": "event",
-    "live-report": "Live Report"
+    "live-report": "Live Report",
+    "calendar-polri": "Kalender Polri"
   },
   "Blog": {
     "table": "Tabel",