feat:task plan sosmed

app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx

@@ -368,24 +368,6 @@ export default function DetailDaily() {
     <div>
       <SiteBreadcrumb />
       <div className="flex flex-col gap-4">
-        <div className="flex flex-row justify-center gap-5 mt-10">
-          <Link
-            href="/curator/task-plan/mediahub/create-monthly"
-            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
-          >
-            Bulanan
-          </Link>
-          <Link
-            href="/curator/task-plan/mediahub/create-weekly"
-            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
-          >
-            Mingguan
-          </Link>
-
-          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
-            Harian
-          </div>
-        </div>
         <div className="flex flex-col bg-white gap-2 p-6">
           <p className="text-lg">Perencanaan MediaHub</p>
 
@@ -759,11 +741,13 @@ export default function DetailDaily() {
                 )}
               />
               <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
-                <Button type="submit" variant="outline" color="destructive">
+                <Button
-                  Cancel
+                  onClick={() => router.back()}
-                </Button>
+                  variant="outline"
-                <Button type="submit" color="primary">
+                  color="destructive"
-                  Submit
+                  type="button"
+                >
+                  Back
                 </Button>
               </div>
             </form>

app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx

@@ -382,24 +382,6 @@ export default function EditDaily() {
     <div>
       <SiteBreadcrumb />
       <div className="flex flex-col gap-4">
-        <div className="flex flex-row justify-center gap-5 mt-10">
-          <Link
-            href="/curator/task-plan/mediahub/create-monthly"
-            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
-          >
-            Bulanan
-          </Link>
-          <Link
-            href="/curator/task-plan/mediahub/create-weekly"
-            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
-          >
-            Mingguan
-          </Link>
-
-          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
-            Harian
-          </div>
-        </div>
         <div className="flex flex-col bg-white gap-2 p-6">
           <p className="text-lg">Perencanaan MediaHub</p>
 
@@ -761,8 +743,13 @@ export default function EditDaily() {
                 )}
               />
               <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
-                <Button type="submit" variant="outline" color="destructive">
+                <Button
-                  Cancel
+                  onClick={() => router.back()}
+                  variant="outline"
+                  color="destructive"
+                  type="button"
+                >
+                  Back
                 </Button>
                 <Button type="submit" color="primary">
                   Submit

app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/detail/[id]/page.tsx

@@ -10,7 +10,7 @@ import {
 } from "@/components/ui/popover";
 import { Link, useRouter } from "@/i18n/routing";
 import { CalendarIcon } from "lucide-react";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 import { format } from "date-fns";
 import JoditEditor from "jodit-react";
@@ -28,8 +28,10 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { error } from "@/config/swal";
+import { close, error, loading } from "@/config/swal";
 import { savePlanning } from "@/service/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/service/planning/planning";
+import { useParams } from "next/navigation";
 
 const FormSchema = z.object({
   month: z.date({
@@ -43,6 +45,7 @@ const FormSchema = z.object({
   }),
 });
 export default function DetailMonthly() {
+  const id = useParams()?.id;
   const MySwal = withReactContent(Swal);
   const router = useRouter();
   const form = useForm<z.infer<typeof FormSchema>>({
@@ -53,6 +56,34 @@ export default function DetailMonthly() {
   });
   const editor = useRef(null);
 
+  useEffect(() => {
+    async function getPlanning() {
+      if (id != undefined) {
+        const parseDate = (dateString: string): Date => {
+          const [month, year] = dateString.split("/").map(Number);
+          return new Date(year, month - 1);
+        };
+        loading();
+        const res = await getPlanningById(id);
+        close();
+        if (res?.data?.data != undefined) {
+          const data = res?.data?.data;
+          console.log("Data :", data);
+          form.setValue("title", data?.title);
+          form.setValue("detail", data.description);
+          const date = parseDate(data.date);
+          console.log("date", date);
+          form.setValue(
+            "month",
+            new Date(date.getFullYear(), date.getMonth(), 1)
+          );
+        }
+      }
+    }
+
+    getPlanning();
+  }, [id]);
+
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
     if (form.getValues("detail") == "") {
       form.setError("detail", {
@@ -115,29 +146,13 @@ export default function DetailMonthly() {
       selectedDate.getMonth(),
       1
     );
+    console.log("newDate", newDate, selectedDate);
     form.setValue("month", newDate);
   };
   return (
     <div>
       <SiteBreadcrumb />
       <div className="flex flex-col gap-4">
-        <div className="flex flex-row justify-center gap-5 mt-10">
-          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
-            Bulanan
-          </div>
-          <Link
-            href="/curator/task-plan/mediahub/create-weekly"
-            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
-          >
-            Mingguan
-          </Link>
-          <Link
-            href="/curator/task-plan/mediahub/create-daily"
-            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
-          >
-            Harian
-          </Link>
-        </div>
         <div className="flex flex-col bg-white gap-2 p-6">
           <p className="text-lg">Perencanaan MediaHub Bulanan</p>
 
@@ -153,6 +168,7 @@ export default function DetailMonthly() {
                       value={field.value}
                       placeholder="Masukkan Judul Perencanaan"
                       onChange={field.onChange}
+                      readOnly
                     />
 
                     <FormMessage />
@@ -173,6 +189,7 @@ export default function DetailMonthly() {
                             "w-[280px] justify-start text-left font-normal",
                             !field.value && "text-muted-foreground"
                           )}
+                          disabled
                         >
                           <CalendarIcon className="mr-2 h-4 w-4" />
                           {field.value ? (
@@ -203,6 +220,7 @@ export default function DetailMonthly() {
                     <FormLabel>Detail Perencanaan</FormLabel>
                     <JoditEditor
                       ref={editor}
+                      config={{ readonly: true }}
                       value={field.value}
                       className="dark:text-black"
                       onChange={field.onChange}
@@ -213,11 +231,13 @@ export default function DetailMonthly() {
                 )}
               />
               <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
-                <Button type="submit" variant="outline" color="destructive">
+                <Button
-                  Cancel
+                  onClick={() => router.back()}
-                </Button>
+                  variant="outline"
-                <Button type="submit" color="primary">
+                  color="destructive"
-                  Submit
+                  type="button"
+                >
+                  Back
                 </Button>
               </div>
             </form>

app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/edit/[id]/page.tsx

@@ -0,0 +1,250 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link, useRouter } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+import { savePlanning } from "@/service/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/service/planning/planning";
+import { useParams } from "next/navigation";
+
+const FormSchema = z.object({
+  month: z.date({
+    required_error: "Required",
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+});
+export default function EditMonthly() {
+  const id = useParams()?.id;
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      detail: "",
+    },
+  });
+  const editor = useRef(null);
+
+  useEffect(() => {
+    async function getPlanning() {
+      if (id != undefined) {
+        const parseDate = (dateString: string): Date => {
+          const [month, year] = dateString.split("/").map(Number);
+          return new Date(year, month - 1);
+        };
+        loading();
+        const res = await getPlanningById(id);
+        close();
+        if (res?.data?.data != undefined) {
+          const data = res?.data?.data;
+          console.log("Data :", data);
+          form.setValue("title", data?.title);
+          form.setValue("detail", data.description);
+          const date = parseDate(data.date);
+          console.log("date", date);
+          form.setValue(
+            "month",
+            new Date(date.getFullYear(), date.getMonth(), 1)
+          );
+        }
+      }
+    }
+
+    getPlanning();
+  }, [id]);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      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);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      id: id,
+      planningTypeId: 1,
+      title: data.title,
+      time: "3",
+      description: data.detail,
+      username: "",
+      date: `${new Date(data.month).getMonth() + 1}/${new Date(
+        data.month
+      ).getFullYear()}`,
+      status: "Open",
+    };
+    console.log("req", reqData, data.month);
+    const response = await savePlanning(reqData);
+    close();
+    if (response.error) {
+      error(response.message);
+      return false;
+    }
+
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/curator/task-plan/mediahub");
+      }
+    });
+  };
+
+  const handleMonthSelect = (selectedDate: Date | undefined) => {
+    if (!selectedDate) return;
+    const newDate = new Date(
+      selectedDate.getFullYear(),
+      selectedDate.getMonth(),
+      1
+    );
+    console.log("newDate", newDate, selectedDate);
+    form.setValue("month", newDate);
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub Bulanan</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="month"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Bulan</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value ? (
+                            format(field.value, "MMMM yyyy")
+                          ) : (
+                            <span>Masukkan Bulan</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="single"
+                          selected={field.value}
+                          onSelect={handleMonthSelect}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button
+                  onClick={() => router.back()}
+                  variant="outline"
+                  color="destructive"
+                  type="button"
+                >
+                  Back
+                </Button>
+                <Button type="submit" color="primary">
+                  Submit
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/detail/[id]/page.tsx

@@ -0,0 +1,261 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link, useRouter } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+import { getOnlyDate } from "@/utils/globals";
+import {
+  getMonthlyPlanList,
+  savePlanning,
+} from "@/service/agenda-setting/agenda-setting";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import dayjs from "dayjs";
+import { getPlanningById } from "@/service/planning/planning";
+import { useParams } from "next/navigation";
+
+const FormSchema = z.object({
+  week: z.object({
+    from: z.date({
+      required_error: "Start date (from) is required",
+    }),
+    to: z.date({
+      required_error: "End date (to) is required",
+    }),
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+});
+export default function DetailMonthly() {
+  const id = useParams()?.id;
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const [parentId, setParentId] = useState<number | undefined>();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      detail: "",
+    },
+  });
+
+  const editor = useRef(null);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      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);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      id: id,
+      planningTypeId: 1,
+      title: data.title,
+      time: "2",
+      description: data.detail,
+      username: "",
+      date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`,
+      status: "Open",
+      parentId: parentId,
+    };
+    console.log("req", reqData);
+    const response = await savePlanning(reqData);
+    close();
+    if (response.error) {
+      error(response.message);
+      return false;
+    }
+
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/curator/task-plan/mediahub");
+      }
+    });
+  };
+
+  useEffect(() => {
+    async function getPlanningData() {
+      if (id != undefined) {
+        loading();
+        const res = await getPlanningById(id);
+        close();
+        if (res?.data?.data != undefined) {
+          const data = res?.data?.data;
+          console.log("Data :", data);
+          form.setValue("title", data?.title);
+          form.setValue("week", {
+            from: new Date(data?.startDate),
+            to: new Date(data?.endDate),
+          });
+          form.setValue("detail", data.description);
+          setParentId(data?.parentId);
+        }
+      }
+    }
+
+    getPlanningData();
+  }, []);
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub Mingguan</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                      readOnly
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="week"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Tanggal</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                          disabled
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value?.from ? (
+                            field.value.to ? (
+                              <>
+                                {format(field.value.from, "LLL dd, y")} -{" "}
+                                {format(field.value.to, "LLL dd, y")}
+                              </>
+                            ) : (
+                              format(field.value.from, "LLL dd, y")
+                            )
+                          ) : (
+                            <span>Masukkan Tanggal</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="range"
+                          selected={field.value}
+                          onSelect={field.onChange}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                      config={{ readonly: true }}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button
+                  onClick={() => router.back()}
+                  variant="outline"
+                  color="destructive"
+                  type="button"
+                >
+                  Back
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/edit/[id]/page.tsx

@@ -0,0 +1,261 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link, useRouter } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+import { getOnlyDate } from "@/utils/globals";
+import {
+  getMonthlyPlanList,
+  savePlanning,
+} from "@/service/agenda-setting/agenda-setting";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import dayjs from "dayjs";
+import { getPlanningById } from "@/service/planning/planning";
+import { useParams } from "next/navigation";
+
+const FormSchema = z.object({
+  week: z.object({
+    from: z.date({
+      required_error: "Start date (from) is required",
+    }),
+    to: z.date({
+      required_error: "End date (to) is required",
+    }),
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+});
+export default function EditMonthly() {
+  const id = useParams()?.id;
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const [parentId, setParentId] = useState<number | undefined>();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      detail: "",
+    },
+  });
+
+  const editor = useRef(null);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      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);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      id: id,
+      planningTypeId: 1,
+      title: data.title,
+      time: "2",
+      description: data.detail,
+      username: "",
+      date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`,
+      status: "Open",
+      parentId: parentId,
+    };
+    console.log("req", reqData);
+    const response = await savePlanning(reqData);
+    close();
+    if (response.error) {
+      error(response.message);
+      return false;
+    }
+
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/curator/task-plan/mediahub");
+      }
+    });
+  };
+
+  useEffect(() => {
+    async function getPlanningData() {
+      if (id != undefined) {
+        loading();
+        const res = await getPlanningById(id);
+        close();
+        if (res?.data?.data != undefined) {
+          const data = res?.data?.data;
+          console.log("Data :", data);
+          form.setValue("title", data?.title);
+          form.setValue("week", {
+            from: new Date(data?.startDate),
+            to: new Date(data?.endDate),
+          });
+          form.setValue("detail", data.description);
+          setParentId(data?.parentId);
+        }
+      }
+    }
+
+    getPlanningData();
+  }, []);
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub Mingguan</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="week"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Tanggal</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value?.from ? (
+                            field.value.to ? (
+                              <>
+                                {format(field.value.from, "LLL dd, y")} -{" "}
+                                {format(field.value.to, "LLL dd, y")}
+                              </>
+                            ) : (
+                              format(field.value.from, "LLL dd, y")
+                            )
+                          ) : (
+                            <span>Masukkan Tanggal</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="range"
+                          selected={field.value}
+                          onSelect={field.onChange}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button
+                  onClick={() => router.back()}
+                  variant="outline"
+                  color="destructive"
+                  type="button"
+                >
+                  Back
+                </Button>
+                <Button type="submit" color="primary">
+                  Submit
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/detail/[id]/page.tsx

@@ -0,0 +1,249 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link, useRouter } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+import { savePlanning } from "@/service/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/service/planning/planning";
+import { useParams } from "next/navigation";
+
+const FormSchema = z.object({
+  month: z.date({
+    required_error: "Required",
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+});
+export default function DetailMonthly() {
+  const id = useParams()?.id;
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      detail: "",
+    },
+  });
+  const editor = useRef(null);
+
+  useEffect(() => {
+    async function getPlanning() {
+      if (id != undefined) {
+        const parseDate = (dateString: string): Date => {
+          const [month, year] = dateString.split("/").map(Number);
+          return new Date(year, month - 1);
+        };
+        loading();
+        const res = await getPlanningById(id);
+        close();
+        if (res?.data?.data != undefined) {
+          const data = res?.data?.data;
+          console.log("Data :", data);
+          form.setValue("title", data?.title);
+          form.setValue("detail", data.description);
+          const date = parseDate(data.date);
+          console.log("date", date);
+          form.setValue(
+            "month",
+            new Date(date.getFullYear(), date.getMonth(), 1)
+          );
+        }
+      }
+    }
+
+    getPlanning();
+  }, [id]);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      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);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      planningTypeId: 1,
+      title: data.title,
+      time: "3",
+      description: data.detail,
+      username: "",
+      date: `${new Date(data.month).getMonth() + 1}/${new Date(
+        data.month
+      ).getFullYear()}`,
+      status: "Open",
+    };
+    console.log("req", reqData, data.month);
+    const response = await savePlanning(reqData);
+    close();
+    if (response.error) {
+      error(response.message);
+      return false;
+    }
+
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/curator/task-plan/mediahub");
+      }
+    });
+  };
+
+  const handleMonthSelect = (selectedDate: Date | undefined) => {
+    if (!selectedDate) return;
+    const newDate = new Date(
+      selectedDate.getFullYear(),
+      selectedDate.getMonth(),
+      1
+    );
+    console.log("newDate", newDate, selectedDate);
+    form.setValue("month", newDate);
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub Bulanan</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                      readOnly
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="month"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Bulan</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                          disabled
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value ? (
+                            format(field.value, "MMMM yyyy")
+                          ) : (
+                            <span>Masukkan Bulan</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="single"
+                          selected={field.value}
+                          onSelect={handleMonthSelect}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      config={{ readonly: true }}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button
+                  onClick={() => router.back()}
+                  variant="outline"
+                  color="destructive"
+                  type="button"
+                >
+                  Back
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/edit/[id]/page.tsx

@@ -0,0 +1,250 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link, useRouter } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+import { savePlanning } from "@/service/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/service/planning/planning";
+import { useParams } from "next/navigation";
+
+const FormSchema = z.object({
+  month: z.date({
+    required_error: "Required",
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+});
+export default function EditMonthly() {
+  const id = useParams()?.id;
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      detail: "",
+    },
+  });
+  const editor = useRef(null);
+
+  useEffect(() => {
+    async function getPlanning() {
+      if (id != undefined) {
+        const parseDate = (dateString: string): Date => {
+          const [month, year] = dateString.split("/").map(Number);
+          return new Date(year, month - 1);
+        };
+        loading();
+        const res = await getPlanningById(id);
+        close();
+        if (res?.data?.data != undefined) {
+          const data = res?.data?.data;
+          console.log("Data :", data);
+          form.setValue("title", data?.title);
+          form.setValue("detail", data.description);
+          const date = parseDate(data.date);
+          console.log("date", date);
+          form.setValue(
+            "month",
+            new Date(date.getFullYear(), date.getMonth(), 1)
+          );
+        }
+      }
+    }
+
+    getPlanning();
+  }, [id]);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      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);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      id: id,
+      planningTypeId: 1,
+      title: data.title,
+      time: "3",
+      description: data.detail,
+      username: "",
+      date: `${new Date(data.month).getMonth() + 1}/${new Date(
+        data.month
+      ).getFullYear()}`,
+      status: "Open",
+    };
+    console.log("req", reqData, data.month);
+    const response = await savePlanning(reqData);
+    close();
+    if (response.error) {
+      error(response.message);
+      return false;
+    }
+
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/curator/task-plan/mediahub");
+      }
+    });
+  };
+
+  const handleMonthSelect = (selectedDate: Date | undefined) => {
+    if (!selectedDate) return;
+    const newDate = new Date(
+      selectedDate.getFullYear(),
+      selectedDate.getMonth(),
+      1
+    );
+    console.log("newDate", newDate, selectedDate);
+    form.setValue("month", newDate);
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub Bulanan</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="month"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Bulan</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value ? (
+                            format(field.value, "MMMM yyyy")
+                          ) : (
+                            <span>Masukkan Bulan</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="single"
+                          selected={field.value}
+                          onSelect={handleMonthSelect}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button
+                  onClick={() => router.back()}
+                  variant="outline"
+                  color="destructive"
+                  type="button"
+                >
+                  Back
+                </Button>
+                <Button type="submit" color="primary">
+                  Submit
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/detail/[id]/page.tsx

@@ -0,0 +1,261 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link, useRouter } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+import { getOnlyDate } from "@/utils/globals";
+import {
+  getMonthlyPlanList,
+  savePlanning,
+} from "@/service/agenda-setting/agenda-setting";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import dayjs from "dayjs";
+import { getPlanningById } from "@/service/planning/planning";
+import { useParams } from "next/navigation";
+
+const FormSchema = z.object({
+  week: z.object({
+    from: z.date({
+      required_error: "Start date (from) is required",
+    }),
+    to: z.date({
+      required_error: "End date (to) is required",
+    }),
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+});
+export default function DetailMonthly() {
+  const id = useParams()?.id;
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const [parentId, setParentId] = useState<number | undefined>();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      detail: "",
+    },
+  });
+
+  const editor = useRef(null);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      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);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      id: id,
+      planningTypeId: 1,
+      title: data.title,
+      time: "2",
+      description: data.detail,
+      username: "",
+      date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`,
+      status: "Open",
+      parentId: parentId,
+    };
+    console.log("req", reqData);
+    const response = await savePlanning(reqData);
+    close();
+    if (response.error) {
+      error(response.message);
+      return false;
+    }
+
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/curator/task-plan/mediahub");
+      }
+    });
+  };
+
+  useEffect(() => {
+    async function getPlanningData() {
+      if (id != undefined) {
+        loading();
+        const res = await getPlanningById(id);
+        close();
+        if (res?.data?.data != undefined) {
+          const data = res?.data?.data;
+          console.log("Data :", data);
+          form.setValue("title", data?.title);
+          form.setValue("week", {
+            from: new Date(data?.startDate),
+            to: new Date(data?.endDate),
+          });
+          form.setValue("detail", data.description);
+          setParentId(data?.parentId);
+        }
+      }
+    }
+
+    getPlanningData();
+  }, []);
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub Mingguan</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                      readOnly
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="week"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Tanggal</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                          disabled
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value?.from ? (
+                            field.value.to ? (
+                              <>
+                                {format(field.value.from, "LLL dd, y")} -{" "}
+                                {format(field.value.to, "LLL dd, y")}
+                              </>
+                            ) : (
+                              format(field.value.from, "LLL dd, y")
+                            )
+                          ) : (
+                            <span>Masukkan Tanggal</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="range"
+                          selected={field.value}
+                          onSelect={field.onChange}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                      config={{ readonly: true }}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button
+                  onClick={() => router.back()}
+                  variant="outline"
+                  color="destructive"
+                  type="button"
+                >
+                  Back
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/edit/[id]/page.tsx

@@ -0,0 +1,261 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link, useRouter } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+import { getOnlyDate } from "@/utils/globals";
+import {
+  getMonthlyPlanList,
+  savePlanning,
+} from "@/service/agenda-setting/agenda-setting";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import dayjs from "dayjs";
+import { getPlanningById } from "@/service/planning/planning";
+import { useParams } from "next/navigation";
+
+const FormSchema = z.object({
+  week: z.object({
+    from: z.date({
+      required_error: "Start date (from) is required",
+    }),
+    to: z.date({
+      required_error: "End date (to) is required",
+    }),
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+});
+export default function EditMonthly() {
+  const id = useParams()?.id;
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const [parentId, setParentId] = useState<number | undefined>();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      detail: "",
+    },
+  });
+
+  const editor = useRef(null);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      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);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      id: id,
+      planningTypeId: 1,
+      title: data.title,
+      time: "2",
+      description: data.detail,
+      username: "",
+      date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`,
+      status: "Open",
+      parentId: parentId,
+    };
+    console.log("req", reqData);
+    const response = await savePlanning(reqData);
+    close();
+    if (response.error) {
+      error(response.message);
+      return false;
+    }
+
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/curator/task-plan/mediahub");
+      }
+    });
+  };
+
+  useEffect(() => {
+    async function getPlanningData() {
+      if (id != undefined) {
+        loading();
+        const res = await getPlanningById(id);
+        close();
+        if (res?.data?.data != undefined) {
+          const data = res?.data?.data;
+          console.log("Data :", data);
+          form.setValue("title", data?.title);
+          form.setValue("week", {
+            from: new Date(data?.startDate),
+            to: new Date(data?.endDate),
+          });
+          form.setValue("detail", data.description);
+          setParentId(data?.parentId);
+        }
+      }
+    }
+
+    getPlanningData();
+  }, []);
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub Mingguan</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="week"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Tanggal</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value?.from ? (
+                            field.value.to ? (
+                              <>
+                                {format(field.value.from, "LLL dd, y")} -{" "}
+                                {format(field.value.to, "LLL dd, y")}
+                              </>
+                            ) : (
+                              format(field.value.from, "LLL dd, y")
+                            )
+                          ) : (
+                            <span>Masukkan Tanggal</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="range"
+                          selected={field.value}
+                          onSelect={field.onChange}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button
+                  onClick={() => router.back()}
+                  variant="outline"
+                  color="destructive"
+                  type="button"
+                >
+                  Back
+                </Button>
+                <Button type="submit" color="primary">
+                  Submit
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

components/table/task-plan/list-view-column.tsx

@@ -86,7 +86,7 @@ const columns: ColumnDef<any>[] = [
                         </DropdownMenuItem>
                         <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                           <Link
-                            href={`/curator/task-plan/mediahub/create-weekly/detail/${data.id}`}
+                            href={`/curator/task-plan/mediahub/create-weekly/edit/${data.id}`}
                           >
                             Edit
                           </Link>

components/table/task-plan/list-view-social-media-column.tsx

@@ -78,7 +78,21 @@ const columns: ColumnDef<any>[] = [
                       </DropdownMenuTrigger>
                       <DropdownMenuContent className="p-0" align="end">
                         <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-                          Detail
+                          <Link
+                            href={`/curator/task-plan/medsos-mediahub/create-weekly/detail/${data.id}`}
+                          >
+                            Detail
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                          <Link
+                            href={`/curator/task-plan/medsos-mediahub/create-weekly/edit/${data.id}`}
+                          >
+                            Edit
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                          <a className="text-red-600">Hapus</a>
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
@@ -121,7 +135,21 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              Detail
+              <Link
+                href={`/curator/task-plan/medsos-mediahub/create-monthly/detail/${row.original.id}`}
+              >
+                Detail
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <Link
+                href={`/curator/task-plan/medsos-mediahub/create-monthly/edit/${row.original.id}`}
+              >
+                Edit
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <a className="text-red-600">Hapus</a>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

service/agenda-setting/agenda-setting.ts

@@ -28,7 +28,7 @@ export async function getPlanningDailyByTypeId(
   return getAPIInterceptor(url);
 }
 
-export async function getMonthlyPlanList(dates: number, typeId: number) {
+export async function getMonthlyPlanList(dates: any, typeId: number) {
   const url = `planning/monthly/list?date=${dates}&typeId=${typeId}`;
   return getAPIInterceptor(url);
 }