diff --git a/app/[locale]/(protected)/contest/page.tsx b/app/[locale]/(protected)/contest/page.tsx deleted file mode 100644 index 96205880..00000000 --- a/app/[locale]/(protected)/contest/page.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import SiteBreadcrumb from "@/components/site-breadcrumb"; -import { Card, CardContent } from "@/components/ui/card"; -import { UploadIcon } from "lucide-react"; -import PressReleaseTable from "../schedule/press-conference/components/presscon-table"; -import { Button } from "@/components/ui/button"; -import ContestTable from "./table-contest/contest-table"; - -const ContestPage = async () => { - return ( -
- -
- -
-
- Table Lomba -
-
- - - - - - -
-
- ); -}; - -export default ContestPage; diff --git a/app/[locale]/(protected)/contest/table-contest/contest-table.tsx b/app/[locale]/(protected)/contest/table-contest/contest-table.tsx deleted file mode 100644 index 35f379cb..00000000 --- a/app/[locale]/(protected)/contest/table-contest/contest-table.tsx +++ /dev/null @@ -1,348 +0,0 @@ -"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 { - Badge, - 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"; - -export type CompanyData = { - no: number; - hastagCode: string; - theme: string; - duration: string; - targetOutput: string; - targetParticipantTopLevel: string; - isPublishForAll: string; -}; -import { data } from "./data"; -import { Input } from "@/components/ui/input"; -import { InputGroup, InputGroupText } from "@/components/ui/input-group"; -import { listTask } from "@/service/task"; -import { listContest } from "@/service/contest/contest"; - -export const columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => ( -
-
-

- {row.getValue("no")} -

-
-
- ), - }, - { - accessorKey: "hastagCode", - header: "Kode", - cell: ({ row }) => ( -
-
-

- {row.getValue("hastagCode")} -

-
-
- ), - }, - { - accessorKey: "theme", - header: "Judul", - cell: ({ row }) => ( -
-
-

- {row.getValue("theme")} -

-
-
- ), - }, - { - accessorKey: "duration", - header: "Durasi ", - cell: ({ row }) => ( - {row.getValue("duration")} - ), - }, - { - accessorKey: "targetOutput", - header: "Target Output ", - cell: ({ row }) => ( - {row.getValue("targetOutput")} - ), - }, - { - accessorKey: "targetParticipantTopLevel", - header: "Tag ", - cell: ({ row }) => ( - - {row.getValue("targetParticipantTopLevel")} - - ), - }, - { - accessorKey: "isPublishForAll", - header: "Status", - cell: ({ row }) => { - return ( - - {row.getValue("isPublishForAll")} - - ); - }, - }, - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - return ( - - - - - - - - View - - - - Edit - - - - Delete - - - - ); - }, - }, -]; - -const ContestTable = () => { - const [contestTable, setContestTable] = React.useState([]); - 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: 2, - }); - const [page, setPage] = React.useState(1); - const [totalPage, setTotalPage] = React.useState(1); - const [limit, setLimit] = React.useState(10); - - const table = useReactTable({ - data: contestTable, - 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(() => { - initState(); - }, [page, limit]); - - async function initState() { - try { - const res = await listContest(limit, page); - console.log("res", res?.data?.data); - const data = res.data.data.content.map((item: any, index: number) => ({ - no: (page - 1) * limit + index + 1, - hastagCode: item.hastagCode, - theme: item.theme, - targetOutput: item.targetOutput, - targetParticipantTopLevel: item.targetParticipantTopLevel, - duration: item.duration, - isDone: item.isDone, - })); - - setContestTable(data); - setTotalPage(res.data.totalPages); - } catch (error) { - console.error("Error fetching tasks:", error); - } - } - - return ( -
-
-
- - - - - - -
-
- ) => - table.getColumn("status")?.setFilterValue(event.target.value) - } - className="max-w-sm " - /> -
-
- - - {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. - - - )} - -
-
- - {table.getPageOptions().map((page, pageIndex) => ( - - ))} - -
-
- ); -}; - -export default ContestTable; diff --git a/app/[locale]/(protected)/contest/table-contest/data.ts b/app/[locale]/(protected)/contest/table-contest/data.ts deleted file mode 100644 index 0c5d7d72..00000000 --- a/app/[locale]/(protected)/contest/table-contest/data.ts +++ /dev/null @@ -1,74 +0,0 @@ -export const data = [ - { - title: "Ops Mantap Praja & Pilkada 2024", - code: "#NEWLOMBA", - duration: "2023-08-31 07:00:00 - 2023-09-01 07:00:00", - targetOutput: "Foto", - targetParticipant: "Polda, mabes", - status: "Terkirim", - }, - { - title: "Seputar Prestasi", - code: "#NEWLOMBA", - duration: "2023-08-31 07:00:00 - 2023-09-01 07:00:00", - targetOutput: "Foto", - targetParticipant: "Polda, mabes", - status: "Terkirim", - }, - { - title: "Ops Mantap Praja & Pilkada 2024", - code: "#NEWLOMBA", - duration: "2023-08-31 07:00:00 - 2023-09-01 07:00:00", - targetOutput: "Foto", - targetParticipant: "Polda, mabes", - status: "Terkirim", - }, - { - title: "Ops Mantap Praja & Pilkada 2024", - code: "#NEWLOMBA", - duration: "2023-08-31 07:00:00 - 2023-09-01 07:00:00", - targetOutput: "Foto", - targetParticipant: "Polda, mabes", - status: "Terkirim", - }, - { - title: "Seputar Prestasi", - code: "#NEWLOMBA", - duration: "2023-08-31 07:00:00 - 2023-09-01 07:00:00", - targetOutput: "Foto", - targetParticipant: "Polda, mabes", - status: "Terkirim", - }, - { - title: "Seputar Prestasi", - code: "#NEWLOMBA", - duration: "2023-08-31 07:00:00 - 2023-09-01 07:00:00", - targetOutput: "Foto", - targetParticipant: "Polda, mabes", - status: "Terkirim", - }, - { - title: "Seputar Prestasi", - code: "#NEWLOMBA", - duration: "2023-08-31 07:00:00 - 2023-09-01 07:00:00", - targetOutput: "Foto", - targetParticipant: "Polda, mabes", - status: "Terkirim", - }, - { - title: "Seputar Prestasi", - code: "#NEWLOMBA", - duration: "2023-08-31 07:00:00 - 2023-09-01 07:00:00", - targetOutput: "Foto", - targetParticipant: "Polda, mabes", - status: "Terkirim", - }, - { - title: "Seputar Prestasi", - code: "#NEWLOMBA", - duration: "2023-08-31 07:00:00 - 2023-09-01 07:00:00", - targetOutput: "Foto", - targetParticipant: "Polda, mabes", - status: "Terkirim", - }, -]; diff --git a/app/[locale]/(protected)/agenda-setting/calender-view.tsx b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx similarity index 72% rename from app/[locale]/(protected)/agenda-setting/calender-view.tsx rename to app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx index 06dbf764..9618fb74 100644 --- a/app/[locale]/(protected)/agenda-setting/calender-view.tsx +++ b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx @@ -12,7 +12,7 @@ import { Calendar } from "@/components/ui/calendar"; import { Card, CardContent, CardHeader } from "@/components/ui/card"; import { Plus } from "lucide-react"; import { Checkbox } from "@/components/ui/checkbox"; -import { CalendarEvent, CalendarCategory } from "./data"; +import { CalendarCategory } from "./data"; import { EventContentArg } from "@fullcalendar/core"; import EventModal from "./event-modal"; import { useTranslations } from "next-intl"; @@ -26,15 +26,49 @@ interface CalendarViewProps { const INITIAL_YEAR = dayjs().format("YYYY"); const INITIAL_MONTH = dayjs().format("M"); +export interface CalendarEvent { + id: string; + title: string; + start: Date; + end: Date; + allDay: boolean; + extendedProps: { + calendar: string; + description?: string; + }; +} + +export interface AgendaSettingsAPIResponse { + id: number; + title: string; + description: string; + agendaType: string; + startDate: string; // API mengembalikan tanggal dalam bentuk string + endDate: string; + isActive: boolean; + createdAt: string; + updatedAt: string; + createdById: number | null; + createdByName: string | null; +} + +interface APIResponse { + error: boolean; + message: any; + data: AgendaSettingsAPIResponse[] | null; // `data` bisa berupa array atau null +} const CalendarView = ({ events, categories }: CalendarViewProps) => { const [selectedCategory, setSelectedCategory] = useState( null ); const [selectedEventDate, setSelectedEventDate] = useState(null); - const [selectedEvent, setSelectedEvent] = useState( - null - ); + // const [selectedEvent, setSelectedEvent] = useState( + // null + // ); + + const [apiEvents, setApiEvents] = useState([]); + const [loading, setLoading] = useState(false); const [draggableInitialized, setDraggableInitialized] = useState(false); const t = useTranslations("CalendarApp"); @@ -65,6 +99,73 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { setSelectedCategory(categories?.map((c) => c.value)); }, [events, categories]); + useEffect(() => { + console.log("Fetched events from API:", apiEvents); + }, [apiEvents]); + + const filteredEvents = apiEvents?.filter((event) => + selectedCategory?.includes(event.extendedProps.calendar) + ); + + const displayedEvents = + filteredEvents?.length > 0 ? filteredEvents : apiEvents; + + useEffect(() => { + console.log("Filtered events based on category:", displayedEvents); + }, [filteredEvents, apiEvents]); + + useEffect(() => { + setSelectedCategory(categories?.map((c) => c.value)); + }, [categories]); + + useEffect(() => { + console.log("Selected categories:", selectedCategory); + }, [selectedCategory]); + + useEffect(() => { + const fetchAgendaEvents = async () => { + setLoading(true); + try { + const selectedMonth = new Date(); // Replace with your logic for selected month + const year = selectedMonth.getFullYear().toString(); + const month = (selectedMonth.getMonth() + 1).toString(); + const typeFilter = ""; // Replace with your type filter logic if needed + + const response: APIResponse = await getAgendaSettingsList( + year, + month, + typeFilter + ); + + if (response.data && Array.isArray(response.data)) { + // Transform API data to match CalendarEvent type + const eventsFromAPI: CalendarEvent[] = response.data.map((item) => ({ + id: item.id.toString(), + title: item.title, + start: new Date(item.startDate), + end: new Date(item.endDate), + allDay: true, // Sesuaikan jika memang ada event sepanjang hari + extendedProps: { + calendar: item.agendaType, + description: item.description, + }, + })); + setApiEvents(eventsFromAPI); + } else { + console.warn("No events found in API response."); + setApiEvents([]); + } + } catch (error) { + console.error("Failed to fetch agenda settings:", error); + setApiEvents([]); + } finally { + setLoading(false); + } + }; + + fetchAgendaEvents(); + }, []); + useEffect(() => { const draggableEl = document.getElementById("external-events"); @@ -97,23 +198,24 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { draggableEl?.removeEventListener("mousedown", initDraggable); }; }, [dragEvents]); + // event click const handleEventClick = (arg: any) => { setSelectedEventDate(null); setSheetOpen(true); - setSelectedEvent(arg); + setApiEvents(arg); wait().then(() => (document.body.style.pointerEvents = "auto")); }; // handle close modal const handleCloseModal = () => { setSheetOpen(false); - setSelectedEvent(null); + setApiEvents([]); setSelectedEventDate(null); }; const handleDateClick = (arg: any) => { setSheetOpen(true); setSelectedEventDate(arg); - setSelectedEvent(null); + setApiEvents([]); wait().then(() => (document.body.style.pointerEvents = "auto")); }; @@ -126,12 +228,12 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { }; const handleClassName = (arg: EventContentArg) => { - if (arg.event.extendedProps.calendar === "national") { - return "destructive"; - } else if (arg.event.extendedProps.calendar === "polda") { + if (arg.event.extendedProps.calendar === "mabes") { return "primary"; - } else if (arg.event.extendedProps.calendar === "polres") { + } else if (arg.event.extendedProps.calendar === "polda") { return "success"; + } else if (arg.event.extendedProps.calendar === "polres") { + return "destructive"; } else if (arg.event.extendedProps.calendar === "international") { return "info"; } else { @@ -139,10 +241,6 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { } }; - const filteredEvents = events?.filter((event) => - selectedCategory?.includes(event.extendedProps.calendar) - ); - return ( <>
@@ -222,7 +320,7 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { center: "title", right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek", }} - events={filteredEvents} + events={displayedEvents} // Use apiEvents here editable={true} rerenderDelay={10} eventDurationEditable={false} @@ -243,7 +341,7 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { open={sheetOpen} onClose={handleCloseModal} categories={categories} - event={selectedEvent} + event={apiEvents} selectedDate={selectedEventDate} /> diff --git a/app/[locale]/(protected)/agenda-setting/data.ts b/app/[locale]/(protected)/contributor/agenda-setting/data.ts similarity index 100% rename from app/[locale]/(protected)/agenda-setting/data.ts rename to app/[locale]/(protected)/contributor/agenda-setting/data.ts diff --git a/app/[locale]/(protected)/agenda-setting/dragging-events.tsx b/app/[locale]/(protected)/contributor/agenda-setting/dragging-events.tsx similarity index 100% rename from app/[locale]/(protected)/agenda-setting/dragging-events.tsx rename to app/[locale]/(protected)/contributor/agenda-setting/dragging-events.tsx diff --git a/app/[locale]/(protected)/agenda-setting/event-modal.tsx b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx similarity index 77% rename from app/[locale]/(protected)/agenda-setting/event-modal.tsx rename to app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx index 87ebc61f..864ea8d2 100644 --- a/app/[locale]/(protected)/agenda-setting/event-modal.tsx +++ b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx @@ -1,4 +1,4 @@ -"use client"; +// "use client"; import React, { useState, useEffect } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; @@ -30,9 +30,18 @@ import { DialogHeader, DialogTitle, } from "@/components/ui/dialog"; +import { Textarea } from "@/components/ui/textarea"; +import { error, loading } from "@/lib/swal"; +import Cookies from "js-cookie"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import { useRouter } from "next/navigation"; +import { postSchedule } from "@/service/schedule/schedule"; +import { saveAgendaSettings } from "@/service/agenda-setting/agenda-setting"; const schema = z.object({ title: z.string().min(3, { message: "Required" }), + description: z.string().min(3, { message: "Required" }), }); const EventModal = ({ @@ -57,6 +66,8 @@ const EventModal = ({ // delete modal state const [deleteModalOpen, setDeleteModalOpen] = useState(false); const [eventIdToDelete, setEventIdToDelete] = useState(null); + const MySwal = withReactContent(Swal); + const router = useRouter(); const { register, @@ -70,20 +81,45 @@ const EventModal = ({ mode: "all", }); - const onSubmit = (data: any) => { - startTransition(() => { - if (!event) { - data.start = startDate; - data.end = endDate; - data.allDay = false; - data.extendedProps = { - calendar: calendarProps, - }; - } - if (event) { - } + const save = async (data: any) => { + // loading(); + + const reqData = { + title: data.title, + description: data.description || "", + agendaType: calendarProps, + startDate: format(startDate, "yyyy-MM-dd"), + endDate: format(endDate, "yyyy-MM-dd"), + }; + + console.log("Submitted Data:", reqData); + + const response = await saveAgendaSettings(reqData); + if (response.error) { + error(response.message); + return false; + } + + Cookies.set("AgendaSetting", response.data.data.id, { + expires: 1, + }); + + // Optional: Use Swal for success feedback + MySwal.fire({ + title: "Sukses", + text: "Data berhasil disimpan.", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then(() => { + router.push("/contributor/agenda-setting"); }); }; + + const onSubmit = (data: any) => { + save(data); + }; + useEffect(() => { if (selectedDate) { setStartDate(selectedDate.date); @@ -93,13 +129,10 @@ const EventModal = ({ setStartDate(event?.event?.start); setEndDate(event?.event?.end); const eventCalendar = event?.event?.extendedProps?.calendar; - if (eventCalendar) { - setCalendarProps(eventCalendar); - } else { - setCalendarProps(categories[0].value); - } + setCalendarProps(eventCalendar || categories[0].value); } setValue("title", event?.event?.title || ""); + setValue("description", event?.event?.description || ""); }, [event, selectedDate, open, categories, setValue]); const onDeleteEventAction = async () => { @@ -125,14 +158,15 @@ const EventModal = ({ - {event ? "Edit Event" : "Create Event"} {event?.title} + {event ? "Edit Agenda Setting" : "Create Agenda Setting"}{" "} + {event?.title}
- +
- +
+
+ + +
+
+ + + +
+
+ +
+ + {commentsData.map((comment) => ( +
+ + + +
+ + {comment.username} + + + {comment.date} + +

{comment.text}

+
handleReply(comment.id)} + > + + Balas +
+ {comment.replies.length > 0 && ( +
+ {comment.replies.map((reply: any, index: any) => ( +
+ + + +
+ + {reply.username} + + + {reply.date} + +

+ {reply.text} +

+
+
+ ))} +
+ )} +
+
+ ))} + {replyingTo !== null && ( +
+ + +
+ )} +
+
+ +
+ + ) : ( + "" + )} +
+ ); +} diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx new file mode 100644 index 00000000..afa89b2b --- /dev/null +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx @@ -0,0 +1,518 @@ +"use client"; +import React, { ChangeEvent, useEffect, useRef, useState } from "react"; +import { useForm, Controller } from "react-hook-form"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { Card, CardContent } from "@/components/ui/card"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import { useParams, useRouter } from "next/navigation"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import Cookies from "js-cookie"; +import { postBlog } from "@/service/blog/blog"; +import { Textarea } from "@/components/ui/textarea"; +import { DotSquare, InboxIcon, PaperclipIcon, SmileIcon } from "lucide-react"; +import { detailMedia } from "@/service/curated-content/curated-content"; +import { Swiper, SwiperSlide } from "swiper/react"; +import "swiper/css"; +import "swiper/css/free-mode"; +import "swiper/css/navigation"; +import "swiper/css/pagination"; +import "swiper/css/thumbs"; +import "swiper/css"; +import "swiper/css/navigation"; +import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules"; +import { Avatar, AvatarImage } from "@/components/ui/avatar"; +import JoditEditor from "jodit-react"; + +const detailSchema = z.object({ + title: z.string().min(1, { message: "Judul diperlukan" }), + categoryName: z.string().min(1, { message: "Judul diperlukan" }), + meta: z.string().min(1, { message: "Judul diperlukan" }), + description: z + .string() + .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }), + // tags: z.string().min(1, { message: "Judul diperlukan" }), +}); + +type Category = { + id: string; + categoryName: string; +}; + +export type curationDetail = { + id: number; + title: string; + categoryName: string; + description: string; + uploadedBy: { + id: number; + fullname: string; + username: string | null; + email: string; + isActive: boolean; + isDefault: boolean; + isInternational: boolean; + userLevel: { + id: number; + name: string; + aliasName: string; + userGroupId: number; + }; + }; + tags: string; + provinceId: string; + is_active: string; +}; + +const initialComments = [ + { + id: 1, + username: "Esther Howard", + date: "07-04-2023 20:00 WIB", + text: "Tolong untuk narasinya mengikuti 5W + 1H!", + avatar: "/images/avatar/avatar-3.png", // URL avatar atau path gambar pengguna + replies: [], // Komentar balasan + }, + { + id: 2, + username: "Brooklyn Simmons", + date: "07-04-2023 20:00 WIB", + text: "Ok Baik, Saya segera melakukan perbaikan. Terima kasih atas masukannya. 🙏", + avatar: "/images/avatar/avatar-5.png", // URL avatar atau path gambar pengguna + replies: [], // Komentar balasan + }, + { + id: 3, + username: "Leslie Alexander", + date: "07-04-2023 20:00 WIB", + text: "Sangat berguna. Terima Kasih!", + avatar: "/images/avatar/avatar-7.png", // URL avatar atau path gambar pengguna + replies: [], // Komentar balasan + }, +]; + +export default function DetailDocument() { + const MySwal = withReactContent(Swal); + const { id } = useParams() as { id: string }; + console.log(id); + const editor = useRef(null); + type DetailSchema = z.infer; + + const [selectedFiles, setSelectedFiles] = useState([]); + const taskId = Cookies.get("taskId"); + const scheduleId = Cookies.get("scheduleId"); + const scheduleType = Cookies.get("scheduleType"); + const [selectedTarget, setSelectedTarget] = useState(""); + // const [detail, setDetail] = useState({ + // title: null, + // tags: null, + // files: [], + // fileType: null, + // }); + const [detail, setDetail] = useState(); + const [refresh] = useState(false); + const [detailThumb, setDetailThumb] = useState([]); + const [thumbsSwiper, setThumbsSwiper] = useState(null); + + const { + control, + handleSubmit, + setValue, + formState: { errors }, + } = useForm({ + resolver: zodResolver(detailSchema), + }); + + const [commentsData, setCommentsData] = useState(initialComments); + const [replyText, setReplyText] = useState(""); + const [replyingTo, setReplyingTo] = useState(null); + + const handleReply = (commentId: number) => { + setReplyingTo(commentId); + }; + + const addReply = (commentId: number) => { + if (replyText.trim()) { + const newCommentData = commentsData.map((comment: any) => { + if (comment.id === commentId) { + return { + ...comment, + replies: [ + ...comment.replies, + { + text: replyText, + username: "You", + date: new Date().toLocaleString(), + }, + ], + }; + } + return comment; + }); + + setCommentsData(newCommentData); + setReplyText(""); + setReplyingTo(null); + } + }; + + useEffect(() => { + async function initState() { + if (id) { + const response = await detailMedia(id); + const details = response.data?.data; + + setDetail(details); + const filesData = details.files || []; + const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) => + file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg" + ); + setDetailThumb(fileUrls); + } + } + initState(); + }, [id, refresh]); + + return ( +
+ {detail !== undefined ? ( + +
+

Kurasi Detail

+ +
+
+
+
+ + ( + + )} + /> + {errors.title?.message && ( +

+ {errors.title.message} +

+ )} +
+
+
+ + ( + + )} + /> +
+
+
+
+ + ( + +
+
+ + + +
+
+ +
+ + {commentsData.map((comment) => ( +
+ + + +
+ + {comment.username} + + + {comment.date} + +

{comment.text}

+
handleReply(comment.id)} + > + + Balas +
+ {comment.replies.length > 0 && ( +
+ {comment.replies.map((reply: any, index: any) => ( +
+ + + +
+ + {reply.username} + + + {reply.date} + +

+ {reply.text} +

+
+
+ ))} +
+ )} +
+
+ ))} + {replyingTo !== null && ( +
+ + +
+ )} +
+
+ +
+ + ) : ( + "" + )} +
+ ); +} diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx new file mode 100644 index 00000000..20e89711 --- /dev/null +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx @@ -0,0 +1,115 @@ +"use client"; +import { Link } from "@/components/navigation"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; +import { getListContent } from "@/service/landing/landing"; +import { + formatDateToIndonesian, + generateLocalizedPath, + textEllipsis, +} from "@/utils/globals"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import { useParams, usePathname, useRouter } from "next/navigation"; +import React, { Component, useEffect, useState } from "react"; + +const TeksSliderPage = () => { + const [documentData, setDocumentData] = useState(); + const [displayDocument, setDisplayDocument] = useState([]); + const [page, setPage] = useState(1); + + useEffect(() => { + initFetch(); + }, []); + + useEffect(() => { + if (documentData?.length > 0) { + shuffleAndSetVideos(); + const interval = setInterval(shuffleAndSetVideos, 5000); + return () => clearInterval(interval); // Cleanup interval on unmount + } + }, [documentData]); + + const initFetch = async () => { + const response = await getListContent({ + page: page - 1, + size: 12, + sortBy: "createdAt", + contentTypeId: "3", + }); + console.log(response); + setDocumentData(response?.data?.data?.content); + }; + const shuffleAndSetVideos = () => { + const shuffled = shuffleArray([...documentData]); + setDisplayDocument(shuffled.slice(0, 2)); + }; + + const shuffleArray = (array: any[]) => { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; + }; + + return ( +
+
+ {displayDocument?.map((document: any) => ( + +
+ + + +
+ +
+
+ {formatDateToIndonesian(new Date(document?.createdAt))}{" "} + {document?.timezone ? document?.timezone : "WIB"} |{" "} + 518 +
+
+ {document?.title} +
+
+ + + + Download Dokumen +
+
+ + ))} +
+
+ ); +}; + +export default TeksSliderPage; diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx new file mode 100644 index 00000000..05ad3fff --- /dev/null +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx @@ -0,0 +1,543 @@ +"use client"; +import React, { ChangeEvent, useEffect, useRef, useState } from "react"; +import { useForm, Controller } from "react-hook-form"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { Card, CardContent } from "@/components/ui/card"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import { useParams, useRouter } from "next/navigation"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import Cookies from "js-cookie"; +import { postBlog } from "@/service/blog/blog"; +import { Textarea } from "@/components/ui/textarea"; +import { DotSquare, InboxIcon, PaperclipIcon, SmileIcon } from "lucide-react"; +import { detailMedia } from "@/service/curated-content/curated-content"; +import { Swiper, SwiperSlide } from "swiper/react"; +import "swiper/css"; +import "swiper/css/free-mode"; +import "swiper/css/navigation"; +import "swiper/css/pagination"; +import "swiper/css/thumbs"; +import "swiper/css"; +import "swiper/css/navigation"; +import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules"; +import { Avatar, AvatarImage } from "@/components/ui/avatar"; + +const detailSchema = z.object({ + title: z.string().min(1, { message: "Judul diperlukan" }), + categoryName: z.string().min(1, { message: "Judul diperlukan" }), + meta: z.string().min(1, { message: "Judul diperlukan" }), + description: z + .string() + .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }), + // tags: z.string().min(1, { message: "Judul diperlukan" }), +}); + +type Category = { + id: string; + categoryName: string; +}; + +export type curationDetail = { + id: number; + title: string; + categoryName: string; + description: string; + uploadedBy: { + id: number; + fullname: string; + username: string | null; + email: string; + isActive: boolean; + isDefault: boolean; + isInternational: boolean; + userLevel: { + id: number; + name: string; + aliasName: string; + userGroupId: number; + }; + }; + tags: string; + provinceId: string; + is_active: string; +}; + +const initialComments = [ + { + id: 1, + username: "Esther Howard", + date: "07-04-2023 20:00 WIB", + text: "Tolong untuk narasinya mengikuti 5W + 1H!", + avatar: "/images/avatar/avatar-3.png", // URL avatar atau path gambar pengguna + replies: [], // Komentar balasan + }, + { + id: 2, + username: "Brooklyn Simmons", + date: "07-04-2023 20:00 WIB", + text: "Ok Baik, Saya segera melakukan perbaikan. Terima kasih atas masukannya. 🙏", + avatar: "/images/avatar/avatar-5.png", // URL avatar atau path gambar pengguna + replies: [], // Komentar balasan + }, + { + id: 3, + username: "Leslie Alexander", + date: "07-04-2023 20:00 WIB", + text: "Sangat berguna. Terima Kasih!", + avatar: "/images/avatar/avatar-7.png", // URL avatar atau path gambar pengguna + replies: [], // Komentar balasan + }, +]; + +export default function DetailImage() { + const MySwal = withReactContent(Swal); + const { id } = useParams() as { id: string }; + console.log(id); + const editor = useRef(null); + type DetailSchema = z.infer; + + const [selectedFiles, setSelectedFiles] = useState([]); + const taskId = Cookies.get("taskId"); + const scheduleId = Cookies.get("scheduleId"); + const scheduleType = Cookies.get("scheduleType"); + const [selectedTarget, setSelectedTarget] = useState(""); + // const [detail, setDetail] = useState({ + // title: null, + // tags: null, + // files: [], + // fileType: null, + // }); + const [detail, setDetail] = useState(); + const [refresh] = useState(false); + const [detailThumb, setDetailThumb] = useState([]); + const [thumbsSwiper, setThumbsSwiper] = useState(null); + + const { + control, + handleSubmit, + setValue, + formState: { errors }, + } = useForm({ + resolver: zodResolver(detailSchema), + }); + + const [commentsData, setCommentsData] = useState(initialComments); + const [replyText, setReplyText] = useState(""); + const [replyingTo, setReplyingTo] = useState(null); + + const handleReply = (commentId: number) => { + setReplyingTo(commentId); + }; + + const addReply = (commentId: number) => { + if (replyText.trim()) { + const newCommentData = commentsData.map((comment: any) => { + if (comment.id === commentId) { + return { + ...comment, + replies: [ + ...comment.replies, + { + text: replyText, + username: "You", + date: new Date().toLocaleString(), + }, + ], + }; + } + return comment; + }); + + setCommentsData(newCommentData); + setReplyText(""); + setReplyingTo(null); + } + }; + + useEffect(() => { + async function initState() { + if (id) { + const response = await detailMedia(id); + const details = response.data?.data; + + setDetail(details); + const filesData = details.files || []; + const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) => + file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg" + ); + setDetailThumb(fileUrls); + } + } + initState(); + }, [id, refresh]); + + return ( +
+ {detail !== undefined ? ( + +
+

Kurasi Detail

+ +
+
+
+
+ + ( + + )} + /> + {errors.title?.message && ( +

+ {errors.title.message} +

+ )} +
+
+
+ + ( + + )} + /> +
+
+
+
+ + ( + +
+
+ + + +
+
+ +
+ + {commentsData.map((comment) => ( +
+ + + +
+ + {comment.username} + + + {comment.date} + +

{comment.text}

+
handleReply(comment.id)} + > + + Balas +
+ {comment.replies.length > 0 && ( +
+ {comment.replies.map((reply: any, index: any) => ( +
+ + + +
+ + {reply.username} + + + {reply.date} + +

+ {reply.text} +

+
+
+ ))} +
+ )} +
+
+ ))} + {replyingTo !== null && ( +
+ + +
+ )} +
+
+ +
+ + ) : ( + "" + )} +
+ ); +} diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx new file mode 100644 index 00000000..f4f3162e --- /dev/null +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx @@ -0,0 +1,122 @@ +"use client"; +import { Link } from "@/components/navigation"; +import { Card, CardContent } from "@/components/ui/card"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; +import { getListContent } from "@/service/landing/landing"; +import { + formatDateToIndonesian, + generateLocalizedPath, + textEllipsis, +} from "@/utils/globals"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import { + SortingState, + ColumnFiltersState, + VisibilityState, + PaginationState, +} from "@tanstack/react-table"; +import { + useParams, + usePathname, + useRouter, + useSearchParams, +} from "next/navigation"; +import React, { Component, useEffect, useState } from "react"; + +const ImageSliderPage = () => { + const router = useRouter(); + const searchParams = useSearchParams(); + const [imageData, setImageData] = useState(); + const [displayImage, setDisplayImage] = useState([]); + const [page, setPage] = useState(1); + + useEffect(() => { + fetchData(); + }, [page]); + + useEffect(() => { + if (imageData?.length > 0) { + shuffleAndSetVideos(); + const interval = setInterval(shuffleAndSetVideos, 5000); + return () => clearInterval(interval); // Cleanup interval on unmount + } + }, [imageData]); + + const fetchData = async () => { + const response = await getListContent({ + page: page - 1, + size: 6, + sortBy: "createdAt", + contentTypeId: "1", + }); + console.log(response); + + const data = response.data?.data; + const contentData = data?.content; + setImageData(contentData); + }; + + const shuffleAndSetVideos = () => { + const shuffled = shuffleArray([...imageData]); + setDisplayImage(shuffled.slice(0, 3)); + }; + + const shuffleArray = (array: any[]) => { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; + }; + return ( +
+
+ {displayImage?.map((image: any) => ( + + + + +
+ {formatDateToIndonesian(new Date(image?.createdAt))}{" "} + {image?.timezone ? image?.timezone : "WIB"}|{" "} + + {image?.clickCount}{" "} + + + {" "} +
+
+ {image?.title} +
+ + + + ))} +
+
+ ); +}; + +export default ImageSliderPage; diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx new file mode 100644 index 00000000..523f860e --- /dev/null +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx @@ -0,0 +1,95 @@ +"use client"; +import { Link } from "@/components/navigation"; +import { Card, CardContent } from "@/components/ui/card"; +import { getListContent } from "@/service/landing/landing"; +import { formatDateToIndonesian } from "@/utils/globals"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import image from "next/image"; +import React, { useEffect, useState } from "react"; + +const VideoSliderPage = () => { + const [allVideoData, setAllVideoData] = useState([]); + const [displayVideos, setDisplayVideos] = useState([]); + const [page, setPage] = useState(1); + + useEffect(() => { + initFetch(); + }, []); + + useEffect(() => { + if (allVideoData?.length > 0) { + shuffleAndSetVideos(); + const interval = setInterval(shuffleAndSetVideos, 5000); + return () => clearInterval(interval); // Cleanup interval on unmount + } + }, [allVideoData]); + + const initFetch = async () => { + const response = await getListContent({ + page: page - 1, + size: 12, + sortBy: "createdAt", + contentTypeId: "2", + }); + setAllVideoData(response?.data?.data?.content || []); + }; + + const shuffleAndSetVideos = () => { + const shuffled = shuffleArray([...allVideoData]); + setDisplayVideos(shuffled.slice(0, 3)); + }; + + const shuffleArray = (array: any[]) => { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; + }; + + return ( +
+
+ {displayVideos.map((video: any) => ( + + + + +
+ {formatDateToIndonesian(new Date(video?.createdAt))}{" "} + {video?.timezone || "WIB"} | + + {video?.clickCount} + + + +
+
+ {video?.title} +
+ + + + ))} +
+
+ ); +}; + +export default VideoSliderPage; diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/video/detail/[id]/page.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/video/detail/[id]/page.tsx new file mode 100644 index 00000000..ce86d7b7 --- /dev/null +++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/video/detail/[id]/page.tsx @@ -0,0 +1,551 @@ +"use client"; +import React, { ChangeEvent, useEffect, useRef, useState } from "react"; +import { useForm, Controller } from "react-hook-form"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { Card, CardContent } from "@/components/ui/card"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import { useParams, useRouter } from "next/navigation"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import Cookies from "js-cookie"; +import { postBlog } from "@/service/blog/blog"; +import { Textarea } from "@/components/ui/textarea"; +import { DotSquare, InboxIcon, PaperclipIcon, SmileIcon } from "lucide-react"; +import { detailMedia } from "@/service/curated-content/curated-content"; +import { Swiper, SwiperSlide } from "swiper/react"; +import "swiper/css"; +import "swiper/css/free-mode"; +import "swiper/css/navigation"; +import "swiper/css/pagination"; +import "swiper/css/thumbs"; +import "swiper/css"; +import "swiper/css/navigation"; +import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules"; +import { Avatar, AvatarImage } from "@/components/ui/avatar"; + +const detailSchema = z.object({ + title: z.string().min(1, { message: "Judul diperlukan" }), + categoryName: z.string().min(1, { message: "Judul diperlukan" }), + meta: z.string().min(1, { message: "Judul diperlukan" }), + description: z + .string() + .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }), + // tags: z.string().min(1, { message: "Judul diperlukan" }), +}); + +type Category = { + id: string; + categoryName: string; +}; + +export type curationDetail = { + id: number; + title: string; + categoryName: string; + description: string; + uploadedBy: { + id: number; + fullname: string; + username: string | null; + email: string; + isActive: boolean; + isDefault: boolean; + isInternational: boolean; + userLevel: { + id: number; + name: string; + aliasName: string; + userGroupId: number; + }; + }; + tags: string; + provinceId: string; + is_active: string; +}; + +const initialComments = [ + { + id: 1, + username: "Esther Howard", + date: "07-04-2023 20:00 WIB", + text: "Tolong untuk narasinya mengikuti 5W + 1H!", + avatar: "/images/avatar/avatar-3.png", // URL avatar atau path gambar pengguna + replies: [], // Komentar balasan + }, + { + id: 2, + username: "Brooklyn Simmons", + date: "07-04-2023 20:00 WIB", + text: "Ok Baik, Saya segera melakukan perbaikan. Terima kasih atas masukannya. 🙏", + avatar: "/images/avatar/avatar-5.png", // URL avatar atau path gambar pengguna + replies: [], // Komentar balasan + }, + { + id: 3, + username: "Leslie Alexander", + date: "07-04-2023 20:00 WIB", + text: "Sangat berguna. Terima Kasih!", + avatar: "/images/avatar/avatar-7.png", // URL avatar atau path gambar pengguna + replies: [], // Komentar balasan + }, +]; + +export default function DetailImage() { + const MySwal = withReactContent(Swal); + const { id } = useParams() as { id: string }; + console.log(id); + const editor = useRef(null); + type DetailSchema = z.infer; + + const [selectedFiles, setSelectedFiles] = useState([]); + const taskId = Cookies.get("taskId"); + const scheduleId = Cookies.get("scheduleId"); + const scheduleType = Cookies.get("scheduleType"); + const [selectedTarget, setSelectedTarget] = useState(""); + // const [detail, setDetail] = useState({ + // title: null, + // tags: null, + // files: [], + // fileType: null, + // }); + const [detail, setDetail] = useState(); + const [refresh] = useState(false); + const [detailVideo, setDetailVideo] = useState([]); + const [detailThumb, setDetailThumb] = useState([]); + const [thumbsSwiper, setThumbsSwiper] = useState(null); + + const { + control, + handleSubmit, + setValue, + formState: { errors }, + } = useForm({ + resolver: zodResolver(detailSchema), + }); + + const [commentsData, setCommentsData] = useState(initialComments); + const [replyText, setReplyText] = useState(""); + const [replyingTo, setReplyingTo] = useState(null); + + const handleReply = (commentId: number) => { + setReplyingTo(commentId); + }; + + const addReply = (commentId: number) => { + if (replyText.trim()) { + const newCommentData = commentsData.map((comment: any) => { + if (comment.id === commentId) { + return { + ...comment, + replies: [ + ...comment.replies, + { + text: replyText, + username: "You", + date: new Date().toLocaleString(), + }, + ], + }; + } + return comment; + }); + + setCommentsData(newCommentData); + setReplyText(""); + setReplyingTo(null); + } + }; + + useEffect(() => { + async function initState() { + if (id) { + const response = await detailMedia(id); + const details = response.data?.data; + + setDetail(details); + const filesData = details.files || []; + const fileUrls = filesData.map((file: { url: string }) => + file.url ? file.url : "default-image.jpg" + ); + setDetailVideo(fileUrls); + const filesDataThumbnail = details.files || []; + const fileUrlsThumbnail = filesDataThumbnail.map( + (file: { thumbnailFileUrl: string }) => + file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg" + ); + setDetailThumb(fileUrlsThumbnail); + } + } + initState(); + }, [id, refresh]); + + return ( +
+ {detail !== undefined ? ( + +
+

Kurasi Detail

+ +
+
+
+
+ + ( + + )} + /> + {errors.title?.message && ( +

+ {errors.title.message} +

+ )} +
+
+
+ + ( + + )} + /> +
+
+
+
+ + ( + +
+
+ + + +
+
+ +
+ + {commentsData.map((comment) => ( +
+ + + +
+ + {comment.username} + + + {comment.date} + +

{comment.text}

+
handleReply(comment.id)} + > + + Balas +
+ {comment.replies.length > 0 && ( +
+ {comment.replies.map((reply: any, index: any) => ( +
+ + + +
+ + {reply.username} + + + {reply.date} + +

+ {reply.text} +

+
+
+ ))} +
+ )} +
+
+ ))} + {replyingTo !== null && ( +
+ + +
+ )} +
+
+ +
+ + ) : ( + "" + )} +
+ ); +} diff --git a/app/[locale]/(protected)/curated-content/layout.tsx b/app/[locale]/(protected)/shared/curated-content/layout.tsx similarity index 100% rename from app/[locale]/(protected)/curated-content/layout.tsx rename to app/[locale]/(protected)/shared/curated-content/layout.tsx diff --git a/app/[locale]/(protected)/curated-content/page.tsx b/app/[locale]/(protected)/shared/curated-content/page.tsx similarity index 60% rename from app/[locale]/(protected)/curated-content/page.tsx rename to app/[locale]/(protected)/shared/curated-content/page.tsx index bf3e5a2e..fceac0cd 100644 --- a/app/[locale]/(protected)/curated-content/page.tsx +++ b/app/[locale]/(protected)/shared/curated-content/page.tsx @@ -1,15 +1,32 @@ import SiteBreadcrumb from "@/components/site-breadcrumb"; import { Card, CardContent } from "@/components/ui/card"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import InternalTable from "../communication/internal/components/internal-table"; -import EscalationTable from "../communication/escalation/components/escalation-table"; -import CollaborationTable from "../communication/collaboration/components/collabroation-table"; -import { Button } from "@/components/ui/button"; import { Search, UploadIcon } from "lucide-react"; import { InputGroup, InputGroupText } from "@/components/ui/input-group"; import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; +import { Link } from "@/components/navigation"; +import { formatDateToIndonesian, generateLocalizedPath } from "@/utils/globals"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import newContent from "@/components/landing-page/new-content"; +import { locale } from "dayjs"; +import { useEffect, useState } from "react"; +import { getListContent } from "@/service/landing/landing"; +import GiatRoutine from "./giat-routine/video/audio-visual"; +import VideoSliderPage from "./giat-routine/video/audio-visual"; +import AudioSliderPage from "./giat-routine/audio/audio"; +import ImageSliderPage from "./giat-routine/image/image"; +import TeksSliderPage from "./giat-routine/document/teks"; +import ContestTable from "../contest/components/contest-table"; -const CuratedContentPage = async () => { +const CuratedContentPage = () => { return (
@@ -56,6 +73,24 @@ const CuratedContentPage = async () => {
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
@@ -78,32 +113,35 @@ const CuratedContentPage = async () => {
- -
- - - -
-
- -
-
- - - - - - +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ +
+ +
diff --git a/app/[locale]/(protected)/communications/account-report/components/column.tsx b/app/[locale]/(protected)/supervisor/communications/account-report/components/column.tsx similarity index 100% rename from app/[locale]/(protected)/communications/account-report/components/column.tsx rename to app/[locale]/(protected)/supervisor/communications/account-report/components/column.tsx diff --git a/app/[locale]/(protected)/communications/account-report/components/table.tsx b/app/[locale]/(protected)/supervisor/communications/account-report/components/table.tsx similarity index 100% rename from app/[locale]/(protected)/communications/account-report/components/table.tsx rename to app/[locale]/(protected)/supervisor/communications/account-report/components/table.tsx diff --git a/app/[locale]/(protected)/communications/account-report/layout.tsx b/app/[locale]/(protected)/supervisor/communications/account-report/layout.tsx similarity index 100% rename from app/[locale]/(protected)/communications/account-report/layout.tsx rename to app/[locale]/(protected)/supervisor/communications/account-report/layout.tsx diff --git a/app/[locale]/(protected)/communications/account-report/page.tsx b/app/[locale]/(protected)/supervisor/communications/account-report/page.tsx similarity index 100% rename from app/[locale]/(protected)/communications/account-report/page.tsx rename to app/[locale]/(protected)/supervisor/communications/account-report/page.tsx diff --git a/app/[locale]/(protected)/communications/collaboration/components/column.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/components/column.tsx similarity index 100% rename from app/[locale]/(protected)/communications/collaboration/components/column.tsx rename to app/[locale]/(protected)/supervisor/communications/collaboration/components/column.tsx diff --git a/app/[locale]/(protected)/communications/collaboration/components/table.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/components/table.tsx similarity index 100% rename from app/[locale]/(protected)/communications/collaboration/components/table.tsx rename to app/[locale]/(protected)/supervisor/communications/collaboration/components/table.tsx diff --git a/app/[locale]/(protected)/communications/collaboration/layout.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/layout.tsx similarity index 100% rename from app/[locale]/(protected)/communications/collaboration/layout.tsx rename to app/[locale]/(protected)/supervisor/communications/collaboration/layout.tsx diff --git a/app/[locale]/(protected)/communications/collaboration/page.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/page.tsx similarity index 100% rename from app/[locale]/(protected)/communications/collaboration/page.tsx rename to app/[locale]/(protected)/supervisor/communications/collaboration/page.tsx diff --git a/app/[locale]/(protected)/communications/forward/components/column.tsx b/app/[locale]/(protected)/supervisor/communications/forward/components/column.tsx similarity index 100% rename from app/[locale]/(protected)/communications/forward/components/column.tsx rename to app/[locale]/(protected)/supervisor/communications/forward/components/column.tsx diff --git a/app/[locale]/(protected)/communications/forward/components/table.tsx b/app/[locale]/(protected)/supervisor/communications/forward/components/table.tsx similarity index 100% rename from app/[locale]/(protected)/communications/forward/components/table.tsx rename to app/[locale]/(protected)/supervisor/communications/forward/components/table.tsx diff --git a/app/[locale]/(protected)/communications/forward/layout.tsx b/app/[locale]/(protected)/supervisor/communications/forward/layout.tsx similarity index 100% rename from app/[locale]/(protected)/communications/forward/layout.tsx rename to app/[locale]/(protected)/supervisor/communications/forward/layout.tsx diff --git a/app/[locale]/(protected)/communications/forward/page.tsx b/app/[locale]/(protected)/supervisor/communications/forward/page.tsx similarity index 100% rename from app/[locale]/(protected)/communications/forward/page.tsx rename to app/[locale]/(protected)/supervisor/communications/forward/page.tsx diff --git a/app/[locale]/(protected)/communications/internal/components/column.tsx b/app/[locale]/(protected)/supervisor/communications/internal/components/column.tsx similarity index 100% rename from app/[locale]/(protected)/communications/internal/components/column.tsx rename to app/[locale]/(protected)/supervisor/communications/internal/components/column.tsx diff --git a/app/[locale]/(protected)/communications/internal/components/table.tsx b/app/[locale]/(protected)/supervisor/communications/internal/components/table.tsx similarity index 100% rename from app/[locale]/(protected)/communications/internal/components/table.tsx rename to app/[locale]/(protected)/supervisor/communications/internal/components/table.tsx diff --git a/app/[locale]/(protected)/communications/internal/layout.tsx b/app/[locale]/(protected)/supervisor/communications/internal/layout.tsx similarity index 100% rename from app/[locale]/(protected)/communications/internal/layout.tsx rename to app/[locale]/(protected)/supervisor/communications/internal/layout.tsx diff --git a/app/[locale]/(protected)/communications/internal/page.tsx b/app/[locale]/(protected)/supervisor/communications/internal/page.tsx similarity index 100% rename from app/[locale]/(protected)/communications/internal/page.tsx rename to app/[locale]/(protected)/supervisor/communications/internal/page.tsx diff --git a/app/[locale]/(protected)/communications/questions/components/column.tsx b/app/[locale]/(protected)/supervisor/communications/questions/components/column.tsx similarity index 100% rename from app/[locale]/(protected)/communications/questions/components/column.tsx rename to app/[locale]/(protected)/supervisor/communications/questions/components/column.tsx diff --git a/app/[locale]/(protected)/communications/questions/components/table.tsx b/app/[locale]/(protected)/supervisor/communications/questions/components/table.tsx similarity index 100% rename from app/[locale]/(protected)/communications/questions/components/table.tsx rename to app/[locale]/(protected)/supervisor/communications/questions/components/table.tsx diff --git a/app/[locale]/(protected)/communications/questions/layout.tsx b/app/[locale]/(protected)/supervisor/communications/questions/layout.tsx similarity index 100% rename from app/[locale]/(protected)/communications/questions/layout.tsx rename to app/[locale]/(protected)/supervisor/communications/questions/layout.tsx diff --git a/app/[locale]/(protected)/communications/questions/page.tsx b/app/[locale]/(protected)/supervisor/communications/questions/page.tsx similarity index 100% rename from app/[locale]/(protected)/communications/questions/page.tsx rename to app/[locale]/(protected)/supervisor/communications/questions/page.tsx diff --git a/app/[locale]/(protected)/frequently-asked-question/components/column.tsx b/app/[locale]/(protected)/supervisor/frequently-asked-question/components/column.tsx similarity index 100% rename from app/[locale]/(protected)/frequently-asked-question/components/column.tsx rename to app/[locale]/(protected)/supervisor/frequently-asked-question/components/column.tsx diff --git a/app/[locale]/(protected)/frequently-asked-question/components/table.tsx b/app/[locale]/(protected)/supervisor/frequently-asked-question/components/table.tsx similarity index 100% rename from app/[locale]/(protected)/frequently-asked-question/components/table.tsx rename to app/[locale]/(protected)/supervisor/frequently-asked-question/components/table.tsx diff --git a/app/[locale]/(protected)/frequently-asked-question/layout.tsx b/app/[locale]/(protected)/supervisor/frequently-asked-question/layout.tsx similarity index 100% rename from app/[locale]/(protected)/frequently-asked-question/layout.tsx rename to app/[locale]/(protected)/supervisor/frequently-asked-question/layout.tsx diff --git a/app/[locale]/(protected)/frequently-asked-question/page.tsx b/app/[locale]/(protected)/supervisor/frequently-asked-question/page.tsx similarity index 100% rename from app/[locale]/(protected)/frequently-asked-question/page.tsx rename to app/[locale]/(protected)/supervisor/frequently-asked-question/page.tsx diff --git a/app/[locale]/(protected)/knowledge-base/layout.tsx b/app/[locale]/(protected)/supervisor/knowledge-base/layout.tsx similarity index 100% rename from app/[locale]/(protected)/knowledge-base/layout.tsx rename to app/[locale]/(protected)/supervisor/knowledge-base/layout.tsx diff --git a/app/[locale]/(protected)/knowledge-base/page.tsx b/app/[locale]/(protected)/supervisor/knowledge-base/page.tsx similarity index 100% rename from app/[locale]/(protected)/knowledge-base/page.tsx rename to app/[locale]/(protected)/supervisor/knowledge-base/page.tsx diff --git a/app/[locale]/(protected)/ticketing/components/columns.tsx b/app/[locale]/(protected)/supervisor/ticketing/components/columns.tsx similarity index 100% rename from app/[locale]/(protected)/ticketing/components/columns.tsx rename to app/[locale]/(protected)/supervisor/ticketing/components/columns.tsx diff --git a/app/[locale]/(protected)/ticketing/components/table.tsx b/app/[locale]/(protected)/supervisor/ticketing/components/table.tsx similarity index 100% rename from app/[locale]/(protected)/ticketing/components/table.tsx rename to app/[locale]/(protected)/supervisor/ticketing/components/table.tsx diff --git a/app/[locale]/(protected)/ticketing/layout.tsx b/app/[locale]/(protected)/supervisor/ticketing/layout.tsx similarity index 100% rename from app/[locale]/(protected)/ticketing/layout.tsx rename to app/[locale]/(protected)/supervisor/ticketing/layout.tsx diff --git a/app/[locale]/(protected)/ticketing/page.tsx b/app/[locale]/(protected)/supervisor/ticketing/page.tsx similarity index 100% rename from app/[locale]/(protected)/ticketing/page.tsx rename to app/[locale]/(protected)/supervisor/ticketing/page.tsx diff --git a/app/[locale]/(public)/audio/detail/[slug]/page.tsx b/app/[locale]/(public)/audio/detail/[slug]/page.tsx new file mode 100644 index 00000000..8901aa89 --- /dev/null +++ b/app/[locale]/(public)/audio/detail/[slug]/page.tsx @@ -0,0 +1,144 @@ +"use client"; + +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 DetailAudio = () => { + const [selectedSize, setSelectedSize] = useState("L"); + const [selectedTab, setSelectedTab] = useState("video"); + const router = useRouter(); + const pathname = usePathname(); + const params = useParams(); + const slug = params?.slug; + const [detailDataAudio, setDetailDataAudio] = useState(); + + useEffect(() => { + initFetch(); + }, []); + + const initFetch = async () => { + const response = await getDetail(String(slug)); + console.log("detailAudio", response); + setDetailDataAudio(response?.data?.data); + }; + + const sizes = [ + { label: "XL", value: "3198 x 1798 px" }, + { label: "L", value: "2399 x 1349 px" }, + { label: "M", value: "1599 x 899 px" }, + { label: "S", value: "1066 x 599 px" }, + { label: "XS", value: "800 x 450 px" }, + ]; + + return ( + <> +
+ {/* Container Utama */} +
+ {/* Bagian Kiri */} +
+
+ + +
+
+
+ + {/* Bagian Kanan */} +
+
+ + + +

Simpan

+
+ {/* garis */} +
+ + + {detailDataAudio?.category?.name} + + +
+

poldajabar

+

pilkadamai2024

+
+ +
+ + {/* Opsi Ukuran Foto */} +

Opsi Ukuran Foto

+ +
+ +
+ {sizes.map((size) => ( + + ))} +
+ + {/* Download Semua */} +
+ +
+ + {/* Tombol Download */} + +
+
+ + {/* Footer Informasi */} +
+

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

+

Kreator: {detailDataAudio?.creatorName}

+
+ + {/* Keterangan */} +
+

{detailDataAudio?.title}

+
+
+
+
+ {/* Comment */} +
+

Berikan Komentar

+ -
+
+ + +
- - +
+ + +
+ + + +
); }; diff --git a/app/[locale]/(public)/document/detail/[slug]/page.tsx b/app/[locale]/(public)/document/detail/[slug]/page.tsx new file mode 100644 index 00000000..78de1a74 --- /dev/null +++ b/app/[locale]/(public)/document/detail/[slug]/page.tsx @@ -0,0 +1,143 @@ +"use client"; + +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"); + const [selectedTab, setSelectedTab] = useState("video"); + const router = useRouter(); + const pathname = usePathname(); + const params = useParams(); + const slug = params?.slug; + const [detailDataDocument, setDetailDataDocument] = useState(); + + useEffect(() => { + initFetch(); + }, []); + + const initFetch = async () => { + const response = await getDetail(String(slug)); + console.log("detailAudio", response); + setDetailDataDocument(response?.data?.data); + }; + + const sizes = [ + { label: "XL", value: "3198 x 1798 px" }, + { label: "L", value: "2399 x 1349 px" }, + { label: "M", value: "1599 x 899 px" }, + { label: "S", value: "1066 x 599 px" }, + { label: "XS", value: "800 x 450 px" }, + ]; + + return ( + <> +
+ {/* Container Utama */} +
+ {/* Bagian Kiri */} +
+
+ +
+
+
+ + {/* Bagian Kanan */} +
+
+ + + +

Simpan

+
+ {/* garis */} +
+ + + {detailDataDocument?.category?.name} + + +
+

poldajabar

+

pilkadamai2024

+
+ +
+ + {/* Opsi Ukuran Foto */} +

Opsi Ukuran Foto

+ +
+ +
+ {sizes.map((size) => ( + + ))} +
+ + {/* Download Semua */} +
+ +
+ + {/* Tombol Download */} + +
+
+ + {/* Footer Informasi */} +
+

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

+

Kreator: {detailDataDocument?.creatorName}

+
+ + {/* Keterangan */} +
+

{detailDataDocument?.title}

+
+
+
+
+ {/* Comment */} +
+

Berikan Komentar

+