From 1b924d1790efa4758114716a4e371b90d9b33aa1 Mon Sep 17 00:00:00 2001 From: Anang Yusman Date: Thu, 8 May 2025 18:02:54 +0800 Subject: [PATCH] [QUDO-57,QUDO-56] feat:Check update profil pengguna,Check form register dan ubah password --- .../media-online/component/table.tsx | 2 +- .../media-online/create/page.tsx | 19 + .../tb-news/component/column.tsx | 36 +- .../tb-news/component/table.tsx | 183 ++-- .../tb-news/detail/[id]/page.tsx | 12 + .../tb-news/detail/component/column.tsx | 53 ++ .../tb-news/detail/component/table.tsx | 263 ++++++ .../(public)/profile/change-password/page.tsx | 123 ++- .../media-tracking/media-tracking-form.tsx | 256 ++++++ components/landing-page/navbar.tsx | 784 +++++++++++++++--- components/partials/auth/login-form.tsx | 91 +- messages/en.json | 7 +- messages/in.json | 7 +- 13 files changed, 1584 insertions(+), 252 deletions(-) create mode 100644 app/[locale]/(protected)/admin/media-tracking/media-online/create/page.tsx create mode 100644 app/[locale]/(protected)/admin/media-tracking/tb-news/detail/[id]/page.tsx create mode 100644 app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/column.tsx create mode 100644 app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/table.tsx create mode 100644 components/form/media-tracking/media-tracking-form.tsx diff --git a/app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx b/app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx index 28c87044..723f833f 100644 --- a/app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx +++ b/app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx @@ -207,7 +207,7 @@ const MediaOnlineTable = () => {
- + diff --git a/app/[locale]/(protected)/admin/media-tracking/media-online/create/page.tsx b/app/[locale]/(protected)/admin/media-tracking/media-online/create/page.tsx new file mode 100644 index 00000000..aadabc80 --- /dev/null +++ b/app/[locale]/(protected)/admin/media-tracking/media-online/create/page.tsx @@ -0,0 +1,19 @@ +import { Card, CardContent } from "@/components/ui/card"; +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import FormTaskTa from "@/components/form/task-ta/task-ta-form"; +import FormAskExpert from "@/components/form/shared/ask-expert-form"; +import FormDoItYourself from "@/components/form/shared/do-it-yourself-form"; +import FormMediaOnline from "@/components/form/media-tracking/media-tracking-form"; + +const MediaOnlineCreatePage = () => { + return ( +
+ +
+ +
+
+ ); +}; + +export default MediaOnlineCreatePage; diff --git a/app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx b/app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx index e963dea3..beb762e0 100644 --- a/app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx +++ b/app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx @@ -43,16 +43,42 @@ const columns: ColumnDef[] = [ header: "Tanggal", cell: ({ row }) => {row.getValue("categoryName")}, }, - { - accessorKey: "title", - header: "Media Online", - cell: ({ row }) => {row.getValue("title")}, - }, { accessorKey: "link", header: "Link Berita", cell: ({ row }) => {row.getValue("categoryName")}, }, + { + id: "actions", + accessorKey: "action", + header: "Aksi", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + View + + + + + ); + }, + }, ]; export default columns; diff --git a/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx b/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx index c2407cd7..fc7b6304 100644 --- a/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx +++ b/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx @@ -66,6 +66,15 @@ import { Checkbox } from "@/components/ui/checkbox"; import { close, loading } from "@/config/swal"; import { Link } from "@/i18n/routing"; import { Label } from "@/components/ui/label"; +import { + Dialog, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { link } from "fs"; const NewsTable = () => { const router = useRouter(); @@ -80,6 +89,7 @@ const NewsTable = () => { [] ); const [showTable, setShowTable] = React.useState(false); + const [link, setLink] = React.useState(""); const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); @@ -204,100 +214,99 @@ const NewsTable = () => { return (
-
+

Tracking Berita hari ini!

-
- - -

Sisa kuota harian: 30 Artikel

-
- {!showTable && ( -
- - -
- )} - {showTable && ( - <> - - - {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. - - - )} - -
- -
- + + + + Form Tracking Berita + + +
+
+ + setLink(e.target.value)} + /> +

+ Sisa Kuota Harian: 5 Kata Kunci +

+
- - )} + + + + + + + + + + {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. + + + )} + +
+ +
+ +
+ {/* + )} */}
); }; diff --git a/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/[id]/page.tsx b/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/[id]/page.tsx new file mode 100644 index 00000000..4bfb2f54 --- /dev/null +++ b/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/[id]/page.tsx @@ -0,0 +1,12 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import NewsTable from "../../component/table"; +import NewsDetailTable from "../component/table"; + +export default function DetailNews() { + return ( +
+ + +
+ ); +} diff --git a/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/column.tsx b/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/column.tsx new file mode 100644 index 00000000..6313dd45 --- /dev/null +++ b/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/column.tsx @@ -0,0 +1,53 @@ +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 { + formatDateToIndonesian, + getOnlyDate, + 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"; +import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"; + +const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => {row.getValue("no")}, + }, + { + accessorKey: "mediaOnline", + header: "Media Online", + cell: ({ row }) => {row.getValue("categoryName")}, + }, + { + accessorKey: "link", + header: "Link Berita", + cell: ({ row }) => {row.getValue("categoryName")}, + }, +]; + +export default columns; diff --git a/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/table.tsx b/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/table.tsx new file mode 100644 index 00000000..e7c65227 --- /dev/null +++ b/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/table.tsx @@ -0,0 +1,263 @@ +"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, + UserIcon, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { Input } from "@/components/ui/input"; +import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { paginationBlog } from "@/service/blog/blog"; +import { ticketingPagination } from "@/service/ticketing/ticketing"; +import { Badge } from "@/components/ui/badge"; +import { useRouter, useSearchParams } from "next/navigation"; +import TablePagination from "@/components/table/table-pagination"; +import columns from "./column"; +import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { listDataMedia } from "@/service/broadcast/broadcast"; +import { listEnableCategory } from "@/service/content/content"; +import { Checkbox } from "@/components/ui/checkbox"; +import { close, loading } from "@/config/swal"; +import { Link } from "@/i18n/routing"; +import { Label } from "@/components/ui/label"; +import { + Dialog, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { link } from "fs"; + +const NewsDetailTable = () => { + const router = useRouter(); + const searchParams = useSearchParams(); + const [search, setSearch] = React.useState(""); + const [showData, setShowData] = React.useState("10"); + const [categories, setCategories] = React.useState(); + const [dataTable, setDataTable] = React.useState([]); + const [totalData, setTotalData] = React.useState(1); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [showTable, setShowTable] = React.useState(false); + const [link, setLink] = React.useState(""); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: Number(showData), + }); + const [categoryFilter, setCategoryFilter] = React.useState([]); + const [statusFilter, setStatusFilter] = React.useState([]); + const [page, setPage] = React.useState(1); + 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, + }, + }); + + let typingTimer: any; + const doneTypingInterval = 1500; + + // const handleKeyUp = () => { + // clearTimeout(typingTimer); + // typingTimer = setTimeout(doneTyping, doneTypingInterval); + // }; + + const handleKeyDown = () => { + clearTimeout(typingTimer); + }; + + // async function doneTyping() { + // fetchData(); + // } + + React.useEffect(() => { + const pageFromUrl = searchParams?.get("page"); + if (pageFromUrl) { + setPage(Number(pageFromUrl)); + } + }, [searchParams]); + + // React.useEffect(() => { + // fetchData(); + // setPagination({ + // pageIndex: 0, + // pageSize: Number(showData), + // }); + // }, [page, showData]); + + // async function fetchData() { + // try { + // loading(); + // const res = await listDataMedia( + // page - 1, + // showData, + // search, + // categoryFilter?.sort().join(","), + // statusFilter?.sort().join(",") + // ); + // const data = res?.data?.data; + // const contentData = data?.content; + // contentData.forEach((item: any, index: number) => { + // item.no = (page - 1) * Number(showData) + index + 1; + // }); + + // console.log("contentData : ", data); + + // setDataTable(contentData); + // setTotalData(data?.totalElements); + // setTotalPage(data?.totalPages); + // close(); + // } catch (error) { + // console.error("Error fetching tasks:", error); + // } + // } + + React.useEffect(() => { + getCategories(); + }, []); + + async function getCategories() { + const category = await listEnableCategory(""); + const resCategory = category?.data?.data?.content; + setCategories(resCategory); + } + + const handleChange = (type: string, id: number, checked: boolean) => { + if (type === "category") { + if (checked) { + const temp: number[] = [...categoryFilter]; + temp.push(id); + setCategoryFilter(temp); + } else { + const temp = categoryFilter.filter((a) => a !== id); + setCategoryFilter(temp); + } + } else { + if (checked) { + const temp: number[] = [...statusFilter]; + temp.push(id); + setStatusFilter(temp); + } else { + const temp = statusFilter.filter((a) => a !== id); + setStatusFilter(temp); + } + } + }; + + 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 NewsDetailTable; diff --git a/app/[locale]/(public)/profile/change-password/page.tsx b/app/[locale]/(public)/profile/change-password/page.tsx index 428aa063..fe5ed014 100644 --- a/app/[locale]/(public)/profile/change-password/page.tsx +++ b/app/[locale]/(public)/profile/change-password/page.tsx @@ -10,13 +10,14 @@ import * as z from "zod"; import Swal from "sweetalert2"; import { getBlog, postBlog } from "@/service/blog/blog"; import { id } from "date-fns/locale"; -import router from "next/router"; import { getInfoProfile, saveUser, setupPassword } from "@/service/auth"; import withReactContent from "sweetalert2-react-content"; import { Textarea } from "@/components/ui/textarea"; import { Button } from "@/components/ui/button"; import { Link } from "@/components/navigation"; import { useTranslations } from "next-intl"; +import { useRouter } from "next/navigation"; +import { close, error, loading } from "@/lib/swal"; const profileSchema = z.object({ password: z.string().min(1, { message: "Judul diperlukan" }), @@ -31,6 +32,7 @@ type Detail = { }; const ChangePassword: React.FC = () => { + const router = useRouter(); const MySwal = withReactContent(Swal); const [detail, setDetail] = useState(); const [refresh, setRefresh] = useState(false); @@ -59,26 +61,52 @@ const ChangePassword: React.FC = () => { }, []); const save = async (data: ProfileSchema) => { - const requestData = { - ...data, - // userId: detail?.userKeycloakId, - password: data.password, - retypePassword: detail?.retypePassword, - }; + if (data.password != null && data.password == data.retypePassword) { + loading(); + const newData = { + // userId: detail?.userKeycloakId, + password: data.password, + retypePassword: detail?.retypePassword, + }; - const response = await setupPassword(requestData); - console.log("Form Data Submitted:", requestData); - console.log("response", response); + const response = await setupPassword(newData); - MySwal.fire({ - title: "Sukses", - text: "Data berhasil disimpan.", - icon: "success", - confirmButtonColor: "#3085d6", - confirmButtonText: "OK", - }).then(() => { - router.push("/en/auth"); - }); + close(); + if (response?.error) { + error(response.message); + return false; + } + + MySwal.fire({ + title: "Sukses", + text: "Data berhasil disimpan.", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then(() => { + router.push("/in/auth"); + }); + } + // const requestData = { + // ...data, + // // userId: detail?.userKeycloakId, + // password: data.password, + // retypePassword: detail?.retypePassword, + // }; + + // const response = await setupPassword(requestData); + // console.log("Form Data Submitted:", requestData); + // console.log("response", response); + + // MySwal.fire({ + // title: "Sukses", + // text: "Data berhasil disimpan.", + // icon: "success", + // confirmButtonColor: "#3085d6", + // confirmButtonText: "OK", + // }).then(() => { + // router.push("/in/auth"); + // }); }; const onSubmit = (data: ProfileSchema) => { @@ -107,13 +135,19 @@ const ChangePassword: React.FC = () => {
- + - + - +
@@ -126,20 +160,55 @@ const ChangePassword: React.FC = () => { {t("password")} * - } /> - {errors.password?.message &&

{errors.password.message}

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

+ {errors.password.message} +

+ )}
- } /> - {errors.retypePassword?.message &&

{errors.retypePassword.message}

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

+ {errors.retypePassword.message} +

+ )}
-
diff --git a/components/form/media-tracking/media-tracking-form.tsx b/components/form/media-tracking/media-tracking-form.tsx new file mode 100644 index 00000000..f51e2991 --- /dev/null +++ b/components/form/media-tracking/media-tracking-form.tsx @@ -0,0 +1,256 @@ +"use client"; +import React, { useEffect, useRef, useState } from "react"; +import { useForm, Controller } from "react-hook-form"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { Card } from "@/components/ui/card"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import { useParams, useRouter } from "next/navigation"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Checkbox } from "@/components/ui/checkbox"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import JoditEditor from "jodit-react"; +import { + createTask, + createTaskTa, + getTask, + getUserLevelForAssignments, + getUserLevelForExpert, +} from "@/service/task"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react"; +import { AudioRecorder } from "react-audio-voice-recorder"; +import FileUploader from "@/components/form/shared/file-uploader"; +import { Upload } from "tus-js-client"; +import { error } from "@/config/swal"; +import { getCsrfToken } from "@/service/auth"; +import { loading } from "@/lib/swal"; +import { useTranslations } from "next-intl"; +import dynamic from "next/dynamic"; +import { cn } from "@/lib/utils"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { Calendar } from "@/components/ui/calendar"; +import { addDays, format, setDate } from "date-fns"; +import { DateRange } from "react-day-picker"; +import TimePicker from "react-time-picker"; +import "react-time-picker/dist/TimePicker.css"; +import "react-clock/dist/Clock.css"; +import { + AdministrationLevelList, + getListCompetencies, + getListExperiences, +} from "@/service/management-user/management-user"; +import { Link } from "@/i18n/routing"; + +const taskSchema = z.object({ + title: z.string().min(1, { message: "Judul diperlukan" }), + url: z.string().min(2, { + message: "Narasi Penugasan harus lebih dari 2 karakter.", + }), + assign: z.string().min(1, { message: "Judul diperlukan" }), +}); + +interface FileWithPreview extends File { + preview: string; +} + +export type taskDetail = { + id: number; + title: string; + fileTypeOutput: string; + assignedToTopLevel: string; + url: string; +}; + +const CustomEditor = dynamic( + () => { + return import("@/components/editor/custom-editor"); + }, + { ssr: false } +); + +export default function FormMediaOnline() { + const MySwal = withReactContent(Swal); + const router = useRouter(); + const editor = useRef(null); + type TaskSchema = z.infer; + const { id } = useParams() as { id: string }; + console.log(id); + const [taskType, setTaskType] = useState("atensi-khusus"); + const [broadcastType, setBroadcastType] = useState(""); + const [type, setType] = useState("1"); + const [selectedTarget, setSelectedTarget] = useState("3,4"); + const [detail, setDetail] = useState(); + const [listExpert, setListExpert] = useState([]); + const [checkedLevels, setCheckedLevels] = useState>(new Set()); + const [expandedPolda, setExpandedPolda] = useState([{}]); + const [isLoading, setIsLoading] = useState(false); + const [audioFile, setAudioFile] = useState(null); + const [isRecording, setIsRecording] = useState(false); + const [timer, setTimer] = useState(120); + + const t = useTranslations("Form"); + + const { + register, + control, + setValue, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: zodResolver(taskSchema), + mode: "all", + }); + + // }; + + const save = async (data: TaskSchema) => { + const requestData: { + id?: number; + title: string; + assignedToUsers: any; + url: any; + } = { + ...data, + assignedToUsers: data.assign, + url: data.url, + title: data.title, + }; + + const response = await createTaskTa(requestData); + + console.log("Form Data Submitted:", requestData); + console.log("response", response); + + const id = response?.data?.data.id; + }; + + const onSubmit = (data: TaskSchema) => { + MySwal.fire({ + title: "Simpan Data", + text: "Apakah Anda yakin ingin menyimpan data ini?", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#d33", + confirmButtonColor: "#3085d6", + confirmButtonText: "Simpan", + }).then((result) => { + if (result.isConfirmed) { + save(data); + } + }); + }; + + const successSubmit = (redirect: string) => { + MySwal.fire({ + title: "Sukses", + text: "Data berhasil disimpan.", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then(() => { + router.push(redirect); + }); + }; + + return ( + +
+

{t("data-media")}

+

{t("form-media")}

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

{errors.title.message}

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

{errors.title.message}

+ )} +
+
+ + +
+
+
+
+ + + +
+
+ +
+
+
+
+ + ); +} diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx index db59ee09..70281490 100644 --- a/components/landing-page/navbar.tsx +++ b/components/landing-page/navbar.tsx @@ -6,8 +6,23 @@ import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi"; import { useParams, usePathname } from "next/navigation"; import { generateLocalizedPath } from "@/utils/globals"; import { Link } from "@/i18n/routing"; -import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"; -import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu"; +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + navigationMenuTriggerStyle, +} from "@/components/ui/navigation-menu"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "../ui/dropdown-menu"; import Image from "next/image"; import { Icon } from "../ui/icon"; import { getCookiesDecrypt } from "@/lib/utils"; @@ -17,10 +32,23 @@ import { useTranslations } from "next-intl"; import { useRouter } from "@/i18n/routing"; import { Button } from "@/components/ui/button"; import LocalSwitcher from "../partials/header/locale-switcher"; -import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; import { getUserNotifications, listRole } from "@/service/landing/landing"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; type Detail = { id: number; @@ -62,7 +90,11 @@ const Navbar = () => { const [notificationsUpdate, setNotificationsUpdate] = useState([]); const [selectedTab, setSelectedTab] = useState("image"); - let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/"; + let prefixPath = poldaName + ? `/polda/${poldaName}` + : satkerName + ? `/satker/${satkerName}` + : "/"; let menu = ""; @@ -158,8 +190,17 @@ const Navbar = () => {
{/* Logo */} - - Media Hub Logo + + Media Hub Logo {/* Nav Menu */} @@ -169,7 +210,14 @@ const Navbar = () => { - + { - router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1 px-3 py-1 w-36"> + router.push(prefixPath + "/image/filter")} + className="flex place-items-start gap-1 px-3 py-1 w-36" + >

{t("image")}

- router.push(prefixPath + "/video/filter")} className="flex items-start gap-1 py-1 px-3 "> + router.push(prefixPath + "/video/filter")} + className="flex items-start gap-1 py-1 px-3 " + > {pathname?.split("/")[1] == "in" ? ( <>

@@ -202,13 +256,21 @@ const Navbar = () => { )} - router.push(prefixPath + "/document/filter")} className="flex place-items-start gap-1 py-1 px-3"> + + router.push(prefixPath + "/document/filter") + } + className="flex place-items-start gap-1 py-1 px-3" + >

{t("text")}

- router.push(prefixPath + "/audio/filter")} className="flex place-items-start gap-1 py-1 px-3 "> + router.push(prefixPath + "/audio/filter")} + className="flex place-items-start gap-1 py-1 px-3 " + >

{t("audio")}{" "} @@ -218,9 +280,18 @@ const Navbar = () => { - + - + { - + - + {

{/* Mobile Menu Toggle */} - @@ -310,7 +409,13 @@ const Navbar = () => { */} @@ -331,9 +436,20 @@ const Navbar = () => { placeholder={t("search")} className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" /> */} - setOnSearch(e.target.value)} type="text" placeholder="Search..." className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" /> + setOnSearch(e.target.value)} + type="text" + placeholder="Search..." + className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" + /> - + { )}
*/} - {roleId === "5" || roleId === "6" || roleId === "7" || roleId === "8" ? ( + {roleId === "5" || + roleId === "6" || + roleId === "7" || + roleId === "8" ? ( <> {/* Inbox */} test()}> {" "} - + - - + + { {
{notifications?.map((list: any) => ( - +
- avatar + avatar +
+
+ {list?.message}
-
{list?.message}
- {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date( + {`${new Date(list?.createdAt).getDate()}/${ + new Date(list?.createdAt).getMonth() + 1 + }/${new Date( + list?.createdAt + ).getFullYear()} ${new Date( + list?.createdAt + ).getHours()}:${new Date( list?.createdAt ).getMinutes()}`}{" "} @@ -447,7 +604,10 @@ const Navbar = () => { ))} -

+

{t("seeAll")}

@@ -456,15 +616,33 @@ const Navbar = () => {
{notificationsUpdate?.map((list: any) => ( - +
- ... + ...
-
{list?.message}
+
+ {list?.message} +
- {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date( + {`${new Date(list?.createdAt).getDate()}/${ + new Date(list?.createdAt).getMonth() + 1 + }/${new Date( + list?.createdAt + ).getFullYear()} ${new Date( + list?.createdAt + ).getHours()}:${new Date( list?.createdAt ).getMinutes()}`}{" "} @@ -473,7 +651,10 @@ const Navbar = () => { ))} -

+

{t("seeAll")}

@@ -486,10 +667,20 @@ const Navbar = () => { {detail !== undefined ? (
- {"Image"} + {"Image"}
-
{detail?.fullname}
-

({detail?.fullname})

+
+ {detail?.fullname} +
+

+ ({detail?.fullname}) +

@@ -513,7 +704,11 @@ const Navbar = () => { href: "/content-management/galery", }, ].map((item, index) => ( - + {item.name} @@ -525,7 +720,11 @@ const Navbar = () => {
- @@ -535,22 +734,42 @@ const Navbar = () => { - ) : roleId === "2" || roleId === "3" || roleId === "4" || roleId === "9" || roleId === "10" || roleId === "11" || roleId === "12" || roleId === "13" ? ( + ) : roleId === "2" || + roleId === "3" || + roleId === "4" || + roleId === "9" || + roleId === "10" || + roleId === "11" || + roleId === "12" || + roleId === "13" ? ( <> {/* Inbox */} test()}> {" "} - + - - + + { { -
+
{notifications?.map((list: any) => (
- ... + ...
-
{list?.message}
+
+ {list?.message} +
- {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date( + {`${new Date(list?.createdAt).getDate()}/${ + new Date(list?.createdAt).getMonth() + 1 + }/${new Date( + list?.createdAt + ).getFullYear()} ${new Date( + list?.createdAt + ).getHours()}:${new Date( list?.createdAt ).getMinutes()}`}{" "} @@ -600,17 +838,39 @@ const Navbar = () => {

-
+
{notificationsUpdate?.map((list: any) => ( - +
- ... + ...
-
{list?.message}
+
+ {list?.message} +
- {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date( + {`${new Date(list?.createdAt).getDate()}/${ + new Date(list?.createdAt).getMonth() + 1 + }/${new Date( + list?.createdAt + ).getFullYear()} ${new Date( + list?.createdAt + ).getHours()}:${new Date( list?.createdAt ).getMinutes()}`}{" "} @@ -632,10 +892,20 @@ const Navbar = () => { {detail !== undefined ? (
- {"Image"} + {"Image"}
-
{detail?.fullname}
-

({detail?.fullname})

+
+ {detail?.fullname} +
+

+ ({detail?.fullname}) +

@@ -659,7 +929,11 @@ const Navbar = () => { href: "/dashboard", }, ].map((item, index) => ( - + {item.name} @@ -671,7 +945,11 @@ const Navbar = () => {
- @@ -684,22 +962,37 @@ const Navbar = () => { ) : ( // Masuk and Daftar buttons for roleId === null
- + {t("logIn")} - +
-

{t("categoryReg")}

+

+ {t("categoryReg")} +

{t("selectOne")}

{role?.map((row: any) => (
- setCategory(event.target.value)} /> + setCategory(event.target.value)} + /> @@ -708,7 +1001,11 @@ const Navbar = () => {
- + {t("next")}{" "} @@ -727,7 +1024,14 @@ const Navbar = () => { - + { - router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1.5 p-2 w-36"> + router.push(prefixPath + "/image/filter")} + className="flex place-items-start gap-1.5 p-2 w-36" + >

{t("image")}

- router.push(prefixPath + "/video/filter")} className="flex items-start gap-1.5 p-2 "> + router.push(prefixPath + "/video/filter")} + className="flex items-start gap-1.5 p-2 " + > {pathname?.split("/")[1] == "in" ? ( <>

@@ -760,13 +1070,19 @@ const Navbar = () => { )} - router.push(prefixPath + "/document/filter")} className="flex place-items-start gap-1.5 p-2"> + router.push(prefixPath + "/document/filter")} + className="flex place-items-start gap-1.5 p-2" + >

{t("text")}

- router.push(prefixPath + "/audio/filter")} className="flex place-items-start gap-1.5 p-2 "> + router.push(prefixPath + "/audio/filter")} + className="flex place-items-start gap-1.5 p-2 " + >

{t("audio")}{" "} @@ -778,7 +1094,14 @@ const Navbar = () => { - + { - + {

*/} @@ -890,7 +1226,13 @@ const Navbar = () => {
- setOnSearch(e.target.value)} type="text" placeholder="Search..." className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" />{" "} + setOnSearch(e.target.value)} + type="text" + placeholder="Search..." + className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" + />{" "}
{/* {fullName ? ( @@ -961,22 +1303,43 @@ const Navbar = () => { )} */} - {roleId === "5" || roleId === "6" || roleId === "7" || roleId === "8" ? ( + {roleId === "5" || + roleId === "6" || + roleId === "7" || + roleId === "8" ? ( <> {/* Inbox */} test()}> {" "} - + - - + + - + { {
{notifications?.map((list: any) => ( - +
- ... + ... +
+
+ {list?.message}
-
{list?.message}
- {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date( + {`${new Date(list?.createdAt).getDate()}/${ + new Date(list?.createdAt).getMonth() + 1 + }/${new Date( + list?.createdAt + ).getFullYear()} ${new Date( + list?.createdAt + ).getHours()}:${new Date( list?.createdAt ).getMinutes()}`}{" "} @@ -1019,7 +1404,10 @@ const Navbar = () => { ))} -

+

{t("seeAll")}

@@ -1028,15 +1416,33 @@ const Navbar = () => {
{notificationsUpdate?.map((list: any) => ( - +
- ... + ...
-
{list?.message}
+
+ {list?.message} +
- {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date( + {`${new Date(list?.createdAt).getDate()}/${ + new Date(list?.createdAt).getMonth() + 1 + }/${new Date( + list?.createdAt + ).getFullYear()} ${new Date( + list?.createdAt + ).getHours()}:${new Date( list?.createdAt ).getMinutes()}`}{" "} @@ -1045,7 +1451,10 @@ const Navbar = () => { ))} -

+

{t("seeAll")}

@@ -1058,10 +1467,20 @@ const Navbar = () => { {detail !== undefined ? (
- {"Image"} + {"Image"}
-
{detail?.fullname}
-

({detail?.fullname})

+
+ {detail?.fullname} +
+

+ ({detail?.fullname}) +

@@ -1085,7 +1504,11 @@ const Navbar = () => { href: "/content-management/galery", }, ].map((item, index) => ( - + {item.name} @@ -1097,7 +1520,11 @@ const Navbar = () => {
- @@ -1107,22 +1534,42 @@ const Navbar = () => { - ) : roleId === "2" || roleId === "3" || roleId === "4" || roleId === "9" || roleId === "10" || roleId === "11" || roleId === "12" || roleId === "13" ? ( + ) : roleId === "2" || + roleId === "3" || + roleId === "4" || + roleId === "9" || + roleId === "10" || + roleId === "11" || + roleId === "12" || + roleId === "13" ? ( <> {/* Inbox */} test()}> {" "} - + - - + + { { -
+
{notifications?.map((list: any) => (
- ... + ...
-
{list?.message}
+
+ {list?.message} +
- {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date( + {`${new Date(list?.createdAt).getDate()}/${ + new Date(list?.createdAt).getMonth() + 1 + }/${new Date( + list?.createdAt + ).getFullYear()} ${new Date( + list?.createdAt + ).getHours()}:${new Date( list?.createdAt ).getMinutes()}`}{" "} @@ -1172,17 +1638,39 @@ const Navbar = () => {

-
+
{notificationsUpdate?.map((list: any) => ( - +
- ... + ...
-
{list?.message}
+
+ {list?.message} +
- {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date( + {`${new Date(list?.createdAt).getDate()}/${ + new Date(list?.createdAt).getMonth() + 1 + }/${new Date( + list?.createdAt + ).getFullYear()} ${new Date( + list?.createdAt + ).getHours()}:${new Date( list?.createdAt ).getMinutes()}`}{" "} @@ -1191,7 +1679,10 @@ const Navbar = () => { ))} -

+

{t("seeAll")}

@@ -1204,10 +1695,20 @@ const Navbar = () => { {detail !== undefined ? (
- {"Image"} + {"Image"}
-
{detail?.fullname}
-

({detail?.fullname})

+
+ {detail?.fullname} +
+

+ ({detail?.fullname}) +

@@ -1231,7 +1732,11 @@ const Navbar = () => { href: "/dashboard", }, ].map((item, index) => ( - + {item.name} @@ -1243,7 +1748,11 @@ const Navbar = () => {
- @@ -1256,22 +1765,39 @@ const Navbar = () => { ) : ( // Masuk and Daftar buttons for roleId === null
- + {t("logIn")} - +
-

{t("categoryReg")}

+

+ {t("categoryReg")} +

{t("selectOne")}

{role?.map((row: any) => (
- setCategory(event.target.value)} /> + + setCategory(event.target.value) + } + /> @@ -1280,7 +1806,11 @@ const Navbar = () => {
- + {t("next")}{" "} diff --git a/components/partials/auth/login-form.tsx b/components/partials/auth/login-form.tsx index 8c408352..77f1ea02 100644 --- a/components/partials/auth/login-form.tsx +++ b/components/partials/auth/login-form.tsx @@ -1,5 +1,5 @@ "use client"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; @@ -9,7 +9,7 @@ import { Icon } from "@/components/ui/icon"; import { useForm, SubmitHandler } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; -import { cn, setCookiesEncrypt } from "@/lib/utils"; +import { cn, getCookiesDecrypt, setCookiesEncrypt } from "@/lib/utils"; import { Eye, EyeOff, Loader2 } from "lucide-react"; import { getProfile, @@ -32,6 +32,13 @@ import { } from "@/components/ui/input-otp"; import { error, loading } from "@/config/swal"; import { data } from "jquery"; +import { + Dialog, + DialogContent, + DialogFooter, + DialogTrigger, +} from "@/components/ui/dialog"; +import { getUserNotifications, listRole } from "@/service/landing/landing"; // Schema validasi menggunakan zod const schema = z.object({ @@ -58,11 +65,16 @@ const LoginForm = () => { const [userIdentity] = useState(); const [email, setEmail] = useState(); const [category, setCategory] = useState("5"); + const roleId = getCookiesDecrypt("urie"); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [oldEmail, setOldEmail] = useState(""); const [oldEmailValidate, setOldEmailValidate] = useState(""); + const [role, setRole] = useState(); + const [menuActive, setMenuActive] = useState(); + const [notifications, setNotifications] = useState([]); + const [notificationsUpdate, setNotificationsUpdate] = useState([]); const [newEmail, setNewEmail] = useState(""); const [newEmailValidate, setNewEmailValidate] = useState(""); const [otpValidate, setOtpValidate] = useState(""); @@ -341,6 +353,36 @@ const LoginForm = () => { } }; + let menu = ""; + + useEffect(() => { + async function initState() { + setMenuActive(menu); + const res = await listRole(); + setRole(res?.data?.data); + } + + async function getNotif() { + if (roleId != undefined) { + const response = await getUserNotifications(0, 2); + setNotifications(response?.data?.data?.content); + console.log("respon:", response); + } + } + + async function getNotifUpdate() { + if (roleId != undefined) { + const response = await getUserNotifications(0, 3); + setNotificationsUpdate(response?.data?.data?.content); + console.log("Notiffff:", response); + } + } + + initState(); + getNotif(); + getNotifUpdate(); + }, []); + return (
{step === 1 ? ( @@ -350,7 +392,50 @@ const LoginForm = () => { {t("logInPlease")}
- {t("acc")} {t("reg")} + {t("acc")} + + + + {t("register")} + + + +
+

+ {t("categoryReg")} +

+

{t("selectOne")}

+
+
+ {role?.map((row: any) => ( +
+ setCategory(event.target.value)} + /> + +
+ ))} +
+
+ + + {t("next")}{" "} + + + +
diff --git a/messages/en.json b/messages/en.json index 6dc3172f..39fc87cc 100644 --- a/messages/en.json +++ b/messages/en.json @@ -762,6 +762,11 @@ "sent": "Sent", "accepted": "Accepted", "assignment-status-details": "Assignment Status Details", - "unique-code": "Unique Code" + "unique-code": "Unique Code", + "form-media": "Form Add Media", + "data-media": "please complete the data! ", + "title-media-online": "Online Media Name", + "url": "Url", + "coverage-area": "Coverage Area" } } diff --git a/messages/in.json b/messages/in.json index 84cfba0e..b751ae08 100644 --- a/messages/in.json +++ b/messages/in.json @@ -762,6 +762,11 @@ "sent": "Terkirim", "accepted": "Diterima", "assignment-status-details": "Detail Status Penugasan", - "unique-code": "Kode Unik" + "unique-code": "Kode Unik", + "form-media": "Form Tambah Media", + "data-media": "Silahkan Lengkapi Data!", + "title-media-online": "Nama Media Online", + "url": "Url", + "coverage-area": "Cakupan Wilayah" } }