diff --git a/app/[locale]/(protected)/curator/media-tracking/component/column.tsx b/app/[locale]/(protected)/curator/media-tracking/component/column.tsx new file mode 100644 index 00000000..e469400f --- /dev/null +++ b/app/[locale]/(protected)/curator/media-tracking/component/column.tsx @@ -0,0 +1,90 @@ +import * as React from "react"; +import { ColumnDef } from "@tanstack/react-table"; + +import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuTrigger, + DropdownMenuItem, +} from "@/components/ui/dropdown-menu"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { htmlToString } from "@/utils/globals"; +import { Link, useRouter } from "@/i18n/routing"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; + +const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => {row.getValue("no")}, + }, + + { + accessorKey: "title", + header: "Judul", + cell: ({ row }) => {row.getValue("title")}, + }, + { + accessorKey: "date", + header: "Tanggal Masuk", + cell: ({ row }) => {row.getValue("date")}, + }, + + { + accessorKey: "duration", + header: "Durasi", + cell: ({ row }) => {row.getValue("duration")}, + }, + { + accessorKey: "crawling", + header: "Model Crawling", + cell: ({ row }) => {row.getValue("crawling")}, + }, + { + accessorKey: "status", + header: "Status", + cell: ({ row }) => {row.getValue("status")}, + }, + { + id: "actions", + accessorKey: "action", + header: "Aksi", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + Detail + + + + ); + }, + }, +]; + +export default columns; diff --git a/app/[locale]/(protected)/curator/media-tracking/component/table.tsx b/app/[locale]/(protected)/curator/media-tracking/component/table.tsx new file mode 100644 index 00000000..d29f7972 --- /dev/null +++ b/app/[locale]/(protected)/curator/media-tracking/component/table.tsx @@ -0,0 +1,180 @@ +"use client"; + +import * as React from "react"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { Button } from "@/components/ui/button"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Search, + SquarePen, + Trash2, + TrendingDown, + TrendingUp, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { Input } from "@/components/ui/input"; +import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { paginationBlog } from "@/service/blog/blog"; +import { ticketingPagination } from "@/service/ticketing/ticketing"; +import { Badge } from "@/components/ui/badge"; +import { useRouter, useSearchParams } from "next/navigation"; +import TablePagination from "@/components/table/table-pagination"; +import columns from "./column"; +import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting"; +import { getMediaTrackingMonitoring } from "@/service/media-tracking/media-tracking"; + +const MediaTrackingTable = () => { + const router = useRouter(); + const searchParams = useSearchParams(); + + const [dataTable, setDataTable] = React.useState([]); + const [totalData, setTotalData] = React.useState(1); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }); + const [page, setPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + const [totalPage, setTotalPage] = React.useState(1); + const table = useReactTable({ + data: dataTable, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onPaginationChange: setPagination, + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + pagination, + }, + }); + + React.useEffect(() => { + const pageFromUrl = searchParams?.get("page"); + if (pageFromUrl) { + setPage(Number(pageFromUrl)); + } + }, [searchParams]); + + React.useEffect(() => { + fetchData(); + }, [page, limit]); + + async function fetchData() { + try { + const response = await getMediaTrackingMonitoring(page, 10); + const data = response.data?.data; + const contentData = data?.content; + contentData.forEach((item: any, index: number) => { + item.no = (page - 1) * limit + index + 1; + }); + + console.log("contentData : ", data); + + setDataTable(contentData); + setTotalData(data?.totalElements); + setTotalPage(data?.totalPages); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + + return ( +
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+ +
+ ); +}; + +export default MediaTrackingTable; diff --git a/app/[locale]/(protected)/curator/media-tracking/page.tsx b/app/[locale]/(protected)/curator/media-tracking/page.tsx new file mode 100644 index 00000000..5e43e9b7 --- /dev/null +++ b/app/[locale]/(protected)/curator/media-tracking/page.tsx @@ -0,0 +1,11 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import MediaTrackingTable from "./component/table"; + +export default function MediaTracking() { + return ( +
+ + +
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx index d7fd5b5b..1c621ca3 100644 --- a/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx @@ -60,11 +60,21 @@ const columns: ColumnDef[] = [ Detail + + + Edit + + + + Delete + ); diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx new file mode 100644 index 00000000..0f3d562d --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx @@ -0,0 +1,759 @@ +"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 { Checkbox } from "@/components/ui/checkbox"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { getUserLevelForAssignments } from "@/service/task"; +import { list } from "postcss"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { close, error, loading } from "@/config/swal"; +import { id } from "date-fns/locale"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { + getWeeklyPlanList, + savePlanning, +} from "@/service/agenda-setting/agenda-setting"; +import { getOnlyDate } from "@/utils/globals"; +import { useParams } from "next/navigation"; +import { getPlanningById } from "@/service/planning/planning"; + +const FormSchema = z.object({ + date: z.date({ + required_error: "Required", + }), + title: z.string({ + required_error: "Required", + }), + detail: z.string({ + required_error: "Required", + }), + output: z.array(z.string()).refine((value) => value.some((item) => item), { + message: "Required", + }), + unit: z.array(z.string()).refine((value) => value.some((item) => item), { + message: "Required", + }), + type: z.string({ + required_error: "Required", + }), + parentId: z.string({ + required_error: "Required", + }), +}); + +const items = [ + { + id: "2", + label: "Audio Visual", + }, + { + id: "1", + label: "Foto", + }, + { + id: "4", + label: "Audio", + }, + { + id: "3", + label: "Text", + }, +]; + +const units = [ + { + id: "1", + label: "Mabes Polri", + }, + { + id: "2", + label: "Polda", + }, + { + id: "3", + label: "Polres", + }, +]; +export default function DetailDaily() { + const id = useParams()?.id; + const MySwal = withReactContent(Swal); + const [listDest, setListDest] = useState([]); + const router = useRouter(); + const [weeklyList, setWeeklyList] = useState(); + const [selected, setSelected] = useState<{ [key: string]: boolean }>({}); + const [selectAll, setSelectAll] = useState<{ [key: string]: boolean }>({}); + + useEffect(() => { + initFetch(); + }, [id]); + + async function initFetch() { + if (id != undefined) { + loading(); + const res = await getPlanningById(id); + close(); + + if (res?.data?.data != undefined) { + const data = res?.data?.data; + console.log("data"); + console.log("Data :", data); + form.setValue("title", data.title); + form.setValue("detail", data.description); + form.setValue("date", new Date(data.date)); + form.setValue( + "output", + data.fileTypeOutput.split(",")?.length > 1 + ? data.fileTypeOutput.split(",") + : [data.fileTypeOutput] + ); + form.setValue( + "unit", + data.assignedToLevel.split(",")?.length > 1 + ? data.assignedToLevel.split(",") + : [data.assignedToLevel] + ); + form.setValue("type", String(data?.assignmentTypeId)); + form.setValue("parentId", String(data?.parentId)); + } + } + } + + useEffect(() => { + getWeeklyPlanning(); + }, []); + + async function getWeeklyPlanning() { + const res = await getWeeklyPlanList(new Date().getDate(), 1); + + if (res.data !== null) { + const rawUser = res.data?.data; + const optionArr = rawUser.map((option: any) => ({ + id: option.id, + label: option.title, + value: String(option.id), + })); + setWeeklyList(optionArr); + } + } + + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + unit: [], + output: [], + detail: "", + }, + }); + const editor = useRef(null); + + const onSubmit = async (data: z.infer) => { + console.log("data", data); + 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) => { + const getSelectedString = () => { + return Object.keys(selected) + .filter((key) => selected[key]) + .join(", "); + }; + console.log("data", data, selected); + loading(); + + const reqData = { + planningTypeId: 1, + time: "1", + title: data.title, + assignmentTypeId: data.type, //string + description: data.detail, + assignedToLevel: unit?.join(","), //string + assignmentPurpose: getSelectedString(), //string + fileTypeOutput: data.output?.join(","), //string + status: "Open", + date: getOnlyDate(data.date), + // date: + // isPublish || isUpdate + // ? selectedDate?.length > 10 + // ? data.date?.toISOString().slice(0, 10) + // : selectedDate + // : data.date?.toISOString().slice(0, 10), + parentId: Number(data.parentId), //number + assignmentMainTypeId: 1, + }; + + console.log("req =>", reqData); + const response = await savePlanning(reqData); + + if (response.error) { + error(response.message); + return false; + } + + close(); + MySwal.fire({ + title: "Sukses", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then((result) => { + if (result.isConfirmed) { + router.push("/curator/task-plan/mediahub"); + } + }); + }; + + const output = form.watch("output"); + + const isAllChecked = items.every((item) => output?.includes(item.id)); + + const unit = form.watch("unit"); + + const isAllUnitChecked = units.every((item) => unit?.includes(item.id)); + + const handleAllCheckedChange = (checked: boolean | string) => { + if (checked) { + form.setValue( + "output", + items.map((item) => item.id) + ); + } else { + form.setValue("output", []); + } + }; + + const handleItemCheckedChange = (id: string, checked: boolean | string) => { + form.setValue( + "output", + checked ? [...output, id] : output.filter((value) => value !== id) + ); + }; + + const handleAllUnitCheckedChange = (checked: boolean | string) => { + if (checked) { + form.setValue( + "unit", + units.map((item) => item.id) + ); + } else { + form.setValue("unit", []); + } + }; + + const handleUnitCheckedChange = (id: string, checked: boolean | string) => { + if (checked) { + form.setValue("unit", [...unit, id]); + } else { + if (id == "2") { + const temp = []; + for (const element of unit) { + if (element == "1") { + temp.push("1"); + } + } + form.setValue("unit", temp); + } else { + form.setValue( + "unit", + unit.filter((value) => value !== id) + ); + } + } + }; + + useEffect(() => { + async function initState() { + const response = await getUserLevelForAssignments(); + setListDest(response.data.data.list); + } + + initState(); + }, []); + + const handleParentChange = (listId: string) => { + setSelected((prev) => ({ + ...prev, + [listId]: !prev[listId], + })); + }; + + const handleSelectAllPolres = (listId: string, isChecked: boolean) => { + setSelectAll((prev) => ({ + ...prev, + [listId]: isChecked, + })); + + setSelected((prev) => { + const updatedState = { ...prev }; + listDest + .find((list: any) => list.id === listId) + ?.subDestination.forEach((subDes: any) => { + updatedState[`${listId}${subDes.id}`] = isChecked; + }); + return updatedState; + }); + }; + + const handleChildChange = (childId: string) => { + setSelected((prev) => ({ + ...prev, + [childId]: !prev[childId], + })); + }; + + return ( +
+ +
+
+

Perencanaan MediaHub

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + +
+ Output Tugas +
+
+
+ + handleAllCheckedChange(checked) + } + disabled + /> + +
+ + {items.map((item) => ( + { + return ( + + + + handleItemCheckedChange(item.id, checked) + } + disabled + /> + + + {item.label} + + + ); + }} + /> + ))} +
+ + + )} + /> + ( + +
+ Pelaksana Tugas +
+
+
+ + handleAllUnitCheckedChange(checked) + } + disabled + /> + +
+ + {units.map((item) => ( + { + return ( + + + + handleUnitCheckedChange(item.id, checked) + } + disabled + /> + + + {item.label} + + + ); + }} + /> + ))} + + + + {`[Kustom]`} + + + + + + Daftar Wilayah Polda dan Polres + + +
+ {listDest?.map((list: any) => ( +
+ + +
+ + handleParentChange(list.id) + } + disabled={unit.includes("2")} + /> + + +
+ +
+
+ + handleSelectAllPolres( + list.id, + Boolean(e) + ) + } + disabled={unit.includes("3")} + /> + +
+ {list.subDestination.map( + (subDes: any) => ( +
+ + handleChildChange( + `${list.id}${subDes.id}` + ) + } + disabled={unit.includes("3")} + /> + +
+ ) + )} +
+ + + +
+ ))} +
+ + +
+ + + )} + /> + ( + + Jenis Penugasan + + + + + + + + Publikasi + + + + + + + + Amplifikasi + + + + + + + Kontra + + + + + + )} + /> + ( + + Pilih Tanggal + + + + + + + + + + + )} + /> + ( + + Perencanaan Mingguan + + + + + )} + /> + ( + + Detail Perencanaan + + + + + )} + /> +
+ +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx new file mode 100644 index 00000000..0ce52579 --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx @@ -0,0 +1,764 @@ +"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 { Checkbox } from "@/components/ui/checkbox"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { getUserLevelForAssignments } from "@/service/task"; +import { list } from "postcss"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { close, error, loading } from "@/config/swal"; +import { id, te } from "date-fns/locale"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { + getWeeklyPlanList, + savePlanning, +} from "@/service/agenda-setting/agenda-setting"; +import { getOnlyDate } from "@/utils/globals"; +import { useParams } from "next/navigation"; +import { getPlanningById } from "@/service/planning/planning"; + +const FormSchema = z.object({ + date: z.date({ + required_error: "Required", + }), + title: z.string({ + required_error: "Required", + }), + detail: z.string({ + required_error: "Required", + }), + output: z.array(z.string()).refine((value) => value.some((item) => item), { + message: "Required", + }), + unit: z.array(z.string()).refine((value) => value.some((item) => item), { + message: "Required", + }), + type: z.string({ + required_error: "Required", + }), + parentId: z.string({ + required_error: "Required", + }), +}); + +const items = [ + { + id: "2", + label: "Audio Visual", + }, + { + id: "1", + label: "Foto", + }, + { + id: "4", + label: "Audio", + }, + { + id: "3", + label: "Text", + }, +]; + +const units = [ + { + id: "1", + label: "Mabes Polri", + }, + { + id: "2", + label: "Polda", + }, + { + id: "3", + label: "Polres", + }, +]; +export default function EditDaily() { + const id = useParams()?.id; + const MySwal = withReactContent(Swal); + const [listDest, setListDest] = useState([]); + const router = useRouter(); + const [weeklyList, setWeeklyList] = useState(); + const [selected, setSelected] = useState<{ [key: string]: boolean }>({}); + const [selectAll, setSelectAll] = useState<{ [key: string]: boolean }>({}); + + useEffect(() => { + initFetch(); + }, [id]); + + async function initFetch() { + if (id != undefined) { + loading(); + const res = await getPlanningById(id); + close(); + + if (res?.data?.data != undefined) { + const data = res?.data?.data; + console.log("data"); + console.log("Data :", data); + form.setValue("title", data.title); + form.setValue("detail", data.description); + form.setValue("date", new Date(data.date)); + form.setValue( + "output", + data.fileTypeOutput.split(",")?.length > 1 + ? data.fileTypeOutput.split(",") + : [data.fileTypeOutput] + ); + form.setValue("type", String(data?.assignmentTypeId)); + form.setValue("parentId", String(data?.parentId)); + mapTopDestination(data?.assignedToLevel); + mapDestination(data?.assignedToTopLevel); + } + } + } + + const mapTopDestination = (data: string) => { + const temp: string[] = []; + data.split(",").map((list) => { + if (list.length < 2) { + temp.push(list); + } + }); + form.setValue("unit", temp); + }; + + const mapDestination = (data: string) => { + const temp: { [key: number]: boolean } = {}; + data.split(",").forEach((list) => { + temp[Number(list)] = true; + }); + setSelected(temp); + }; + + useEffect(() => { + getWeeklyPlanning(); + }, []); + + async function getWeeklyPlanning() { + const res = await getWeeklyPlanList(new Date().getDate(), 1); + + if (res.data !== null) { + const rawUser = res.data?.data; + const optionArr = rawUser.map((option: any) => ({ + id: option.id, + label: option.title, + value: String(option.id), + })); + setWeeklyList(optionArr); + } + } + + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + unit: [], + output: [], + detail: "", + }, + }); + const editor = useRef(null); + + const onSubmit = async (data: z.infer) => { + console.log("data", data); + 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) => { + const getSelectedString = () => { + return Object.keys(selected) + .filter((key) => selected[key]) + .join(", "); + }; + console.log("data", data, selected); + loading(); + + const reqData = { + id: id, + planningTypeId: 1, + time: "1", + title: data.title, + assignmentTypeId: data.type, //string + description: data.detail, + assignedToLevel: unit?.join(","), //string + assignmentPurpose: getSelectedString(), //string + fileTypeOutput: data.output?.join(","), //string + status: "Open", + date: getOnlyDate(data.date), + // date: + // isPublish || isUpdate + // ? selectedDate?.length > 10 + // ? data.date?.toISOString().slice(0, 10) + // : selectedDate + // : data.date?.toISOString().slice(0, 10), + parentId: Number(data.parentId), //number + assignmentMainTypeId: 1, + }; + + const response = await savePlanning(reqData); + + if (response.error) { + error(response.message); + return false; + } + + close(); + MySwal.fire({ + title: "Sukses", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then((result) => { + if (result.isConfirmed) { + router.push("/curator/task-plan/mediahub"); + } + }); + }; + + const output = form.watch("output"); + + const isAllChecked = items.every((item) => output?.includes(item.id)); + + const unit = form.watch("unit"); + + const isAllUnitChecked = units.every((item) => unit?.includes(item.id)); + + const handleAllCheckedChange = (checked: boolean | string) => { + if (checked) { + form.setValue( + "output", + items.map((item) => item.id) + ); + } else { + form.setValue("output", []); + } + }; + + const handleItemCheckedChange = (id: string, checked: boolean | string) => { + form.setValue( + "output", + checked ? [...output, id] : output.filter((value) => value !== id) + ); + }; + + const handleAllUnitCheckedChange = (checked: boolean | string) => { + if (checked) { + form.setValue( + "unit", + units.map((item) => item.id) + ); + } else { + form.setValue("unit", []); + } + }; + + const handleUnitCheckedChange = (id: string, checked: boolean | string) => { + if (checked) { + form.setValue("unit", [...unit, id]); + } else { + if (id == "2") { + const temp = []; + for (const element of unit) { + if (element == "1") { + temp.push("1"); + } + } + form.setValue("unit", temp); + } else { + form.setValue( + "unit", + unit.filter((value) => value !== id) + ); + } + } + }; + + useEffect(() => { + async function initState() { + const response = await getUserLevelForAssignments(); + setListDest(response.data.data.list); + } + + initState(); + }, []); + + const handleParentChange = (listId: string) => { + setSelected((prev) => ({ + ...prev, + [listId]: !prev[listId], + })); + }; + + const handleSelectAllPolres = (listId: string, isChecked: boolean) => { + setSelectAll((prev) => ({ + ...prev, + [listId]: isChecked, + })); + + setSelected((prev) => { + const updatedState = { ...prev }; + listDest + .find((list: any) => list.id === listId) + ?.subDestination.forEach((subDes: any) => { + updatedState[`${listId}${subDes.id}`] = isChecked; + }); + return updatedState; + }); + }; + + const handleChildChange = (childId: string) => { + setSelected((prev) => ({ + ...prev, + [childId]: !prev[childId], + })); + }; + + return ( +
+ +
+
+

Perencanaan MediaHub

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + +
+ Output Tugas +
+
+
+ + handleAllCheckedChange(checked) + } + /> + +
+ + {items.map((item) => ( + { + return ( + + + + handleItemCheckedChange(item.id, checked) + } + /> + + + {item.label} + + + ); + }} + /> + ))} +
+ + + )} + /> + ( + +
+ Pelaksana Tugas +
+
+
+ + handleAllUnitCheckedChange(checked) + } + /> + +
+ + {units.map((item) => ( + { + return ( + + + + handleUnitCheckedChange(item.id, checked) + } + /> + + + {item.label} + + + ); + }} + /> + ))} + + + + {`[Kustom]`} + + + + + + Daftar Wilayah Polda dan Polres + + +
+ {listDest?.map((list: any) => ( +
+ + +
+ + handleParentChange(list.id) + } + disabled={unit.includes("2")} + /> + + +
+ +
+
+ + handleSelectAllPolres( + list.id, + Boolean(e) + ) + } + disabled={unit.includes("3")} + /> + +
+ {list.subDestination.map( + (subDes: any) => ( +
+ + handleChildChange( + `${list.id}${subDes.id}` + ) + } + disabled={unit.includes("3")} + /> + +
+ ) + )} +
+ + + +
+ ))} +
+ + +
+ + + )} + /> + ( + + Jenis Penugasan + + + + + + + + Publikasi + + + + + + + + Amplifikasi + + + + + + + Kontra + + + + + + )} + /> + ( + + Pilih Tanggal + + + + + + + + + + + )} + /> + ( + + Perencanaan Mingguan + + + + + )} + /> + ( + + Detail Perencanaan + + + + + )} + /> +
+ + +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx index 9ecaeaec..beb07552 100644 --- a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx @@ -8,9 +8,9 @@ import { PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; -import { Link } from "@/i18n/routing"; +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"; @@ -30,6 +30,35 @@ import Swal from "sweetalert2"; import withReactContent from "sweetalert2-react-content"; import { Checkbox } from "@/components/ui/checkbox"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { getUserLevelForAssignments } from "@/service/task"; +import { list } from "postcss"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { close, error, loading } from "@/config/swal"; +import { id } from "date-fns/locale"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { + getWeeklyPlanList, + savePlanning, +} from "@/service/agenda-setting/agenda-setting"; +import { getOnlyDate } from "@/utils/globals"; const FormSchema = z.object({ date: z.date({ @@ -47,46 +76,72 @@ const FormSchema = z.object({ unit: z.array(z.string()).refine((value) => value.some((item) => item), { message: "Required", }), - type: z.enum(["publication", "amplification", "contra"], { + type: z.string({ + required_error: "Required", + }), + parentId: z.string({ required_error: "Required", }), }); const items = [ { - id: "video", + id: "2", label: "Audio Visual", }, { - id: "image", + id: "1", label: "Foto", }, { - id: "audio", + id: "4", label: "Audio", }, { - id: "text", + id: "3", label: "Text", }, ]; const units = [ { - id: "mabes", + id: "1", label: "Mabes Polri", }, { - id: "polda", + id: "2", label: "Polda", }, { - id: "polres", + id: "3", label: "Polres", }, ]; -export default function CreateMonthly() { +export default function CreateDaily() { const MySwal = withReactContent(Swal); + const [listDest, setListDest] = useState([]); + const router = useRouter(); + const [weeklyList, setWeeklyList] = useState(); + const [selected, setSelected] = useState<{ [key: string]: boolean }>({}); + const [selectAll, setSelectAll] = useState<{ [key: string]: boolean }>({}); + + useEffect(() => { + getWeeklyPlanning(); + }, []); + + async function getWeeklyPlanning() { + const res = await getWeeklyPlanList(new Date().getDate(), 1); + + if (res.data !== null) { + const rawUser = res.data?.data; + const optionArr = rawUser.map((option: any) => ({ + id: option.id, + label: option.title, + value: String(option.id), + })); + setWeeklyList(optionArr); + } + } const form = useForm>({ resolver: zodResolver(FormSchema), @@ -123,7 +178,54 @@ export default function CreateMonthly() { }; const save = async (data: z.infer) => { - console.log("data", data); + const getSelectedString = () => { + return Object.keys(selected) + .filter((key) => selected[key]) + .join(", "); + }; + console.log("data", data, selected); + loading(); + + const reqData = { + planningTypeId: 1, + time: "1", + title: data.title, + assignmentTypeId: data.type, //string + description: data.detail, + assignedToLevel: unit?.join(","), //string + assignmentPurpose: getSelectedString(), //string + fileTypeOutput: data.output?.join(","), //string + status: "Open", + date: getOnlyDate(data.date), + // date: + // isPublish || isUpdate + // ? selectedDate?.length > 10 + // ? data.date?.toISOString().slice(0, 10) + // : selectedDate + // : data.date?.toISOString().slice(0, 10), + parentId: Number(data.parentId), //number + assignmentMainTypeId: 1, + }; + + console.log("req =>", reqData); + const response = await savePlanning(reqData); + + if (response.error) { + error(response.message); + return false; + } + + close(); + MySwal.fire({ + title: "Sukses", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then((result) => { + if (result.isConfirmed) { + router.push("/curator/task-plan/mediahub"); + } + }); }; const output = form.watch("output"); @@ -164,10 +266,64 @@ export default function CreateMonthly() { }; const handleUnitCheckedChange = (id: string, checked: boolean | string) => { - form.setValue( - "unit", - checked ? [...unit, id] : unit.filter((value) => value !== id) - ); + if (checked) { + form.setValue("unit", [...unit, id]); + } else { + if (id == "2") { + const temp = []; + for (const element of unit) { + if (element == "1") { + temp.push("1"); + } + } + form.setValue("unit", temp); + } else { + form.setValue( + "unit", + unit.filter((value) => value !== id) + ); + } + } + }; + + useEffect(() => { + async function initState() { + const response = await getUserLevelForAssignments(); + setListDest(response.data.data.list); + } + + initState(); + }, []); + + const handleParentChange = (listId: string) => { + setSelected((prev) => ({ + ...prev, + [listId]: !prev[listId], + })); + }; + + const handleSelectAllPolres = (listId: string, isChecked: boolean) => { + setSelectAll((prev) => ({ + ...prev, + [listId]: isChecked, + })); + + setSelected((prev) => { + const updatedState = { ...prev }; + listDest + .find((list: any) => list.id === listId) + ?.subDestination.forEach((subDes: any) => { + updatedState[`${listId}${subDes.id}`] = isChecked; + }); + return updatedState; + }); + }; + + const handleChildChange = (childId: string) => { + setSelected((prev) => ({ + ...prev, + [childId]: !prev[childId], + })); }; return ( @@ -226,7 +382,6 @@ export default function CreateMonthly() { handleAllCheckedChange(checked) } @@ -305,8 +460,7 @@ export default function CreateMonthly() { handleUnitCheckedChange(item.id, checked) @@ -321,6 +475,116 @@ export default function CreateMonthly() { }} /> ))} + + + + {`[Kustom]`} + + + + + + Daftar Wilayah Polda dan Polres + + +
+ {listDest?.map((list: any) => ( +
+ + +
+ + handleParentChange(list.id) + } + disabled={unit.includes("2")} + /> + + +
+ +
+
+ + handleSelectAllPolres( + list.id, + Boolean(e) + ) + } + disabled={unit.includes("3")} + /> + +
+ {list.subDestination.map( + (subDes: any) => ( +
+ + handleChildChange( + `${list.id}${subDes.id}` + ) + } + disabled={unit.includes("3")} + /> + +
+ ) + )} +
+ + + +
+ ))} +
+ + @@ -340,7 +604,7 @@ export default function CreateMonthly() { > - + Publikasi @@ -348,7 +612,7 @@ export default function CreateMonthly() { - + Amplifikasi @@ -356,7 +620,7 @@ export default function CreateMonthly() { - + Kontra @@ -402,6 +666,31 @@ export default function CreateMonthly() { )} /> + ( + + Perencanaan Mingguan + + + + + )} + /> >({ + 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) => { + 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) => { + 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 ( +
+ +
+
+

Perencanaan MediaHub Bulanan

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + + Pilih Bulan + + + + + + + + + + + )} + /> + ( + + Detail Perencanaan + + + + + )} + /> +
+ +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/edit/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/edit/[id]/page.tsx new file mode 100644 index 00000000..cee02ce1 --- /dev/null +++ b/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>({ + 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) => { + 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) => { + 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 ( +
+ +
+
+

Perencanaan MediaHub Bulanan

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + + Pilih Bulan + + + + + + + + + + + )} + /> + ( + + Detail Perencanaan + + + + + )} + /> +
+ + +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/page.tsx index a751e2a4..19f8ccbd 100644 --- a/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/page.tsx +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/page.tsx @@ -83,7 +83,9 @@ export default function CreateMonthly() { time: "3", description: data.detail, username: "", - date: new Date(data.month).getMonth() + 1, + date: `${new Date(data.month).getMonth() + 1}/${new Date( + data.month + ).getFullYear()}`, status: "Open", }; console.log("req", reqData, data.month); diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/detail/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/detail/[id]/page.tsx new file mode 100644 index 00000000..1d3c4ff5 --- /dev/null +++ b/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(); + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + detail: "", + }, + }); + + const editor = useRef(null); + + const onSubmit = async (data: z.infer) => { + 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) => { + 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 ( +
+ +
+
+

Perencanaan MediaHub Mingguan

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + + Pilih Tanggal + + + + + + + + + + + )} + /> + + ( + + Detail Perencanaan + + + + + )} + /> +
+ +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/edit/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/edit/[id]/page.tsx new file mode 100644 index 00000000..de245202 --- /dev/null +++ b/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(); + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + detail: "", + }, + }); + + const editor = useRef(null); + + const onSubmit = async (data: z.infer) => { + 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) => { + 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 ( +
+ +
+
+

Perencanaan MediaHub Mingguan

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + + Pilih Tanggal + + + + + + + + + + + )} + /> + + ( + + Detail Perencanaan + + + + + )} + /> +
+ + +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx index 1c6bc2ae..028bcd47 100644 --- a/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/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"; @@ -30,7 +30,18 @@ import Swal from "sweetalert2"; import withReactContent from "sweetalert2-react-content"; import { error } from "@/config/swal"; import { getOnlyDate } from "@/utils/globals"; -import { savePlanning } from "@/service/agenda-setting/agenda-setting"; +import { + getMonthlyPlanList, + savePlanning, +} from "@/service/agenda-setting/agenda-setting"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import dayjs from "dayjs"; const FormSchema = z.object({ week: z.object({ @@ -47,6 +58,9 @@ const FormSchema = z.object({ detail: z.string({ required_error: "Required", }), + parentId: z.string({ + required_error: "Required", + }), }); export default function CreateMonthly() { const MySwal = withReactContent(Swal); @@ -57,6 +71,8 @@ export default function CreateMonthly() { detail: "", }, }); + const [monthlyList, setMonthlyList] = useState(); + const editor = useRef(null); const onSubmit = async (data: z.infer) => { @@ -91,6 +107,7 @@ export default function CreateMonthly() { username: "", date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`, status: "Open", + parentId: Number(data.parentId), }; console.log("req", reqData); const response = await savePlanning(reqData); @@ -112,6 +129,23 @@ export default function CreateMonthly() { }); }; + useEffect(() => { + getMonthlyPlanning(); + }, []); + + async function getMonthlyPlanning() { + const res = await getMonthlyPlanList(new Date().getDate(), 1); + + if (res.data !== null) { + const rawUser = res.data?.data; + const optionArr = rawUser.map((option: any) => ({ + id: option.id, + label: option.title, + value: String(option.id), + })); + setMonthlyList(optionArr); + } + } return (
@@ -198,6 +232,31 @@ export default function CreateMonthly() { )} /> + ( + + Perencanaan Bulanan + + + + + )} + /> [] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => {row.getValue("no")}, + }, + { + accessorKey: "title", + header: "Judul Perencanaan", + cell: ({ row }) => {row.getValue("title")}, + }, + { + accessorKey: "createdByName", + header: "Nama Pembuat", + cell: ({ row }) => {row.getValue("createdByName")}, + }, + { + accessorKey: "description", + header: "Deskripsi", + cell: ({ row }) => {htmlToString(row.getValue("description"))}, + }, + { + accessorKey: "status", + header: "Status", + cell: ({ row }) => {row.getValue("status")}, + }, + + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + Detail + + + + + ); + }, + }, +]; + +export default columns; diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/components/table.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/components/table.tsx new file mode 100644 index 00000000..68cd40ee --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/components/table.tsx @@ -0,0 +1,183 @@ +"use client"; + +import * as React from "react"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { Button } from "@/components/ui/button"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Search, + SquarePen, + Trash2, + TrendingDown, + TrendingUp, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { Input } from "@/components/ui/input"; +import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { paginationBlog } from "@/service/blog/blog"; +import { ticketingPagination } from "@/service/ticketing/ticketing"; +import { Badge } from "@/components/ui/badge"; +import { useRouter, useSearchParams } from "next/navigation"; +import TablePagination from "@/components/table/table-pagination"; +import columns from "./columns"; + +const TaskPlanMediahubTable = (props: { + data: any; + totalPage: number; + totalData: number; +}) => { + const { data, totalPage, totalData } = props; + const router = useRouter(); + const searchParams = useSearchParams(); + + const [dataTable, setDataTable] = React.useState([]); + // const [totalData, setTotalData] = React.useState(1); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }); + const [page, setPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + + const table = useReactTable({ + data: dataTable, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onPaginationChange: setPagination, + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + pagination, + }, + }); + + React.useEffect(() => { + const pageFromUrl = searchParams?.get("page"); + if (pageFromUrl) { + setPage(Number(pageFromUrl)); + } + }, [searchParams]); + + React.useEffect(() => { + fetchData(); + }, [page, limit, data]); + + async function fetchData() { + // try { + // const res = await ticketingPagination("", limit, page - 1); + // const data = res.data?.data; + console.log("datgaa", data); + const contentData = data; + contentData.forEach((item: any, index: number) => { + item.no = (page - 1) * limit + index + 1; + }); + + console.log("contentData : ", contentData); + + setDataTable(contentData); + // setTotalData(data?.totalElements); + // } catch (error) { + // console.error("Error fetching tasks:", error); + // } + } + + return ( +
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+ +
+ ); +}; + +export default TaskPlanMediahubTable; diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx new file mode 100644 index 00000000..c4e62a65 --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx @@ -0,0 +1,791 @@ +"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 { Checkbox } from "@/components/ui/checkbox"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { + getWeeklyPlanList, + savePlanning, +} from "@/service/agenda-setting/agenda-setting"; +import { id } from "date-fns/locale"; +import { close, error, loading } from "@/config/swal"; +import { getOnlyDate } from "@/utils/globals"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { getUserLevelForAssignments } from "@/service/task"; + +const FormSchema = z.object({ + date: z.date({ + required_error: "Required", + }), + title: z.string({ + required_error: "Required", + }), + detail: z.string({ + required_error: "Required", + }), + output: z.array(z.string()).refine((value) => value.some((item) => item), { + message: "Required", + }), + unit: z.array(z.string()).refine((value) => value.some((item) => item), { + message: "Required", + }), + type: z.string({ + required_error: "Required", + }), + parentId: z.string({ + required_error: "Required", + }), + media: z.array(z.string()).refine((value) => value.some((item) => item), { + message: "Required", + }), +}); + +const items = [ + { + id: "2", + label: "Audio Visual", + }, + { + id: "1", + label: "Foto", + }, + { + id: "4", + label: "Audio", + }, + { + id: "3", + label: "Text", + }, +]; + +const medias = [ + { + id: "5", + label: "X", + }, + { + id: "1", + label: "Facebook", + }, + { + id: "2", + label: "Instagram", + }, + { + id: "3", + label: "Youtube", + }, + { + id: "4", + label: "Tiktok", + }, +]; + +const units = [ + { + id: "1", + label: "Mabes Polri", + }, + { + id: "2", + label: "Polda", + }, + { + id: "3", + label: "Polres", + }, +]; +export default function CreateMonthly() { + const MySwal = withReactContent(Swal); + const [weeklyList, setWeeklyList] = useState(); + const router = useRouter(); + const [selected, setSelected] = useState<{ [key: string]: boolean }>({}); + const [selectAll, setSelectAll] = useState<{ [key: string]: boolean }>({}); + const [listDest, setListDest] = useState([]); + + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + unit: [], + output: [], + detail: "", + media: [], + }, + }); + const editor = useRef(null); + + useEffect(() => { + getWeeklyPlanning(); + }, []); + + async function getWeeklyPlanning() { + const res = await getWeeklyPlanList(new Date().getDate(), 2); + + if (res.data !== null) { + const rawUser = res.data?.data; + const optionArr = rawUser.map((option: any) => ({ + id: option.id, + label: option.title, + value: String(option.id), + })); + setWeeklyList(optionArr); + } + } + + const onSubmit = async (data: z.infer) => { + 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) => { + const getSelectedString = () => { + return Object.keys(selected) + .filter((key) => selected[key]) + .join(", "); + }; + loading(); + + const reqData = { + planningTypeId: 2, + time: "1", + title: data.title, + assignmentTypeId: data.type, //string + description: data.detail, + assignedToLevel: unit?.join(","), //string + assignmentPurpose: getSelectedString(), //string + fileTypeOutput: data.output?.join(","), //string + status: "Open", + date: getOnlyDate(data.date), + platformType: data.media?.join(","), + parentId: Number(data.parentId), //number + assignmentMainTypeId: 2, + }; + + console.log("req =>", reqData); + const response = await savePlanning(reqData); + + if (response.error) { + error(response.message); + return false; + } + + close(); + MySwal.fire({ + title: "Sukses", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then((result) => { + if (result.isConfirmed) { + router.push("/curator/task-plan/medsos-mediahub"); + } + }); + }; + + const output = form.watch("output"); + const media = form.watch("media"); + const unit = form.watch("unit"); + + const isAllChecked = items.every((item) => output?.includes(item.id)); + const isAllMediaChecked = medias.every((item) => media?.includes(item.id)); + const isAllUnitChecked = units.every((item) => unit?.includes(item.id)); + + useEffect(() => { + async function initState() { + const response = await getUserLevelForAssignments(); + setListDest(response.data.data.list); + } + + initState(); + }, []); + + const handleParentChange = (listId: string) => { + setSelected((prev) => ({ + ...prev, + [listId]: !prev[listId], + })); + }; + + const handleSelectAllPolres = (listId: string, isChecked: boolean) => { + setSelectAll((prev) => ({ + ...prev, + [listId]: isChecked, + })); + + setSelected((prev) => { + const updatedState = { ...prev }; + listDest + .find((list: any) => list.id === listId) + ?.subDestination.forEach((subDes: any) => { + updatedState[`${listId}${subDes.id}`] = isChecked; + }); + return updatedState; + }); + }; + + const handleChildChange = (childId: string) => { + setSelected((prev) => ({ + ...prev, + [childId]: !prev[childId], + })); + }; + + return ( +
+ +
+
+ + Bulanan + + + Mingguan + + +
+ Harian +
+
+
+

Perencanaan MediaHub

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + +
+ Output Tugas +
+
+
+ { + if (checked) { + form.setValue( + "output", + items.map((item) => item.id) + ); + } else { + form.setValue("output", []); + } + }} + /> + +
+ + {items.map((item) => ( + { + return ( + + + { + form.setValue( + "output", + checked + ? [...output, item.id] + : output.filter( + (value) => value !== item.id + ) + ); + }} + /> + + + {item.label} + + + ); + }} + /> + ))} +
+ + + )} + /> + ( + +
+ Pelaksana Tugas +
+
+
+ { + if (checked) { + form.setValue( + "unit", + units.map((item) => item.id) + ); + } else { + form.setValue("unit", []); + } + }} + /> + +
+ + {units.map((item) => ( + { + return ( + + + { + form.setValue( + "unit", + checked + ? [...unit, item.id] + : unit.filter( + (value) => value !== item.id + ) + ); + }} + /> + + + {item.label} + + + ); + }} + /> + ))} + + + + {`[Kustom]`} + + + + + + Daftar Wilayah Polda dan Polres + + +
+ {listDest?.map((list: any) => ( +
+ + +
+ + handleParentChange(list.id) + } + disabled={unit.includes("2")} + /> + + +
+ +
+
+ + handleSelectAllPolres( + list.id, + Boolean(e) + ) + } + disabled={unit.includes("3")} + /> + +
+ {list.subDestination.map( + (subDes: any) => ( +
+ + handleChildChange( + `${list.id}${subDes.id}` + ) + } + disabled={unit.includes("3")} + /> + +
+ ) + )} +
+ + + +
+ ))} +
+ + +
+ + + )} + /> + ( + +
+ Jenis Platform +
+
+
+ { + if (checked) { + form.setValue( + "media", + medias.map((item) => item.id) + ); + } else { + form.setValue("media", []); + } + }} + /> + +
+ + {medias.map((item) => ( + { + return ( + + + { + form.setValue( + "media", + checked + ? [...media, item.id] + : media.filter( + (value) => value !== item.id + ) + ); + }} + /> + + + {item.label} + + + ); + }} + /> + ))} +
+ + + )} + /> + ( + + Jenis Penugasan + + + + + + + + Publikasi + + + + + + + + Amplifikasi + + + + + + + Kontra + + + + + + )} + /> + ( + + Perencanaan Mingguan + + + + + )} + /> + ( + + Pilih Tanggal + + + + + + + + + + + )} + /> + ( + + Detail Perencanaan + + + + + )} + /> +
+ + +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/detail/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/detail/[id]/page.tsx new file mode 100644 index 00000000..5c99af8b --- /dev/null +++ b/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>({ + 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) => { + 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) => { + 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 ( +
+ +
+
+

Perencanaan MediaHub Bulanan

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + + Pilih Bulan + + + + + + + + + + + )} + /> + ( + + Detail Perencanaan + + + + + )} + /> +
+ +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/edit/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/edit/[id]/page.tsx new file mode 100644 index 00000000..cee02ce1 --- /dev/null +++ b/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>({ + 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) => { + 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) => { + 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 ( +
+ +
+
+

Perencanaan MediaHub Bulanan

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + + Pilih Bulan + + + + + + + + + + + )} + /> + ( + + Detail Perencanaan + + + + + )} + /> +
+ + +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/page.tsx new file mode 100644 index 00000000..c092c096 --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/page.tsx @@ -0,0 +1,229 @@ +"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, { 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 { error } from "@/config/swal"; +import { savePlanning } from "@/service/agenda-setting/agenda-setting"; + +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 CreateMonthly() { + const MySwal = withReactContent(Swal); + const router = useRouter(); + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + detail: "", + }, + }); + const editor = useRef(null); + + const onSubmit = async (data: z.infer) => { + 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) => { + const reqData = { + planningTypeId: 2, + 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/medsos-mediahub"); + } + }); + }; + + const handleMonthSelect = (selectedDate: Date | undefined) => { + if (!selectedDate) return; + const newDate = new Date( + selectedDate.getFullYear(), + selectedDate.getMonth(), + 1 + ); + form.setValue("month", newDate); + }; + return ( +
+ +
+
+
+ Bulanan +
+ + Mingguan + + + Harian + +
+
+

Perencanaan MediaHub Bulanan

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + + Pilih Bulan + + + + + + + + + + + )} + /> + ( + + Detail Perencanaan + + + + + )} + /> +
+ + +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/detail/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/detail/[id]/page.tsx new file mode 100644 index 00000000..1d3c4ff5 --- /dev/null +++ b/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(); + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + detail: "", + }, + }); + + const editor = useRef(null); + + const onSubmit = async (data: z.infer) => { + 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) => { + 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 ( +
+ +
+
+

Perencanaan MediaHub Mingguan

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + + Pilih Tanggal + + + + + + + + + + + )} + /> + + ( + + Detail Perencanaan + + + + + )} + /> +
+ +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/edit/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/edit/[id]/page.tsx new file mode 100644 index 00000000..de245202 --- /dev/null +++ b/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(); + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + detail: "", + }, + }); + + const editor = useRef(null); + + const onSubmit = async (data: z.infer) => { + 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) => { + 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 ( +
+ +
+
+

Perencanaan MediaHub Mingguan

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + + Pilih Tanggal + + + + + + + + + + + )} + /> + + ( + + Detail Perencanaan + + + + + )} + /> +
+ + +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/page.tsx new file mode 100644 index 00000000..ccea6fb7 --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/page.tsx @@ -0,0 +1,292 @@ +"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 { error } 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"; + +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", + }), + parentId: z.string({ + required_error: "Required", + }), +}); +export default function CreateMonthly() { + const MySwal = withReactContent(Swal); + const router = useRouter(); + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + detail: "", + }, + }); + const [monthlyList, setMonthlyList] = useState(); + + const editor = useRef(null); + + const onSubmit = async (data: z.infer) => { + 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) => { + const reqData = { + planningTypeId: 2, + title: data.title, + time: "2", + description: data.detail, + username: "", + date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`, + status: "Open", + parentId: Number(data.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/medsos-mediahub"); + } + }); + }; + + useEffect(() => { + getMonthlyPlanning(); + }, []); + + async function getMonthlyPlanning() { + const res = await getMonthlyPlanList(new Date().getDate(), 2); + + if (res.data !== null) { + const rawUser = res.data?.data; + const optionArr = rawUser.map((option: any) => ({ + id: option.id, + label: option.title, + value: String(option.id), + })); + console.log("ssss", optionArr); + setMonthlyList(optionArr); + } + } + + return ( +
+ +
+
+ + Bulanan + +
+ Mingguan +
+ + + Harian + +
+
+

Perencanaan MediaHub Mingguan

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + + Pilih Tanggal + + + + + + + + + + + )} + /> + ( + + Perencanaan Bulanan + + + + + )} + /> + ( + + Detail Perencanaan + + + + + )} + /> +
+ + +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/detail/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/detail/[id]/page.tsx new file mode 100644 index 00000000..68451be8 --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/detail/[id]/page.tsx @@ -0,0 +1,270 @@ +"use client"; +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { close, loading } from "@/config/swal"; +import { getWeeklyPlanList } from "@/service/agenda-setting/agenda-setting"; +import { getPlanningById } from "@/service/planning/planning"; +import { useParams } from "next/navigation"; +import dayjs from "dayjs"; +import { useEffect, useRef, useState } from "react"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import JoditEditor from "jodit-react"; + +export default function DetailTaskPlanMediahub() { + const params = useParams(); + const id = params?.id; + const editor = useRef(null); + + const [planningData, setPlanningData] = useState(); + + const [type, setType] = useState(""); + + const [weeklyList, setWeeklyList] = useState([]); + const [weeklySelected, setWeeklySelected] = useState(); + + const [taskOutput, setTaskOutput] = useState([]); + const [destination, setDestination] = useState([]); + const [listDest, setListDest] = useState([]); + const [topDestination, setTopDestination] = useState([]); + + useEffect(() => { + initFetch(); + }, [id]); + + async function initFetch() { + if (id != undefined) { + loading(); + const res = await getPlanningById(id); + close(); + + if (res?.data?.data != undefined) { + const data = res?.data?.data; + console.log("Data :", data); + setPlanningData(data); + setAssignedTopLevel(data?.assignedToTopLevel); + setArrayDestination(data?.assignedToLevel); + setArrayTaskOutput(data?.fileTypeOutput); + setType(String(data?.assignmentTypeId)); + } + } + } + + function setArrayDestination(assignedToLevel: any) { + if (assignedToLevel?.length > 0) { + const arrayDestination = []; + const arrayDest = assignedToLevel.split(","); + + for (const element of arrayDest) { + arrayDestination.push(element); + } + + setDestination(arrayDestination); + } + } + + function setAssignedTopLevel(assignedToTopLevel: any) { + if (assignedToTopLevel?.length > 0) { + const arrayTopLevel = []; + const arrayTop = assignedToTopLevel.split(","); + + for (const element of arrayTop) { + arrayTopLevel.push(Number(element)); + } + + setTopDestination(arrayTopLevel); + } + } + + function setArrayTaskOutput(output: any) { + if (output?.length > 0) { + const arrayOutput = []; + const arrOutput = output.split(","); + + for (const element of arrOutput) { + arrayOutput.push(Number(element)); + } + + setTaskOutput(arrayOutput); + } + } + + useEffect(() => { + getWeeklyPlanning(); + }, [planningData]); + + async function getWeeklyPlanning() { + const TODAY = dayjs().format("YYYY-MM-DD"); + const res = await getWeeklyPlanList(planningData?.date || TODAY, 1); + + if (res.data !== null) { + const rawUser = res.data?.data; + const optionArr = rawUser.map((option: any) => ({ + id: option.id, + label: option.title, + value: option.id, + })); + console.log("res", optionArr); + + setWeeklyList(optionArr); + } + } + return ( + <> + +
+

Perencanaan Mediahub

+

Judul Perencanaan

+ +

Output Tugas

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Pelaksana Tugas

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Jenis Penugasan

+ +
+ + +
+
+ + +
+
+ + +
+ +

Tanggal

+ +

Penugasan Mingguan

+ + +
+ + ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx index 5009e0f2..67ea7a5c 100644 --- a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx +++ b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx @@ -1,9 +1,41 @@ +"use client"; import SiteBreadcrumb from "@/components/site-breadcrumb"; +import ListViewSocialMediaTable from "@/components/table/task-plan/list-view-social-media-table"; +import SingleViewSocialMediaTable from "@/components/table/task-plan/single-view-social-media-table"; +import { Button } from "@/components/ui/button"; +import { useRouter } from "@/i18n/routing"; +import { useState } from "react"; -export default function TaskPlanMedsosMediaHub() { +export default function TaskPlanSocialMediaMediaHub() { + const router = useRouter(); + const [view, setView] = useState("single"); return ( -
+ <> -
+
+
+ + +
+ {view == "single" ? ( + + ) : ( + + )} +
+ ); } diff --git a/app/[locale]/(public)/audio/detail/[slug]/page.tsx b/app/[locale]/(public)/audio/detail/[slug]/page.tsx index 8901aa89..8cb993dd 100644 --- a/app/[locale]/(public)/audio/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/audio/detail/[slug]/page.tsx @@ -49,10 +49,25 @@ const DetailAudio = () => {
+ {/* Footer Informasi */} +
+

+ oleh {detailDataAudio?.uploadedBy?.userLevel?.name} | Diupdate pada {detailDataAudio?.updatedAt} WIB |  + +   + {detailDataAudio?.clickCount} +

+

Kreator: {detailDataAudio?.creatorName}

+
+ {/* Keterangan */} +
+

{detailDataAudio?.title}

+
+
{/* Bagian Kanan */} -
+
@@ -106,24 +121,8 @@ const DetailAudio = () => {
- - {/* Footer Informasi */} -
-

- oleh {detailDataAudio?.uploadedBy?.userLevel?.name} | Diupdate pada {detailDataAudio?.updatedAt} WIB |  - -   - {detailDataAudio?.clickCount} -

-

Kreator: {detailDataAudio?.creatorName}

-
- - {/* Keterangan */} -
-

{detailDataAudio?.title}

-
-
+
{/* Comment */}
diff --git a/app/[locale]/(public)/document/detail/[slug]/page.tsx b/app/[locale]/(public)/document/detail/[slug]/page.tsx index 039b88cd..801cd83c 100644 --- a/app/[locale]/(public)/document/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/document/detail/[slug]/page.tsx @@ -4,11 +4,9 @@ import { useParams, usePathname, useRouter } from "next/navigation"; import React, { useEffect, useState } from "react"; import { Icon } from "@iconify/react/dist/iconify.js"; import { getDetail } from "@/service/landing/landing"; -import VideoPlayer from "@/utils/video-player"; import NewContent from "@/components/landing-page/new-content"; import { Link } from "@/i18n/routing"; import { Textarea } from "@/components/ui/textarea"; -import { BarWave } from "react-cssfx-loading"; const DetailDocument = () => { const [selectedSize, setSelectedSize] = useState("L"); @@ -49,19 +47,19 @@ const DetailDocument = () => {
{/* Footer Informasi */} -
-

+

+

oleh {detailDataDocument?.uploadedBy?.userLevel?.name} | Diupdate pada {detailDataDocument?.updatedAt} WIB |    {detailDataDocument?.clickCount}

-

Kreator: {detailDataDocument?.creatorName}

+

Kreator: {detailDataDocument?.creatorName}

{/* Keterangan */}
-

{detailDataDocument?.title}

+

{detailDataDocument?.title}

@@ -123,15 +121,15 @@ const DetailDocument = () => {
{/* Comment */}
-
+

Berikan Komentar