mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: adjust mobile version

This commit is contained in:
sabdayagra 2025-01-24 22:56:24 +07:00
parent e40c977529
commit c858a460c0
12 changed files with 941 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app/[locale]/(public)/audio/filter/page.tsx
View File

@ -1,6 +1,5 @@
"use client"; "use client";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear, secondToTimes } from "@/utils/globals"; import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear, secondToTimes } from "@/utils/globals";
@ -8,14 +7,13 @@ import { useParams, usePathname, useSearchParams } from "next/navigation";
import { getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/service/landing/landing"; import { getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/service/landing/landing";
import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table"; import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
import LandingPagination from "@/components/landing-page/pagination"; import LandingPagination from "@/components/landing-page/pagination";
import { Reveal } from "@/components/landing-page/Reveal";
import { Link, useRouter } from "@/i18n/routing"; import { Link, useRouter } from "@/i18n/routing";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker"; import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"; import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { Skeleton } from "@/components/ui/skeleton";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -70,9 +68,18 @@ const FilterPage = () => {
const [categories, setCategories] = useState([]); const [categories, setCategories] = useState([]);
const [userLevels, setUserLevels] = useState([]); const [userLevels, setUserLevels] = useState([]);
const t = useTranslations("FilterPage"); const t = useTranslations("FilterPage");
const [isLoading, setIsLoading] = useState<any>(true);
// const [startDate, endDate] = dateRange; // const [startDate, endDate] = dateRange;
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 3000);
return () => clearTimeout(timer);
}, []);
React.useEffect(() => { React.useEffect(() => {
const pageFromUrl = searchParams?.get("page"); const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) { if (pageFromUrl) {
@ -466,8 +473,8 @@ const FilterPage = () => {
</div> </div>
</div> </div>
{/* Konten Kanan */} {/* Right */}
<div className="w-[75%]"> <div className="w-full lg:w-[75%]">
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">{t("sortBy")} </h2> <h2 className="text-lg font-semibold">{t("sortBy")} </h2>
<select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"> <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
@ -476,14 +483,27 @@ const FilterPage = () => {
</select> </select>
</div> </div>
{isLoading ? (
<>
<div className="flex flex-col space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[100px] w-full rounded-xl" />
<Skeleton className="h-[100px] w-full rounded-xl" />
<Skeleton className="h-[100px] w-full rounded-xl" />
<Skeleton className="h-[100px] w-full rounded-xl" />
<Skeleton className="h-[100px] w-full rounded-xl" />
<Skeleton className="h-[100px] w-full rounded-xl" />
</div>
</>
) : (
<>
{audioData?.length > 0 ? ( {audioData?.length > 0 ? (
<div className=""> <div className="flex flex-col gap-3">
{audioData?.map((audio: any) => ( {audioData?.map((audio: any) => (
<div key={audio?.id}> <div key={audio?.id}>
<Link href={`/audio/detail/${audio?.slug}`} className="flex flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"> <Link href={`/audio/detail/${audio?.slug}`} className="flex flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
<div className="flex justify-between w-full gap-6"> <div className="flex justify-center lg:justify-between w-full gap-2 lg:gap-6">
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16"> <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-full lg:h-16">
<svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg"> <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
<path <path
d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z" d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
@ -492,23 +512,30 @@ const FilterPage = () => {
</svg> </svg>
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-col lg:flex-row lg:gap-2">
<div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm items-center"> <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm items-center">
{formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"}
</div>
<div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm items-center">
|&nbsp;
<Icon icon="formkit:eye" width="15" height="15" />
&nbsp;{audio?.clickCount}{" "} &nbsp;{audio?.clickCount}{" "}
</div> </div>
</div>
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{audio?.title}</div> <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{audio?.title}</div>
</div> </div>
</div> </div>
<div className="flex flex-row items-center place-content-end gap-3"> <div className="flex flex-col lg:flex-row items-center place-content-end gap-3">
<img src="/assets/wave.svg" alt="wave" className="h-16" /> <img src="/assets/wave.svg" alt="wave" className="h-5 lg:h-16" />
<svg width="17" height="20" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg"> <svg width="17" height="20" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
<path <path
d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z" d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
fill="black" fill="black"
/> />
</svg> </svg>
<p className="text-sm text-center"> {audio?.duration ? secondToTimes(Number(audio?.duration)) : "00:00:00"}</p> <p className="text-xs lg:text-sm text-center"> {audio?.duration ? secondToTimes(Number(audio?.duration)) : "00:00:00"}</p>
<Icon icon="ph:download-fill" className="text-red-500" fontSize={20} /> <Icon icon="ph:download-fill" className="text-red-500" fontSize={20} />
</div> </div>
</div> </div>
@ -521,6 +548,8 @@ const FilterPage = () => {
<img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" /> <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
</p> </p>
)} )}
</>
)}
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} /> <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
</div> </div>

31
app/[locale]/(public)/document/filter/page.tsx
View File

@ -15,6 +15,7 @@ import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"; import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { Skeleton } from "@/components/ui/skeleton";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -68,9 +69,18 @@ const FilterPage = () => {
const [handleClose, setHandleClose] = useState(false); const [handleClose, setHandleClose] = useState(false);
const [categories, setCategories] = useState([]); const [categories, setCategories] = useState([]);
const [userLevels, setUserLevels] = useState([]); const [userLevels, setUserLevels] = useState([]);
const [isLoading, setIsLoading] = useState<any>(true);
// const [startDate, endDate] = dateRange; // const [startDate, endDate] = dateRange;
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 3000);
return () => clearTimeout(timer);
}, []);
React.useEffect(() => { React.useEffect(() => {
const pageFromUrl = searchParams?.get("page"); const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) { if (pageFromUrl) {
@ -497,7 +507,7 @@ const FilterPage = () => {
</div> </div>
</div> </div>
{/* Konten Kanan */} {/* Right */}
<Reveal> <Reveal>
<div className="flex-1"> <div className="flex-1">
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
@ -508,6 +518,23 @@ const FilterPage = () => {
</select> </select>
</div> </div>
{isLoading ? (
<div className="flex flex-col gap-4">
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[100px] w-[500px] rounded-xl" />
<Skeleton className="h-[100px] w-[500px] rounded-xl" />
</div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[100px] w-[500px] rounded-xl" />
<Skeleton className="h-[100px] w-[500px] rounded-xl" />
</div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[100px] w-[500px] rounded-xl" />
<Skeleton className="h-[100px] w-[500px] rounded-xl" />
</div>
</div>
) : (
<>
{documentData?.length > 0 ? ( {documentData?.length > 0 ? (
<div className=" grid grid-cols-1 md:grid-cols-2 gap-6"> <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
{documentData?.map((document: any) => ( {documentData?.map((document: any) => (
@ -540,6 +567,8 @@ const FilterPage = () => {
<img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" /> <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
</p> </p>
)} )}
</>
)}
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} /> <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
</div> </div>

45
app/[locale]/(public)/image/detail/[slug]/page.tsx
View File

@ -18,6 +18,7 @@ import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import parse from "html-react-parser"; import parse from "html-react-parser";
import { Skeleton } from "@/components/ui/skeleton";
const DetailInfo = () => { const DetailInfo = () => {
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
@ -48,9 +49,18 @@ const DetailInfo = () => {
const userRoleId = getCookiesDecrypt("urie"); const userRoleId = getCookiesDecrypt("urie");
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const [listSuggestion, setListSuggestion] = useState<any>(); const [listSuggestion, setListSuggestion] = useState<any>();
const [isLoading, setIsLoading] = useState<any>(true);
let typeString = "image"; let typeString = "image";
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 3000);
return () => clearTimeout(timer);
}, []);
useEffect(() => { useEffect(() => {
initFetch(); initFetch();
checkWishlist(); checkWishlist();
@ -425,12 +435,25 @@ const DetailInfo = () => {
{/* Bagian Kiri */} {/* Bagian Kiri */}
<div className="md:w-3/4"> <div className="md:w-3/4">
{/* Gambar Besar */} {/* Gambar Besar */}
{isLoading ? (
<div className="relative">
<Skeleton className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px]" />
</div>
) : (
<div className="relative"> <div className="relative">
<img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" /> <img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
<div className="absolute top-4 left-4"></div> <div className="absolute top-4 left-4"></div>
</div> </div>
)}
{/* Gambar bawah Kecil */} {/* Gambar bawah Kecil */}
{isLoading ? (
<div className="py-4 flex flex-row gap-3">
<Skeleton className="rounded-lg w-[120px] h-[90px]" />
<Skeleton className="rounded-lg w-[120px] h-[90px]" />
<Skeleton className="rounded-lg w-[120px] h-[90px]" />
</div>
) : (
<div className="py-4 flex flex-row gap-3"> <div className="py-4 flex flex-row gap-3">
{detailDataImage?.files?.map((file: any, index: number) => ( {detailDataImage?.files?.map((file: any, index: number) => (
<a onClick={() => setSelectedImage(index)} key={file?.id}> <a onClick={() => setSelectedImage(index)} key={file?.id}>
@ -438,21 +461,29 @@ const DetailInfo = () => {
</a> </a>
))} ))}
</div> </div>
)}
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4"> <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
<div className="flex flex-row items-center mt-3 justify-between"> <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp; <p className="text-xs lg:text-sm">
oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
</p>
<p className="text-xs lg:text-sm">&nbsp;|&nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;</p>
<p className="text-xs lg:text-sm flex justify-center items-center">
<Icon icon="formkit:eye" width="15" height="15" /> <Icon icon="formkit:eye" width="15" height="15" />
&nbsp; {detailDataImage?.clickCount} &nbsp; &nbsp; {detailDataImage?.clickCount} &nbsp;
<p className="flex text-end">Kreator: {detailDataImage?.creatorName}</p> </p>
</div>
<div className="mt-3">
<p className="flex text-end text-xs lg:text-sm font-semibold">Kreator: {detailDataImage?.creatorName}</p>
</div> </div>
</div> </div>
{/* Keterangan */} {/* Keterangan */}
<div className="w-full"> <div className="w-full">
<h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1> <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1>
<div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} /> <div className="font-light text-justify mb-5 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
</div> </div>
</div> </div>
@ -522,7 +553,7 @@ const DetailInfo = () => {
</button> </button>
{/* Tombol Bagikan */} {/* Tombol Bagikan */}
<div className="flex flex-row py-3"> <div className="flex flex-row mt-5 justify-center">
<p className="text-base font-semibold">Bagikan</p> <p className="text-base font-semibold">Bagikan</p>
<a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}> <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
<Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" /> <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
@ -562,7 +593,7 @@ const DetailInfo = () => {
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]"> <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-14"> <div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">Berikan Komentar</p> <p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex w-full py-8" onChange={getInputValue} /> <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
<button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"> <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
Kirim Kirim
</button> </button>

35
app/[locale]/(public)/image/filter/page.tsx
View File

@ -16,6 +16,7 @@ import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry"; import ImageBlurry from "@/components/ui/image-blurry";
import { Skeleton } from "@/components/ui/skeleton";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -31,6 +32,7 @@ const FilterPage = () => {
const params = useParams(); const params = useParams();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const locale = params?.locale; const locale = params?.locale;
const [isLoading, setIsLoading] = useState<any>(true);
const [imageData, setImageData] = useState<any>(); const [imageData, setImageData] = useState<any>();
const [totalData, setTotalData] = React.useState<number>(1); const [totalData, setTotalData] = React.useState<number>(1);
const [totalPage, setTotalPage] = React.useState<number>(1); const [totalPage, setTotalPage] = React.useState<number>(1);
@ -73,6 +75,14 @@ const FilterPage = () => {
// const [startDate, endDate] = dateRange; // const [startDate, endDate] = dateRange;
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 3000);
return () => clearTimeout(timer);
}, []);
React.useEffect(() => { React.useEffect(() => {
const pageFromUrl = searchParams?.get("page"); const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) { if (pageFromUrl) {
@ -472,7 +482,7 @@ const FilterPage = () => {
</div> </div>
</div> </div>
{/* Konten Kanan */} {/* Right */}
<div className="w-full"> <div className="w-full">
<Reveal> <Reveal>
<div className="w-full"> <div className="w-full">
@ -484,6 +494,26 @@ const FilterPage = () => {
</select> </select>
</div> </div>
{isLoading ? (
<div className="flex flex-col gap-4">
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
</div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
</div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
</div>
</div>
) : (
<>
{imageData?.length > 0 ? ( {imageData?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{imageData?.map((image: any) => ( {imageData?.map((image: any) => (
@ -515,7 +545,8 @@ const FilterPage = () => {
<img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" /> <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
</p> </p>
)} )}
</>
)}
{totalData > 1 && <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />} {totalData > 1 && <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />}
</div> </div>
</Reveal> </Reveal>

93
app/[locale]/(public)/indeks/detail/[slug]/page.tsx
View File

@ -9,6 +9,7 @@ import { formatDateToIndonesian } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
import { getCookiesDecrypt } from "@/lib/utils"; import { getCookiesDecrypt } from "@/lib/utils";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { Input } from "@/components/ui/input";
const IndeksDetail = () => { const IndeksDetail = () => {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
@ -18,9 +19,10 @@ const IndeksDetail = () => {
const slug = params?.slug; const slug = params?.slug;
const [indexData, setIndexData] = useState<any>(); const [indexData, setIndexData] = useState<any>();
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const [messageChild, setMessageChild] = useState("");
const userId = getCookiesDecrypt("uie"); const userId = getCookiesDecrypt("uie");
const userRoleId = getCookiesDecrypt("urie"); const userRoleId = getCookiesDecrypt("urie");
const router = useRouter(); const router: any = useRouter();
const [listComments, setListComments] = useState([]); const [listComments, setListComments] = useState([]);
useEffect(() => { useEffect(() => {
@ -36,11 +38,11 @@ const IndeksDetail = () => {
const response = await publicDetailBlog(slug); const response = await publicDetailBlog(slug);
console.log(response); console.log(response);
setIndeksData(response?.data?.data); setIndeksData(response?.data?.data);
getDataComment(response?.data?.data?.id);
}; };
async function getDataComment(blogId: any) { async function getDataComment(id?: any) {
const findId = blogId == undefined ? slug : blogId; const response = await getBlogComments(id || indeksData?.id);
const response = await getBlogComments(findId);
console.log(response.data?.data); console.log(response.data?.data);
setListComments(response.data?.data); setListComments(response.data?.data);
} }
@ -54,8 +56,8 @@ const IndeksDetail = () => {
if (message?.length > 3) { if (message?.length > 3) {
loading(); loading();
const data = { const data = {
blogId: slug, blogId: indeksData?.id,
message, message: message,
parentId: null, parentId: null,
}; };
@ -63,19 +65,39 @@ const IndeksDetail = () => {
console.log(response); console.log(response);
setMessage(""); setMessage("");
getDataComment(slug); getDataComment();
close(); close();
} }
} }
// async function sendCommentChild(parentId: any) {
// if (messageChild.length > 3) {
// loading();
// const data = {
// blogId: indeksData?.id,
// message: messageChild,
// parentId,
// };
// console.log(data);
// const response = await postBlogComments(data);
// console.log(response);
// const responseGet = await getPublicSuggestionList(slug);
// console.log(responseGet.data?.data);
// setMessageChild("");
// // $(":input").val("");
// close();
// }
// }
async function sendCommentChild(parentId: any) { async function sendCommentChild(parentId: any) {
const inputMsg = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement; const inputMsg = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
if (inputMsg && inputMsg.value.length > 3) { if (inputMsg && inputMsg.value.length > 3) {
loading(); loading();
const data = { const data = {
blogId: slug, blogId: indeksData?.id,
message: inputMsg, message: inputMsg.value,
parentId, parentId,
}; };
@ -84,8 +106,8 @@ const IndeksDetail = () => {
console.log(response); console.log(response);
const responseGet = await getPublicSuggestionList(slug); const responseGet = await getPublicSuggestionList(slug);
console.log(responseGet.data?.data); console.log(responseGet.data?.data);
getDataComment(slug); getDataComment();
$(":input").val(""); inputMsg.value = "";
close(); close();
} }
} }
@ -94,7 +116,7 @@ const IndeksDetail = () => {
loading(); loading();
const response = await deleteBlogComments(dataId); const response = await deleteBlogComments(dataId);
console.log(response); console.log(response);
getDataComment(dataId); getDataComment();
close(); close();
} }
@ -102,6 +124,7 @@ const IndeksDetail = () => {
const message = e.target.value; const message = e.target.value;
console.log(message); console.log(message);
setMessage(message); setMessage(message);
getDataComment();
}; };
const postData = () => { const postData = () => {
@ -110,13 +133,14 @@ const IndeksDetail = () => {
} else { } else {
sendCommentParent(); sendCommentParent();
} }
getDataComment();
}; };
const postDataChild = (id: any) => { const postDataChild = (id: any) => {
if (Number(userRoleId) < 1) { if (Number(userRoleId) < 1) {
router.push("/auth"); router.push("/auth");
} else { } else {
sendCommentChild(slug); sendCommentChild(id);
} }
}; };
@ -155,7 +179,7 @@ const IndeksDetail = () => {
<div className="flex flex-col py-5 p-10 bg-[#f7f7f7]"> <div className="flex flex-col py-5 p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-16"> <div className="gap-5 flex flex-col px-4 lg:px-16">
<p className="flex items-start text-lg">Berikan Komentar</p> <p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex w-full" onChange={getInputValue} /> <Textarea placeholder="Type your comments here." className="flex w-full" onChange={getInputValue} value={message} />
<button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1" onClick={() => postData()}> <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1" onClick={() => postData()}>
Kirim Kirim
</button> </button>
@ -169,13 +193,13 @@ const IndeksDetail = () => {
<div className="flex flex-row mt-2 px-4 lg:px-14"> <div className="flex flex-row mt-2 px-4 lg:px-14">
<img className="h-10 w-10" src="/assets/img/user-avatar-yellow.svg" alt="#" /> <img className="h-10 w-10" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="flex justify-between text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<b>{Number(data.commentFrom?.roleId) == 2 || Number(data.commentFrom?.roleId) == 3 || Number(data.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : data.commentFrom?.fullname}</b> <b>{Number(data.commentFrom?.roleId) == 2 || Number(data.commentFrom?.roleId) == 3 || Number(data.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : data.commentFrom?.fullname}</b>
{`${new Date(data.createdAt).getDate()}/${new Date(data.createdAt).getMonth() + 1}/${new Date(data.createdAt).getFullYear()} ${new Date(data.createdAt).getHours()}:${new Date(data.createdAt).getMinutes()}`} {`${new Date(data.createdAt).getDate()}/${new Date(data.createdAt).getMonth() + 1}/${new Date(data.createdAt).getFullYear()} ${new Date(data.createdAt).getHours()}:${new Date(data.createdAt).getMinutes()}`}
</p> </p>
<p className="text-slate-500 text-sm mb-4">{data.message}</p> <p className="text-slate-500 text-sm mb-4">{data.message}</p>
<div> <div className="gap-3">
<a href="javascript:void(0)" className="btn btn-link btn-suggestion-reply" onClick={() => showInput(`comment-id-${data.id}`)}> <a href="javascript:void(0)" className="text-sm mr-2 bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput(`comment-id-${data.id}`)}>
Balas Balas
</a> </a>
<a <a
@ -187,7 +211,7 @@ const IndeksDetail = () => {
display: "none", display: "none",
} }
} }
className="btn btn-link btn-suggestion-delete" className="text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
onClick={() => deleteData(data.id)} onClick={() => deleteData(data.id)}
> >
Hapus Hapus
@ -195,9 +219,9 @@ const IndeksDetail = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="px-4 lg:px-28 mt-2" id={`comment-id-${data.id}`}> <div className="flex flex-row px-4 lg:px-28 mt-2" id={`comment-id-${data.id}`}>
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" /> <Input type="text" id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<a href="javascript:void(0)" className="btn btn-warning btn-send-comment" onClick={() => postDataChild(data.id)}> <a href="javascript:void(0)" className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(data.id)}>
Send Send
</a> </a>
</div> </div>
@ -207,20 +231,20 @@ const IndeksDetail = () => {
<div className="flex flex-row mt-2 px-4 lg:px-32"> <div className="flex flex-row mt-2 px-4 lg:px-32">
<img className="h-10 w-10" src="/assets/img/user-avatar-yellow.svg" alt="#" /> <img className="h-10 w-10" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="flex justify-between text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<b>{Number(child1.commentFrom?.roleId) == 2 || Number(child1.commentFrom?.roleId) == 3 || Number(child1.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.commentFrom?.fullname}</b> <b>{Number(child1.commentFrom?.roleId) == 2 || Number(child1.commentFrom?.roleId) == 3 || Number(child1.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.commentFrom?.fullname}</b>
{`${new Date(child1.createdAt).getDate()}/${new Date(child1.createdAt).getMonth() + 1}/${new Date(child1.createdAt).getFullYear()} ${new Date(child1.createdAt).getHours()}:${new Date( {`${new Date(child1.createdAt).getDate()}/${new Date(child1.createdAt).getMonth() + 1}/${new Date(child1.createdAt).getFullYear()} ${new Date(child1.createdAt).getHours()}:${new Date(
child1.createdAt child1.createdAt
).getMinutes()}`} ).getMinutes()}`}
</p> </p>
<p className="text-slate-500 text-sm mb-4">{child1.message}</p> <p className="text-slate-500 text-sm mb-4">{child1.message}</p>
<div> <div className="gap-3">
<a href="javascript:void(0)" className="btn btn-link btn-suggestion-reply" onClick={() => showInput(`comment-id-${child1.id}`)}> <a href="javascript:void(0)" className="mr-2 text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput(`comment-id-${child1.id}`)}>
Balas Balas
</a> </a>
<a <a
href="javascript:void(0)" href="javascript:void(0)"
className="btn btn-link btn-suggestion-delete" className="text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
style={ style={
Number(child1.commentFrom?.id) == Number(userId) Number(child1.commentFrom?.id) == Number(userId)
? {} ? {}
@ -235,9 +259,9 @@ const IndeksDetail = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="px-4 lg:px-28 mt-2" id={`comment-id-${child1.id}`}> <div className="flex flex-row justify-center px-4 lg:px-44 mt-2" id={`comment-id-${child1.id}`}>
<Textarea id={`input-comment-${child1.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" /> <Input type="text" id={`input-comment-${child1.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<a href="javascript:void(0)" className="btn btn-warning btn-send-comment" onClick={() => postDataChild(child1.id)}> <a href="javascript:void(0)" className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(child1.id)}>
Send Send
</a> </a>
</div> </div>
@ -247,7 +271,7 @@ const IndeksDetail = () => {
<div className="flex flex-row mt-2 px-4 lg:px-48"> <div className="flex flex-row mt-2 px-4 lg:px-48">
<img className="h-10 w-10" src="/assets/img/user-avatar-yellow.svg" alt="#" /> <img className="h-10 w-10" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="flex justify-between text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<b>{Number(child2.commentFrom?.roleId) == 2 || Number(child2.commentFrom?.roleId) == 3 || Number(child2.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.commentFrom?.fullname}</b> <b>{Number(child2.commentFrom?.roleId) == 2 || Number(child2.commentFrom?.roleId) == 3 || Number(child2.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.commentFrom?.fullname}</b>
{`${new Date(child2.createdAt).getDate()}/${new Date(child2.createdAt).getMonth() + 1}/${new Date(child2.createdAt).getFullYear()} ${new Date(child2.createdAt).getHours()}:${new Date( {`${new Date(child2.createdAt).getDate()}/${new Date(child2.createdAt).getMonth() + 1}/${new Date(child2.createdAt).getFullYear()} ${new Date(child2.createdAt).getHours()}:${new Date(
child2.createdAt child2.createdAt
@ -255,9 +279,12 @@ const IndeksDetail = () => {
</p> </p>
<p className="text-slate-500 text-sm mb-4">{child2.message}</p> <p className="text-slate-500 text-sm mb-4">{child2.message}</p>
<div> <div>
<a href="javascript:void(0)" className="mr-2 text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput("comment-id-" + child2.id)}>
Balas
</a>
<a <a
href="javascript:void(0)" href="javascript:void(0)"
className="btn btn-link btn-suggestion-delete" className="text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
style={ style={
Number(child2.commentFrom?.id) == Number(userId) Number(child2.commentFrom?.id) == Number(userId)
? {} ? {}
@ -272,9 +299,9 @@ const IndeksDetail = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="px-4 lg:px-28 mt-2" id={`comment-id-${child2.id}`}> <div className="flex flex-row px-4 lg:px-56 mt-2" id={`comment-id-${child2.id}`}>
<Textarea id={`comment-id-${child2.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" /> <Input type="text" id={`comment-id-${child2.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<a href="javascript:void(0)" className="btn btn-warning btn-send-comment" onClick={() => postDataChild(child1.id)}> <a href="javascript:void(0)" className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(child1.id)}>
Send Send
</a> </a>
</div> </div>

59
app/[locale]/(public)/indeks/page.tsx
View File

@ -1,5 +1,6 @@
"use client"; "use client";
import { Skeleton } from "@/components/ui/skeleton";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { getIndeksData } from "@/service/landing/landing"; import { getIndeksData } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals"; import { formatDateToIndonesian } from "@/utils/globals";
@ -8,6 +9,7 @@ import React, { useEffect, useState } from "react";
const Indeks: React.FC = () => { const Indeks: React.FC = () => {
const pathname = usePathname(); const pathname = usePathname();
const [isLoading, setIsLoading] = useState<any>(true);
const [indeksData, setIndeksData] = useState<any>(); const [indeksData, setIndeksData] = useState<any>();
let count: number = 0; let count: number = 0;
useEffect(() => { useEffect(() => {
@ -20,6 +22,14 @@ const Indeks: React.FC = () => {
} }
}, [indeksData]); }, [indeksData]);
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 3000);
return () => clearTimeout(timer);
}, []);
useEffect(() => { useEffect(() => {
initFetch(); initFetch();
}, []); }, []);
@ -33,14 +43,19 @@ const Indeks: React.FC = () => {
<div className="px-4 lg:px-14"> <div className="px-4 lg:px-14">
{/* Hero Left */} {/* Hero Left */}
<div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-auto"> <div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-auto">
{isLoading ? (
<div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
<Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
</div>
) : (
<div className="lg:w-[60%] w-full lg:h-full"> <div className="lg:w-[60%] w-full lg:h-full">
{indeksData?.map( {indeksData?.map(
(indeks: any, index: number) => (indeks: any, index: number) =>
index == count && ( index == count && (
<div key={indeks?.id} className="relative h-[310px] lg:h-[435px]"> <div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
<img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg" /> <img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover" />
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg"> <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeks?.categoryName}</span> <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeks?.categoryName}</span>
<Link href={`/indeks/detail/${indeks?.slug}`}> <Link href={`/indeks/detail/${indeks?.slug}`}>
<h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2> <h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2>
</Link> </Link>
@ -59,16 +74,26 @@ const Indeks: React.FC = () => {
) )
)} )}
</div> </div>
)}
{/* Hero Right */} {/* Hero Right */}
<div className="lg:w-[40%] w-full space-y-2"> <div className="lg:w-[40%] w-full space-y-2">
{isLoading ? (
<>
<div className="flex flex-col space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[200px] w-[400px] rounded-xl" />
<Skeleton className="h-[200px] w-[400px] rounded-xl" />
</div>
</>
) : (
<>
{indeksData?.map( {indeksData?.map(
(indeksRight: any, index: number) => (indeksRight: any, index: number) =>
(index == count + 1 || index == count + 2) && ( (index == count + 1 || index == count + 2) && (
<div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]"> <div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
<img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " /> <img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg"> <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeksRight?.categoryName}</span> <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeksRight?.categoryName}</span>
<Link href={`/indeks/detail/${indeksRight?.slug}`}> <Link href={`/indeks/detail/${indeksRight?.slug}`}>
<h2 className="text-xl font-bold mt-2">{indeksRight?.title}</h2> <h2 className="text-xl font-bold mt-2">{indeksRight?.title}</h2>
</Link> </Link>
@ -86,11 +111,38 @@ const Indeks: React.FC = () => {
</div> </div>
) )
)} )}
</>
)}
</div> </div>
</div> </div>
{/* Bottom */} {/* Bottom */}
<div className="px-4 lg:px-7 py-4"> <div className="px-4 lg:px-7 py-4">
{isLoading ? (
<div className="flex flex-col space-y-3 w-full gap-10">
<div className="flex flex-row gap-5">
<Skeleton className="h-[300px] w-[500px] rounded-lg" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="flex flex-row gap-5">
<Skeleton className="h-[300px] w-[500px] rounded-lg" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="flex flex-row gap-5">
<Skeleton className="h-[300px] w-[500px] rounded-lg" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
</div>
) : (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{indeksData?.map( {indeksData?.map(
(indeksBottom: any, index: number) => (indeksBottom: any, index: number) =>
@ -108,6 +160,7 @@ const Indeks: React.FC = () => {
) )
)} )}
</div> </div>
)}
</div> </div>
</div> </div>
); );

12
app/[locale]/(public)/schedule/page.tsx
View File

@ -522,7 +522,7 @@ const Schedule = (props: any) => {
</button> </button>
</div> </div>
<div className="border w-full border-t border-slate-500"></div> <div className="border w-full border-t border-slate-500"></div>
<div className="overflow-y-auto flex flex-col gap-2 h-[200px]"> <div className="overflow-y-auto flex flex-col gap-2 h-[200px] ">
<p className="text-center font-semibold">Region Filter</p> <p className="text-center font-semibold">Region Filter</p>
{city?.map((list) => ( {city?.map((list) => (
<div className="mt-2 gap-2 flex flex-row"> <div className="mt-2 gap-2 flex flex-row">
@ -535,9 +535,9 @@ const Schedule = (props: any) => {
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<div className="flex flex-row gap-3"> <div className="flex flex-col lg:flex-row gap-3">
{regionName?.map((list: any) => ( {regionName?.map((list: any) => (
<div className="text-left "> <div className="text-left">
<button onClick={() => deleteFilterhandler(list.id)} key={list.key} id={list.id} className="text-black bg-yellow-300 w-fit p-3 flex justify-center items-center rounded-lg"> <button onClick={() => deleteFilterhandler(list.id)} key={list.key} id={list.id} className="text-black bg-yellow-300 w-fit p-3 flex justify-center items-center rounded-lg">
{list.name}&nbsp; {list.name}&nbsp;
<Icon icon="icon-park-outline:delete-two" className="items-center" /> <Icon icon="icon-park-outline:delete-two" className="items-center" />
@ -547,10 +547,10 @@ const Schedule = (props: any) => {
</div> </div>
</div> </div>
<div className="flex flex-col lg:flex-row gap-6"> <div className="flex flex-col lg:flex-row gap-6">
<div className="h-[500px] overflow-y-auto w-3/4 "> <div className="h-[500px] overflow-y-auto md:overflow-y-auto w-full lg:w-3/4 ">
<div className="container-fluid relative"> <div className="container-fluid relative">
<div className="grid grid-cols-1 mt-8"> <div className="grid grid-cols-1 mt-8">
<div className="relative block bg-white dark:bg-slate-900"> <div className="relative block bg-white w-max dark:bg-slate-900">
<table className="w-full text-sm text-start"> <table className="w-full text-sm text-start">
<thead className="text-md"> <thead className="text-md">
<tr className="h-full"> <tr className="h-full">
@ -638,7 +638,7 @@ const Schedule = (props: any) => {
</div> </div>
{/* komponen Kanan */} {/* komponen Kanan */}
<div className="w-1/4 flex flex-col gap-6"> <div className="w-full lg:w-1/4 flex flex-col gap-6">
<div className="relative text-gray-600 dark:text-white"> <div className="relative text-gray-600 dark:text-white">
<input <input
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}

75
app/[locale]/(public)/video/detail/[slug]/page.tsx
View File

@ -422,8 +422,8 @@ const DetailVideo = () => {
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4"> <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
<p className="flex flex-row items-center mt-3"> {/* <p className="flex flex-row items-center mt-3">
oleh&nbsp; oleh&nbsp;
<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span> <span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
&nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp; &nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp;
@ -431,14 +431,27 @@ const DetailVideo = () => {
&nbsp; &nbsp;
{detailDataVideo?.clickCount} {detailDataVideo?.clickCount}
</p> </p>
<p className="mt-3">Kreator: {detailDataVideo?.creatorName}</p> <p className="mt-3">Kreator: {detailDataVideo?.creatorName}</p> */}
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
<p className="text-xs lg:text-sm">
oleh&nbsp;<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
</p>
<p className="text-xs lg:text-sm">&nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB &nbsp;|&nbsp;</p>
<p className="text-xs lg:text-sm flex justify-center items-center">
<Icon icon="formkit:eye" width="15" height="15" />
&nbsp; {detailDataVideo?.clickCount} &nbsp;
</p>
</div>
<div className="mt-3">
<p className="flex text-end text-xs lg:text-sm font-semibold">Kreator: {detailDataVideo?.creatorName}</p>
</div>
</div> </div>
{/* Keterangan */} {/* Keterangan */}
<div className="w-full"> <div className="w-full">
<h1 className="flex flex-row font-bold text-2xl my-8">{detailDataVideo?.title}</h1> <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataVideo?.title}</h1>
<div <div
className="font-light text-justify" className="font-light text-justify mb-5 lg:mb-0"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: detailDataVideo?.htmlDescription, __html: detailDataVideo?.htmlDescription,
}} }}
@ -513,7 +526,7 @@ const DetailVideo = () => {
</button> </button>
{/* Tombol Bagikan */} {/* Tombol Bagikan */}
<div className="flex flex-row py-3"> <div className="flex flex-row justify-center py-3">
<p className="text-base font-semibold">Bagikan</p> <p className="text-base font-semibold">Bagikan</p>
<a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}> <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
<Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" /> <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
@ -549,10 +562,10 @@ const DetailVideo = () => {
</div> </div>
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]"> <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-14"> <div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">Berikan Komentar</p> <p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex w-full py-8" onChange={getInputValue} /> <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
<button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"> <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
Kirim Kirim
</button> </button>
@ -560,17 +573,17 @@ const DetailVideo = () => {
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div> <div className="border-b-2 border-slate-300 mt-4 w-auto"></div>
<div className="overflow-y-auto"> <div>
{listSuggestion?.map((data: any) => ( {listSuggestion?.map((data: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14"> <div className="flex flex-row mt-2 px-4 lg:px-14">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" /> <img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname} {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
{getPublicLocaleTimestamp(new Date(data.createdAt))} {getPublicLocaleTimestamp(new Date(data.createdAt))}
</p> </p>
<p className="text-slate-500 text-sm mb-4">{data?.message}</p> <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
<div> <div>
<a <a
style={ style={
@ -583,11 +596,11 @@ const DetailVideo = () => {
onClick={() => showInput(`comment-id-${data.id}`)} onClick={() => showInput(`comment-id-${data.id}`)}
className="mr-2" className="mr-2"
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a> </a>
{Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? ( {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
<a onClick={() => deleteData(data.id)}> <a onClick={() => deleteData(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a> </a>
) : ( ) : (
"" ""
@ -595,29 +608,29 @@ const DetailVideo = () => {
</div> </div>
</div> </div>
</div> </div>
<div id={`comment-id-${data.id}`} className="px-4 lg:px-28 mt-2"> <div id={`comment-id-${data.id}`} className="px-4 pl-14 lg:px-14 lg:pl-32 mt-2 ">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" /> <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}> <a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 mt-2 cursor-pointer">Kirim</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small>
</a> </a>
<a onClick={() => showInput(`comment-id-${data.id}`)}> <a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-4 py-1 cursor-pointer">Batal</small> <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a> </a>
</div> </div>
</div> </div>
{data.children.length > 0 {data.children.length > 0
? data.children?.map((child1: any) => ( ? data.children?.map((child1: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-32"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-16 w-16 mr-2" /> <img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "} {" "}
<b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "} <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child1.createdAt))} {getPublicLocaleTimestamp(new Date(child1.createdAt))}
</p> </p>
<p className="text-slate-500 text-sm mb-4">{parse(String(child1?.message))}</p> <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
<div> <div>
<a <a
style={ style={
@ -629,7 +642,7 @@ const DetailVideo = () => {
} }
onClick={() => showInput(`comment-id-${child1.id}`)} onClick={() => showInput(`comment-id-${child1.id}`)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a> </a>
<a <a
style={ style={
@ -641,19 +654,19 @@ const DetailVideo = () => {
} }
onClick={() => deleteData(child1.id)} onClick={() => deleteData(child1.id)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-40"> <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-32">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" /> <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<div className="flex flex-row mt-2 gap-3"> <div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}> <a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a> </a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}> <a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a> </a>
</div> </div>
</div> </div>
@ -680,7 +693,7 @@ const DetailVideo = () => {
} }
onClick={() => showInput(`comment-id-${child2.id}`)} onClick={() => showInput(`comment-id-${child2.id}`)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a> </a>
<a <a
style={ style={
@ -692,7 +705,7 @@ const DetailVideo = () => {
} }
onClick={() => deleteData(child2.id)} onClick={() => deleteData(child2.id)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a> </a>
</div> </div>
</div> </div>
@ -702,10 +715,10 @@ const DetailVideo = () => {
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" /> <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}> <a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a> </a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}> <a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a> </a>
</div> </div>
</div> </div>

34
app/[locale]/(public)/video/filter/page.tsx
View File

@ -16,6 +16,7 @@ import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry"; import ImageBlurry from "@/components/ui/image-blurry";
import { Skeleton } from "@/components/ui/skeleton";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -67,9 +68,18 @@ const FilterPage = () => {
const [categories, setCategories] = useState([]); const [categories, setCategories] = useState([]);
const [userLevels, setUserLevels] = useState([]); const [userLevels, setUserLevels] = useState([]);
const t = useTranslations("FilterPage"); const t = useTranslations("FilterPage");
const [isLoading, setIsLoading] = useState<any>(true);
// const [startDate, endDate] = dateRange; // const [startDate, endDate] = dateRange;
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 3000);
return () => clearTimeout(timer);
}, []);
React.useEffect(() => { React.useEffect(() => {
const pageFromUrl = searchParams?.get("page"); const pageFromUrl = searchParams?.get("page");
if (pageFromUrl) { if (pageFromUrl) {
@ -498,7 +508,7 @@ const FilterPage = () => {
</div> </div>
</div> </div>
{/* Konten Kanan */} {/* Right */}
<Reveal> <Reveal>
<div className="flex-1"> <div className="flex-1">
<div className="flex flex-col items-end mb-4"> <div className="flex flex-col items-end mb-4">
@ -509,6 +519,26 @@ const FilterPage = () => {
</select> </select>
</div> </div>
{isLoading ? (
<div className="flex flex-col gap-4">
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
</div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
</div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
</div>
</div>
) : (
<>
{videoData?.length > 0 ? ( {videoData?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{videoData?.map((video: any) => ( {videoData?.map((video: any) => (
@ -540,6 +570,8 @@ const FilterPage = () => {
<img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" /> <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
</p> </p>
)} )}
</>
)}
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} /> <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
</div> </div>

2
components/landing-page/hero.tsx
View File

@ -69,7 +69,7 @@ const Hero: React.FC = () => {
<div className="relative h-[310px] lg:h-[420px]"> <div className="relative h-[310px] lg:h-[420px]">
<img src={list?.thumbnailLink} alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" /> <img src={list?.thumbnailLink} alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" />
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg"> <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{list?.categoryName}</span> <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span>
<Link href={`${locale}/image/detail/${list?.slug}`}> <Link href={`${locale}/image/detail/${list?.slug}`}>
<h2 className="text-lg font-bold mt-2">{list?.title}</h2> <h2 className="text-lg font-bold mt-2">{list?.title}</h2>
</Link> </Link>

423
components/landing-page/navbar.tsx
View File

@ -712,7 +712,7 @@ const Navbar = () => {
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger> <NavigationMenuTrigger>
<a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer"> <a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer">
<svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z" d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
fill="currentColor" fill="currentColor"
@ -721,35 +721,46 @@ const Navbar = () => {
{t("content")} {t("content")}
</a> </a>
</NavigationMenuTrigger> </NavigationMenuTrigger>
<NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full"> <NavigationMenuContent className="flex flex-col place-content-start rounded-md overflow-hidden ">
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 hover:bg-white"> <NavigationMenuLink onClick={() => router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1.5 p-2 w-36">
<p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer"> <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row items-center py-2 cursor-pointer">
<FiYoutube className="mr-2" />
{t("video")}
</p>
</NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
<p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
<FiMusic className="mr-2" />
{t("audio")}
</p>
</NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
<p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
<FiImage className="mr-2" /> <FiImage className="mr-2" />
{t("image")} {t("image")}
</p> </p>
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white"> <NavigationMenuLink onClick={() => router.push(prefixPath + "/video/filter")} className="flex items-start gap-1.5 p-2 ">
<p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer"> {pathname?.split("/")[1] == "in" ? (
<>
<p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
<FiYoutube className="mr-2" />
{t("video")}
</p>
</>
) : (
<>
<p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
<FiYoutube className="mr-2" />
{t("video")}
</p>
</>
)}
</NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(prefixPath + "/document/filter")} className="flex place-items-start gap-1.5 p-2">
<p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
<FiFile className="mr-2" /> <FiFile className="mr-2" />
{t("text")} {t("text")}
</p> </p>
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink onClick={() => router.push(prefixPath + "/audio/filter")} className="flex place-items-start gap-1.5 p-2 ">
<p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
<FiMusic className="mr-2" />
{t("audio")}{" "}
</p>
</NavigationMenuLink>
</NavigationMenuContent> </NavigationMenuContent>
</NavigationMenuItem> </NavigationMenuItem>
<NavigationMenuItem> <NavigationMenuItem>
<Link href="/schedule" legacyBehavior passHref> <Link href={prefixPath + "/schedule"} legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}> <NavigationMenuLink className={navigationMenuTriggerStyle()}>
<span> <span>
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -764,7 +775,7 @@ const Navbar = () => {
</Link> </Link>
</NavigationMenuItem> </NavigationMenuItem>
<NavigationMenuItem> <NavigationMenuItem>
<Link href="/indeks" legacyBehavior passHref> <Link href={prefixPath + "/indeks"} legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}> <NavigationMenuLink className={navigationMenuTriggerStyle()}>
<span> <span>
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -782,11 +793,48 @@ const Navbar = () => {
</NavigationMenuItem> </NavigationMenuItem>
</NavigationMenuList> </NavigationMenuList>
</NavigationMenu> </NavigationMenu>
<div className="flex flex-row justify-between mx-3"> <div className="flex flex-row justify-between mx-3">
<div className="flex items-center space-x-1 mx-3 text-red-600"> {roleId == undefined ? (
""
) : (
<div
className="my-auto items-center cursor-pointer"
style={
Number(roleId) == 5 || Number(roleId) == 8
? {
display: "none",
}
: {}
}
>
<Link
href="https://spit.humas.polri.go.id"
className=""
target="_blank"
style={
menuActive == "indeks"
? {
color: "#fff",
}
: {
color: "#1F1A17",
}
}
legacyBehavior
>
<div className="flex flex-row items-center gap-1">
<Icon icon="gravity-ui:database-fill" fontSize={25} />
<p className="text-xs font-semibold">Raw Data</p>
</div>
</Link>
</div>
)}
{/* <div className="flex items-center space-x-1 mx-3 text-red-600">
<span className="w-2 h-2 bg-red-500 rounded-full"></span> <span className="w-2 h-2 bg-red-500 rounded-full"></span>
<span className="font-medium">Live</span> <span className="font-medium">Live</span>
</div> </div> */}
<div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium"> <div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
<a href="https://tvradio.polri.go.id/"> <a href="https://tvradio.polri.go.id/">
<img src="/assets/polriTv.png" className="object-contain h-11 flex items-center" /> <img src="/assets/polriTv.png" className="object-contain h-11 flex items-center" />
@ -831,7 +879,7 @@ const Navbar = () => {
<input type="text" placeholder="Pencarian" className="border rounded-full w-full text-sm text-center text-gray-600" /> <input type="text" placeholder="Pencarian" className="border rounded-full w-full text-sm text-center text-gray-600" />
</div> </div>
<div className="flex justify-center items-center mx-3 gap-5"> <div className="flex justify-center items-center mx-3 gap-5">
{fullName ? ( {/* {fullName ? (
<> <>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger className="flex items-center gap-1"> <DropdownMenuTrigger className="flex items-center gap-1">
@ -898,6 +946,335 @@ const Navbar = () => {
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</> </>
)} */}
{roleId === "5" || roleId === "6" || roleId === "7" || roleId === "8" ? (
<>
{/* Inbox */}
<Popover>
<PopoverTrigger asChild>
<a className="cursor-pointer" onClick={() => test()}>
{" "}
<Icon icon="basil:envelope-outline" color="black" width="30" />
</a>
</PopoverTrigger>
<PopoverContent className="w-[320px] p-0 flex flex-col mt-2" align="end">
<Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-col">
<TabsList className="grid grid-cols-2 lg:flex lg:flex-row">
<TabsTrigger value="notif-tab" className="focus:bg-none">
<a
className={`flex items-center justify-center cursor-pointer gap-4 rounded-lg p-3 text-sm ml-3 mr-4 ${selectedTab === "notif-tab" ? "bg-[#bb3523] text-white" : "bg-gray-200 text-black"}`}
id="notif-tab"
data-toggle="tab"
role="tab"
aria-controls="notif"
aria-selected="true"
onClick={() => setIsMessageActive(true)}
>
Pesan Masuk
</a>
</TabsTrigger>
<TabsTrigger value="notifupdate-tab">
<a
className={`flex items-center cursor-pointer gap-4 rounded-lg p-3 text-sm ml-3 mr-4 ${selectedTab === "notifupdate-tab" ? "bg-[#bb3523] text-white" : "bg-gray-200 text-black"}`}
id="notifupdate-tab"
data-toggle="tab"
role="tab"
aria-controls="notifupdate"
aria-selected="false"
onClick={() => setIsMessageActive(false)}
>
Update(
{notificationsUpdate?.length})
</a>
</TabsTrigger>
</TabsList>
<TabsContent value="notif-tab">
<div className="flex flex-col justify-center my-3">
{notifications?.map((list: any) => (
<a className="flex flex-row" href={list.redirectUrl} key={list.id}>
<div className="ml-4">
<img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
</div>
<div className="text-wrap text-left">{list?.message}</div>
<div>
<small>
{`${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()}`}{" "}
</small>
</div>
</a>
))}
<Link href="/inbox" legacyBehavior>
<p className="text-[15px] text-center py-2" role="button">
Lihat semua
</p>
</Link>
</div>
</TabsContent>
<TabsContent value="notifupdate-tab">
<div className="">
{notificationsUpdate?.map((list: any) => (
<a className="flex flex-row" href={list.redirectUrl} key={list.id}>
<div className="ml-4">
<img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
</div>
<div className="">
<div className="text-wrap text-left">{list?.message}</div>
<div>
<small>
{`${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()}`}{" "}
</small>
</div>
</div>
</a>
))}
<Link href="/inbox/update" legacyBehavior>
<p className="text-[15px] text-center py-2" role="button">
Lihat semua
</p>
</Link>
</div>
</TabsContent>
</Tabs>
</PopoverContent>
</Popover>
<DropdownMenu>
<DropdownMenuTrigger asChild className="cursor-pointer">
{detail !== undefined ? (
<div className="flex items-center gap-3 text-default-800">
<Image src={"/assets/avatar-profile.png"} alt={"Image"} width={36} height={36} className="rounded-full" />
<div>
<div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">{detail?.fullname}</div>
<p className="text-xs whitespace-nowrap overflow-hidden truncate">({detail?.fullname})</p>
</div>
<span className="text-base me-2.5 lg:inline-block hidden">
<Icon icon="heroicons-outline:chevron-down"></Icon>
</span>
</div>
) : (
""
)}
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 p-0" align="end">
<DropdownMenuGroup>
{[
{
name: "Profile & Settings",
icon: "heroicons:user",
href: "/profile",
},
{
name: "Kelola Konten",
icon: "stash:save-ribbon-duotone",
href: "/content-management/galery",
},
].map((item, index) => (
<Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
<Icon icon={item.icon} className="w-4 h-4" />
{item.name}
</DropdownMenuItem>
</Link>
))}
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
<div>
<Link href={"/"}>
<button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}>
<Icon icon="heroicons:power" className="w-4 h-4" />
{t("logOut")}
</button>
</Link>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
) : roleId === "2" || roleId === "3" || roleId === "4" || roleId === "9" || roleId === "10" || roleId === "11" || roleId === "12" || roleId === "13" ? (
<>
{/* Inbox */}
<Popover>
<PopoverTrigger asChild>
<a className="cursor-pointer" onClick={() => test()}>
{" "}
<Icon icon="basil:envelope-outline" color="black" width="30" />
</a>
</PopoverTrigger>
<PopoverContent className=" p-0 h-32 flex flex-col mt-2" align="end">
<Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-row">
<TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
<TabsTrigger value="notif-tab">
<a
className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${isMessageActive ? "active" : ""}`}
id="notif-tab"
data-toggle="tab"
role="tab"
aria-controls="notif"
aria-selected="true"
onClick={() => setIsMessageActive(true)}
>
Pesan Masuk
</a>
</TabsTrigger>
<TabsTrigger value="notifupdate-tab">
<a
className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${isMessageActive ? "" : "active"}`}
id="notifupdate-tab"
data-toggle="tab"
role="tab"
aria-controls="notifupdate"
aria-selected="false"
onClick={() => setIsMessageActive(false)}
>
Update(
{notificationsUpdate?.length})
</a>
</TabsTrigger>
</TabsList>
</Tabs>
<div className={`flex justify-center my-3 ${isMessageActive ? "active" : ""}`}>
{notifications?.map((list: any) => (
<a className="" href={list.redirectUrl} key={list.id}>
<div className="">
<img src="/assets/avatar-profile.png" alt="..." className="" />
</div>
<div className="">
<div className="text-wrap text-left">{list?.message}</div>
<div>
<small>
{`${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()}`}{" "}
</small>
</div>
</div>
</a>
))}
<Link href="/inbox" legacyBehavior>
<p className="text-[15px] py-2" role="button">
Lihat semua
</p>
</Link>
</div>
<div className={`flex flex-col justify-center my-3 ${isMessageActive ? "active" : ""}`}>
{notificationsUpdate?.map((list: any) => (
<a className="flex flex-row" href={list.redirectUrl} key={list.id}>
<div className="ml-4">
<img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
</div>
<div className="">
<div className="text-wrap text-left">{list?.message}</div>
<div>
<small>
{`${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()}`}{" "}
</small>
</div>
</div>
</a>
))}
<Link href="/inbox" legacyBehavior>
<p className="text-[15px] text-center py-2" role="button">
Lihat semua
</p>
</Link>
</div>
</PopoverContent>
</Popover>
{/* // Dropdown menu for roleId === 3 */}
<DropdownMenu>
<DropdownMenuTrigger asChild className="cursor-pointer">
{detail !== undefined ? (
<div className="flex items-center gap-3 text-default-800">
<Image src={"/assets/avatar-profile.png"} alt={"Image"} width={36} height={36} className="rounded-full" />
<div>
<div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">{detail?.fullname}</div>
<p className="text-xs whitespace-nowrap overflow-hidden truncate">({detail?.fullname})</p>
</div>
<span className="text-base me-2.5 lg:inline-block hidden">
<Icon icon="heroicons-outline:chevron-down"></Icon>
</span>
</div>
) : (
""
)}
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 p-0" align="end">
<DropdownMenuGroup>
{[
{
name: "Profile & Settings",
icon: "heroicons:user",
href: "/profile",
},
{
name: "Dashboard",
icon: "material-symbols:dashboard",
href: "/dashboard",
},
].map((item, index) => (
<Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
<Icon icon={item.icon} className="w-4 h-4" />
{item.name}
</DropdownMenuItem>
</Link>
))}
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
<div>
<Link href={"/"}>
<button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}>
<Icon icon="heroicons:power" className="w-4 h-4" />
{t("logOut")}
</button>
</Link>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
) : (
// Masuk and Daftar buttons for roleId === null
<div className="flex justify-center items-center mx-3 gap-5">
<Link href="/auth" className="w-full lg:w-max px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center">
{t("logIn")}
</Link>
<Dialog>
<DialogTrigger asChild>
<Button className="w-full lg:w-fit px-4 h-8 border bg-white border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white">{t("register")}</Button>
</DialogTrigger>
<DialogContent size="sm" className="sm:max-w-[425px]">
<div className="flex flex-col w-full gap-1">
<p className="text-lg font-semibold text-center">Kategori Registrasi</p>
<p className="text-base text-center">Silahkan pilih salah satu</p>
</div>
<div>
{role?.map((row: any) => (
<div key={row.id}>
<input type="radio" id={`category${row.id}`} name="category" className="" value={row.id} checked={category == `${row.id}`} onChange={(event) => setCategory(event.target.value)} />
<label className="ml-2" htmlFor={`category${row.id}`}>
{row.name}
</label>
</div>
))}
</div>
<div className="border-b-2 border-black"></div>
<DialogFooter>
<Link href={`/auth/registration?category=${category}`} className="bg-red-500 px-4 py-1 rounded-md border border-black text-white" type="submit">
Selanjutnya{" "}
</Link>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
)} )}
</div> </div>
</div> </div>

10
components/landing-page/new-content.tsx
View File

@ -103,12 +103,10 @@ const NewContent = (props: { group: string; type: string }) => {
</div> </div>
{isLoading ? ( {isLoading ? (
<div className="flex flex-col space-y-3 max-w-sm mx-auto"> <div className="flex flex-row space-y-3 w-full justify-center items-center gap-10">
<Skeleton className="h-[125px] w-[250px] rounded-xl" /> <Skeleton className="h-[200px] w-[400px] rounded-xl" />
<div className="space-y-2"> <Skeleton className="h-[200px] w-[400px] rounded-xl" />
<Skeleton className="h-4 w-[250px]" /> <Skeleton className="h-[200px] w-[400px] rounded-xl" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div> </div>
) : ( ) : (
<div className="px-0 lg:px-10"> <div className="px-0 lg:px-10">