diff --git a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx index 5157cefb..9618fb74 100644 --- a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx +++ b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx @@ -17,12 +17,15 @@ import { EventContentArg } from "@fullcalendar/core"; import EventModal from "./event-modal"; import { useTranslations } from "next-intl"; import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting"; +import dayjs from "dayjs"; const wait = () => new Promise((resolve) => setTimeout(resolve, 1000)); interface CalendarViewProps { events: CalendarEvent[]; categories: CalendarCategory[]; } +const INITIAL_YEAR = dayjs().format("YYYY"); +const INITIAL_MONTH = dayjs().format("M"); export interface CalendarEvent { id: string; title: string; @@ -80,6 +83,18 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { { title: "Create New theme", id: "104", tag: "etc" }, ]); + useEffect(() => { + getCalendarEvents(); + }); + const getCalendarEvents = async () => { + const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, ""); + console.log("ress", res); + + if (res.error) { + return false; + } + }; + useEffect(() => { setSelectedCategory(categories?.map((c) => c.value)); }, [events, categories]); @@ -251,14 +266,14 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { /> -
+ {/*

{t("shortDesc")}

{dragEvents.map((event) => ( ))} -
+
*/}
{t("filter")}
diff --git a/app/[locale]/(protected)/contributor/agenda-setting/data.ts b/app/[locale]/(protected)/contributor/agenda-setting/data.ts index 16e94cee..6b28e1b1 100644 --- a/app/[locale]/(protected)/contributor/agenda-setting/data.ts +++ b/app/[locale]/(protected)/contributor/agenda-setting/data.ts @@ -1,17 +1,31 @@ +import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting"; import { faker } from "@faker-js/faker"; +import dayjs from "dayjs"; const date = new Date(); const prevDay = new Date().getDate() - 1; const nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000); +const INITIAL_YEAR = dayjs().format("YYYY"); +const INITIAL_MONTH = dayjs().format("M"); // prettier-ignore const nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() + 1, 1) // prettier-ignore const prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1) + +export const getCalendarEvents = async () => { + const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, ""); + if (res.error) { + return false; + } + console.log("ress", res.data.data); + return res?.data?.data; +}; + export const calendarEvents = [ { id: faker.string.uuid(), - title: "All Day Event", + title: "aaaAll Day Event", start: date, end: nextDay, allDay: false, diff --git a/app/[locale]/(protected)/contributor/agenda-setting/utils.ts b/app/[locale]/(protected)/contributor/agenda-setting/utils.ts index e4862dd2..427a2fd9 100644 --- a/app/[locale]/(protected)/contributor/agenda-setting/utils.ts +++ b/app/[locale]/(protected)/contributor/agenda-setting/utils.ts @@ -2,10 +2,10 @@ import { calendarEvents, categories } from "./data"; // get events export const getEvents = async () => { - return calendarEvents; + return calendarEvents; }; // get categories export const getCategories = async () => { - return categories; -} \ No newline at end of file + return categories; +}; diff --git a/app/[locale]/(protected)/curator/content-production/layout.tsx b/app/[locale]/(protected)/curator/content-production/layout.tsx new file mode 100644 index 00000000..3534b5a4 --- /dev/null +++ b/app/[locale]/(protected)/curator/content-production/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Content Production", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/curator/content-production/page.tsx b/app/[locale]/(protected)/curator/content-production/page.tsx new file mode 100644 index 00000000..e17db212 --- /dev/null +++ b/app/[locale]/(protected)/curator/content-production/page.tsx @@ -0,0 +1,11 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import ContentProductionVisualization from "@/components/visualization/content-production"; + +export default function ContentProduction() { + return ( +
+ + +
+ ); +} diff --git a/app/[locale]/(protected)/curator/pattern-relation/layout.tsx b/app/[locale]/(protected)/curator/pattern-relation/layout.tsx new file mode 100644 index 00000000..c2881520 --- /dev/null +++ b/app/[locale]/(protected)/curator/pattern-relation/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Pattern Relation", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/curator/pattern-relation/page.tsx b/app/[locale]/(protected)/curator/pattern-relation/page.tsx new file mode 100644 index 00000000..6bcb42ba --- /dev/null +++ b/app/[locale]/(protected)/curator/pattern-relation/page.tsx @@ -0,0 +1,11 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import PatternRelationVisualization from "@/components/visualization/pattern-relation-viz"; + +export default function PatternRelation() { + 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 new file mode 100644 index 00000000..d7fd5b5b --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx @@ -0,0 +1,75 @@ +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"; + +const columns: ColumnDef[] = [ + { + 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/mediahub/components/table.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/components/table.tsx new file mode 100644 index 00000000..68cd40ee --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/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/mediahub/create-daily/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx new file mode 100644 index 00000000..9ecaeaec --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx @@ -0,0 +1,436 @@ +"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 } 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 { Checkbox } from "@/components/ui/checkbox"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; + +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.enum(["publication", "amplification", "contra"], { + required_error: "Required", + }), +}); + +const items = [ + { + id: "video", + label: "Audio Visual", + }, + { + id: "image", + label: "Foto", + }, + { + id: "audio", + label: "Audio", + }, + { + id: "text", + label: "Text", + }, +]; + +const units = [ + { + id: "mabes", + label: "Mabes Polri", + }, + { + id: "polda", + label: "Polda", + }, + { + id: "polres", + label: "Polres", + }, +]; +export default function CreateMonthly() { + const MySwal = withReactContent(Swal); + + 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) => { + console.log("data", data); + }; + + 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) => { + form.setValue( + "unit", + checked ? [...unit, id] : unit.filter((value) => value !== id) + ); + }; + + return ( +
+ +
+
+ + Bulanan + + + Mingguan + + +
+ Harian +
+
+
+

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} + + + ); + }} + /> + ))} +
+ + + )} + /> + ( + + Jenis Penugasan + + + + + + + + Publikasi + + + + + + + + Amplifikasi + + + + + + + Kontra + + + + + + )} + /> + ( + + Pilih Tanggal + + + + + + + + + + + )} + /> + ( + + 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 new file mode 100644 index 00000000..a751e2a4 --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/page.tsx @@ -0,0 +1,227 @@ +"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: 1, + title: data.title, + time: "3", + description: data.detail, + username: "", + date: new Date(data.month).getMonth() + 1, + 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 + ); + 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/mediahub/create-weekly/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx new file mode 100644 index 00000000..1c6bc2ae --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx @@ -0,0 +1,232 @@ +"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 { getOnlyDate } from "@/utils/globals"; +import { savePlanning } from "@/service/agenda-setting/agenda-setting"; + +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 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: 1, + title: data.title, + time: "2", + description: data.detail, + username: "", + date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`, + status: "Open", + }; + 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"); + } + }); + }; + + return ( +
+ +
+
+ + Bulanan + +
+ Mingguan +
+ + + Harian + +
+
+

Perencanaan MediaHub Mingguan

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + + Pilih Tanggal + + + + + + + + + + + )} + /> + ( + + Detail Perencanaan + + + + + )} + /> +
+ + +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/detail/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/detail/[id]/page.tsx new file mode 100644 index 00000000..68451be8 --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/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/mediahub/layout.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/layout.tsx new file mode 100644 index 00000000..8ba3fc82 --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Mediahub", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/page.tsx new file mode 100644 index 00000000..3facc20d --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/page.tsx @@ -0,0 +1,37 @@ +"use client"; +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import ListViewTable from "@/components/table/task-plan/list-view-table"; +import SingleViewTable from "@/components/table/task-plan/single-view-table"; +import { Button } from "@/components/ui/button"; +import { useRouter } from "@/i18n/routing"; +import { useState } from "react"; + +export default function TaskPlanMediaHub() { + const router = useRouter(); + const [view, setView] = useState("single"); + return ( + <> + +
+
+ + +
+ {view == "single" ? : } +
+ + ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/layout.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/layout.tsx new file mode 100644 index 00000000..ebe80adf --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Medos Mediahub", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx new file mode 100644 index 00000000..5009e0f2 --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx @@ -0,0 +1,9 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; + +export default function TaskPlanMedsosMediaHub() { + return ( +
+ +
+ ); +} diff --git a/app/[locale]/(protected)/dashboard/page.tsx b/app/[locale]/(protected)/dashboard/page.tsx index a043ea6e..89ba710b 100644 --- a/app/[locale]/(protected)/dashboard/page.tsx +++ b/app/[locale]/(protected)/dashboard/page.tsx @@ -1,4 +1,4 @@ -'use client' +"use client"; import { StatisticsBlock } from "@/components/blocks/statistics-block"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; @@ -7,6 +7,12 @@ import { useTranslations } from "next-intl"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Button } from "@/components/ui/button"; import { UploadIcon } from "lucide-react"; + +import Cookies from "js-cookie"; +import { useEffect } from "react"; +import { getCookiesDecrypt } from "@/lib/utils"; +import DashboardVisualization from "@/components/visualization/dashboard-viz"; +import SiteBreadcrumb from "@/components/site-breadcrumb"; import TaskTable from "../contributor/task/components/task-table"; import PressConferenceTable from "../contributor/schedule/press-release/components/pressrilis-table"; import BlogTable from "../contributor/blog/components/blog-table"; @@ -16,7 +22,14 @@ import { Link } from "@/components/navigation"; const DashboardPage = () => { const t = useTranslations("AnalyticsDashboard"); - return ( + const roleId = getCookiesDecrypt("urie"); + + return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? ( +
+ + +
+ ) : (
diff --git a/app/[locale]/(public)/audio/layout.tsx b/app/[locale]/(public)/audio/layout.tsx index fab820cf..cbd3c9fb 100644 --- a/app/[locale]/(public)/audio/layout.tsx +++ b/app/[locale]/(public)/audio/layout.tsx @@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer"; import DashCodeHeader from "@/components/partials/header"; import { redirect } from "@/components/navigation"; -import Footer from "@/components/landing-page/footer"; -import Navbar from "@/components/landing-page/navbar"; +import Footer from "@/components/landing-page/Footer"; +import Navbar from "@/components/landing-page/Navbar"; const layout = async ({ children }: { children: React.ReactNode }) => { return ( diff --git a/app/[locale]/(public)/contact/layout.tsx b/app/[locale]/(public)/contact/layout.tsx index b83fc734..a7b2b396 100644 --- a/app/[locale]/(public)/contact/layout.tsx +++ b/app/[locale]/(public)/contact/layout.tsx @@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer"; import DashCodeHeader from "@/components/partials/header"; import { redirect } from "@/components/navigation"; -import Navbar from "@/components/landing-page/navbar"; -import Footer from "@/components/landing-page/footer"; +import Navbar from "@/components/landing-page/Navbar"; +import Footer from "@/components/landing-page/Footer"; const layout = async ({ children }: { children: React.ReactNode }) => { return ( diff --git a/app/[locale]/(public)/document/layout.tsx b/app/[locale]/(public)/document/layout.tsx index fab820cf..cbd3c9fb 100644 --- a/app/[locale]/(public)/document/layout.tsx +++ b/app/[locale]/(public)/document/layout.tsx @@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer"; import DashCodeHeader from "@/components/partials/header"; import { redirect } from "@/components/navigation"; -import Footer from "@/components/landing-page/footer"; -import Navbar from "@/components/landing-page/navbar"; +import Footer from "@/components/landing-page/Footer"; +import Navbar from "@/components/landing-page/Navbar"; const layout = async ({ children }: { children: React.ReactNode }) => { return ( diff --git a/app/[locale]/(public)/faqs/layout.tsx b/app/[locale]/(public)/faqs/layout.tsx index b83fc734..a7b2b396 100644 --- a/app/[locale]/(public)/faqs/layout.tsx +++ b/app/[locale]/(public)/faqs/layout.tsx @@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer"; import DashCodeHeader from "@/components/partials/header"; import { redirect } from "@/components/navigation"; -import Navbar from "@/components/landing-page/navbar"; -import Footer from "@/components/landing-page/footer"; +import Navbar from "@/components/landing-page/Navbar"; +import Footer from "@/components/landing-page/Footer"; const layout = async ({ children }: { children: React.ReactNode }) => { return ( diff --git a/app/[locale]/(public)/feedback/layout.tsx b/app/[locale]/(public)/feedback/layout.tsx index b83fc734..a7b2b396 100644 --- a/app/[locale]/(public)/feedback/layout.tsx +++ b/app/[locale]/(public)/feedback/layout.tsx @@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer"; import DashCodeHeader from "@/components/partials/header"; import { redirect } from "@/components/navigation"; -import Navbar from "@/components/landing-page/navbar"; -import Footer from "@/components/landing-page/footer"; +import Navbar from "@/components/landing-page/Navbar"; +import Footer from "@/components/landing-page/Footer"; const layout = async ({ children }: { children: React.ReactNode }) => { return ( diff --git a/app/[locale]/(public)/image/layout.tsx b/app/[locale]/(public)/image/layout.tsx index fab820cf..cbd3c9fb 100644 --- a/app/[locale]/(public)/image/layout.tsx +++ b/app/[locale]/(public)/image/layout.tsx @@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer"; import DashCodeHeader from "@/components/partials/header"; import { redirect } from "@/components/navigation"; -import Footer from "@/components/landing-page/footer"; -import Navbar from "@/components/landing-page/navbar"; +import Footer from "@/components/landing-page/Footer"; +import Navbar from "@/components/landing-page/Navbar"; const layout = async ({ children }: { children: React.ReactNode }) => { return ( diff --git a/app/[locale]/(public)/indeks/layout.tsx b/app/[locale]/(public)/indeks/layout.tsx index fab820cf..cbd3c9fb 100644 --- a/app/[locale]/(public)/indeks/layout.tsx +++ b/app/[locale]/(public)/indeks/layout.tsx @@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer"; import DashCodeHeader from "@/components/partials/header"; import { redirect } from "@/components/navigation"; -import Footer from "@/components/landing-page/footer"; -import Navbar from "@/components/landing-page/navbar"; +import Footer from "@/components/landing-page/Footer"; +import Navbar from "@/components/landing-page/Navbar"; const layout = async ({ children }: { children: React.ReactNode }) => { return ( diff --git a/app/[locale]/(public)/schedule/layout.tsx b/app/[locale]/(public)/schedule/layout.tsx index fab820cf..cbd3c9fb 100644 --- a/app/[locale]/(public)/schedule/layout.tsx +++ b/app/[locale]/(public)/schedule/layout.tsx @@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer"; import DashCodeHeader from "@/components/partials/header"; import { redirect } from "@/components/navigation"; -import Footer from "@/components/landing-page/footer"; -import Navbar from "@/components/landing-page/navbar"; +import Footer from "@/components/landing-page/Footer"; +import Navbar from "@/components/landing-page/Navbar"; const layout = async ({ children }: { children: React.ReactNode }) => { return ( diff --git a/app/[locale]/(public)/video/layout.tsx b/app/[locale]/(public)/video/layout.tsx index fab820cf..cbd3c9fb 100644 --- a/app/[locale]/(public)/video/layout.tsx +++ b/app/[locale]/(public)/video/layout.tsx @@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer"; import DashCodeHeader from "@/components/partials/header"; import { redirect } from "@/components/navigation"; -import Footer from "@/components/landing-page/footer"; -import Navbar from "@/components/landing-page/navbar"; +import Footer from "@/components/landing-page/Footer"; +import Navbar from "@/components/landing-page/Navbar"; const layout = async ({ children }: { children: React.ReactNode }) => { return ( diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css index af1fb9d9..c27510ef 100644 --- a/app/[locale]/globals.css +++ b/app/[locale]/globals.css @@ -34,8 +34,6 @@ --warning: 16 93% 70%; --warning-foreground: 33.3 100% 96.5%; - - --success: 154 52% 55%; --success-foreground: 138.5 76.5% 96.7%; @@ -85,7 +83,6 @@ } .dark { - --background: 222.2 47.4% 11.2%; --foreground: 210 40% 98%; @@ -94,7 +91,6 @@ --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; - --card: 215 27.9% 16.9%; --card-foreground: 210 40% 98%; @@ -166,19 +162,16 @@ .dashcode-app-codeVmapWarning path { @apply fill-warning; } -.dashcode-app-codeVmapWarning path .svg-map__location[aria-checked="true"] { - @apply fill-warning; +.dashcode-app-codeVmapWarning path .svg-map__location[aria-checked="true"] { + @apply fill-warning; } .dashcode-app-codeVmapSuccess path { @apply fill-success; - } -.dashcode-app-codeVmapSuccess path .svg-map__location[aria-checked="true"] { - @apply fill-success; +.dashcode-app-codeVmapSuccess path .svg-map__location[aria-checked="true"] { + @apply fill-success; } - - @layer base { * { @apply border-border; @@ -208,7 +201,6 @@ padding-right: 0px !important; } - .no-scrollbar::-webkit-scrollbar { width: 0px; } @@ -216,7 +208,6 @@ .no-scrollbar::-webkit-scrollbar-thumb { background-color: transparent; } - } .logo-box-3 { @@ -227,15 +218,23 @@ @apply flex flex-col items-center justify-center; } - .has-sticky-header::after { position: absolute; z-index: -10; --tw-backdrop-blur: blur(12px); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); --tw-content: ""; content: var(--tw-content); - background: linear-gradient(180deg, rgba(var(--v-theme-background)) 44%, rgba(var(--v-theme-background)) 73%, rgba(var(--v-theme-background))); + background: linear-gradient( + 180deg, + rgba(var(--v-theme-background)) 44%, + rgba(var(--v-theme-background)) 73%, + rgba(var(--v-theme-background)) + ); background-repeat: repeat; block-size: 5.5rem; inset-block-start: -2.5rem; @@ -248,10 +247,19 @@ position: absolute; z-index: -10; --tw-backdrop-blur: blur(12px); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); --tw-content: ""; content: var(--tw-content); - background: linear-gradient(180deg, rgba(var(--v-theme-background)) 44%, rgba(var(--v-theme-background)) 73%, rgba(var(--v-theme-background))); + background: linear-gradient( + 180deg, + rgba(var(--v-theme-background)) 44%, + rgba(var(--v-theme-background)) 73%, + rgba(var(--v-theme-background)) + ); background-repeat: repeat; block-size: 5.5rem; inset-block-start: 1.5rem; @@ -365,7 +373,7 @@ @apply hidden; } -.dashcode-app-calendar .fc .fc-list-sticky .fc-list-day>* { +.dashcode-app-calendar .fc .fc-list-sticky .fc-list-day > * { @apply bg-default-50; } @@ -373,12 +381,11 @@ @apply pt-0; } -.dashcode-app-calendar .fc-timegrid-event-harness>.fc-timegrid-event { +.dashcode-app-calendar .fc-timegrid-event-harness > .fc-timegrid-event { @apply static; } @media (max-width: 981px) { - .dashcode-app-calendar .fc-button-group, .dashcode-app-calendar .fc .fc-toolbar { display: block !important; @@ -445,14 +452,13 @@ @apply bg-success border-none text-primary-foreground text-center px-2 font-medium text-sm; } -.dashcode-app-calendar .dark { +.dashcode-app-calendar .dark { @apply bg-card-foreground border-none text-primary-foreground px-2 font-medium text-sm; } - /* react select */ - .dashcode-app .react-select .react-select.is-invalid .select__control { +.dashcode-app .react-select .react-select.is-invalid .select__control { border-color: none !important; } @@ -473,10 +479,13 @@ } .dashcode-app .react-select .select__menu .select__option { - @apply hover:bg-default/10; + @apply hover:bg-default/10; } -.dashcode-app .react-select .select__menu .select__option.select__option--is-selected { +.dashcode-app + .react-select + .select__menu + .select__option.select__option--is-selected { @apply bg-default dark:bg-default-200; } @@ -492,11 +501,16 @@ @apply text-default-500; } -.dashcode-app .react-select .react-select__control.select__control--is-disabled { +.dashcode-app + .react-select + .react-select__control.select__control--is-disabled { @apply cursor-not-allowed; } -.dashcode-app .react-select .react-select__control .select__indicator-separator { +.dashcode-app + .react-select + .react-select__control + .select__indicator-separator { @apply bg-default-50 text-default-800 placeholder:text-opacity-60; } @@ -504,7 +518,12 @@ @apply cursor-pointer text-default-600; } -.dashcode-app .react-select .has-error .react-select__control .select__indicator svg { +.dashcode-app + .react-select + .has-error + .react-select__control + .select__indicator + svg { @apply text-destructive; } @@ -520,9 +539,9 @@ @apply fill-default-foreground; } -html[dir=rtl] .react-select .select__loading-indicator { +html[dir="rtl"] .react-select .select__loading-indicator { flex-direction: row-reverse; -} +} /* quil editor */ .ql-container { @@ -540,4 +559,18 @@ html[dir=rtl] .react-select .select__loading-indicator { width: 100%; } +.custom-scrollbar-table::-webkit-scrollbar { + width: 1px; +} +.custom-scrollbar-table::-webkit-scrollbar-track { + background: #e5e7eb; +} + +.custom-scrollbar-table::-webkit-scrollbar-thumb { + background: #6b7280; +} + +.custom-scrollbar-table::-webkit-scrollbar-thumb:hover { + background: #9ca3af; +} diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index 67000d02..818ba97b 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -5,8 +5,8 @@ import NewContent from "@/components/landing-page/new-content"; import PopularContent from "@/components/landing-page/popular-content"; import ContentCategory from "@/components/landing-page/content-category"; import Coverage from "@/components/landing-page/coverage"; -import Hero from "@/components/landing-page/hero"; -import Footer from "@/components/landing-page/footer"; +import Hero from "@/components/landing-page/Hero"; +import Footer from "@/components/landing-page/Footer"; import Division from "@/components/landing-page/division"; import Navbar from "@/components/landing-page/navbar"; import { ReactLenis } from "@studio-freight/react-lenis"; diff --git a/components/page-title.tsx b/components/page-title.tsx index 98db4e1a..4bd64ed5 100644 --- a/components/page-title.tsx +++ b/components/page-title.tsx @@ -1,8 +1,8 @@ "use client"; -import React from "react"; +import React, { useEffect } from "react"; import DateRangePicker from "@/components/date-range-picker"; import { usePathname } from "@/components/navigation"; -import { cn } from "@/lib/utils"; +import { cn, getCookiesDecrypt } from "@/lib/utils"; const PageTitle = ({ title, @@ -13,8 +13,14 @@ const PageTitle = ({ }) => { const pathname = usePathname(); const name = pathname?.split("/").slice(1).join(" "); + const roleId = getCookiesDecrypt("urie"); - return ( + useEffect(() => { + console.log("role", roleId); + }, [roleId]); + return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? ( + "" + ) : (
{ - - return ( - -
-
-
-
- COPYRIGHT © {new Date().getFullYear()} Media Hub, All rights Reserved -
-
-
- -
- - - - 10 - - - - Messages - -
- - -
- {"Image"} -
- - -
- - - - 2 - - - - Notifications - -
- -
+ return ( + +
+
+
+ COPYRIGHT © {new Date().getFullYear()} Media Hub, All rights + Reserved +
+
+
+ +
+ + + + 10 + + + Messages +
+ + +
+ {"Image"} +
+ + +
+ + + + 2 + + + + Notifications + +
+ +
+ + ); +}; - - ) -} - -export default DashCodeFooter \ No newline at end of file +export default DashCodeFooter; diff --git a/components/partials/header/profile-info.tsx b/components/partials/header/profile-info.tsx index b08c84bc..df1f1108 100644 --- a/components/partials/header/profile-info.tsx +++ b/components/partials/header/profile-info.tsx @@ -1,3 +1,4 @@ +"use client"; import { DropdownMenu, DropdownMenuContent, @@ -14,9 +15,16 @@ import { import { Icon } from "@/components/ui/icon"; import Image from "next/image"; import { Link } from "@/i18n/routing"; -import React from "react"; +import { Button } from "@/components/ui/button"; +import Cookies from "js-cookie"; +import { useEffect } from "react"; const ProfileInfo = () => { + const username = Cookies.get("state"); + const picture = Cookies.get("profile_picture"); + useEffect(() => { + console.log("us", username); + }, [username]); return (
@@ -24,15 +32,15 @@ const ProfileInfo = () => {
{"Image"}
- UserName + {username}
@@ -42,8 +50,8 @@ const ProfileInfo = () => { {"Image"} {
- Name + {username}
- Email + {username}
diff --git a/components/table/task-plan/list-view-column.tsx b/components/table/task-plan/list-view-column.tsx new file mode 100644 index 00000000..6e99bb31 --- /dev/null +++ b/components/table/task-plan/list-view-column.tsx @@ -0,0 +1,133 @@ +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 Perencanaan", + // cell: ({ row }) => {row.getValue("title")}, + // }, + { + accessorKey: "title", + header: "Judul Perencanaan", + cell: ({ row }) => { + const datas = row.original.subPlanningList; + return ( + + + {row.getValue("title")} + + + + Rencanaan Mingguan + + + + + + + + + {datas?.map((data: any) => ( + + + + + + + ))} +
Judul PerencanaanBatas WaktuStatusAksi
+ {data.title} + {data.date}{data.status} + + + + + + + Detail + + + +
+ + + ); + }, + }, + { + accessorKey: "date", + header: "Batas Waktu", + cell: ({ row }) => {row.getValue("date")}, + }, + + { + 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/components/table/task-plan/list-view-table.tsx b/components/table/task-plan/list-view-table.tsx new file mode 100644 index 00000000..598b19d4 --- /dev/null +++ b/components/table/task-plan/list-view-table.tsx @@ -0,0 +1,179 @@ +"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 "./list-view-column"; +import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting"; + +const ListViewTable = () => { + 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 res = await getPlanningPagination(page - 1, "", 10, 1, 3); + const data = res.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 ListViewTable; diff --git a/components/table/task-plan/single-view-table.tsx b/components/table/task-plan/single-view-table.tsx new file mode 100644 index 00000000..9ebd6b82 --- /dev/null +++ b/components/table/task-plan/single-view-table.tsx @@ -0,0 +1,328 @@ +"use client"; +import dayjs from "dayjs"; +import { useEffect, useRef, useState } from "react"; +import utc from "dayjs/plugin/utc"; +import { ChevronLeft, ChevronRight } from "lucide-react"; +import { close, loading } from "@/config/swal"; +import { useSearchParams } from "next/navigation"; +import { Swiper, SwiperSlide } from "swiper/react"; +import "swiper/css"; +import "swiper/css/free-mode"; +import "swiper/css/navigation"; +import "swiper/css/thumbs"; + +import Image from "next/image"; +import { FreeMode, Navigation, Thumbs } from "swiper/modules"; +import { Swiper as SwiperType } from "swiper/types"; +import { + getMonthlyPlanList, + getPlanningDailyByTypeId, + getWeeklyPlanList, + getWeeklyPlanListByParentId, +} from "@/service/agenda-setting/agenda-setting"; +import TaskPlanMediahubTable from "@/app/[locale]/(protected)/curator/task-plan/mediahub/components/table"; + +const TODAY = dayjs().format("YYYY-MM-DD"); // Pastikan Anda mendefinisikan TODAY dengan format yang konsisten + +export default function SingleViewTable() { + const params = useSearchParams(); + const [selectedMonthItem, setSelectedMonthItem] = useState< + string | undefined + >(undefined); + const [selectedWeekly, setSelectedWeekly] = useState( + undefined + ); + const [selectedDate, setSelectedDate] = useState( + new Date(TODAY).getDate() + ); + const [nowDate, setNowDate] = useState(TODAY); + + const INITIAL_YEAR = dayjs().format("YYYY"); + const INITIAL_MONTH = dayjs().format("M"); + const size = 20; + + const page: string | undefined | null = params?.get("page"); + const id: string | undefined | null = params?.get("id"); + const pages = page ? Number(page) - 1 : 0; + const no = (size || 10) * pages; + + const [selectedMonth, setSelectedMonth] = useState( + dayjs(new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1)) + ); + + const [selectedMonthTitle, setSelectedMonthTitle] = useState(""); + const [days, setDays] = useState([]); + + const weekday = require("dayjs/plugin/weekday"); + const weekOfYear = require("dayjs/plugin/weekOfYear"); + + dayjs.extend(utc); + dayjs.extend(weekday); + dayjs.extend(weekOfYear); + + const [monthlyList, setMonthlyList] = useState([]); + const [weeklyList, setWeeklyList] = useState([]); + const [getData, setGetData] = useState([]); + const [getTotalPage, setGetTotalPage] = useState(1); + const [getTOtalData, setGetTotalData] = useState(0); + + useEffect(() => { + createCalendar("START"); + }, []); + + function createDaysForCurrentMonth( + year: string, + month: string, + daysInMonth: number + ) { + const days: any = []; + for (let day = 1; day <= daysInMonth; day++) { + const date = dayjs( + new Date(parseInt(year), parseInt(month) - 1, day) + ).format("YYYY-MM-DD"); + days.push({ + date, + isCurrentMonth: true, + isToday: date === TODAY, + }); + } + return days; + } + + async function getMonthlyPlanning(dates: number) { + const res = await getMonthlyPlanList(dates, 1); + console.log("monthsss", res); + setMonthlyList(res.data?.data); + } + + async function getWeeklyPlanning( + id: string | undefined, + date: number | undefined + ) { + if (id) { + const res = await getWeeklyPlanListByParentId(id, 1); + setWeeklyList(res.data?.data); + } else { + const res = await getWeeklyPlanList(date, 1, true); + setWeeklyList(res.data?.data); + } + } + + function createCalendar( + year: string = INITIAL_YEAR, + month: string = INITIAL_MONTH + ) { + const state = year; + + year = year === "START" ? INITIAL_YEAR : year; + setSelectedMonthTitle( + dayjs(new Date(parseInt(year), parseInt(month) - 1)) + .utc() + .local() + .format("MMMM YYYY") + ); + + const currentMonthDays = createDaysForCurrentMonth( + year, + month, + dayjs(`${year}-${month}-01`).daysInMonth() + ); + + console.log("Month:", currentMonthDays); + getMonthlyPlanning(state === "START" ? TODAY : currentMonthDays[0]?.date); + getWeeklyPlanning( + undefined, + state === "START" ? TODAY : currentMonthDays[0]?.date + ); + + setDays(currentMonthDays); + console.log("currentMonthDays", currentMonthDays); + } + + async function fetchData( + parentId: string | number | undefined, + date?: string + ) { + loading(); + const response = await getPlanningDailyByTypeId( + pages, + size, + parentId || selectedWeekly, + date || nowDate || TODAY, + 1 + ); + + close(); + setupData(response.data?.data); + } + + function setupData(rawData: any) { + if (rawData != undefined) { + const dataContent = rawData?.content; + const data = []; + + for (const [i, element] of dataContent.entries()) { + element.no = no + i + 1; + data.push(element); + } + + setGetData(data); + setGetTotalPage(rawData?.totalPages); + setGetTotalData(rawData?.totalElements); + } + } + + function getPrevMonth() { + const selectedMonthNew = dayjs(selectedMonth).subtract(1, "month"); + + createCalendar( + selectedMonthNew.format("YYYY"), + selectedMonthNew.format("M") + ); + fetchData(undefined, selectedMonthNew?.format("YYYY-MM-DD")); + setSelectedMonth(selectedMonthNew); + setSelectedDate(1); + } + + function getPresentMonth() { + const selectedMonthNew = dayjs( + new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1) + ); + + createCalendar( + selectedMonthNew.format("YYYY"), + selectedMonthNew.format("M") + ); + fetchData(undefined, TODAY); + setSelectedDate(Number(dayjs().format("D"))); + setSelectedMonth(selectedMonthNew); + } + + function getNextMonth() { + const selectedMonthNew = dayjs(selectedMonth).add(1, "month"); + + createCalendar( + selectedMonthNew.format("YYYY"), + selectedMonthNew.format("M") + ); + fetchData(undefined, selectedMonthNew?.format("YYYY-MM-DD")); + setSelectedMonth(selectedMonthNew); + setSelectedDate(1); + } + const onSelectedMonthItem = (id: string | undefined) => { + // fetchData(date) + setSelectedMonthItem(id); + getWeeklyPlanning(id, undefined); + }; + + const onSelectedWeekly = (id: string | undefined) => { + setSelectedWeekly(id); + fetchData(id); + }; + + const onSelectedDay = (day: number, date: string) => { + fetchData(undefined, date); + setSelectedDate(day); + setNowDate(date); + }; + const removeSelection = () => { + setSelectedMonthItem(undefined); + setSelectedWeekly(undefined); + }; + + return ( +
+
+ +

{selectedMonthTitle}

+
+ +
+

Rencana Bulanan

+ {monthlyList?.length > 0 ? ( +
+ {monthlyList?.map((item: any) => ( +
onSelectedMonthItem(item.id)} + > +

{item.title}

+
+ ))} +
+ ) : ( +
+ Rencana Bulanan Belum Tersedia +
+ )} +

Rencana Mingguan

+ {weeklyList?.length > 0 ? ( +
+ {weeklyList?.map((item: any) => ( + onSelectedWeekly(item.id)} + > +

{item.title}

+ + ))} +
+ ) : ( +
+ Rencana Mingguan Belum Tersedia +
+ )} +

Rencana Harian

+
+ + +
+ ); +} diff --git a/components/visualization/content-production.tsx b/components/visualization/content-production.tsx new file mode 100644 index 00000000..486bb1e9 --- /dev/null +++ b/components/visualization/content-production.tsx @@ -0,0 +1,246 @@ +"use client"; +import Cookies from "js-cookie"; +import { useEffect, useState } from "react"; +import { getCookiesDecrypt } from "@/lib/utils"; +import { generateTicket } from "@/service/tableau/tableau-service"; +import { Button } from "../ui/button"; +import { useTranslations } from "next-intl"; + +export default function ContentProductionVisualization() { + const [hasMounted, setHasMounted] = useState(false); + const t = useTranslations("AnalyticsDashboard"); + const levelName = getCookiesDecrypt("ulnae"); + const poldaState = Cookies.get("state"); + const provState = Cookies.get("state-prov"); + + const [ticket1, setTicket1] = useState(""); + const [ticket2, setTicket2] = useState(""); + const [ticket3, setTicket3] = useState(""); + const [isInternational, setIsInternational] = useState([false, false, false]); + + const baseUrl = "https://db-mediahub.polri.go.id/"; + const url = "https://db-mediahub.polri.go.id/trusted/"; + + const view1 = + levelName == "MABES POLRI" + ? isInternational[0] + ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?" + : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-published-produksi?" + : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-published-produksi-polda?provinsi-polda=${provState}&`; + + const view2 = + levelName == "MABES POLRI" + ? isInternational[1] + ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-publisher?" + : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-publisher?" + : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-publisher-polda?provinsi-polda=${poldaState}&`; + + const view3 = + levelName == "MABES POLRI" + ? isInternational[2] + ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?" + : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-waktu-akses-pengguna?" + : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-waktu-akses-pengguna-polda?provinsi-polda=${poldaState}&`; + + const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true"; + + useEffect(() => { + async function initState() { + const response1 = await generateTicket(); + setTicket1(response1.data?.data); + + const response2 = await generateTicket(); + setTicket2(response2.data?.data); + + const response3 = await generateTicket(); + setTicket3(response3.data?.data); + } + + initState(); + }, [isInternational]); + + // Hooks + useEffect(() => { + setHasMounted(true); + }, []); + + // Render + if (!hasMounted) return null; + + const handleInternational = (index: number, val: boolean) => { + const updatedIsInternational = [...isInternational]; + + updatedIsInternational[index] = val; + setIsInternational(updatedIsInternational); + }; + + return ( +
+

+ + {isInternational[0] + ? "CREATORS WITH THE MOST PUBLISHED CONTENT" + : "KREATOR DENGAN PUBLISH KONTEN TERBANYAK"} + +

+ {levelName === "MABES POLRI" ? ( +
+

{t("choose_category")}

+
+ + +
+
+ ) : ( + "" + )} +
+ {ticket1 == "" ? ( +